come fare ad ottenere una lunghezza eguale con i css

**francesco321654** · 08-11-2006, 21:43

Ciao
ho questo problema e non riseco a capire come risolvere
ho fatto un sito semplice ecco il cod hmtl:
<div id="container">
<div id="header">

</div>
<div id="navigation">

</div>
<div id="extra_sx">

</div>
<div id="extra_dx">

</div>
<div id="content">

</div>
<div id="footer">

</div>
</div>
ora nel css il div extra di dx e il div extra di sx non riesco a fare in modo che siano lunghi eguali
io scrivo cosi:
div#extra_dx{float:right;width: 13em;height:100%;background-color:#FFFF99;padding: 1em 1em 5em;border-left: 2px solid #36c;border-right: 2px solid #36c;}
div#extra_sx{float:left;width: 13em;height:100%;background-color:#FFFF99;padding:1em 1em 5em;border-right: 2px solid #36c;border-left: 2px solid #36c;}
mi accendete la luce?

**francesco321654** · 08-11-2006, 21:48

raga magari è una belinata ma e tutto il di che sto dietro a sto sito e ormai non distinguo piu il monitor dalla tastiera e in piu devo consegnarlo domani

**Mich_** · 09-11-2006, 10:31

In quale browser stai testando?
E con la parola "lunghi" intendi "larghi" oppure "alti"?

