Primo Layout Elastico

  • Creatore Discussione Creatore Discussione danlupo
  • Data di inizio Data di inizio

danlupo

Utente Attivo
13 Lug 2009
73
0
0
Primo Layout Elastico
Salve, sto sperimentando per la prima volta un layout elastico ma non devo aver capito bene come funziona ?? :confused:

  • Ho un margine superiore che non mi sembra di aver impostato
  • Ho uno shift verso il basso del div content con relativo shift del footer
  • * Ho dovuto impostare un'altezza di 51.92em su un'altezza massima di 64 em anche se penso sia dovuto alla presenza delle barre degli strumenti di FF

Allego l'immagine del "risultato" ed i codici del file CSS e del file HTML

Codice:
body
{
    font-size: 1em;
    padding: 0;
    margin: 0 auto;
}

html
{
    font-size:100%;
}
div#c
{
    margin: 0 auto;
    height:51.92em;
    width:80em;
    background-color:#4682b4;
}
div#h
{
    margin:0 auto;
    height:7.788em;
    width:80em;
    background-color:red;
    padding:0;
}
div#n
{
    float:left;
    margin:0 auto;
    height:41.536em;
    width:12em;
    background-color:white;
    padding:0;
    margin:0 auto;
}
div#e
{
    float:right;
    margin:0 auto;
    height:41.536em;
    width:12em;
    background-color:yellow;
    padding:0;
    margin:0 auto;
}
div#b
{
    margin:0 auto;
    height:41.536em;
    width:56em;
    background-color:tan;
    padding:0;
    margin:0 auto;
}
div#f
{
    clear:both;
    margin:0 auto;
    height:2.596em;
    width:80em;
    background-color:green;
    padding:0;
}

Codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title><!-- Insert your title here --></title>
    <link rel="stylesheet" type="text/css" href="prova.css">
</head>
<body>
    <div id="c">
        <div id="h">
            <h1>CIAO</h1>
        </div>
        <div id="n">
            <ul>
                <li>pippo</li>
                <li>pippo</li>
                <li>pippo</li>
                <li>pippo</li>
                <li>pippo</li>
            </ul>
        </div>
        <div id="e">
            <ul>
                <li>pippo</li>
                <li>pippo</li>
                <li>pippo</li>
                <li>pippo</li>
                <li>pippo</li>
            </ul>
        </div>
        <div id="b">
            <p> Questo è un testo di prova</p>
        </div>
        <div id="f">
            @Email
        </div>
    </div>
</body>
</html>
problemas.jpg



Chiedo Comprensione per l'ignoranza manifesta :mad:

Grazie per le spiegazioni e consigli, Daniele
 
Il problema dello spostamento verso il basso è colpa del tag H1. Prova a fornirgli uno stile dando margin-top: 0px
 
Mi da lo stesso risultato !! :confused:

Ma risolto con Margin 0 anche nel P
 
Ultima modifica:

Discussioni simili