problema di posizioni

[techno]

Salve stoa vendo dei problemi con posizionamento di alcuni elmente all'interno di un box div difatti gli oggetti sono 3 un campo testo e due select ecco il codice:

<style>
body {
	margin: 0px;
	padding: 0px;
	background-color: #CCC;
}
#contenttop{
	position:relative;
	margin: 0;
	padding: 0;
	width:100%;
	height:120px;
	background-image:url(../images/document/bg_top.png);
	background-repeat: repeat-x;
	background-position: left top;
}
#top {
	position:relative;
	margin: 0 auto;
	padding: 0px;
	height: 120px;
	width: 900px;
	background-image: url(../images/document/bg_top_center.png);
	background-repeat: repeat-x;
	background-position: left top;
}
input.search {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #999;
	border: 0px;
	background-color:#FFF;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	behavior: url(border-radius.htc);
	padding: 2px 5px 2px 5px;
	width: 300px;
	height: 16px;
	margin-right:10px;
	left: 0px;
	float:left;
}
select.search {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #999;
	border: 0px;
	background-color:#FFF;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	behavior: url(border-radius.htc);
	padding: 2px 5px 2px 5px;
	width: 160px;
	margin-riht:10px;
	float:left;
}
</style>
...
<div id="contenttop">
<div id="top">
<div id="contentsearch">
<form method="post" action="">
<input name="ricerca" type="text" class="search" id="ricerca" value="cosa vuoi cercare?" size="60" />
<select name="categoria" class="search">
<option value="All" selected="selected">tutte le categorie</option>
</select>
<select name="regione" class="search">
        <option value="All" selected="selected">Tutta Italia</option>
        <option value="R01">Abruzzo</option>
        <option value="R02">Basilicata</option>
        <option value="R03">Calabria</option>
        <option value="R04">Campania</option>
        <option value="R05">Emilia Romagna</option>
        <option value="R06">Friuli-Venezia Giulia</option>
        <option value="R07">Lazio</option>
        <option value="R08">Liguria</option>
        <option value="R09">Lombardia</option>
        <option value="R10">Marche</option>
        <option value="R11">Molise</option>
        <option value="R12">Piemonte</option>
        <option value="R13">Puglia</option>
        <option value="R14">Sardegna</option>
        <option value="R15">Sicilia</option>
        <option value="R16">Toscana</option>
        <option value="R17">Trentino-Alto Adige</option>
        <option value="R18">Umbria</option>
        <option value="R19">Valle d'Aosta</option>
        <option value="R20">Veneto</option>
      </select>
</form>
</div>
</div>
</div>

Il problema e che il campo testo "ricerca" deve comparire sulla sinistra seguito dalla select "categoria" e successivamente dal select "regione" ma invece il campo testo "ricerca" mi compare la centro seguito dai 2 select.

[Mich_]

Non hai definito formattazione per gli oggetti <div id="contentsearch"> e <form ..>. Questo puo` dare liberta` ai browser di usare la loro formattazione interna.

Prova a definire per ambedue:
width: 100%;
margin:0;
border: 0;
padding: 0;


Inoltre il tuo width: 100% nonha significato, dato che non e` riferito ad una misura: dovresti dare width:100% anche agli oggetti body e html, per poter poi usare le % agli oggetti interni.

Non capisco l'uso che fai dei posizionamenti relativi (hai qualcosa posizionato assoluto all'interno?).

Se ancora hai problemi, da` (solo per le prove) sfondi colorati (con colori diversi) a tutti gli elementi, in modo da capire il loro esatto posizionamento (a volte si hanno delle sorprese, quando si danno dei colori).

[techno]

allora ho fatto delle prove dando la percentuale per occupare lo spazio del box contenitore:

<div style="position:relative; width:300px;">
<div style="position:relative; width:100%; background-color:#900;">cella 1</div>
<div style="position:relative; width:50%; background-color:#0F0; float:left">cella 2a</div>
<div style="position:relative; width:50%; background-color:#F0F;">cella 2b</div>
<div style="position:relative; width:100%; background-color:#FF0;">cella 3</div>
</div>

qui la cella 2b mi copre anche la cella 2a

[techno]

ora vi posto quello che mi serve:

<style>

</style>
...
#mappa{
	position:relative;
	margin:0;
	padding:0;
	width:298px;
        border:#AFA solid 3px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	behavior: url(border-radius-htc);
	margin-right:10px;
	float:left;
}
#vetrina{
	position:relative;
	margin:0;
	padding:5px;
	border: #FAA solid 3px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	behavior: url(border-radius.htc);
	margin-right:10px;
	width:580px;
}
...
<div id="mappa"></div>
<div id="vetrina"></div>

il box vetrina accavalla il box mappa e non riesco a capire il perchè.

[Mich_]

Ripeto: perche` usi i posizionamenti dentro elementi che vanno flottati?

Prova a togliere i position e dare invece il float:left anche al box 2b.

E controlla che in larghezza ci stiano: il box che contiene vetrina e mappa deve essere largo almeno 910px (314 per mappa e 596 per vetrina), meglio qualche px in piu` per le prove.

PS: il contenitore di due float dovra` poi avere un clear alla fine (fa' una ricerca nel forum con il termine "clearing": ci sono infinite discussioni su tale tema)