Salev. Sto provando a ricreare la struttra tabellare di un sito utilizzando i div. Con firefox non ho problemi mentre i problemi nascono con ie.
In pratica ho creato un header, sotto 5 colonne (quelle più esterne non hanno contenuto e servono solo per il bordo che dà un effetto sfumato) e sotto a queste ultime un footer.
I problemi sono quattro (per adesso!):
1) Nelle colonne del bordo ho impostato la larghezza ma se dentro non ci scrivo niente il div non viene mostrato. Posso farlo vedere lo stesso anche senza alcun elemento all'interno?
2) Tra il footer e le 5 colonne ie mostra uno spazio che spezza l'effetto del bordo. Vi posto due immagini per farvi capire cosa intendo. Quella di ie mostra l'errore, quella di firefox mostra come voglio che venga visualizzato il tutto.
3) Il bordo ovviamente deve estendersi fino al footer. Come ottengo questo? Ho provato ad impostare height ma non funziona ed ottengo lo stesso risultato anche con min-height
4) Ie mi mostra due volte la parola "ciao" contenuta nel bordo (in realtà quella parola andrà cancellata però mi piacerebbe sapere perchè si comporta così!)
Vi metto pure il codice html ed il css.
PS
Se trovate che ci sia un modo per semplificare la struttura non esitate a dirmelo! Ciao!
codice:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Crespi Gioielli.it</title> <link href="style.css" rel="stylesheet" type="text/css"> <link href="template.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"> <div id = "header"> [img]images/logo.jpg[/img] </div> <div id = "edgesx">ciao</div> <div id = "navigation"> navigazione </div> <div id = "content"> contenuto della pagina </div> <div id = "edgedx"> ciao </div> <div id = "footer"> footer </div> </div> </body> </html>Guardando il codice html vedrete che importo anche un altro css: è il css degli stili (ci imposto il carattere ed il margine dei tag html e body. Questo che ho postato si occupa solo del layout)codice:div#container { width: 760px; margin: 0 auto; background: #ffffff; } div#header { margin: 0px; padding: 0px; } div#edgesx { float: left; background-image: url(images/bordosx.jpg); width: 32px; margin: 0px; } div#navigation { float: left; width: 145px; margin: 0px; } div#content { float: left; width: 550px; margin: 0px; } div#edgedx { float: left; background-image: url(images/bordodx.jpg); width: 32px; height: 100%; margin: 0px; } div#footer { clear: both; }
Rispondi quotando