Le colonne laterali non si affiancano

**mde** · 22-07-2009, 17:04

Salve,

sono abbastanza inesperto in html e css. Seguendo le indicazioni delle guide ho creato un layout a 3 colonne con div laterali con float opposti e div centrale separato da margini laterali.
Sempre seguendo i consigli delle guide, ho posizionato nell'html i contenuti prima dei menu e delle news.
Il problema è che le colonne, invece di posizionarsi ai lati del div centrale gli si piazzano immediatamente sotto.
E' più facile da vedere che da spiegare a parole. Vi trascrivo il codice, si fa prima. E' privo di immagini, ovviamente, ma non credo sia un problema.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
DMS Geotechnical Enginnering
</title>
<link rel="stylesheet" type="text/css" href="dmscss.css">
</head>
<body>

<div id="wrapper">

<div id="header">

<ul id="menuorizzontale">[*]
Home
[*]
Contacts
[*]
Downloads
[*]
Italiano
[*]
English
[/list]
</div>

<div id="contents">
bla blablabla blabla blablbl blbl blabla blablabla blabla
blablbl blbl blabla blablabla blabla blablbl blbl blabla
blablabla blabla blablbl blbl blabla blablabla blabla
blablbl blbl blabla blablabla blabla blablbl blbl blabla
blablabla blabla blablbl blbl blabla blablabla blabla
blablbl blbl blabla blablabla blabla blablbl blbl blabla
blablabla blabla blablbl blbl blabla blablabla blabla
blablbl blbl blabla blablabla blabla blablbl blbl blabla
blablabla blabla blablbl blbl blabla blablabla blabla
blablbl blbl blabla blablabla blabla blablbl blbl blabla
blablabla blabla blablbl blbl blabla blablabla blabla
blablbl blbl blabla blablabla blabla blablbl blbl blabla
blablabla blabla blablbl blbl blabla blablabla blabla
blablbl blbl blabla blablabla blabla blablbl blbl blabla
blablabla blabla blablbl blbl blabla blablabla blabla

</div>

<div id="leftsidebar">
bla blablabla blabla blablbl blbl blabla blablabla blabla
blablbl blbl blabla blablabla blabla blablbl blbl blabla
blablabla blabla blablbl blbl blabla blablabla blabla
blablbl blbl blabla blablabla blabla blablbl blbl blabla
blablabla blabla blablbl blbl blabla blablabla blabla
blablbl blbl blabla blablabla blabla blablbl blbl blabla
blablabla blabla blablbl blbl blabla blablabla blabla
blablbl blbl blabla blablabla blabla blablbl blbl blabla

</div>

<div id="rightsidebar">
bla blablabla blabla blablbl blbl blabla blablabla blabla
blablbl blbl blabla blablabla blabla blablbl blbl blabla
blablabla blabla blablbl blbl blabla blablabla blabla
blablbl blbl blabla blablabla blabla blablbl blbl blabla
blablabla blabla blablbl blbl blabla blablabla blabla
blablbl blbl blabla blablabla blabla blablbl blbl blabla
blablabla blabla blablbl blbl blabla blablabla blabla
blablbl blbl blabla blablabla blabla blablbl blbl blabla

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

ed il css utilizzato

* {
margin: 0;
padding: 0;
}

html {
background: #444444;
}

body {
margin: 0px;
padding: 0px;
text-align: center;
font: 0.75em Arial, Helvetica, sans-serif;
color: #666666;
}

/*wrapper inizio*/

#wrapper {
background-color: #ffffff;
color: #666666;
margin: 0 auto; /* centratura del wrapper in FF*/
padding:0;
width: 75em;
text-align: justify;
}

/*header inizio*/

#header {
background: #444444 url(immagini/logo.gif) no-repeat left 50%;
color: #ffffff;
height: 9.5em;
margin: 0.5em 0.5em 0 0.5em;
padding: 0;
width: 74em;
}

#menuorizzontale {
font-size: 1em;
Font-weight: bold;
float: right;
line-height: normal;
list-style:none;
margin: 7em 0 0 0;
padding: 0;
}

#menuorizzontale li {
display: inline; /*eliminazione del raddoppio del margine in IE*/
float: left;
margin: 0 1.5em 0 0;
text-align: left;
padding: 0;
}

#menuorizzontale a{
color: #ffffff;
display: block;
text-decoration: none;
}

#menuorizzontale a:hover{
text-decoration: underline;
color: #007ac0;
}

#menuorizzontale a img {
border: 0;
}

#ita {
margin-right: 0.5em;
}

#eng {
margin-right: 0.5em;
}
/*header fine*/

/*contents*/
#contents {
background-color: #444444;
/*display: inline;
float: left;*/
margin: 0.5em 19em 0 19em;
padding: 0;
width: 37em;
}
/*contents fine*/