Perche` in IE (in modalita` quirks) il width vale come min-width, e height vale come min-height.
Quindi se il problema e` IE devi cercare tra gli hack per IE; se sono altri browser spiegati meglio.

Quando posto codice, inseriscilo dentro gli appositi tag (# oppure PHP) e rispetta l'indentazione: rendi la vita piu` facile a chi ti puo` aiutare. E posta anche il DOCTYPE, altrimenti dobbiamo tirare ad indovinare.

**ilario83** · 09-11-2006, 10:52

ti conviene non specificare affatto l'altezza del div (height: 100%) che tra l'altro non serve a niente.

Se ci fai qualche esempio di come vorresti la pagina...

**francesco321654** · 09-11-2006, 10:53

ok mi rendo conto che ho postato un casino scusate

premetto che il mio lavoro e tutt'altra cosa e che i siti per me sono hobby che mi aiutano a distrarmi a fine giornata in modo da non sognare situazioni lavorative tipo camion parcheggiati male o gatti cingolati con batteria scarica che non salgono le scale o peggio e che sto sito lo sto realizzando completamente a gratis .

per lunghezza intendo altezza cioe non riesco a far si che le due colonne laterali siano alte in egual modo stamane sono andato a rileggermi le guide in html e ho tentato di correggere il foglio di stile ma non sono ancora abbastanza sicuro di cio che faccio

ora riposto tutto da capo cosi magari riuscirò a farvi vedere che bordello sto facendo:
il cod html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>titolo</title>

<link rel=stylesheet href="Francosoft.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="container">
<div id="header">

</div>
<div id="navigation">

</div>
<div id="extra_sx">

</div>
<div id="extra_dx">

</div>
<div id="content">

</div>
<div id="footer">

</div>
</div>
</body>
</html>
il css:
html,body{margin: 0;padding:0;height:100%;}
body{font-family: arial,sans-serif;font-size: 76%;text-align: center;
background-image: url("./images_1/Azzurro_con_vapore_bianco.gif");
scrollbar-highlight-color:#FFFFFF;
scrollbar-base-color:#003399;
scrollbar-arrow-color:#00FFFF;
scrollbar-shadow-color:#3300FF;}
div#container{position:relative; width: 76%; height: 100%;margin: 0 ;
text-align: left; border-left: 2px solid #36c;border-right: 2px solid #36c;
background-color:#ffffff ;height:auto;min-height:100%}
div#header{color: #ff0;width:100%;height:100%;text-align: center;}
h1,h2,h3{margin: 0;padding:0}
h1{font: bold 2em arial,serif}
h2{font-size: 1em}
h1.titoli_testo{color:Red;font-size:16px}
h2.titoli_testo{color:green;font-size:14px;}
div#content{background-color:#ffffff;widht:170px;padding:1em 5px;}
p#dove{text-align: center;}
div#navigation{background-color:#69c;margin:0;text-align:center}
div#navigation ul{margin: 0;padding: 0; list-style-type: none;}
div#navigation li{display: inline; margin: 0 0 0 1em;padding: 0}
div#navigation a{color:#003;font: normal bold 1.2em/2.5em arial,sans-serif;text-decoration: none}
div#navigation a:hover{color: #fff;text-decoration: underline}
div#navigation a#activelink{color: #cf0;text-decoration: none}
div#extra_dx{float:right;width:160px;\widht:170px; \width:160px;background-color:#FFFF99;padding:1em 5px;
border-left: 2px solid #36c;border-right: 2px solid #36c;}
div#extra_sx{float:left;clear:right;width:160px;\w idht:170px;\width:160px;background-color:#FFFF99;padding

adding: 1em 0 0 10px;
border-right: 2px solid #36c;border-left: 2px solid #36c;}
h1.extra_sx{margin: 2;padding:2;font:arial,serif;color:Red;font-size: 18px;}
h2.extra_sx{margin: 1;padding:1;font:arial,serif;font-size: 16px;Color:Green}
h3.extra_sx{margin: 0;padding:0;font:arial,serif;font-size: 10px}
div#footer{ position:absolute;bottom:0; width: 100%; border: 2px solid #36c;
background-color: #69c;color: #000;text-align:center;clear:both; text-align:center; padding: 5px 0;}
div#footer a{color: #fff;font-weight: bold;text-decoration: underline}
A#tit{color :Green;}
A:link {color :blue;text-decoration: underline}
A:visited {color :Blue;text-decoration: underline}
A:hover {color : Red;text-decoration : underline;}

**francesco321654** · 09-11-2006, 10:57

a dimenticavo in un altro forum di un altro sito qualcuno mi ha suggerito l'utilizzo delle tabelle ma il fatto e che sto cercando di imparare ad utilizzare i css proprio per evitarle quindi....

**ilario83** · 09-11-2006, 11:10

Il fatto e che ci sono molti errori nel tuo codice:

Percè specifichi l'altezza 100% dell'header?
Perchè specifichi per ben tre volte l'altezza del content?

Ti conviene non specificare per niente le altezze (al massimo min-height), e fare in modo che le colonne dx e sx siano trasparenti e prendano il colore dal container, in modo che rispettino sempre la stessa dimenzione, ricavata dall'altezza del content.

Sennò se hai fretta cerca un layout gia fatto.

**francesco321654** · 09-11-2006, 11:15

si ma se cerco robba gia fatta io che imparo?
comunque ora provo a levare l'heigth per il colore non posso fare altrimenti mi è stato chiesto di dare sto colore alle colonne laterali e vorrei accontentare
raga suggerimenti anche se ci metto piu tempo voglio fare una cosa fatta bene possibilmente imparando qualcosa

**francesco321654** · 09-11-2006, 11:22

non cambia mica nulla
anzi ho un problema in piu in alcune pagine dove il content e piu lungo delle colonne laterali finisce sotto le colonne stesse
che comunque rimangono una piu alta dell'altra
ma non mi converrà dargli il valore per l'heigth in px ad entrambe?

**ilario83** · 09-11-2006, 11:22

guarda se ti scarichi un layuot gia fatto impari guardandolo.

Cmq dovresti assegnare il colore che vorresti per le colonne al container, e poi un colore diverso per il content

Discussione: come fare ad ottenere una lunghezza eguale con i css

Strumenti discussione

Ricerca discussione

Visualizza

come fare ad ottenere una lunghezza eguale con i css

Permessi di invio