[Risolto] Posizionare i div orizzonatalmente

[andreatop]

[Risolto] Posizionare i div orizzonatalmente

Ok, Laburno e CO.
non ci crederete ma sono riuscito a fare un template con i CSS e con il php fare un menù che includo in ogni pagina!
Intanto vi ringrazio...
...e poi vi chiedo come riesco a mettere i div in modo orizzontale uno accanto all'altro. Perchè di default mi sembra di capire vanno uno sotto l'altro.
Grazie... ciao

[laburno]

Ciao Andreatop,
nuove domande nuovi thread:)

Devi dimensionare i div (width: X) e poi applichi un float:left ad ognuno.
Ricordati poi di inserire un elemento sottostante tutti i div messi in orizzonatale, impostato con clear:both per chiudere il floating.

[vampiretta]

@Laburno said:

Ricordati poi di inserire un elemento sottostante tutti i div messi in orizzonatale, impostato con clear:both per chiudere il floating.

Laburno mi spieghi meglio la storia dell'elemento impostato con clear both?

Non sapevo come spiegarlo ma credo che spesso ho problema a chiudere il floating e faccio certi casini!

[vampiretta]

Credo di aver capito, e hai fatto felice una donna! :D:D

Dovrebbe essere una cosa simile?

[html]#colsin {
float: left;
margin-bottom: 30px; }

#coldes {
float: right;
margin-top: 6px;
margin-bottom: 30px; }

.col { clear: both;}[/html]

e poi nella pagina

<div class="col"></div>

[laburno]

Si vampiretta è così
C'è anche un altro metodo più performante che non ti costringe ad aggiungere un elemento vuoto per dargli il clear.
Dai una letta qui:
http://www.positioniseverything.net/easyclearing.html

[vampiretta]

Grazie mille Laburno! Sei troppo prezioso!

[andreatop]

ehyehy Vampiretta... mi rubi le discussioni...

[vampiretta]

Scusa, era qui bella e pronta... le mie ditina hanno fatto meno fatica!

[andreatop]

hai fatto bene
alla prox Vamp

[andreatop]

Laburno...
nonostante abbia messo l'ultima volta [RISOLTO], ho ancora problemi con il riposizionamento orizzontale dei div.
L'altra volta avevo risolto ora non mi riesce di nuovo...

metti che io abbia 3 div orizzontali che sono uguali. Quindi uguale per tutti e 3: <div class= "tipoA">
se io metto nel css

#tipoA {
width: 920px;
width: X;
float: left;
}

non mi vanno orizzontali ma uno sopra all'altro... dove sbaglio?

[vampiretta]

Io sono profana, cmq io non ho messo width: X.

E sopratutto hai una pagina larga 3 volte 920? :():

[andreatop]

no ovviamente il mio esempio era del tutto scavolato...

volevo mettere in un div che è largo 920px, tanti (ho detto 3 per semplificare) div larghi tipo 150 (non 920!!! ) come voci del menu...
però non mi riesce farli stare in riga... mi vanno uno sopra l'altro!

te (che sei profana!! ) come hai risolto?
grazie...

[vampiretta]

Io ho scritto semplicemente così:

[HTML].classechevuoi {float: left; width:98px; margin-left: 17px; margin-bottom: 25px;}[/HTML]

Ovviamente io avevo bisogno di margini precisi, insomma di ricreare una cella quasi come fosse una tabella.

Ma secondo me tu puoi scrivere semplicemente:

[HTML].classechevuoi {float: left; width:150px; }[/HTML]

Cmq forse se posti il codice che hai scritto è meglio. Magari ci provo su una pagina e vediamo che esce fuori.

E poi qualcuno ci viene a correggere!

[andreatop]

allora ieri sera dovrei aver risolto...

.topA {
background-color: Red;
border: 1px solid White;
margin-left: 25px;
width: 100px;
width: X;
float: left;
}

         <!-- Begin Header -->
         <div id="header">
 <div class="top">
      <a href="index.php?action=home" title="Home"><img src="immagini/top.gif" alt="Home"></a>
    </div><br><br>
    <div class="topA">
      Ciao1
    </div>
    <div class="topA">
      Ciao2
    </div>
    <div class="topA">
      Ciao3
    </div>
    <div class="topA">
      Ciao4
    </div>
    <br><br>
    <div class="topB">Ciao</div>
     </div>
     <!-- End Header -->

unica cosa mi spiegate bene cosa fa il "float: left;"?
grazie

[vampiretta]

ma xchè width X ?

[andreatop]

è quello che mi ha detto Laburno...

perchè di default vanno in verticale e a me servono per orizzontale.
Però con quello ora sono come dico io...

[vampiretta]

Allora sto zitta se lo dice laburno siamo in una botte di ferro.
E' il mio mito ormai.

[andreatop]

anche per me... sa tutto + tutto + tutto sui css!
quindi... ecco brava... lecchiamogli il sedere

comunque vorrei capire come mai devo mettere windth: X; e float: left;
vorrei capire proprio cosa fanno!
Laburno mi spieghi un pochino per favore...

[vampiretta]

Su float: left allinea l'elemento a sinistra.

Invece il width: x l'ho provato ieri e non l'ho ben capito. Credo faccia si l'elemento si adatti in larghezza a seconda di cosa ci viene messo dentro.

[andreatop]

Ma quindi dici che basterebbe l'allineamento a sx? Cioè basterebbe il float: left? Ora non sono in grado di provare che sono a lavoro, quando ho tempo provo a casa. Grazie cmq dei tuoi sforzi!