impostare tre div/colonne

**eccoinsorgo** · 26-01-2009, 12:17

buongiorno a tutti, è da un pò di tempo che ci provo, ma data la mia scarsissima esperienza di html/css ad oggi non sono ancora riuscito ad impostare tre div all'interno di uno più grande che abbiano i bordi arrotondati.
Mi spiego meglio: i tre div li creo, ma quello a destra mi scende sotto a quello centrale. Qui vi posto il codice css che uso:

.body {margin: 0; /* rimuoviamo i margini di pagina */text-align: center; /* sfruttiamo un bug di IE per allineare tutto globalmente */}

.contenitore {background-color: rgb(255,255,255); color: #000000; margin-right:auto; margin-left:auto; width: 900px; text-align: justify; }
.contenitore p {margin: 0 7px; font-family: "MS Reference Sans Serif"; font-style:normal; font-variant:normal; font-weight:normal; font-size:11pt; }
.topplace {background: url('salentotuttolanno%20CSS/images/topdx.png') no-repeat right top;}
.bottomplace {background: url('salentotuttolanno%20CSS/images/downdx.png') no-repeat right top; display: block; clear: both}
img.placeborder {width: 20px; height: 20px;border: none;display: block !important; }
a {text-decoration:none}
a:link {color: blue;text-decoration: none;}
a:hover {color: red; text-decoration: none;}
a:focus { outline: 0; }

.navigation {margin: 0 0px 0 7px; background-color:rgb(255,204,0); color:#000000; width: 190px; text-align: justify; float: left;}
.navigation p {margin: 0 5px 0 3px; }
.topsx {background: url('salentotuttolanno%20CSS/images/topdxleft.png') no-repeat top right; }
.bottomsx {background: url('salentotuttolanno%20CSS/images/downdxleft.png') no-repeat top right; }
img.placeborder {width: 20px; height: 20px;border: none;display: block !important;}

.content {
background-color: #FFFFFF;
margin: 0 200px 0 200px;
width: 500px;
text-align: justify;
font-family: "MS Reference Sans Serif";
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 11pt;
clear: right;
}

.extra {
margin: 0 7px 0 0px;
background-color: rgb(255,204,0);
color: #000000;
width: 190px;
text-align: justify;
float: right;
}
.extra p {margin: 0 3px 0 5px; }
.topsx {background: url('salentotuttolanno%20CSS/images/topdxleft.png') no-repeat top right; }
.bottomsx {background: url('salentotuttolanno%20CSS/images/downdxleft.png') no-repeat top right; }
img.placeborder {width: 20px; height: 20px;border: none;display: block !important;}

Potete perfavore aiutarmi?
Grazie 1000

**Mich_** · 26-01-2009, 13:13

Difficile rispondere senza vedere il codice HTML.

Comunque dall'immagine mi par di capire che hai una struttura di questo tipo:

codice:

<div id="contenitore">
  <div id="navigation"> ... </div>
  <div id="content"> ... </div>
  <div id="extra"> ... </div>
</div>

In cui hai messo il div extra dopo quello centrale.
Invece nel CSS hai il float:left nel navigation e float:right in extra, mentre hai usato i margini in content

Per mantenere il CSS postato devi mettere il div extra PRIMA del content;
in alternativa devi usare il float:left anche per il content, riducendo i margini a pochi px; per migliorare poi l'effetto grafico extra puo` essere flottato a sinistra.

Ricorda di mettere un clear da qualche parte prima di chiudere il contenitore, ad esempio come suggerito nella pillola "fabclearing" (cerca nel forum con tale parola nel titolo).

**eccoinsorgo** · 26-01-2009, 13:48

hai ragione, forse avrei dovuto postare l'intero codice della pagina..... codice:

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns

="urn:schemas-microsoft-com

ffice

ffice">
<head>
<style type="text/css">

.body {margin: 0; /* rimuoviamo i margini di pagina */text-align: center; /* sfruttiamo un bug di IE per allineare tutto globalmente */}

.contenitore {background-color: rgb(255,255,255); color: #000000; margin-right:auto; margin-left:auto; width: 900px; text-align: justify; }
.contenitore p {margin: 0 7px; font-family: "MS Reference Sans Serif"; font-style:normal; font-variant:normal; font-weight:normal; font-size:11pt; }
.topplace {background: url('images/topdx.png') no-repeat right top;}
.bottomplace {background: url('images/downdx.png') no-repeat right top; display: block; clear: both}
img.placeborder {width: 20px; height: 20px;border: none;display: block !important; }
a {text-decoration:none}
a:link {color: blue;text-decoration: none;}
a:hover {color: red; text-decoration: none;}
a:focus { outline: 0; }

.navigation {margin: 0 0px 0 7px; background-color:rgb(255,204,0); color:#000000; width: 190px; text-align: justify; float: left;}
.navigation p {margin: 0 5px 0 3px; }
.topsx {background: url('images/topdxleft.png') no-repeat top right; }
.bottomsx {background: url('images/downdxleft.png') no-repeat top right; }
img.placeborder {width: 20px; height: 20px;border: none;display: block !important;}

.content {
background-color: #FFFFFF;
margin: 0 200px 0 200px;
width: 500px;
text-align: justify;
font-family: "MS Reference Sans Serif";
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 11pt;
clear: right;
}

.extra {
margin: 0 7px 0 0px;
background-color: rgb(255,204,0);
color: #000000;
width: 190px;
text-align: justify;
float: right;
}
.extra p {margin: 0 3px 0 5px; }
.topsx {background: url('images/topdxleft.png') no-repeat top right; }
.bottomsx {background: url('images/downdxleft.png') no-repeat top right; }
img.placeborder {width: 20px; height: 20px;border: none;display: block !important;}

a.opacity img {filter:alpha(opacity=60);-moz-opacity: 0.6;opacity: 0.6;} a.opacity:hover img {filter:alpha(opacity=100);-moz-opacity: 1.0;opacity: 1.0;}
</style>
</head>

<body bgcolor="#3467FF">
<div class="contenitore">
<div class="topplace">
[img]images/topsx.png[/img]
</div>

<div align="center">

<table border="0" width="824" cellpadding="0" style="border-collapse: collapse" bgcolor="#FFFFFF" bordercolor="#999999">
<tr>
<td align="center">
[img]images/button1.jpg[/img][img]images/button2.jpg[/img][img]images/button3.jpg[/img][img]images/button4.jpg[/img][img]images/button5.jpg[/img][img]images/button6.jpg[/img]
</td>
</tr>
</table>
</div>

<div class="navigation">
<div class="topsx">
[img]images/topsxleft.png[/img]
</div>

<p align="center">

</p>
<p align="center">
</p>
<p align="center">
</p>
<p align="center">
</p>
<p align="center">
</p>
<p align="center">
</p>
<p align="center">
</p>
<p align="center">
</p>
<p align="center">
</p>
<p align="center">
</p>
<p align="center">
</p>
<p align="center">
</p>
<p align="center">
</p>
<p align="center">
</p>
<p align="center">
</p>
<p align="center">
</p>
<p align="center">
</p>
<p align="center">
</p>
<p align="center">

</p>

<div class="bottomsx">
[img]images/downsxleft.png[/img]
</div>
</div>

<div class="content">

</p>
<p style="text-align: justify;">
</p>
</div>

<div class="extra" style="width: 190px;">
<div class="topsx">
[img]images/topsxleft.png[/img]</div>
<p align="center">

</p>
<div align="center"></div>
<div class="bottomsx">
[img]images/downsxleft.png[/img]
</div>
</div>

<div class="bottomplace">
[img]images/downsx.png[/img]
</div>
</div>

</body>
</html>

Tra l'altro mi spieghi come postare il codice come hai fatto tu? (posso darti del tu, vero?) cioè con il codice fra i trattini...

Grazie per l'aiuto ed il tempo che stai perdendo per me.....

**Mich_** · 26-01-2009, 16:16

Passare il codice non formattato fa venir mal di testa a chi legge.
Nel forum ci sono gli appositi tag VB, che puoi inserire tramite i bottoni sopra l'area del testo. Per il codice devi usare il bottone # (oppure il php, se vuoi la colorazione di tale linguaggio).

Per il tuo codice:
stai usando formattazione fatta con attributi HTML: questo e` sbagliato per vari motivi:
1. puo` andare in contrasto con la formattazione CSS, e browser diversi risolvono i conflitti in modo diverso;
2. hai formattazione sparsa dappertutto, e questo crea confusione in chi deve leggere/correggere;
3. e` una pratica obsoleta e deprecata: il codice HTML deve esprimere il contenuto (in modo semantico), il CSS la formattazione;
4. e` contrario alle regole di accessibilita`.

Inoltre nel tuo codice utilizzi le tabelle per formattare (nel menu): e` una pratica obsoleta e deprecata, che non corrisponde alla semantica (oltre a problemi di accessibilita`, sei anche penalizzato nel posizionamento nei motori di ricerca). I menu sono delle liste, e come tali vanno realizzati tramite liste.
Tra i "link utili" trovi riferimenti a raccolte di menu realizzati in puro HTML+CSS (vedi ad esempio quelli di CSSplay).

**eccoinsorgo** · 26-01-2009, 17:11

OK scusa, avrai perciò notato quanto ci capisco di HTML/CSS. Comunque:

**eccoinsorgo** · 26-01-2009, 17:32

codice:

.body {margin: 0; /* rimuoviamo i margini di pagina */text-align: center; /* sfruttiamo un bug di IE per allineare tutto globalmente */}

.contenitore {background-color: rgb(255,255,255); color: #000000; margin-right:auto; margin-left:auto; width: 900px; text-align: justify; }
.contenitore p {margin: 0 7px; font-family: "MS Reference Sans Serif"; font-style:normal; font-variant:normal; font-weight:normal; font-size:11pt; }
.topplace {background: url('salentotuttolanno%20CSS/images/topdx.png') no-repeat right top;}
.bottomplace {background: url('salentotuttolanno%20CSS/images/downdx.png') no-repeat right top; display: block; clear: both}
img.placeborder {width: 20px; height: 20px;border: none;display: block !important; }
a {text-decoration:none}
a:link {color: blue;text-decoration: none;}
a:hover {color: red; text-decoration: none;}
a:focus { outline: 0; }


.navigation {margin: 0 0px 0 7px; background-color:rgb(255,204,0); color:#000000; width: 190px; text-align: justify; float: left;}
.navigation p {margin: 0 5px 0 3px; }
.topsx {background: url('salentotuttolanno%20CSS/images/topdxleft.png') no-repeat top right; }
.bottomsx {background: url('salentotuttolanno%20CSS/images/downdxleft.png') no-repeat top right; }
img.placeborder {width: 20px; height: 20px;border: none;display: block !important;}

.content {
background-color: #FFFFFF;
margin: 0 200px 0 200px;
width: 500px;
text-align: justify;
font-family: "MS Reference Sans Serif";
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 11pt;
clear: right;
}

.extra {
margin: 0 7px 0 0px;
background-color: rgb(255,204,0);
color: #000000;
width: 190px;
text-align: justify;
float: right;
}
.extra p {margin: 0 3px 0 5px; }
.topsx {background: url('salentotuttolanno%20CSS/images/topdxleft.png') no-repeat top right; }
.bottomsx {background: url('salentotuttolanno%20CSS/images/downdxleft.png') no-repeat top right; }
img.placeborder {width: 20px; height: 20px;border: none;display: block !important;}

**eccoinsorgo** · 26-01-2009, 17:40

io per ora, a parte gli evidenti errori di formattazioe che ti pregherei di indicarmi meglio :master: vorrei riuscire ad allineare in alto i tre div (navigation,content e extra) all'interno del div contenitore.
i due div a destra e sinistra hanno i bordi arrotondati, ma il div di destra mi scende sempre di una riga rispetto al div centrale (content)
Please

**Mich_** · 26-01-2009, 18:00

Si`, ma anche scritto cosi` si capisce poco.

Prova ad usare un metodo che usi le indentazioni, con un attributo per ogni riga.
Se vuio risparmiare spazio (e quindi capire meglio) puoi usare le shortcut, ad esempio:

codice:

.content {
  background-color: #FFFFFF;
  margin: 0 200px 0 200px;
  width: 500px;
  text-align: justify;
  font: normal normal normal 11px "MS Reference Sans Serif",Arial,sans-serif;
  clear: right;
}

Nota che ho aggiunto un font generico e la famiglia, per far usare un font simile se il browser non possiede quello da te scelto.
Per un riferimento sulla sintassi puoi usare (ad esempio): http://w3schools.com/css/css_reference.asp

E correggi il codice HTML, altrimenti non si sa se il funzionamento errato e` dovuto a conflitti o altro.

**Mich_** · 26-01-2009, 18:03

Originariamente inviato da eccoinsorgo
io per ora, a parte gli evidenti errori di formattazioe che ti pregherei di indicarmi meglio :master: vorrei riuscire ad allineare in alto i tre div (navigation,content e extra) all'interno del div contenitore.
i due div a destra e sinistra hanno i bordi arrotondati, ma il div di destra mi scende sempre di una riga rispetto al div centrale (content)
Please

Ecco alcuni esempi di attributi di formattazione che devi eliminare dal codice HTML (ed inserire con la sintassi corretta nel codice CSS:
bgcolor="#3467FF"
align="center"
border="0"

**eccoinsorgo** · 26-01-2009, 18:29

OK ci provo,

grazie...

codice:

.body {margin: 0; /* rimuoviamo i margini di pagina */
text-align: center; /* sfruttiamo un bug di IE per allineare tutto globalmente */
} qui devo inserire bgcolor:#3467FF;  ?

poi:

codice:

.contenitore {
background-color: rgb(255,255,255); 
color: #000000;
margin-right:auto; 
margin-left:auto; 
width: 900px; 
text-align: justify; 
}

Discussione: impostare tre div/colonne

Strumenti discussione

Ricerca discussione

Visualizza

impostare tre div/colonne

scusa....

almeno ora scrivo il codice in modo giusto

Permessi di invio