[HTML] pagina non scorre e div sotto l'altezza del browser non si vedono

Flycatcher

Nuovo Utente
14 Mag 2017
3
0
1
buonasera a tutti,
ho da poco iniziato a studiare html e css e sto provando a creare l'homepage di un sito. Tuttavia, ho un problema: la pagina web non scorre e i div che sotto l'apertura del browser non sono visibili.
Ho letto le precedenti discussioni sul tema e ho cercato di ricavarne degli spunti per risolvere il problema, ma senza successo. Mi potete dare una mano?

Di sotto il codice:
HTML:
<!DOCTYPE html>

<html>
<head>
    <title>Il mio sito</title>
    <link rel="stylesheet" type="text/css" href="style2.css"/>
    <link href="https://fonts.googleapis.com/css?family=Hind|Play" rel="stylesheet">
</head>

<body>
    <div id="header">
        <div class="wrap">
            <div id="testo-header">
                <h1>Mio Sito</h1>
            </div>
            <ul id="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#" class="selected">A</a></li>
                <li><a href="#">B</a></li>
                <li><a href="#">C</a></li>
                <li><a href="#">Contatti</a></li></li>
            </ul>
        </div>
 
    <div id="main">
        <div class="wrap">
            <div id="title">
                <a href="#" class="selected">B</a>
                <ul id="social">
                    <li><img src="..." width="25" height="25"></li>
                    <li><img src="..." width="25" height="25"></li>
                    <li><img src="..." width="25" height="25"></li>
                </ul>
                <h2>Esempio</h2>
                <img src="..." alt="esempio">
            
            </div>
            <div id="content">
                <div id="subcontent1">
                    <h3>Sottoesempio</h3>
                    <ul id="ingr">
                        <li>a</li>
                        <li>b</li>
                        <li>c</li>
                        <li>d</li>
                        <li>e</li>
                        <li>f</li>
                    </ul>
                </div>
                <div id="comments"></div>
            </div>
            <div id="aside">
            </div>
        </div> 
    </div>
    <footer> 
    </footer>
</body>
</html>
questo il CSS:
HTML:
*{margin: 0; box-sizing: border-box}

body {
    height: 100%;
}

h1, h2, h3, h4, h5 {
    font-family: sans-serif;
    color: #c76161;
}
h1 {
    font-size: 2.2em;
    font-weight:  bold;
}

h2 {
    font-size: 2em;
    padding-bottom: 15px;
}

h3 {
    font-size: 1.4em;
    padding-bottom: 15px;
    border-bottom: 1px solid #888888;
}
.wrap {
    width: 59em;
    margin: 0 auto;
    height: 100%
}

a {
    color: #3a7777;
    text-decoration: none;
    font-family: sans-serif;
 
}
a:hover, a.selected {
    color: #F5AF33;
}

img.resize {
    width: 944px;
}


#header {
    background: url("...") 100% no-repeat;
    background-position: center center;
    position: fixed;
    right: 0;
    left: 0;
    top:0;
    display: block;
    width: 100%;
    height: 14.37em;
 
}

#testo-header{
    background-color: white;
    height: 4.375em;
    width: 50%;
    position: absolute;
    top: 5em;
    left: 0;
    text-align: center;
    line-height: 4.375em;
    z-index: 2;
    padding-left: 8em;
}

#testo-header:before {
    content: '\0020';
    background-image: url(...);
    background-repeat: no-repeat;
    width: 100%;
    height:5.625em;
    display:block;
    position: absolute;
    left: 11.25em;
    z-index: -1;
}
ul#nav {
    background-color: white;
    height: 70px;
    width: 50%;
    position: absolute;
    top: 80px;
    right: 0;
    font-family: 'Hind', sans-serif;
    font-size: 1em;
    font-weight: bold;
    list-style-type: none;
    line-height: 35px;
    display: block;
    z-index: 5;
}

ul#nav li {
    float: left;
    text-align: center;
    vertical-align: text-top;
    padding: 20px;

}


#nav strong.active, ul#nav li a:hover {
    color: #F5AF33;
}


#main {
    background-color: white;
    position: relative;
    top:1em;
 
}

#title {
    height: 15em;
    position: absolute;
    border-top: 1px solid #888888;
    width: 944px;
    margin: 0 auto;
    line-height: 36px;
    padding-top: 20px;
    padding-bottom: 20px;
}

ul#social {
    list-style: none;
    display: block;
    position: absolute;
    top: 20px;
    right: 0;
}
ul#social li {
    padding: 3px;
    float: left;
 
}

#content {
    background-color: white;
    display: block;
    position: relative;
    width: 600px;
    height: 400px;
    top: 350px;
}
#subcontent1 {
    min-height: 300px;
    position: relative;
}
 
Ultima modifica di un moderatore:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.298
332
83
Usa il tag code anche per il codice css

La spiegazione del problema non è chiarissima, comunque da quello che vedo la pagina non scorre perchè il contenuto non supera il bordo inferiore del browser a causa di:
  1. Troppe pesizioni absolute e fixed che fra l'altro contrastano con i float
  2. Fiv vuoti senza contenuto quindi sono invisibili
  3. Regole css inutili e contrastanti
 

Flycatcher

Nuovo Utente
14 Mag 2017
3
0
1
grazie, ho ripulito i css di stili ridondanti e cambiato delle posizioni in relative, ma mi faresti un esempio di posizioni absolute in contrasto i float? così capisco meglio l'errore.
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.298
332
83
Se un div ha una posizione fissa o assoluta non segue il flusso della pagina ed è quindi indifferente alla regola float