D4rkAng3l
17-09-2007, 11:38
I CSS mi stanno facendo letteralemente impazzire...mi sento stupido.
Considerate questo semplice condice html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<title>Andrea Nobili Fotografo</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href="mono.css" rel="stylesheet" type="text/css" title="default" />
</head>
<body>
<div id="header">
<h1>Andrea Nobili Fotografo</h1>
</div>
<div id="menu"></div>
<div id="content">
<h1>Pagina in costruzione</h1>
<h2>1.PARAGRAFO</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ...
</p>
<h2>2.PARAGRAFO</h2>
<p>
Vivamus mattis nisi id pede. Nunc rhoncus mauris quis ...
</p>
<h2>3.PARAGRAFO</h2>
<p>
Sed mollis dolor nec est. Integer iaculis nonummy lorem. ...
</p>
</div>
<div id="footer">This Page Is Valid XHTML 1.0 Strict and Valid CSS v.2
<br />No tables have been used to make this layout<br />
</div>
</body>
</html>
e il contenuto del file .css che inizialmente contiene solamente le impostazioni per il body, per l'header e per i tag di tipo <h1> presenti all'interno dell'header:
body{
margin: 0;
padding: 0;
margin-bottom: 0.95em;
font-family: arial, helvetica, verdana, tahoma, sans-serif;
font-size: 80%;
color: #000;
background-color: #fff;
line-height: 180%;
}
#header{
margin: 0 auto;
width: 760px;
height: 283px;
border: 1px solid #000;
border-top: 1px;
border-bottom: 1px;
background-image: url(img01.jpg);
background-repeat: no-repeat;
background-position: right bottom;
background-color: #8a9bac;
color: #000;
}
#header h1{
margin: 0;
font: normal 280% Georgia, "Times New Roman", Times, serif;
color: #000;
background-color: #a9c2d8;
padding-left: 0.6em;
padding-top: 0.1em;
}
Provate a visualizzarlo così, poi provate a commentare o togliere le impostazioni riguardatnti header h1...perchè a questo punto tra l'immagine e il lato superiore della finestra del broswer viene lasciato uno spazio bianco che prima non c'era? Se non avessi voluto inserire questa parte di codice ma avessi voluto attaccare direttamente il div header in alto cosa avrei dovuto fare?
Grazie
Andrea
Considerate questo semplice condice html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<title>Andrea Nobili Fotografo</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href="mono.css" rel="stylesheet" type="text/css" title="default" />
</head>
<body>
<div id="header">
<h1>Andrea Nobili Fotografo</h1>
</div>
<div id="menu"></div>
<div id="content">
<h1>Pagina in costruzione</h1>
<h2>1.PARAGRAFO</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ...
</p>
<h2>2.PARAGRAFO</h2>
<p>
Vivamus mattis nisi id pede. Nunc rhoncus mauris quis ...
</p>
<h2>3.PARAGRAFO</h2>
<p>
Sed mollis dolor nec est. Integer iaculis nonummy lorem. ...
</p>
</div>
<div id="footer">This Page Is Valid XHTML 1.0 Strict and Valid CSS v.2
<br />No tables have been used to make this layout<br />
</div>
</body>
</html>
e il contenuto del file .css che inizialmente contiene solamente le impostazioni per il body, per l'header e per i tag di tipo <h1> presenti all'interno dell'header:
body{
margin: 0;
padding: 0;
margin-bottom: 0.95em;
font-family: arial, helvetica, verdana, tahoma, sans-serif;
font-size: 80%;
color: #000;
background-color: #fff;
line-height: 180%;
}
#header{
margin: 0 auto;
width: 760px;
height: 283px;
border: 1px solid #000;
border-top: 1px;
border-bottom: 1px;
background-image: url(img01.jpg);
background-repeat: no-repeat;
background-position: right bottom;
background-color: #8a9bac;
color: #000;
}
#header h1{
margin: 0;
font: normal 280% Georgia, "Times New Roman", Times, serif;
color: #000;
background-color: #a9c2d8;
padding-left: 0.6em;
padding-top: 0.1em;
}
Provate a visualizzarlo così, poi provate a commentare o togliere le impostazioni riguardatnti header h1...perchè a questo punto tra l'immagine e il lato superiore della finestra del broswer viene lasciato uno spazio bianco che prima non c'era? Se non avessi voluto inserire questa parte di codice ma avessi voluto attaccare direttamente il div header in alto cosa avrei dovuto fare?
Grazie
Andrea