[CSS] Div che non stanno in linea

Con Div
http://img522.imageshack.us/img522/4...nter001hz4.png

Con Tabella
http://img462.imageshack.us/img462/6...nter002ut3.png

Inutile dirvi che quello corretto è quello fatto con la tabella...

Ed ecco il codice Html dei div

Codice:

---

<div id="navbarDiv">
        <div id="rightNavbarDiv">a</div>
        <div id="mainNavbarDiv">b b b b b b b b b b b</div>
        <div id="leftNavbarDiv">c</div>
</div>

---

Ed ecco il codice Css applicato

Codice:

---

#navbarDiv {
        position: relative;
        top: 0px;
        height: 29px;
}

#rightNavbarDiv {
        position: relative;
        top: 0px;
        left: 10px;
        background-image: url(nb_top_sx.png);
        background-repeat: no-repeat;
        height: 29px;
}

#mainNavbarDiv {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
        color: #FFFFFF;
        background-image: url(nb_top_cx.png);
        background-repeat: repeat-x;
        height: 29px;
}

#leftNavbarDiv {
        position: relative;
        top: 0px;
        right: 10px;
        background-image: url(nb_top_dx.png);
        background-repeat: no-repeat;
        height: 29px;
}

---

Sicuramente è qualche proprietà tipo float, clear ma sinceramente non ci ho mai capito nulla nemmeno con la guida sotto mano... :roll:

Se pazientemente qualche santo potrebbe illuminarmi sulla dinamica dell'allineamento su singole linee di div gliene sarei grato :lol:

Hai già provato con un semplice "float: left" al posto di "position: ..."?

Io proverei a ridurre di un pixel left e right nei rispettivi div...

http://img337.imageshack.us/img337/8...nter001jb7.png

Ora va, ma c'è ancora un problemino... Dovrebbe avere dimensione fissa... Nel senso che dovrebbe occupare il 95% dello spazio del div padre... Solo che salta questa direttiva...

Codice:

---

#navbarDiv {
        position: relative;
        top: 0px;
        height: 29px;
        width: 95%;
}

#rightNavbarDiv {
        /*
        position: relative;
        top: 0px;
        left: 10px;
        */
        background-image: url(nb_top_sx.png);
        background-repeat: no-repeat;
        height: 29px;
        width: 10px;
        float: left;
}

#mainNavbarDiv {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
        color: #FFFFFF;
        background-image: url(nb_top_cx.png);
        background-repeat: repeat-x;
        height: 29px;
        float: left;
}

#leftNavbarDiv {
        /*
        position: relative;
        top: 0px;
        right: 10px;
        */
        background-image: url(nb_top_dx.png);
        background-repeat: no-repeat;
        height: 29px;
        width: 10px;
        float: left;
}

---

Se dai una dimensione percentuale a #mainNavbarDiv?

Citazione:

---

Originalmente inviato da SolitaryExplorer

Se dai una dimensione percentuale a #mainNavbarDiv?

---

Si ma non è quello che voglio, così facendo solo il div che contiene i link è grande 95% mentre io voglio che tutta la nav sia grande il 95% del div padre...

Come posso ovviare?

Prova a togliere il "position", dare un "float: left a i 3 div figli e a quello centrale dai un "width: X%" dove X sta per il valore che ti fa allargare il div senza mandare a capo quello successivo.

Potevi anche semplificare con una struttura tipo:

Codice HTML:

---

<div class="menu"><div class="content">Menu 1 Menu 2</div></div>

---

Codice:

---

.menu {
        margin: 0 auto;
        width: 95%;
        background: url(nb_top_sx.png) bottom left no-repeat;
}
.cont {
        height: 29px;
        padding: 0 10px;
        background: url(nb_top_dx.png) bottom right no-repeat;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
        color: #FFFFFF;
}

---

Non ho testato il codice personalmente ma dovrebbe funzionare.
Unisci l'immagine di sinistra con quella per il centro.

Se il tuo obiettivo è di appiccicarla al bordo superiore, dai l'istruzione:

Codice:

---

html,body {margin-top: 0; padding-top: 0}

---

Risolto dando la dimensione al div centrale...

Solo una cosa, lo spazio bianco che IE mette alla fine e all'inizio della tag <form> come lo levo?! Ho cercato su google ma nada... :\

Si usa un hack.
Posta il codice dove si trova il form.
Con le tebelle per esempio si usava qualcosa tipo:

Codice HTML:

---

<table><tr><form><td></td></form></tr></table>

---

Codice:

---

<form action="accedi.php" name="accedi" method="post">
<input name="form[do]" value="1" type="hidden">
<table class="tblcontent" border="0" cellpadding="3" cellspacing="0" width="100%">
  <tbody><tr>
    <td align="right" width="55%"><b>e-Mail</b></td>

    <td><input name="form[mail]" type="text"></td>
  </tr>
  <tr>
    <td align="right" width="55%"><b>Password</b></td>
    <td><input name="form[password]" type="password"></td>
  </tr>
  <tr>
    <td align="right" valign="middle" width="55%"><b>Codice di attivazione</b> <input name="form[disable_codice]" value="1" type="checkbox"></td>

    <td><input name="form[codice_attivazione]" disabled="disabled" type="text"></td>
  </tr>
  <tr>
    <td align="right" width="55%"><b>Vuoi connetterti automaticamente al prossimo accesso?</b></td>
    <td><input name="form[autologin]" value="1" type="radio">Si<br><input name="form[autologin]" value="0" checked="checked" type="radio">No</td>
  </tr>
  <tr>
    <td colspan="2" align="right"><br><br>Nel caso di verifichino dei problemi nel riempimento del modulo, utilizzare il seguente <a href="feedback.php?feed=error">modulo di feedback</a>. Grazie</td>

  </tr>
  <tr>
    <td colspan="2" align="right"><input value="« Svuota i campi" type="reset"> <input value="Accedi »" type="submit"></td>
  </tr>
</tbody></table>
</form>

---

Metti i tag tra tbody e table.

Citazione:

---

Originalmente inviato da SolitaryExplorer

Metti i tag tra tbody e table.

---

Ok, ora va... Con questo sistema non ci sono problemi di validazione vero? :roll:

Il validatore automatico non da problemi, ma per sicurezza valida tu la pagina.
Non credo però che ci possano essere problemi con i vari doctype.