D4rkAng3l
24-11-2007, 11:30
Ciao,
ho un problema con il mio sito, se andate su: http://www.siatec.net/andrea/fotografia/
è tutto ok perchè il contenuto della pagina non supera la dimensione di altezza, se invece andate quà:http://www.siatec.net/andrea/fotografia/portfolio.html oppure quà http://www.siatec.net/andrea/fotografia/links.html
dove il contenuto della pagina supera l'altezza il footer non è più a fondo pagina ma si sovrappone al testo...come si può risolvere tale problema?
Il codice HTML è:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<title>Andrea Nobili Fotografo</title>
<meta name="title" content="Andrea Nobili Fotografo" />
<meta name="description" content="Fotografo di Roma. Appassionato di fotografia naturalistica e subacquea. Studente di informatica e webmaster. Realizzazione siti web accessibili e portali web" />
<meta name="keywords" content="Fotografia, fotografia subacquea, fotografia naturalistica, fotografia notturna, fotografia architettura, webmaster, informatica, realizzazione siti web, portali web, portali php, database" />
<meta name="robots" content="index, follow" />
<meta name="author" content="Andrea Nobili" />
<meta name="generator" content="Hand Coded" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="default01f.css" rel="stylesheet" type="text/css" title="default" />
</head>
<body>
<div id="container">
<div id="contieni_bordo">
<div id="header">
<h1>Andrea Nobili Fotografo</h1>
</div>
<div id="menu">
<ul>
<li><a href="index.html" title="link 1">Home</a></li>
<li><a href="aboutme.html" title="link 2">About Me</a></li>
<li><a href="#" title="link 3">Portfolio</a></li>
<li><a href="contact.html" title="link 4">Contact</a></li>
<li><a href="links.html" title="link 5">Links</a></li>
</ul>
</div>
<div id="content">
<h1>Categorie Gallerie:</h1>
<h2>Macro e Natura:</h2>
<span class="categoria"><a href="gallerie/macro/macrogallery.php"><img src="img/lumachina.jpg" alt= "macroicona"/></a></span>
<p>Raccolta di macrofotografie e fotografie di tipo naturalistico</p>
<h2>Paesaggi:</h2>
<span class="categoria"><a href="gallerie/paesaggi/paesaggigallery.php"><img src="img/capotesta.jpg" alt="paesagiicona"/></a></span>
<p>Raccolta di fotografie di tipo paesaggistico</p>
<h2>Subacquea:</h2>
<span class="categoria"><a href="gallerie/sub/subgallery.php"><img src="img/polpo2.jpg" alt="subicona"/></a></span>
<p>Raccolta di fotografie subacquee</p>
<h2>Architettura e Città:</h2>
<span class="categoria"><a href="gallerie/city/citygallery.php"><img src="img/giostra2.jpg" alt="cittaico"/></a></span>
<p>Raccolta di fotografie di architettura e di paesaggio urbano</p>
<h2>Musica e Spettacolo:</h2>
<span class="categoria"><a href="gallerie/musica/musicagallery.php"><img src="img/musicisti.jpg" alt="musicaico"/></a></span>
<p>Raccolta di fotografie musicali o inerenti al mondo dello spettacolo</p>
<h2>Ritratti:</h2>
<span class="categoria"><a href="gallerie/ritratti/ritrattigallery.php"><img src="img/maschera4.jpg" alt="ritrattiico"/></a></span>
<p>Raccolta di fotografie ritrattistiche</p>
<h2>Pets:</h2>
<span class="categoria"><a href="gallerie/pets/petsgallery.php"><img src="img/pepe.jpg" alt="petsico"/></a></span>
<p>Raccolta di fotografie dei nostri amici animali</p>
<h2>Digital Alteration:</h2>
<span class="categoria"><a href="gallerie/digitalalteration/alterationgallery.php"><img src="img/tramonto.jpg" alt="alterationinco"/></a></span>
<p>Raccolta di fotografie che hanno subito un forte processo di post produzione</p>
</div>
<div id="footer">This Page Is Valid XHTML 1.0 Transitional and Valid CSS v.2</div>
</div>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-2949351-1";
urchinTracker();
</script>
</body>
</html>
mentre il codice CSS è:
html,body{margin: 0;padding:0;height:100%;}
body{
margin: 0;
padding: 0;
font-family: arial, helvetica, verdana, tahoma, sans-serif;
font-size: 80%;
color: #000;
background-color: #dedede;
line-height: 180%;
}
#container{
margin: 0 auto;
height: 100%;
width: 770px;
background: #fff url("img/container.png") left top repeat-y;
}
#contieni_bordo{
margin: 0 auto;
width: 760px;
height: 100%;
position:relative;
border: 1px solid #000;
border-bottom: 1px solid #000;
}
#header{
margin: 0 auto;
width: 760px;
height: 283px;
border-bottom: 1px;
background-image: url("img/sfondo.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;
}
#menu{
margin: 0 auto;
width: 760px;
background: #41545F;
border-bottom: 1px solid #000;
color: #fff;
}
#gallery{
margin: 0 auto;
width: 760px;
border-right: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
color: #000;
background-color: #a9c2d8;
}
#gallery a:link{
color: #000;
font-size: medium;
font-weight: bolder;
}
#menu ul{
margin: 0;
padding-left: 0;
list-style: none;
overflow:hidden;
height:auto;
}
#menu li{
font-size: 1.1em;
display: inline;
margin: 0;
padding: 0;
}
#menu a:link, #menu a:visited{
float: left;
background: #41545F;
color: #fff;
margin: 0em;
padding: 0.3em 1.5em 0.3em 1.5em;
text-decoration: none;
border-right: 1px solid #000;
}
#menu a:hover, #menu a:focus, #menu a:active{
color: #B2CEDC;
background: #05181E;
}
#content{
margin: 0 auto;
width: 750px;
padding-top: 5px;
padding-left: 10px;
padding-right: 10 px;
border-top: 0;
border-bottom: 0;
background: #fff;
color: #000;
overflow: auto;
}
.categoria{
float: left;
margin-right: 30px;
}
#descrizione{
text-align: justify;
}
#content p {
font-size: 100%;
line-height: 1.8em;
padding-left: 0;
padding-right: 0;
}
#content h1 {
padding-top: 0;
font: normal 180% Georgia, "Times New Roman", Times, serif;
color: #05181E;
background-color: #FFFFFF;
}
#content h2{
background: #fff;
color: #940D1E;
padding-top: 10px;
padding-bottom: 0;
font: normal 150% Georgia, "Times New Roman", Times, serif;
border-bottom: 1px dotted #FF9006;
clear: left;
}
#content p{
font-size: 100%;
line-height: 1.8em;
padding-left: 1em;
padding-right: 1em;
}
#content a:link, #content a:visited {
font-size: 95%;
font-weight: normal;
color: #41545F;
background-color: #fff;
text-decoration: underline;
}
#content a:hover {
color: #fff;
background-color: #41545F;
text-decoration: none;
}
#footer{
margin: 0 auto;
width: 760px;
background: #41545F;
text-align: center;
position: absolute;
bottom:0;
color: #fff;
border-top: 1px;
border-bottom: 1px;
font-family: helvetica, arial, verdana, tahoma, sans-serif;
padding: 0;
}
#footer a:link, #footer a:visited {
color: #fff;
background-color: #41545F;
text-decoration: underline;
}
#footer a:hover {
text-decoration: none;
color: #41545F;
background-color: #fff;
}
.form{
font: bold 12px Arial, Helvetica, sans-serif;
color: #000000;
background: #CCCCCC;
border: 1px solid #000000;
}
.pulsante{
font: bold 12px Arial, Helvetica, sans-serif;
color: #000000;
background: #CCCCCC;
text-align: center;
border: 1px solid #000000;
}
Grazie
Andrea
ho un problema con il mio sito, se andate su: http://www.siatec.net/andrea/fotografia/
è tutto ok perchè il contenuto della pagina non supera la dimensione di altezza, se invece andate quà:http://www.siatec.net/andrea/fotografia/portfolio.html oppure quà http://www.siatec.net/andrea/fotografia/links.html
dove il contenuto della pagina supera l'altezza il footer non è più a fondo pagina ma si sovrappone al testo...come si può risolvere tale problema?
Il codice HTML è:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<title>Andrea Nobili Fotografo</title>
<meta name="title" content="Andrea Nobili Fotografo" />
<meta name="description" content="Fotografo di Roma. Appassionato di fotografia naturalistica e subacquea. Studente di informatica e webmaster. Realizzazione siti web accessibili e portali web" />
<meta name="keywords" content="Fotografia, fotografia subacquea, fotografia naturalistica, fotografia notturna, fotografia architettura, webmaster, informatica, realizzazione siti web, portali web, portali php, database" />
<meta name="robots" content="index, follow" />
<meta name="author" content="Andrea Nobili" />
<meta name="generator" content="Hand Coded" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="default01f.css" rel="stylesheet" type="text/css" title="default" />
</head>
<body>
<div id="container">
<div id="contieni_bordo">
<div id="header">
<h1>Andrea Nobili Fotografo</h1>
</div>
<div id="menu">
<ul>
<li><a href="index.html" title="link 1">Home</a></li>
<li><a href="aboutme.html" title="link 2">About Me</a></li>
<li><a href="#" title="link 3">Portfolio</a></li>
<li><a href="contact.html" title="link 4">Contact</a></li>
<li><a href="links.html" title="link 5">Links</a></li>
</ul>
</div>
<div id="content">
<h1>Categorie Gallerie:</h1>
<h2>Macro e Natura:</h2>
<span class="categoria"><a href="gallerie/macro/macrogallery.php"><img src="img/lumachina.jpg" alt= "macroicona"/></a></span>
<p>Raccolta di macrofotografie e fotografie di tipo naturalistico</p>
<h2>Paesaggi:</h2>
<span class="categoria"><a href="gallerie/paesaggi/paesaggigallery.php"><img src="img/capotesta.jpg" alt="paesagiicona"/></a></span>
<p>Raccolta di fotografie di tipo paesaggistico</p>
<h2>Subacquea:</h2>
<span class="categoria"><a href="gallerie/sub/subgallery.php"><img src="img/polpo2.jpg" alt="subicona"/></a></span>
<p>Raccolta di fotografie subacquee</p>
<h2>Architettura e Città:</h2>
<span class="categoria"><a href="gallerie/city/citygallery.php"><img src="img/giostra2.jpg" alt="cittaico"/></a></span>
<p>Raccolta di fotografie di architettura e di paesaggio urbano</p>
<h2>Musica e Spettacolo:</h2>
<span class="categoria"><a href="gallerie/musica/musicagallery.php"><img src="img/musicisti.jpg" alt="musicaico"/></a></span>
<p>Raccolta di fotografie musicali o inerenti al mondo dello spettacolo</p>
<h2>Ritratti:</h2>
<span class="categoria"><a href="gallerie/ritratti/ritrattigallery.php"><img src="img/maschera4.jpg" alt="ritrattiico"/></a></span>
<p>Raccolta di fotografie ritrattistiche</p>
<h2>Pets:</h2>
<span class="categoria"><a href="gallerie/pets/petsgallery.php"><img src="img/pepe.jpg" alt="petsico"/></a></span>
<p>Raccolta di fotografie dei nostri amici animali</p>
<h2>Digital Alteration:</h2>
<span class="categoria"><a href="gallerie/digitalalteration/alterationgallery.php"><img src="img/tramonto.jpg" alt="alterationinco"/></a></span>
<p>Raccolta di fotografie che hanno subito un forte processo di post produzione</p>
</div>
<div id="footer">This Page Is Valid XHTML 1.0 Transitional and Valid CSS v.2</div>
</div>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-2949351-1";
urchinTracker();
</script>
</body>
</html>
mentre il codice CSS è:
html,body{margin: 0;padding:0;height:100%;}
body{
margin: 0;
padding: 0;
font-family: arial, helvetica, verdana, tahoma, sans-serif;
font-size: 80%;
color: #000;
background-color: #dedede;
line-height: 180%;
}
#container{
margin: 0 auto;
height: 100%;
width: 770px;
background: #fff url("img/container.png") left top repeat-y;
}
#contieni_bordo{
margin: 0 auto;
width: 760px;
height: 100%;
position:relative;
border: 1px solid #000;
border-bottom: 1px solid #000;
}
#header{
margin: 0 auto;
width: 760px;
height: 283px;
border-bottom: 1px;
background-image: url("img/sfondo.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;
}
#menu{
margin: 0 auto;
width: 760px;
background: #41545F;
border-bottom: 1px solid #000;
color: #fff;
}
#gallery{
margin: 0 auto;
width: 760px;
border-right: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
color: #000;
background-color: #a9c2d8;
}
#gallery a:link{
color: #000;
font-size: medium;
font-weight: bolder;
}
#menu ul{
margin: 0;
padding-left: 0;
list-style: none;
overflow:hidden;
height:auto;
}
#menu li{
font-size: 1.1em;
display: inline;
margin: 0;
padding: 0;
}
#menu a:link, #menu a:visited{
float: left;
background: #41545F;
color: #fff;
margin: 0em;
padding: 0.3em 1.5em 0.3em 1.5em;
text-decoration: none;
border-right: 1px solid #000;
}
#menu a:hover, #menu a:focus, #menu a:active{
color: #B2CEDC;
background: #05181E;
}
#content{
margin: 0 auto;
width: 750px;
padding-top: 5px;
padding-left: 10px;
padding-right: 10 px;
border-top: 0;
border-bottom: 0;
background: #fff;
color: #000;
overflow: auto;
}
.categoria{
float: left;
margin-right: 30px;
}
#descrizione{
text-align: justify;
}
#content p {
font-size: 100%;
line-height: 1.8em;
padding-left: 0;
padding-right: 0;
}
#content h1 {
padding-top: 0;
font: normal 180% Georgia, "Times New Roman", Times, serif;
color: #05181E;
background-color: #FFFFFF;
}
#content h2{
background: #fff;
color: #940D1E;
padding-top: 10px;
padding-bottom: 0;
font: normal 150% Georgia, "Times New Roman", Times, serif;
border-bottom: 1px dotted #FF9006;
clear: left;
}
#content p{
font-size: 100%;
line-height: 1.8em;
padding-left: 1em;
padding-right: 1em;
}
#content a:link, #content a:visited {
font-size: 95%;
font-weight: normal;
color: #41545F;
background-color: #fff;
text-decoration: underline;
}
#content a:hover {
color: #fff;
background-color: #41545F;
text-decoration: none;
}
#footer{
margin: 0 auto;
width: 760px;
background: #41545F;
text-align: center;
position: absolute;
bottom:0;
color: #fff;
border-top: 1px;
border-bottom: 1px;
font-family: helvetica, arial, verdana, tahoma, sans-serif;
padding: 0;
}
#footer a:link, #footer a:visited {
color: #fff;
background-color: #41545F;
text-decoration: underline;
}
#footer a:hover {
text-decoration: none;
color: #41545F;
background-color: #fff;
}
.form{
font: bold 12px Arial, Helvetica, sans-serif;
color: #000000;
background: #CCCCCC;
border: 1px solid #000000;
}
.pulsante{
font: bold 12px Arial, Helvetica, sans-serif;
color: #000000;
background: #CCCCCC;
text-align: center;
border: 1px solid #000000;
}
Grazie
Andrea