Aiuto div con css

laburno

Un grande aiuto me lo daresti moltissimo se come prima cosa fossi in grado,gentilmente, di modificare il css in modo da non avere solo 2 div (conte e sidebar) orizzontalmente affiancate come adesso, ma a me servirebbero 5 div (bordo sx, content, bordo centrale,sidbar, bordo dx)..Mi aiuteresti una casino..
Grazie mille e scusa per lo scazzo ennesimo

Ok, allora fai un div che contenga le tue 5 cinque div (wrapper) e inserisci le 5 div con il float:left e dai le dimensioni in modo tale che la somma totale non superi il width del wrapper.

Faccio un esempio:


#wrapper {
    width:720px;
}
#uno {
    width:144px;
    float:left;
}
#due {
    width:144px;
    float:left;
}
#tre {
    width:144px;
    float:left;
}
#quattro {
    width:144px;
    float:left;
}
#cinque {
    width:144px;
    float:left;
}

E l'html:


<div id="wrapper">
  <div id="uno">1<br><br><br><br></div>
  <div id="due">2<br><br><br><br></div>
  <div id="tre">3<br><br><br><br></div>
  <div id="quattro">4<br><br><br><br></div>
  <div id="cinque">5<br><br><br><br></div>
</div>

Occhio che nella somma totale devi considerare i margini ed evntualmente il padding di ogni singolo div. Se al div uno dai width:144 e margin:3 la dimensione che ottieni è 144+3+3=150.

Se sfori la dimensione del wrapper, le div in eccesso vanno a capo.

Inoltre tieni presente che IE interpreta diversamente il Box Model rispetto agli standard e quindi dopo che hai calcolato le dimensioni, dovrai adattare il tuo foglio di stile. :bho:

Se permetti un consiglio non penso che usare 5 div in questa maniera sia una buona soluzione (considerando la noia di adattare il CSS a IE!). Secondo me, lavorare con il background come ti avevo suggerito prima è un idea migliore.

lostboy

No il mio css per fortuna funzia sia coin i.e. 7, sia con i.e. precedenti, sia con mozilla...

Avrei un po di consigli da chiederti se hai tempo..Grazie mille intanto per sopra...Alla fien ho capito che era per i padding ecc che sforavano a capo..

Ora ho 2 problemi : uno, come fare a fare si che le div bordo si riempiano dinamicamente in base alla risoluzione : es : a 1280x1024, devo mettere na decina di br (con lo sfondo che fa repeat-y), ma a 1024x768 invece quei 10 br sono troppi e fa apparire lo scollbar..Come faccioa fare si che, come per l'orizozntale, che invece funziona, anche il verticale ridimensioni la grafica ecc in base alla risoluzione?Perchè io, dopo avere l'header, il footer fissi, piacerebbe tenere bordo sx verticale fisso, content scrollabile, bordo centrale verticale fisso, sidebar scrollabile, bordo dx verticale fisso...

é possibile?

Grazie mille, se passi in trentino la birra di supporto è tua

lostboy

No il mio css per fortuna funzia sia coin i.e. 7, sia con i.e. precedenti, sia con mozilla...

Avrei un po di consigli da chiederti se hai tempo..Grazie mille intanto per sopra...Alla fien ho capito che era per i padding ecc che sforavano a capo..

Ora ho 2 problemi : uno, come fare a fare si che le div bordo si riempiano dinamicamente in base alla risoluzione : es : a 1280x1024, devo mettere na decina di br (con lo sfondo che fa repeat-y), ma a 1024x768 invece quei 10 br sono troppi e fa apparire lo scollbar..Come faccioa fare si che, come per l'orizozntale, che invece funziona, anche il verticale ridimensioni la grafica ecc in base alla risoluzione?Perchè io, dopo avere l'header, il footer fissi, piacerebbe tenere bordo sx verticale fisso, content scrollabile, bordo centrale verticale fisso, sidebar scrollabile, bordo dx verticale fisso...

é possibile?

Grazie mille, se passi in trentino la birra di supporto è tua

laburno

@lostboy said:

Ora ho 2 problemi : uno, come fare a fare si che le div bordo si riempiano dinamicamente in base alla risoluzione : es : a 1280x1024, devo mettere na decina di br (con lo sfondo che fa repeat-y), ma a 1024x768 invece quei 10 br sono troppi e fa apparire lo scollbar..Come faccioa fare si che, come per l'orizozntale, che invece funziona, anche il verticale ridimensioni la grafica ecc in base alla risoluzione?Perchè io, dopo avere l'header, il footer fissi, piacerebbe tenere bordo sx verticale fisso, content scrollabile, bordo centrale verticale fisso, sidebar scrollabile, bordo dx verticale fisso...

