problema di scrolling in un layout elastico!

**FranzEvangeline** · 17-02-2008, 12:07

Ciao ragazzi...vi chiedo aiuto per un fastidioso scrolling che non riesco ad eliminare dalla mia pagina di prova costruita con i css.
Anche non avendo inserito ancora contenuti, appare una scrollbar come se ce ne fossero oltre il margine dello schermo. Non riesco a capire perchè....qui ho postato il codice....aiutatemi a scoprire l'arcano (so che sicuramente sarà una scemata)
Grazie in anticipo!!!

body,html {
background-color: #666666;
margin: 0;
text-align:center;
height:100%;
padding: 0px;
}

.header {
background-color: #000000;
margin: 0px auto;
padding: 0px;
text-align: center;
height: 150px;
width: 500px;
}

.menu {
margin: 0px auto;
padding: 0px;
text-align: center;
height: 45px;
width: 500px;
}

ul
{
margin: 0px auto;
padding: 0px;
list-style-type: None;
}

li {
display: inline;
float: left;
width: 150px;
padding: 0px;
background-color: #CC0000;
height: 45px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

li a {
display: inline;
float: left;
width: 150px;
padding: 0px;
background-color: #CC0000;
height: 45px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

li a:hover{
background-color: #999999;
}

li1 {
display: inline;
float: left;
width: 125px;
padding: 0px;
background-color: #00FF33;
height: 45px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

li1 a {
display: inline;
float: left;
width: 125px;
padding: 0px;
background-color: #00FF33;
height: 45px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

li1 a:hover {
background-color: #999999;
}

li2 {
display: inline;
float: left;
width: 100px;
padding: 0px;
background-color: #009999;
height: 45px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

li2 a{
display: inline;
float: left;
width: 100px;
padding: 0px;
background-color: #009999;
height: 45px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

li2 a:hover{
background-color: #999999;
}

li3 {
display: inline;
float: left;
width: 125px;
padding: 0px;
background-color: #999900;
height: 45px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

li3 a{
display: inline;
float: left;
width: 125px;
padding: 0px;
background-color: #999900;
height: 45px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

li3 a:hover{
background-color: #999999;
}

.content {
background-color: #CCCCCC;
margin: 0 auto;
height: 100%;
width: 500px;
}

-->
</style>
</head>
<body>
<div class="header"></div>
<div class="menu">
<ul>[*]
<li1></li1>
<li2></li2>
<li3></li3>[/list]
</div>
<div class="content"></div>

**Mas245** · 17-02-2008, 12:13

prova a fare la somma di tutti i width e confrontalo con la risoluzione del tuo schermo

**FranzEvangeline** · 17-02-2008, 13:02

ma il problema nel mio caso è l'height! la scrollbar è verticale non orizzontale!

**gengix** · 17-02-2008, 14:42

Scusami nn ho capito bene =)
I tuoi elementi hanno cmq un'altezza indipendentemente dal contenuto. Se la somma delle altezze dei tuoi elementi supera la dimensione in altezza della tua risoluzione, è normale che ti compaia la scrollbar =).
L'height 100% nel body puoi tranquillamente levarla, nn serve a niente.

**vkorpor** · 17-02-2008, 14:52

Ma lo fa co ogni browser? Spero comunque che il tuo problema non sia appinto quello del overflow dei contenuti...

**gengix** · 17-02-2008, 15:10

é una cosa naturale come l'acqua=).
Se prendi un div privo di contenuti e gli setti un'altezza di 800px, se la tua risoluzione di schermo è 1024px * 768px, è naturale che appaia una scrollbar, perchè l'altezza del div supera la risoluzione. Se lo stesso div lo guardi con una risoluzione maggiore esempio 1280*1024 lo visualizzerai senza scrollbar.

**FranzEvangeline** · 17-02-2008, 17:17

Se leggete il codice noterete che l'unico div ad avere altezza 100% è .content, perchè è un div elastico con sfondo ripetuto...mi serve per metterci dentro i contenuti....solo che non ci sono ancora i contenuti, e il browser mi crea una scrollbar come se ci fossero! l'altezza dei div non supera la risoluzione del mio schermo ovviamente...altrimenti non avrei postato qui...sarebbe stato normalissimo!
Dal momento che inserisco dei contenuti con altezza maggiore della risoluzione del mio schermo nel div, sarebbe nomalissimo avere una scrllbar. ma al momento è vuoto, e in teoria il div .content dovrebbe solo essere (visto che ha height 100%) attaccato al bottom dello schermo giusto? spero di essere stato chiaro...cmq metto la pagina fittizia su questo link in modo che possiate controllare da voi.
Grazie ragazzi
http://www.declinedesign.com/prova1.html

**gengix** · 17-02-2008, 21:31

Ho notato che hai messo nei listati "li1" "li2" "li3", era questo che volevi?
Perchè facendo così crei un xml che browser come firefox riescono a comprendere e a interpretare correttamente, mentre IE nn lo interpreta. In questo modo il tuo listato nn si affianca orizzontalmente, ma rimane verticale. Se provi a levare la height 100% al content lo vedi.
Semplicemente al posto di "li1" metti ad esempio <li id="primo"> e nel css #primo{ecc..}.
Poi togli il 100% al content perchè tanto se nn gli setti un' altezza rimmarrà cmq elastico e si espanderà in base al contenuto.

Penso sia questo il tuo problema=)

**FranzEvangeline** · 17-02-2008, 21:34

L'unica cosa è che vorrei che anche senza contenuti in .content, il div resti elastico espandendosi fino al bottom dello schermo!!!
Grazie mille!

Discussione: problema di scrolling in un layout elastico!

Strumenti discussione

Ricerca discussione

Visualizza

problema di scrolling in un layout elastico!

Permessi di invio