[css] immagini di background!

[Ms-Keng]

ciao a tutti, vorrei chiedere una cosa, allora io ho impostato come sfondo un immagine a gradiente che si ripete in basso!

ora però, anche girandomi tutte le guide su html.it, non sono riuscito a trovare soluzioni al mio problema:
vorrei oltre allo sfondo con gradiente, costruire un container principale, con bordi sfumati la cui larghezza sia espressa in percentuale, in modo da rendere ridimensionabile la finestra!

vorrei impostare una larghezza del container del 90%, e creare un immagine di background solo per il container principale, in modo da riuscire a mantenere lo sfondo con gradiente ma poter dare un piccolo effetto di rilievo (o di ombra), ai bordi del container principale!
qualcuno sa aiutarmi, può consigliarmi qualche guida che mi spieghi come poter ottenere l'effetto desiderato!
premetto che non sono tanto pratico di css !
grazie a tutti in anticipo!

[Jerry Masslo]

se posti l'immagine si capisce meglio, perchè immagine a gradiente che si ripete in basso non so interpretarlo.
ho la sensazione però che possa non essere semplice allo scorrere della pagina, a meno forse di rinunciare uno sfondo fisso per il body ma che porterebbe via il gradiente allo scorrere, ma senza immagine si possono solo fare ipotesi.

[Ms-Keng]

questo è in breve l'effetto che vorrei ottenere!

praticamente il backgroung con gradiente, ma anche i bordi del container sfumati, e sopratutto non vorrei utilizzare il layout fisso ma in percentuali!
cmq ho capito che è abbastanza difficile!

senza aprire un'altro post, potete indicarmi una guida per fare un menù sotto l'header e non il classico navigatore a sinistra?

grazie moltissime!

[Ms-Keng]

allora ora riassumo tutto, perchè sto impazzendo:

leggendo varie guide ho capito il layout di cui ho bisogno.
allora container con un bordo solido di 2px, header di 80px dentro al container, sempre dentro al container navigatore allineato subito sotto l'header con un menu tipo lista, sempre dentro al container un div content a cui come background assegnero un pattern.

il codice che sin'ora sono riuscito a sciver è questo:

div#header{width:100%;height: 100px;border:2px solid #354D69;background-color:#354D69;color: #354D69}
h1,h2{margin: 0;padding:0}
h1{padding-left:10px;font: bold 2.3em/80px arial,sans-serif}
h2{color: #69f;font-size: 1.5em}
div#footer a{color:#fff;font-weight: bold;text-decoration: underline}

body{background: #99AAAA url(gradient.jpg) fixed repeat-x bottom;text-align:center}
div#container{width:70%;margin: 6 auto;border:2px solid #354D69;background:#C6DBE6;}

fino a qua va tutto bene!
il problema sorge nel momento in cui vado ad inserire il navigatore oriziontale!

perchè se scrivo del testo nel container principale il testo mi parte da vicino l'ultimo item della lista!

ho provato a scrivergli questo:

div#navigation ul{list-style-type: none;margin: 2px solid #354D69 ;padding: 0}
div#navigation li{float: left;margin: 0 3px 0 0;padding:top}
div#navigation a{display: block;width: 120px;line-height: 30px;
text-decoration: none; border: 1px solid #666;
background:#333;
font-variant: small-caps;text-indent: 27px}
div#content{width:100%;padding: 1em;background: #fff (pattern.jpg)}
p{font:100.01% arial,sans-serif;line-height: 25em}

ma proprio non so come fargli capire a sto benedetto browser che il testo non deve incominciare affianco al menu orizontale!

oltretutto se gli scrivo questo mi esce un obrobrio.

il layout che vorrei ottenere è semplicissimo, qualcuno mi puòconsigliare una guida?

[Jerry Masslo]

una cosa alla volta, prima lo sfondo.
se vuoi lo sfondo del body fisso ti dovrai contentare di approssimazioni, perchè scorrendo la pagina il tuo sfondo sfumato, buono da fermo poi non combacia più con quello che rimane fermo, ma nel tuo caso trattondosi di un gradiente che cambia poco potrebbe ancora andare, dovresti fare delle prove, considera che con iexplodere puoi fissare solo sfondo del body, altrimenti potrebbe andare lo stesso, ma la complicazione è che se ne vuoi uno fermo l'altro scorre comunque, a meno di altre cose complicate.

per il resto, per avere una struttura standard. puoi fartela fare qui per le guide questo sito ne è ben fornito.

per il float che flotta, e che deve fare? prova a usare un clear:both in qualche elemento prima del tuo testo che non vuoi far flottare, anche un br.

[Ms-Keng]

ciao jerry! grazie molte per l'aiuto che mi stai dando!

diciamo che ci sto iniziando a capire qualcosa!
ho ottenuto alcune cose che van bene, ma rimangono ancora alcuni problemi ecco il codice un pò più ottimizzato:


body{background: #99AAAA url(gradient.jpg) fixed repeat-x bottom;text-align:center}
div#container{width:70%;margin: 6 auto;border:2px solid #354D69;background:#C6DBE6;}
div#content{width:100%; padding: 1em;background: #fff url(pattern.jpg);}
div#navigation ul{list-style-type: none;margin: 2px solid #354D69 ;padding: 0}
div#navigation li{float: top left;margin: 0 3px 0 0;padding:0;}
div#navigation a{display: block;width: 120px;line-height: 30px;
text-decoration: none; border: 1px solid #666;
background-color: #fff;
font-variant: small-caps;text-indent: 27px}
div#navigation a:hover{display: block; width:120px;line-height: 30px;
text-decoration: none; border: 1px solid #333;
background-color: #999;
font-variant: small-caps;text-indent: 27px}
div#navigation li#activelink a,div#navigation li#activelink a:hover{
text-decoration: none; border: 1px solid #333;
background-color: #888; 0;color: #fff}

