[HTML&CSS] Perchè non basta lo spazio verticale

[D4rkAng3l]

Stò realizzando il mio sito, se andate quà potete trovare la pagina che mi stà creando qualche problema: http://www.siatec.net/andrea/prove/categoriegal.html

Se vedete è come se mancasse lo spazio in fondo (e devo inserire ancora altre categorie)...è come se fosse troppo poco alta (in pratica non compare la barra di scorrimento verticale).

Il codice html potete tranquillamente visualizzarlo dal broswer, il codice CSS invece è il seguente:

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("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-right: 1px solid #000;
	border-left: 1px solid #000;
	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;
}


#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: 740px;
	padding: 1.25em 0.8em;
	border: 1px solid #000;
	border-top: 0;
	border-bottom: 0;
	background: #fff;
	color: #000;
}
.categoria{
	float: left;
	margin-right: 30px;

}

     

#content p {
	font-size: 100%;
	line-height: 1.8em;
	padding-left: 1em;
	padding-right: 1em;
}
#content h1 {
	padding-bottom: 0.3em;
	padding-top: 0.3em;
	font: normal 180% Georgia, "Times New Roman", Times, serif;
	color: #05181E;
	background-color: #FFFFFF;
}
#content h2{
	background: #fff;
	color: #940D1E;
	padding-bottom: 0.3em;
	font: normal 150% Georgia, "Times New Roman", Times, serif;
	border-bottom: 1px dotted #FF9006;
	clear: left;
	
}
#content h2 p{
        margin: 0 auto;
	    width: 760px;
}
        

#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: 740px;
	background: #41545F;
	text-align: center;
	color: #fff;
	border: 1px solid #000;
	border-top: 1px;
	border-bottom: 1px;
	font-family: helvetica, arial, verdana, tahoma, sans-serif; 
	padding: 0.8em 0.8em;
}
#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;
}

Credo che in qualche modo debba riuscire ad ampliare in verticale il div content...ma come? Come posso risolvere?

Grazie
Andrea

[Federix]

Basta scrivere nel forum giusto, CSS, li sicuramente ti sapranno aiutare.

Occhio la prossima volta :rollo:

[D4rkAng3l]

perchè dove ho postato?

[webdemo]

Originariamente inviato da D4rkAng3l
Se vedete è come se mancasse lo spazio in fondo (e devo inserire ancora altre categorie)...è come se fosse troppo poco alta (in pratica non compare la barra di scorrimento verticale).

credo dipenda da quel "line-height: 180%;" nel css del body

prova a toglierlo

ciak

[D4rkAng3l]

no non dipende da quello...togliendolo il problema persiste :-/

[D4rkAng3l]

Ho risolto !!!
E' bastato inserire overflow: auto; nella parte di codice riguardante il div content e si è risolto