é possibile?

Grazie mille, se passi in trentino la birra di supporto è tua

Dovrebbe bastare mettere ai div di bordo un height:100%

lostboy

non funzia, non capisco..Ho provato anche con l'overflow...Magari sbaglio io....

laburno

@lostboy said:

non funzia, non capisco..Ho provato anche con l'overflow...Magari sbaglio io....

Imposta height:100% (o l'height che vuoi tu) anche al div contenitore.

lostboy

Ti riposto il codice css, magari trovi l'errore...

/* impostazionidi layout /
body,
html{
margin:0;
padding:0;
}
body {
min-width:720px; / Prevent content from becoming unreachable in Gecko */

}
/* position:absolute for all browsers - the whole page scrolls /
div#headerwrap {
position:absolute;
width:100%;
top:0;
left:0;
height:140px;
}
/ position:fixed for modern browsers - header and footer do not scroll */
body>div#headerwrap {
position:fixed;
}
div#header {

height:110px;
width:720px;
margin:0 auto;
}
div#bordo_sup_2 {
height:30px;
width:720px;
margin:0 auto;
}
div#login
{
float:right;
height:140px;
width:110px;
margin:0 auto;
}

/* set a left margin to compensate for IE/Win always making room for a scrollbar /
div#middlewrap {
/ set left margin and bottom padding for IE5/Win /
padding:140px 0 0 0;
margin-left:0;
/ set left margin and bottom padding for others */
voice-family: ""}"";
voice-family:inherit;
margin-left:16px;
padding-bottom:0px;

}
/* set left margin for modern browsers */
body>div#middlewrap {
margin-left:0;
}
div#middle {
width:720px;
margin:0 auto;

}

#bordo_sx {
height:100%;
width:30px;
float:left;
overflow:hidden;
}
#content {
height:100%;
width:450px;
float:left;
overflow:auto;
}
#bordo_cen {
height:100%;
width:30px;
float:left;
overflow:hidden;
}
#sidebar {
height:100%;
width:180px;
float:left;
overflow:auto;
}
#bordo_dx {
height:100%;
width:30px;
float:left;
overflow:hidden;
}

/* no positioning for IE5/Win - the whole page scrolls */
div#footerwrap {
width:100%;
p\osition:absolute;
bottom:0;
left:0;
height:70px;
}
body>div#footerwrap {
position:fixed;
}
div#footer {
height:70px;
width:720px;
margin:0 auto;
}

/* Impostazioni grafiche, stile , colori ecc. */

body,
html{
font-family:"Trebuchet MS", Georgia, Verdana, serif;
color:#ffffff;
background-image:url(../img/sfondonatale_body.gif);
}

div#header{
background-repeat:no-repeat;
background-image:url(../img/logonatale.jpg);
}

div#bordo_sup_2 {
background-position:top center;
background-repeat:repeat-x;
background-image:url(../img/bordonatale_dx.jpg);
}

div#middle
{
background-repeat:repeat-y;
background-image:url(../img/);
}

div#bordo_dx {
background-position:top right;
background-repeat:repeat-y;
background-image:url(../img/bordonatale_dx.jpg);
}

div#content {

}

div#bordo_cen {
background-position:top center;
background-repeat:repeat-y;
background-image:url(../img/bordonatale_sx.jpg);
}

div#sidebar {

}

div#bordo_sx {
background-position:top left;
background-repeat:repeat-y;
background-image:url(../img/bordonatale_sx.jpg);
}

div#footer {

background-repeat:repeat-x;
background-image:url(../img/bordonatale_dx.jpg);
background-image:url(../img/sfondonatale_body.gif);
color:#eee;

}

div#sotto{
background-repeat:repeat-x;
background-image:url(../img/bordonatale_dx.jpg);
}

A me interesserebbe che le div bordo_dx,bordo_cen,bordo_sx restino fisse, e che invece la content e la sidebar facessero apparire le scrollbar qualora ce ne fosse bisogno...

Ho pasticciato un po con l'overflow e l'height, ma non mi riesce..Se riesoc a fare questo, poi ho finito il layout all'incirca e ti ringrazio un sacco davvero...

Questa è la struttura del pezzo centrale, in html :

<div id="middle">

