Altezza div

**poeta1978** · 13-04-2005, 20:17

codice:

body {
font: .90em verdana
}
#banner {
width: 980px;
}
#menu {
width: 980px;
height: 30px;
background-image: url('http://www.ruotanti.it/iopoetamultimediale/images/menu.png');
}
#menu {
width: 980px;
height: 30px;
background-image: url('http://www.ruotanti.it/iopoetamultimediale/images/menu.png');
}
#inizio {
width: 980px;
height: 30px;
background-image: url('http://www.ruotanti.it/iopoetamultimediale/images/inizio.png');
}
#mezzo {
width: 980px;
background-image: url('http://www.ruotanti.it/iopoetamultimediale/images/mezzo.png');
}
#fine {
width: 980px;
height: 30px;
background-image: url('http://www.ruotanti.it/iopoetamultimediale/images/fine.png');
}
#footer {
width: 980px;
height: 50px;
background-image: url('http://www.ruotanti.it/iopoetamultimediale/images/footer.png');
}
#menu2 {
padding: 4px;
}
#menusx {
float: left;
margin-left: 2px;
}
#menusx1 {
width: 185px;
background: #FFF;
border: 1px solid #000;
text-align: left;
font: .80em;
}
#menusx1 a {
color: #000;
text-decoration: none
}
#menusx1 UL {
list-style-image: URL(http://www.ruotanti.it/iopoetamultim...ages/punto.gif) 
}
#menusx2 {
width: 185px;
background-image: url('http://www.ruotanti.it/iopoetamultimediale/images/sfondo1.png');
}
#centro {
width: 583px;
float: left;
margin-left: 7px;
}

codice:

<html>
<head>
<title>Io, Poeta Multimediale</title>
<link rel="stylesheet" type="text/css" href="stile.css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div align="center">
<div id="banner"></div>
<div id="menu">
<div id="menu2">        </div>
</div>
<div id="inizio"></div>
<div id="mezzo">
<div id="menusx">
<table><tr><td>
<div id="menusx1">
<div id="menusx2" align="center">
Chi sono?</div>
<UL>
<LI>Mi presento</LI>[/list]
<UL>
<LI>Un'infanzia tranquilla?</LI>[/list]
<UL>
<LI>Una normale adolescenza...</LI>[/list]
<UL>
<LI>Il mio lavoro</LI>[/list]
<UL>
<LI>Io e la politica</LI>[/list]
</div>
</td></tr></table></div>
<div id="centro">
ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn ggnn 
</div>
</div>
<div id="fine"></div>
<div id="footer"></div>
</div>
</body>
</html>

Questo è il codice del css e dell'html di http://www.ruotanti.it/iopoetamultimediale/, con IE va bene, ma guardate con Mozzilla

**Mich_** · 14-04-2005, 08:33

Ho guardato la pagina.
C'e` uno scroll orizzontale (obbrobrio).

E` un classico esempio di come NON si devono usare i CSS.

Per usare i CSS occorre procedere con una logica diversa:
1. definire le zone logiche in cui e` divisa la pagina
2. attribuire ad ogni zona un <div>
3. definire le posizioni relative
4. realizzare il CSS (senza misure assolute, se possibnile: fanno solo arrabbiare).

Consiglio: prima metti a posto per i browser standard (Mozilla, Firefox, ...), poi implementi gli hack per IE.

Tra i link utili trovi molti esempi di pagine realizzate con i CSS e visibili a tutte le risoluzioni.

Discussione: Altezza div

Strumenti discussione

Ricerca discussione

Visualizza

Altezza div

Permessi di invio