Posizionamento

**danlupo** · 18-04-2013, 23:53

Salve, ho questa struttura html

codice:

   <body>    
<div id='container'>
<header>
...
</header>
<section id='box'>
    ...
</section>
<footer>
    ...
</footer>
</div>
</body>

e questo file CSS

codice:

body,html
{
    position: fixed;
    margin: 0;
    padding: 0;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:0;
}

#container
{
    position: relative;
    margin:0;
    padding:0;    
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: yellow;
    background-position: 0 0;
    background-size:100% 100%;
    float:left;  
    z-index: 1;
}
header
{
    position: relative;
    margin: 0;
    padding: 0;
    top:0;
    width: 100%;
    height:25%;
    background: blue;
    z-index: 2;   
    float:left;
    border:none;
}
#box
{
    position: relative;
    margin:0;
    padding: 0;

    width: 80%;
    height:60%;
    background: red;
    z-index: 2;
    float:left;
    border:none;
}
footer
{
    position: relative;
    margin: 1% 0 0 0;
    padding: 0;
    width: 100%;
    height:15%;
    background: green;
    z-index: 2;   
    float:left;
    border:none;
    opacity:0.7;
}

Perchè se metto il body come POSITION:ABSOLUTE ho la scrollbar (quindi il contenuto eccede nelle sue dimensioni) mentre se lo metto POSITION:FIXED lo vedo correttamente??

**Experiment8** · 19-04-2013, 11:30

Ciao,

A prescindere dal fatto che dare un posizionamento al body e al tag html è sbagliato a mio parere, succede perchè con absolute l'elemento è posizionato in base al documento, mentre con fixed rispetto alla finestra visiva del browser, per cui se sborda con fixed non viene comunque calcolato come overflow.
Fossi in te toglierei tutti quei posizionamenti, poi vedi tu

Saluti

**danlupo** · 19-04-2013, 16:21

Proverò a togliere i posizionamenti, in realtà i miei problemi ora riguardano soprattutto la logica di funzionamento dei CSS:
due div uno dentro l'altro;

codice:

 /* Contenitore */
 margin: 0;
    padding: 0;
    top:0;
    width: 100%;
    height:29%;
    background: red; 
    float:left;
    border:none;

/* Interno */

   margin: 1% 0 0 0;
    padding: 0;
    width:25%;
    height: 96%;
    background: white ;  
    float:left;
    border:none;

Il div Interno mi esce dal bordo quindi, seguendo un esempio di box-model che mi da come altezza finale la somma di height + (border + padding +margin)*2, ottengo che 96% + (1% +0 + 0) * 2= 96% + 2% .. Visto che esce dal bordo inferiore e visto che il totale del contenitore è uguale in teoria al 100% allora 98% > 100% .

Vi chiedo di spiegarmi, una volta per tutte, il funzionamento di un box-model e se è possibile applicarlo con tutti i valori in percentuale o se per margini e padding bisogna tenere i valori in px..

Grazie

Discussione: Posizionamento

Strumenti discussione

Ricerca discussione

Visualizza

Posizionamento

Permessi di invio