• D
    User Attivo •

    Problema con struttura homepage sito

    Ciao a tutti, sono nuovo, dopo aver creato la struttura del mio sito tramite tabelle ho capito che usando le DIV e css sarebbe stato molto più ordinato e ottimizzato.

    Inizialmente pensavo funzionasse tutto (usando IE8) però poi aprendo la struttura base del mio sito con Firefox mi sono accorto che mi vedeva tutto sballato.

    Vi descrivo come dovrebbe essere la struttura:
    container: è la div principale che contiene tutte le altre, larghezza: 968px, centrata, l'altezza si adatta in base alle DIV che contiene:
    Al suo interno ci sono:

    • Una DIV (banner), altezza fissa 100px. Larghezza: 968px.
    • Altre 3 DIV (bar_feft, bar, bar_right) conmpongono una seconda riga, altezza fissa 29px tutte e 3. Larghezza (partendo da sinistra) 24px, 920px, 24px.
    • Altre 3 div (body_feft, body, body_right) che saranno quelle che conterrano il corpo della pagina: queste 3 div sono di altezza variabile, le 2 di altezza inferiore si dovranno adattare all'altezza di quella di altezza superiore. Larghezza (partendo da sinistra) 24px, 920px, 24px. Tutte queste 3 div saranno all'interno di un container (cont_body).
    • L'ultima riga è composta da una div (low_bar) larga come la div container (968px) e altra 24px.

    Spero di essermi spiegato bene...

    Questo è il file css: (ho dato dei colori di sfondo casuali per far distinguere bene le DIV).

    
body { 
font-family: Calibri; 
font-size: 13px;
font-weight: bold;
text-align: center;
color: black; 
background-color: #EAEAEA; 
margin: 0 auto; 
}
a:link,a:visited,a:hover {text-decoration: none; color: black}
#contenitore { 
width: 968px; 
left: 50%;
margin-left: -484px;
background-color: white; 
margin: 0 auto; 
padding: 0px; 
text-align: center;
overflow:hidden;
}
#banner { 
width: 968px; 
height: 100px; 
background-color: red; 
margin: 0 auto; 
padding: 0px; 
}
#bar_left { 
float: left;
width: 24px;
height: 29px;
background-color: green;
margin: 0 auto; 
padding: 0px;
text-align: right; 
}
#bar {
float: left;
width: 920px;
height: 29px;
background-color: blue;
margin: 0 auto; 
padding: 3px 12px 0px 12px;
text-align: right; 
}
#bar_right {
float: left;
width: 24px;
height: 29px;
background-color: yellow;
margin: 0 auto; 
padding: 0px;
text-align: right; 
}
#cont_body { 
width: 968px;
min-height: 400px; 
background-color: red;
margin: 0 auto; 
padding: 0px;
overflow:hidden;
}
#body_left { 
float: left;
width: 24px;
height: 100%; 
background-color: black;
margin: 0 auto; 
padding: 0px;
}
#body { 
float: left;
width: 920px;
background-color: green;
margin: 0 auto; 
padding: 12px 12px 12px 12px;
text-align: left; 
}
#body_right { 
float: left;
width: 24px;
height: 100%; 
background-color: yellow;
margin: 0 auto; 
padding: 0px;
}
#low_bar {
width: 968px;
height: 35px;
background-color: blue;
margin: 0 auto; 
padding: 7px 40px 0px 40px;
text-align: center;
color: #B4B4B4;
font-size: 11px; 
}

    Pagina html:

    
<html>
<head>
<title>home</title>
<style type="text/css" media="screen">@import "style_01.css";
</style>
</head>
<body>
<br><br>
<div id="contenitore">
<div id="banner">1</div>
<div id="bar_left">2</div><div id="bar">3</div><div id="bar_right">4</div>
<div id="cont_body">
<div id="body_left">5</div><div id="body">6</div><div id="body_right">7</div>
</div>
<div id="low_bar">8</div>
</div>
</body>
</html>

    Qualcuno può aiutarmi a renderla uguale (o quasi) in tutti i browser e non solo in IE8. Grazie

    0
  • nicc0
    User Attivo •

    Ecco qua il foglio di stile css:

    
body { 
 font-family: Calibri; 
font-size: 13px;
font-weight: bold;
text-align: center;
color: black; 
background-color: #EAEAEA; 
margin: auto; 
}
a:link,a:visited,a:hover {text-decoration: none; color: black}
#contenitore { 
width: 968px; 
margin: auto; 
padding: 0px; 
text-align: center;
overflow:hidden;
}
#banner { 
width: 968px; 
height: 100px; 
background-color: red; 
margin: auto; 
padding: 0px; 
}
#bar_left { 
float: left;
width: 24px;
height: 29px;
background-color: green;
margin: auto; 
padding: 0px;
text-align: right; 
}
#bar {
float: left;
width: 920px;
height: 29px;
background-color: blue;
margin: auto; 
text-align: right; 
}
#bar_right {
float: right;
width: 24px;
height: 29px;
background-color: yellow;
margin: auto; 
padding: 0px;
text-align: right; 
}
#cont_body { 
width: 968px;
min-height: 400px; 
background-color: red;
margin: auto; 
padding: 0px;
overflow:hidden;
}
#body_left { 
float: left;
width: 24px;
height: 80%; 
background-color: black;
margin: auto; 
padding: 0px;
}
#body { 
float: left;
width: 920px;
height: 100%;
background-color: green;
margin: auto; 
text-align: left; 
}
#body_right { 
float: right;
width: 24px;
height: 80%; 
background-color: yellow;
margin: auto; 
padding: 0px;
}
#low_bar {
width: 968px;
height: 35px;
background-color: blue;
margin: auto; 
padding: 7px 40px 0px 40px;
text-align: center;
color: #B4B4B4;
font-size: 11px; 
}

