- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Height: il grande assente
-
Height: il grande assente
Ciao a tutti.
Ma perché diavolo Firefox e Netscape in generale non riconosce il comando height. Cavolo con tutti i comandi di cui si può fare a meno proprio height.
Sto facendo un sito semplicissimo per chi (non come me!!!) fa siti con frequenza.
Voglio mettere un contenitore che rimane sempre al centro della finestra del browser con delle dimensioni preimpostate (diciamo w:800 px e h:600 px).
All'interno del contenitore voglio mettere:-
1 header alto 70 px
-
1 sezione contenuti alta (600 - 70 - 30 500 px
-
1 footer altro 30 px
-
La sezione contenuti la vorrei dividere in due 'div' quella di sinistra larga circa 150 - 200 px (che conterrà un ipotetico menù verticale) e quella di destra larga di conseguenza (600 /650 px).
La domanda è questa: come faccio a fare questo layout in modo che:
- Le div appaiono come voglio io sia in Explorer sia in Firefox.
- L'altezza e la larghezza delle 'div' rimangano fisse indifferentemente da come dimensiono la finestra del browser.
Con explorer più o meno mi è uscito ma con firefox mi esce tutta un'altra cosa.
Please help me!!! Ci esco pazzo...
CSS:
/*Stili vari */
h1 {color: white; font-size: 12px;}
h2 {color: white; font-size: 12px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;}
p {color: white; font-size: 12px; text-align: justify;font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; }/*Stile corpo della pagina */
body {
background-image: url(web/bkg.gif);
color : White;
margin : 1em 2em;
padding : 1em 2em;
}/*Stile contenitore */
div#container {
background-color : White;
width: 800 px;
height: 600px;
color : #FDFDFD;
position: fixed;
}/*Stile header */
div#header {
width:800 px;
height: 70 px;
background-color:red;
position: relative;
}/*Stile menù sinistro */
div#leftrow {
width:150px;
height: 500px;
background-color:navy;
float:left;
position:static;
}/*Stile contenuti */
div#testo {
width:650 px;
height: 500px;
background-color:yellow;
float: right;
position: static;
}/*Stile footer */
div#footer {
width: 800px;
height:30px;
background-color:green;
position: static;
}
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Fari Senza Fissa Dimora - Home Page</title><link title="Grey" href="stile.css" type="text/css" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta content="YOUR STUFF" name="robots">
<meta content="YOUR STUFF" name="description">
<meta content="YOUR STUFF" name="keywords"></head>
<body>
<div id="container">
<div id="header"> Titolo </div> <div id="leftrow"> Qui scrivo qualcosa come un menù </div> <div id="testo"> Qui scrivo il contenuto </div> <div id="footer"> Ciao </div>
</div>
</body>
</html>
GRAZIE !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-