[CSS] Div che non stanno in linea

Con Div


Con Tabella


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

Ed ecco il codice Html dei div

<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

#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...

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

[SolitaryExplorer]

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

[mythologia]

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

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...

#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;
}

[SolitaryExplorer]

Se dai una dimensione percentuale a #mainNavbarDiv?

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?

[SolitaryExplorer]

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:

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

.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:

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... :\

[SolitaryExplorer]

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

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

<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>

[SolitaryExplorer]

Metti i tag tra tbody e table.

Metti i tag tra tbody e table.

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

[SolitaryExplorer]

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.