Layout con i CSS

**diego78** · 11-09-2006, 11:15

salve a tutti,
volevo provare a riprodurre questo layout con i css.

http://www.feldwaldwiese.de/

ho provato in questo modo ditemi se la cosa è fattibile.

<div id="container">
<div id="header">testata</div>
<div id="content">testo descrittivo</div>
<div id="navigation">navigazione
navigazione</div>
<div id="footer">footer</div>
</div>

div#container{
position: relative;
}
div#header{
border: medium solid;
width: 760px;
}

div#content{
margin-right: 400px;
border: medium solid;
}

div#navigation{
position: absolute;
top: 10px; /* altezza dell'header */
right: 0;
width: 395px; /* un pò in meno per evitare l'uso del padding */
border: medium solid;
}

div#footer{
border: medium solid;
}

**diego78** · 12-09-2006, 09:15

perchè ai miei thread non risponde mai nessuno? :master:

**Mich_** · 12-09-2006, 09:27

Ieri non mi si caricava la pagina linkata.

Comunque non mi pare che la tua struttura riesca a realizzare una cosa come la loro.

Sicuramente la loro struttura e` un po' ridondante, ma la tua e` troppo stringata.

Io vedo in quella pagina:
Una testata e un corpo.

La testata e` a sua volta formata da:
bodo sinistro (con inserito la ranocchia)
pezzo centrale con la lepre a colori, il nome della compagnia e le briciole di pane
pezzo a destra con il menu e la lepre verde

Il corpo e` formato da due colonne, lasciando pero` un margine sisntstro

Il Copyright in fondo alla pagina potrebbe far parte della colonna sinistra del corpo, oppure puo` essere un <div> largo a tutta finestra (con opportuno margine)

La struttura dei <div> deve ricalcare quanto descritto qui sopra.

**diego78** · 12-09-2006, 10:20

grazie per la risposta,

in effetti non sono un mago dei css, volevo ricreare quella struttura in modo approssimativo ..

sto provando a costruire il layout secondo le tue indicazioni e comincio a incontrare i primi problemi durante la creazione della testata.

ho pensato a un contenitore con dentro 3 sezioni, ma "inheader" in explorer viene visualizzata all'interno di "header" ma in firefox all'esterno.

<div id="container">
<div id="header">
testata
<div id="inheader">NELLA TESTATA</DIV>
</div>
<div id="content">
testo descrittivo testo descrittivo
</div>
</div>

div#container{
position: relative;
border: medium solid;
}
div#header{
position: relative;
border: medium solid;
width: 760px;
}

div#inheader{
border: medium solid;
width: 200px;
float: right;

}

div#content{
margin-right: 400px;
border: medium solid;
}

come ovvio al problema? e soprattutto è la soluzione migliore?

**Mich_** · 12-09-2006, 10:54

Lascia stare i position. Fai conto che quell'attributo non esista.

Per affinacare due o piu` oggetti di tipo blocco, devi dare semplicemente:
float: left;
(ricordando poi di inserire il clear nel blocco successivo - anche con l'uso di un blocco supplementare, se necessario).

E ho gia` detto che la struttura di quel sito e` sovrabbondante. Inizia con la struttura che ti ho suggerito io. Quindi:

codice:

<body>
  <div id="testa">
    <div id="testaSin">...</div>
    <div id="testaCen">...</div>
    <div id="testaDes">...</div>
  </div>
  <div id="corpo">
    <div id="corpoSin">...</div>
    <div id="corpoDes">...</div>
  </div>
</body>

Poi uno alla volta sostituisci i puntini con quello che vuoi inserire, e sistema i bordi (penso al margin-left del corpoSin).

Il testaSin avra` larghezza fissa; forse anche il testaCen (ma dipende dalla tua situazione contingente).

**diego78** · 12-09-2006, 10:58

che intendi per clear nel blocco successivo? a cosa serve?

**Mich_** · 12-09-2006, 11:07

Originariamente inviato da diego78
che intendi per clear nel blocco successivo? a cosa serve?

Serve a contrastare l'effetto del float. Il float ha effetto sul blocco in cui e` definito ed anche sui blocchi vicini.

Nel mio esempio, i blocchi
testaSin, testaCen, testaDes, corpoSIn, corpoDes
devono avere un float.
Il blocco
corpo
deve avere un clear
(altrimenti viene affiancato al testaDes, se lo spazio e` sufficiente)

**diego78** · 12-09-2006, 11:25

inserendo clear: left o both in explorer mi compare una pagina bianca in firefox tutto ok e mi toglie i bordi residui

**Mich_** · 12-09-2006, 11:30

Ho l'impressione che ci sia un errore da qualche altra parte.
Puoi postare il link?

**diego78** · 12-09-2006, 11:36

<body>
<div id="container">
<div id="header">
<div id="inheaderCenter"> CENTRO </DIV>
<div id="inheaderRight">
menu
</DIV>
</div>
<div id="content">
testo descrittivo
</div>
<div id="footer">footer</div>
</div>
</body>

div#container{
position: relative;
border: thin solid;
}
div#header{
clear: right;
position: relative;
border: thin solid;
float: left;
width: 770px;
}

div#inheaderCenter{
border: thin solid;
float: left;
width: 550px;
}

div#inheaderRight{
border: thin solid;
width: 210px;
float: left;
}

div#content{
margin-left: 55px;
width: 707px;
border: thin solid;
}

div#footer{
clear: left;
border: thin solid;
}

Discussione: Layout con i CSS

Strumenti discussione

Ricerca discussione

Visualizza

Layout con i CSS

Permessi di invio