```la pagina html
[html]
<html>
<head>
<title>home</title>
<style type="text/css" media="screen">@import "style_01.css";</style>
</head>
<body>
<br><br>
<div id="contenitore">
<div id="banner">1</div>
<div id="bar_left">2</div><div id="bar">3</div><div id="bar_right">4</div>
<div id="cont_body">
<div id="body_left">5</div><div id="body">6</div><div id="body_right">7</div>
</div>
<div id="low_bar">8</div>
</div>
</body>
</html>
[/html]
    0
  • D
    User Attivo •

    Grazie, potresti spiegarmi le modifiche, o dirmi se non ne ho notata qualcuna.

    Hai messo al container: overflow:hidden;
    Hai tolto alcuni i padding (un dubbio, dove è stato torlo come faccio a regolare la spaziatura interna?)
    Poi ho visto che hai cambiato alcuni float (sei andato a tentativi o ci sono regole particolari per farlo?)
    Ho dimenticato qualcosa?

    PS: min-height: 400 viene letto su tutti i browser?

    0
  • D
    User •

    PS: min-height: 400 viene letto su tutti i browser?

    min-height funziona su tutti i browser non IE.

    IE (almeno fino a IE7. non mi ricordo mai se è vero anche per IE8) interpreta il tag height come min-height.

    0
  • nicc0
    User Attivo •

    @DARKF3D3 said:

    Hai messo al container: overflow:hidden;

    Ehmm, no: quello c'era già 😄

    @DARKF3D3 said:

    Hai tolto alcuni i padding (un dubbio, dove è stato torlo come faccio a regolare la spaziatura interna?)

    Se per spaziatura interna intendi i margini dei blocchi di testo, la cosa migliore è creare nel css una regola tipo body p { } in cui dai le distanze dai bordi (così per gli altri elementi).
    Se invece intendi spaziature fra i singoli div, devi ricordarti allora di modificare le misure dei div stessi, altrimenti "sforano" dalla larghezza fissa che hai impostato al layout.
    Sta a te quindi rimettere i padding in modo corretto e adatto allo scopo, io mi sono limitato a correggere l'impostazione del layout.

    @DARKF3D3 said:

    Poi ho visto che hai cambiato alcuni float (sei andato a tentativi o ci sono regole particolari per farlo?)

    Non sono andato a tentativi, a occhio ho visto che quello era un problema: ad esempio i bar_right e i body_right avevano float: left, beh 🙂

    @DARKF3D3 said:

    PS: min-height: 400 viene letto su tutti i browser?

    purtroppo no, IE non lo legge, però puoi ovviare in questa maniera:

    
min-height: 400px;
height: auto !important;
height: 400px;

```La prima dichiarazione non è interpetata da Internet Explorer.
 La seconda dichiarazione serve per Opera, Mozilla e gli altri browser per sovrascrivere la terza dichiarazione che vincolerebbe in ogni caso l'altezza del box (cosa non prevista da min-height). Internet Explorer non dà peso alla direttiva !important.
 La terza dichiarazione è interpretata solo da Internet Explorer poiché per gli altri browser la seconda dichiarazione è più importante. In ogni caso Internet Explorer intepreterà height come se si trattasse di min-height.
(grazie a .ConStile per questo trucco)
    0
  • D
    User Attivo •

    Quindi in quel modo, se il contenuto dovesse superare i 400 pixel la div si adatterebbe anche con internet explorer?

    0
  • D
    User Attivo •

    @Nicc0 said:

    Se per spaziatura interna intendi i margini dei blocchi di testo, la cosa migliore è creare nel css una regola tipo body p { } in cui dai le distanze dai bordi (così per gli altri elementi).

    Si intendo la spaziatura interna, potresti farmi un sempio pratico di come fare. Grazie

    0
  • D
    User Attivo •

    Grazie a tutti per l'aiuto. Problema RISOLTO! 😄

    0
  • nicc0
    User Attivo •

    @DARKF3D3 said:

    [***]

    Bene, mi fa piacere 🙂
    Scusa se non ho risposto all'ultima domanda, ma ho avuto da fare. Spero comunque che le mie dritte ti siano state utili.

    0
  • D
    User Attivo •

    Si si utilissime...

    0
Effettua l'accesso per rispondere