Layout liquido a tutta pagina con immagine

**Igor Baldacci** · 27-03-2013, 16:57

Salve,
dire che sono scarso con i css è dire poco, ma col tempo qualcosa la sto iniziando a capire. Solo che ora voglio fare un layout in questo modo:

- pagina a tutto schermo che si autoconfigura a seconda delle dim del brawser (liquido)
- parte top e parte bottom sempre "attaccati" rispettivamente in alto e in basso alla pagina
- parte centrale divisa in due: a sinistra menu a destra immagine con dimensioni liquide (ovvero che si configura col brawser).

Sotto posto tutto il codice che ho impostato, ma che mi da i seguenti problemi e chiedo la cortesia di un piccolo aiuto:

- parte top e bottom sono ok
- i due div della parte centrale invece non si affiancano e non risultano di altezza pari al 100%, ovvero che arriva fino in fondo a toccare il bottom.

css

codice:

html, body, form
{
    margin: 0;
    padding: 0;
    height: 100%;
}

#header
{
    height: 25px;
    background-color: #DDD1DF;
    padding: 0px;
}

#body
{
    padding: 0px 0px 25px 0px;
    margin: 0px;
}

#footer
{
    background-position: #DDD1DF;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80px; /* Height of the footer */
    background: #974578;
}

.imageContainer
{
    width:50%
}

.imageContainer img
{
    display:block;
    width:100%
}

html

codice:

        <div id="header">
        </div>

        <div id="body">
            
            <div style="width: 100%;">
                <div style="width: 300px; vertical-align:top; float: left; background-color: #BBBBBB;">
                    
                    << menu >>

                </div>
                <div style="text-align: right;  float: inherit; background-color: #00FF00;">
                    <div class="imageContainer">
                        [img]Immagini/miaimmagine.jpg[/img]
                    </div>
                </div>

            </div>

        </div>

        <div id="footer">
        </div>

Non so dove sbaglio.
Grazie a tutti.
Igor

**Mich_** · 27-03-2013, 18:39

Hai postato un codice che contiene parte della formattazione all'interno dell'HTML. E` un pessimo modo di lavorare: crea confusione e e` fonte di errori.
Inoltre hai nomi uguali per oggetti diversi (body e #body - altra pessima abitudine).

Comunque ritengo che quello che cerchi si chiama "false colonne" (faux columns), che sono state trattate piu` volte (puoi partire dai "link utili" o dalle guide).

PS: il tuo non e` un layout liquido, ma elastico.
Liquido vuol dire che i blocchi si spostano in base a dove ci stanno, elastico che si ridimensionano in base alle dimensioni. Pero` la tua colonna di sinistra e` fissa, quindi anche l'elasticita` e` relativa.

**Igor Baldacci** · 27-03-2013, 18:47

Hai postato un codice che contiene parte della formattazione all'interno dell'HTML. E` un pessimo modo di lavorare: crea confusione e e` fonte di errori.

Intendi che ho messo direttamente nell'html le dimensioni ecc. di alcuni div? Se è questo, hai ragione, lo faccio per velocizzare poi metto tutto nel css.

Inoltre hai nomi uguali per oggetti diversi (body e #body - altra pessima abitudine).

oppss.... taglia e cuci taglia e cuci ed escono le cavolate !!

Comunque grazie per la dritta, adesso mi cerco queste "false colonne" (faux columns). E grazie anche per il chiarimento sulla nomenclatura

... uè so' proprio ignorante su sti css eh!!!

**Nobody33** · 27-03-2013, 18:54

NOTA: BRAWSER si scrive BROWSER

A parte questo, prova il seguente codice CSS:

codice:

<head>
<style>
 body{
  margin:0;
  padding:100px 0 0 150px;
 }
 div#header{
  position:absolute;
  top:0;
  left:0;
  width:500%;
  height:100px;
  background:green;
   color:black;
 }
 div#contenitore_sx{
  position:absolute;
  top:100px;
  left:0;
  width:150px;
  height:100%;
  background:yellow;
  color:black;
 }
 @media screen{
  body>div#header{
   position:fixed;
  }
  body>div#contenitore_sx{
   position:fixed;
  }
 }
 * html body{
  overflow:hidden;
 } 
 * html div#contenuto{
  height:100%;
  overflow:auto;
 }
</style>
</head>
<body>
<div id="header"> header </div>
<div id="contenitore_sx"> contenuto_sx</div>
<div id="contenuto"> content </div>
</body>

Dovrebbe andare

Saluti

**Igor Baldacci** · 27-03-2013, 19:53

.. e dire che ci sono pure stato attento come lo scrivevo! Vabè.

Grazie per il tuo suggerimento, adesso lo provo e vedo come va.
Gentilissimo.

Discussione: Layout liquido a tutta pagina con immagine

Strumenti discussione

Ricerca discussione

Visualizza

Layout liquido a tutta pagina con immagine

Permessi di invio