[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.449
338
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.449
338
83
Se un div ha una posizione fissa o assoluta non segue il flusso della pagina ed è quindi indifferente alla regola float
 
Discussioni simili
Autore Titolo Forum Risposte Data
Shyson [HTML] Colonna non scrolla quando arriva sopra la pagina HTML e CSS 0
R Perchè non si riescono a settare dinamicamente i parametri di una pagina HTML? Javascript 1
M Form html-php, la pagina php non mi rileva la variabile PHP 5
G Pagina html in stringa PHP 2
K posizionare variabile da pagina html all'iframe. Javascript 1
D Stampa a video in altra pagina html Database 3
C Form email php su pagina index.html? PHP 21
V Servizio design pagina web e download in self contained html file Discussioni Varie 1
F [PHP] [HTML] Tabella cambia pagina responsive PHP 8
T con oop creare un ciclo per una pagina dinamica html con php PHP 3
D [PHP] [HTML] Pagina con permessi amministratore PHP 6
F [WordPress] [HTML] Aggiungere una pagina solo allo sticky menu WordPress 4
P [HTML] Creazione pagina web da dove iniziare HTML e CSS 2
S [Javascript] [HTML] App incorpora pagina web - Come impedirlo? Javascript 0
L [Wordpress][HTML]Importare articoli o progetti in pagina html WordPress 0
C [PHP] Pagina html che legge file txt PHP 41
G [HTML] Redirect di tutte le pagine di un sito ad una determinata pagina sempre dello stesso HTML e CSS 5
G [HTML] estrapolare link da pagina web HTML e CSS 9
giosuecentomani redirect form a pagina html download ebook HTML e CSS 2
M aggiungere streaming audio a pagina html HTML e CSS 2
A [PHP] Inserimento url dinamici in pagina html PHP 3
Y [PHP] [HTML] Pagina referenti PHP 5
M [HTML] Apertura Pagina HTML e CSS 14
L [HTML] Pagina che rimanda ad un bottone HTML e CSS 1
andreas88 [PHP] [HTML] Pagina preventivi form contatti PHP 5
I [HTML] Footer a fondo pagina HTML e CSS 11
F Integrare I Post Di Wordpress.com In Una Pagina HTML WordPress 2
P [HTML] integrare Google pagina web HTML e CSS 5
J [HTML] Finestra su pagina htm, HTML e CSS 5
S [Visual Basic] access 2010 click su pagina html Visual Basic 1
G Inserzione script nella pagina html per jquery jQuery 8
D [phpBB] [HTML] Problema pagina elenco argomenti (di forum) phpBB 9
V Passare a PHP pagina bootstrap creata in HTML PHP 1
A [Javascript] [HTML] RISOLTO...Allungare un box all'apertura della pagina No Mouse over Javascript 9
R pagina html + script php PHP 12
utente importare css da pagina html HTML e CSS 1
B [HTML] tabella al centro pagina HTML e CSS 3
Michaelweb93 [WordPress] [HTML] Modifica sezione - pagina sito web WordPress 1
S [Javascript] [HTML] problema nella stampa degli elementi della pagina Javascript 3
P [HTML] pagina Wordpress HTML e CSS 1
F [HTML] Div in scroll insieme alla pagina HTML e CSS 0
A [Javascript] [HTML] Gestire una pagina esterna con 2 iframe Javascript 4
N [PHP] stampare pagina html PHP 0
E Importare codice html da una pagina tramite php PHP 9
P [HTML] scrivere il titolo di una pagina nella pagina stessa, si può? HTML e CSS 3
P [HTML] Redirect sito su pagina per Android HTML e CSS 6
teoxs2508 [HTML] Posizionamento elementi su pagina web HTML e CSS 5
utente Css esterno da pagina html HTML e CSS 5
L Database access in una pagina HTML 5 HTML e CSS 1
G Estrazioni dati dal database e inserimento nella pagina html Database 11

Discussioni simili