/*leftsidebar inizio*/
#leftsidebar {
background-color: #444444;
display: inline;
float: left;
margin: 0.5em 0 0 0.5em;
padding:0;
width: 18em;
}
/*leftsidebar fine*/

/*rightsidebar inizio*/
#rightsidebar {
background-color: #444444;
display: inline;
float: right;
margin: 0.5em 0.5em 0 0;
padding:0;
width: 18em;
}
/*rightsidebar fine*/

/*footer inizio*/

#footer {
clear: both;
}
/*footer fine*/

qualcuno riesce ad aiutarmi?

Grazie sin da ora

**mde** · 22-07-2009, 17:28

per semplificarvi la vita ho marcato in verde il centrale, in blu il laterale sinistro ed in rosso il laterale destro.

**ispuk** · 23-07-2009, 01:19

secondo me c'è un pò di casotto nel tuo codice

credo che ti convenga creare un div id="contenitore" che contenga in se i div contents,leftsidebar ,rightsidebar

fatto cio usi la dimensione massima in em a questo punto sommando le larghezze totali e le altezze totali dei 3 div,calcola che ,se vuoi dei margini fra i due div laterali e quello centrale , devi allargare un pò il contenitore,non farlo preciso

prova ma mi è venuto il mal di testa a leggere quel codice

**mde** · 23-07-2009, 13:35

Ciao,

ehilà, addirittura un casotto!
Se parliamo di html ,l'indentazione effettivamente non è delle milgiori. Purtroppo l'ho eseguita in automatico tramite software, ma sostanzialmente, in termini di codice, non pensavo fosse fatto così male.
Tu dici che potrei risolvere racchiudendo in un ulteriore div i tre div incriminati? Uhm... proverò.
Per maggiore informazione posso dire che ho provato a creare il medesimo layout rendendo tutti e tre i div flottanti a sinistra e mi pare regga. Il problema è che avrei preferito mettere il menu e le news DOPO i contenuti nel codice html per assecondare quanto ho letto in merito ai criteri di ricerca degli spider. Se mi dite che non è grave mettere il contenuto dopo il menu di navigazione, allora mi orienterei sulla soluzione flottante.
In ogni caso non capisco, concettualmente questo codice non è differente da quello indicato in questa guida, non capisco perché nel mio esempio non ci sia la compenetrazione dei div dell'esempio. Mah!

**ispuk** · 23-07-2009, 21:48

Nº aspetta non era per dire che il codice sia sbagliato anzi il risultato finale mi sembra ottimo

**mde** · 24-07-2009, 10:58

Tranquillo, non me la sono mica presa a male.
Ho cominciato a scrivere codice da meno di un mese, ho appena cominciato il sito e lo faccio la sera a tempo perso, ci poteva stare che era un "casotto".

ho provato a seguire le tue indicazioni, ma non hanno sortito il risultato.
Non ti viene proprio in mente nessun sistema per far allineare i tre div?
Io per adesso proseguo con la versione a tre colonne flottanti, ma preferirei capire come mai quel codice non funziona, anche perché così ho il menu che per forza di cose deve precedere i contenuti. Pare che per i motori di ricerca non sia una buona cosa...
Aita!

**ispuk** · 24-07-2009, 11:52

guarda secondo me un layout di questo tipo deve avre un contenitore poi le misure le adatti al tipo d sito che vuoi fare

apri questo layout nel browser ,prova a prendervi spunto,è molto semplice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #000000;
margin:0;
padding:0;

}
div#contenitore {
padding:0 auto;
margin: 0 auto;
width: 900px;
height: 900px;
background-color:#CCCCCC;
border:5px;
border-style

utset;
border-color:#66FFFF;

}

div#header {
width: 900px;
height: 159px;
background-color:#000066;
margin:0 auto;
padding:0 ;
background-image: url(../header.gif);

}
div#menu {
width: 900px;
background-color:#99FFFF;
height: 21px;
margin:0 auto;
padding:0 auto;
text-align:center;

}

div#left {
width: 200px;
background-color:#0099FF;
float: left;
height: 720px;
margin:0 auto;
padding:0;

}
div#right {
width: 200px;
background-color:#33CCFF;
float:left;
height: 720px;
margin: 0 auto;
padding:0 ;
}
div#front {
width: 500px;
background-color:#FFFFFF;
float:left;
height: 720px;
margin:0 auto;
padding:0 ;
}

-->
</style>
</head>

<body>
<div id="contenitore">
<div id ="header">Header</div>
<div id="menu"> Menu </div>
<div id="left"> Left </div>
<div id="front"> Front </div>
<div id ="right"> Right </div>
</div>
</body>
</html>

Discussione: Le colonne laterali non si affiancano

Strumenti discussione

Ricerca discussione

Visualizza

Le colonne laterali non si affiancano

Permessi di invio