ho risolto il problema del float dicendo alla lista che si deve allineare top, ma ora mi chiedo 3 cose:

1)se dico alla lista di allinearsi sopra, non so per quale motivo, mi si centra!

2)anche se nella guida spiega come disattivare il rollover sul link attivo, il rollover si vede lo stesso!

3)mica tutte ste cose sono un problema di container?
ho pensato che se io imposto il testo centrato nel container, e la navigation sta nel container è dovuto a questo il problema della centratura della barra di navigazione???

allego la foto di quello che sono riuscito a fare sin'ora!

ora ho bisogno di capire come fare ad allineare la barra di navigazione in alto a sinistra, in modo da poter posizionare i pulsanti uno accanto all'altro! ti ringrazio nuovamente tantissimo!

[Jerry Masslo]

se metti una pagina online si può fare di più

in ogni caso per la centratura dovrebbe dipendere dai text-align:center ie con questo comando fa di tutto anche quello che non dovrebbe, quindi se lo dai al body per allineare al centro il contaneir poi devi dare anche un text-align:left a questo per riportare tutto in ordine.

da quanto capisco ti stai basando su ie e ti avverto che difficilmente usando altri browser vedrai le stesse cose, dovresti controllare anche come viene almeno con opera e mozilla (firefox già va benissimo).

vedo che la lista dei link è in verticale e immagino tu non voglia questo, non c'è un solo modo di procedere, uno è dare ai li un display:inline, e forse anche togliere il display:block ai link, ma se lo vedo in una pagina ci capisco di più, in ogni caso in quel codice vedo un:

float:top left che non esiste, il float permette: left right e none, nient'altro e uno per volta, tu sembra invece lo stia trattando come un position

[Ms-Keng]

ciao!
sono proprio disperato!
allora in Iexplorer sono riuscito a risolvere quasi tutto, ma purtroppo negli altri browser (mozilla, opera, netscape) il tutto viene visualizzato in maniera errata!
purtroppo non posso uploadare le pagine perchè sono in php e non ho un host che abbia il supporto per php!
posso però allegare uno zip contenente i file!
so che magari chiedo troppo ma potresti dare una scorsa al codice?
magari il problema sono i float!

non so mi esce tutto sfasato!
la mia idea era quella di fare: un container principale, ne quale fossero posizionati:
header. poi il navbar, poi il contents, ed accanto al content una seconda colonna di link, posizionata sulla destra, e il footer, insomma una cosa che mi sembrava abbastanza semplice ma che in realtà non ho trovato per nulla semplice ad un primo confronto con i web browser!
non so proprio più dove agire, ho seguito i consigli che mi hai dato ma non ho risolto un grachè!


www.mskeng.altervista.org/metisrl.zip

[Jerry Masslo]

non ti dispiacere ma non ho tempo per scaricare e tutto il resto, qualche post prima ti ho dato un link, lì la struttura con testata piede e psuedo colonne te la fanno in automatico, cross-browser e valida, non capisco perchè non ne approfitti o almeno non ne prendi spunto.

[Ms-Keng]

perchè non funziona.

ho provato ma il layout non funge!
grazie, faccio ancora un paio di prove! poi lavoro con le tabelle!