<div id="bordo_sx"> </div>
<div id="content">Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
Benvenuti su questo sito,
</div>
<div id="bordo_cen"> </div>
<div id="sidebar">
<h2>Shout - Box</h2>
 
<iframe src="../pagine/Sezioni/Shout-Box/index.php" width="130" height="325" frameborder="0">
</iframe>

</div>
<div id="bordo_dx"> 
</div>

</div>

Grazie mille in anticipo x lo sbattimento, speriamo riesci a darmi una mano....:x

laburno


div#middle {
    width:720px;
    margin:0 auto;

}

Prova a dare un height a questo.

Se mi ricordo bene l'height relativo di un div (cioè in percentuale) viene calcolato rispetto all'height del div che lo contiene (e nel caso che non sia contenuto da nessun altro div, dal body).

lostboy

Niente da fare...Se ridimensiono la finestra, appare lo scroll totale del contenuto centrale della pagina, invece che rimanere fissi i bordi, e apparire gli scroll sulla sidebar e sulla content....

Ho anche provato ad assegnare height 100% al body, al middlewrap, al midlle, a tt contemporaneamente...Non capisco dove sbaglio..

Ti prego aiutami a risolvere...

il.rappo

@lostboy said:

Ho anche provato ad assegnare height 100% al body, al middlewrap, al midlle, a tt contemporaneamente...Non capisco dove sbaglio..

L'height impostato in % non funziona

lostboy

emh allora non ho ben capito..Se il footer e l'header sono fissi, non scrollano con il contenuto centrale, quale height do xk il contenuto centrale sia giusto sia a tutte le risoluzioni?

laburno

@lostboy said:

emh allora non ho ben capito..Se il footer e l'header sono fissi, non scrollano con il contenuto centrale, quale height do xk il contenuto centrale sia giusto sia a tutte le risoluzioni?

Salvati questa pagina in html di esempio e guarda:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title></title>
  <style>
    #wrapper {
        width:720px;
        margin: 0px auto;
        background-color: #fa66fa;
        height: 100%;
    }
    #uno {
        width:144px;
        background: #f45678;
        float:left;
      height: 100%;
    }
    #due {
        width:144px;
        background-color: #343434;
        float:left;
    }
    #tre {
        width:144px;
        background-color: #666666;
        float:left;
    }
    #quattro {
        width:144px;
        background-color: #afafaf;
        float:left;
    }
    #cinque {
        width:144px;
        background-color: #9a1b7c;
        float:left;
    }

  </style>
  
  </head>
  <body>

  <div id="wrapper">
    <div id="uno">il wrapper ha height:100%, e il primo div ha height:100%<br><br><br><br></div>
    <div id="due">2<br><br><br><br></div>
    <div id="tre">3<br><br><br><br></div>
    <div id="quattro">4<br><br><br><br></div>
    <div id="cinque">5<br><br><br><br></div>
  </div>


  </body>
</html>

lostboy

Sei un mito, ma mi faresti un favorone se mi dici il riferimento alla modifica del mio css, in quanto non capisco come mai ma si vede che sbaglio sempre, visto che non funziona come nel tuo esempio...

So di chiedere moltom, ma mi salveresti davvero visto che sono si vede incompetente...

laburno

@lostboy said:

Sei un mito, ma mi faresti un favorone se mi dici il riferimento alla modifica del mio css, in quanto non capisco come mai ma si vede che sbaglio sempre, visto che non funziona come nel tuo esempio...

So di chiedere moltom, ma mi salveresti davvero visto che sono si vede incompetente...

Dal codice della tua pagina mi sembra che il div middle faccia da contenitore per i 5 div (contenuto, sidebar e bordi).

lostboy

Non il middlewrap?Comunque provato al middle, ma nn funzia....Scrolla sempre tutto il contenuto centrale assieme,penso sia dovuto a qc del body boh...

laburno

@lostboy said:

Non il middlewrap?Comunque provato al middle, ma nn funzia....Scrolla sempre tutto il contenuto centrale assieme,penso sia dovuto a qc del body boh...

Sei tu che hai la pagina
Prova col middlewrap, e se non è neanche quello allora svuota la pagina del contenuto e lascia solo la struttura del layout e vedi come si comporta.

lostboy

Guarda chiedo davvero venia, ma le ho provate tutte, anche a fare come dici tu, anche a togliere ogni elemento al colpo...Boh...

lostboy

puoi darmi un help che mi sn impantanato? grazie