creare box

[Braco]

Sto cercando di fare la home con i css, ero abituato con html che per creare 2 box si fa:

<tr><td>.....</td><td>.........</td></tr>

nel css ci vuole un selettore apposta? E come va messo nella home?

[fcaldera]

una struttura molto semplice

<div id="cnt">
  <div>Lorem ipsum bla bla bla</div>
  <div>Lorem ipsum bla bla e ribla</div>
</div>


#cnt {
  overflow: hidden; 
  height   : auto;    
  width    : 600px;
}

#cnt div {
  float     : left;
  display  : inline;
  width    : 298px;
  border   : 1px #cca solid;
}

usando i blocchi float potresti avere necessità di usare un "clearing" evoluto (ricerca sul forum) in modo che "cnt" racchiuda tutti i blocchi flottati al suo interno.

Per brevità ho usato un clearing veloce (overflow e height sul contenitore)

[Braco]

Originariamente inviato da fcaldera
una struttura molto semplice

<div id="cnt">
  <div>Lorem ipsum bla bla bla</div>
  <div>Lorem ipsum bla bla e ribla</div>
</div>


#cnt {
  overflow: hidden; 
  height   : auto;    
  width    : 600px;
}

#cnt div {
  float     : left;
  display  : inline;
  width    : 298px;
  border   : 1px #cca solid;
}

usando i blocchi float potresti avere necessità di usare un "clearing" evoluto (ricerca sul forum) in modo che "cnt" racchiuda tutti i blocchi flottati al suo interno.

Per brevità ho usato un clearing veloce (overflow e height sul contenitore)

Come div ho questo, va bene lo stesso?

<div id="header">

[fcaldera]

la scelta di quali id usare per gli elementi che usi è solo tua...

ciao

[paologaz]

Per fcaldera_sto cercando di imparare, non sarebbe meglio creare un box-contenitore e al suo interno due box-flottati a sinistra?
La proprietà overflow: hidden non si usa per porzioni eccedenti?
grazie in anticipo per la risposta.

[ricman]

Originariamente inviato da paologaz
Per fcaldera_sto cercando di imparare, non sarebbe meglio creare un box-contenitore e al suo interno due box-flottati a sinistra?

...e lui che ha fatto?

[paologaz]

hai ragione, ho letto male...

[Braco]

Originariamente inviato da fcaldera
la scelta di quali id usare per gli elementi che usi è solo tua...

ciao

Ho messo così nel file css esterno e la fomattazione funziona, ma appaiono uno sotto l'altro, si tratta solo di mettere h1 a dx e h2 a sx

h1{
width:500px;
text-align:left;
vertical-align:bottom;
font-family:arial;
font-size:20px;
color:#4a4a4a;
}

h2{
width:280px;
text-align:right;
vertical-align:bottom;
font-family:sans-serif;
font-size:13px;
color:#5e5e5e;
}

in body

<h1 class="h1">......</h1>
<h1 class="h1">......</h2>

[fcaldera]

innanzitutto non puoi usare nomi riservati di tag e attributi come nomi di classi o di id... un pò di fantasia

il fatto poi che i due titoli vadano uno sotto l'altro è normale... i titoli sono elementi blocco e quindi si dispongono così: per affiancarli devi racchiudere i due elementi e dare una larghezza al contenitore e i due elementi devono essere floatti.

basta che guardi e copi il primo esempio che ti ho fatto, la cosa è analoga.

[Braco]

Originariamente inviato da fcaldera
innanzitutto non puoi usare nomi riservati di tag e attributi come nomi di classi o di id... un pò di fantasia

il fatto poi che i due titoli vadano uno sotto l'altro è normale... i titoli sono elementi blocco e quindi si dispongono così: per affiancarli devi racchiudere i due elementi e dare una larghezza al contenitore e i due elementi devono essere floatti.

basta che guardi e copi il primo esempio che ti ho fatto, la cosa è analoga.

Il contenitori c'era già

nel css

#header{
width:780px;
margin: 0px auto;   /*centra negli altri browsers*/
text-align: left;   /*ripristina l' allineamento*/
border:solid 0px;
align:center;
}

in body

<div id="header">