affiancare 2 div

**iko82** · 23-04-2007, 09:47

Ciao a tutti.
Chiedo scusa se la domanda è un po banale ma sto utilizzando i css da poco...

Vorrei realizzare un layout come quello che allego.
Ho cosi realizzato il seguente css:

codice:

* {
	padding: 0;
	margin: 0;
}
body {
	color: #333;
	font: small/1.6em "Trebuchet MS", Arial, sans-serif;
	text-align: center;
	background: #2680ba;
}




#container {
	width: 100%;
	height: 750px;
	text-align: left;
	background: #2680ba url(../img/background.jpg) repeat-y;
	background-position: center;
}
#header	{
	width: 100%;
	height: 96px;
	text-align: left;
	background: #091f2d url(../img/header.jpg) repeat-y;
	background-position: center;	
}
#footer	{
	width: 100%;
	height: 57px;
	text-align: left;
	background: #2680ba url(../img/footer.jpg) repeat-y;
	background-position: center;	
}


#loginbox {
	width: 100%px;
	height: 64px;
	background: url(../img/loginbox.jpg) no-repeat;
	background-position: center;
	margin-left: -240px;
	padding-top: 25px;
}
#login {
	width: 100%;
	text-align: center;
	padding-top: 8px;
}


#subscribebox {
	float:left;
	width: 100%;
	height: 240px;
	background: url(../img/subscribebox.jpg) no-repeat;
	background-position:center;
	margin-left: -78px;
}

#topblogbox {
	width: 100%;
	height: 333px;
	background: url(../img/topblogbox.jpg) no-repeat;
	background-position:center;
	margin-left: 280px;

}

E il seguente html:

codice:

<body>


            <div id="header">

	
	</div>



	<div id="container">

		<div id="loginbox">
		
				<div id="login">
			
					<form class="niceform">

						<label for="textinput">Username</label>
						<input type="text" id="textinput" name="textinput" size="8" />
				
						
				
						<label for="passwordinput">Password</label>
						<input type="password" id="passwordinput" name="passwordinput" size="8" />
		
						
				
						<input type="submit" value="accesso" />
				
					</form>
				</div>	

		</div>


		<div id="subscribebox">
			

		
		</div>
		
		<div id="topblogbox">

		
		</div>
		
		
	</div>


	<div id="footer">

	
	</div>


</body>

Nonostante il layout sia corretto se visualizzato con firefox, mi chiedo come mai questo non lo sia se visualizzato con ie. Dove sbaglio? Vorrei un parere da voi esperti, secondo voi il codice è scritto male?
Inoltre se scrivo all'interno dei due tag div affiancati non visualizzo i caratteri all'interno dei rispettivi box... Non capisco come mai...

Grazie
Ciao
Fede

**iko82** · 23-04-2007, 11:44

Chiedo scusa... Ho visto che il file non è stato allegato per non so quale motivo...
Questo è il risultato che vorrei ottenere...

Qualche consiglio?

**cortex** · 23-04-2007, 12:08

ad occhio manca il float nel login box.
cmq prova a dare un occhio ai layout a 2 colonne che ci sono nelle guide dei css

**iko82** · 23-04-2007, 12:10

Originariamente inviato da cortex
ad occhio manca il float nel login box.
cmq prova a dare un occhio ai layout a 2 colonne che ci sono nelle guide dei css

Ma il login box non deve flottare... sono i due box sotto che si devono affiancare... e nel box di sx il float c è.

**cortex** · 23-04-2007, 12:21

oh scusa, non avevo capito!

ora... se ho capito... controlla il width di #topblogbox e di #subscribebox entrambi a 100%?

**iko82** · 23-04-2007, 12:26

Originariamente inviato da cortex
oh scusa, non avevo capito!

ora... se ho capito... controlla il width di #topblogbox e di #subscribebox entrambi a 100%?

Si infatti anche a me questa cosa non convince... Però.. Se setto il width in pixel quando ridimensiono la pagina i box si spostano... Mentre io vorrei che la pagina nel caso venisse ridimensionata non subisse variazioni, inoltre settando 80% e 20% rispettivamente i box non si vedono completamente...
La cosa che davvero non capisco è xchè ie mi fa vedere il box di dx sotto a quello di sx...

**cortex** · 23-04-2007, 12:28

si sposta sotto perchè sfora
cmq ti consiglio di fare una prima prova seguendo la guida dei layout che trovi qui

**iko82** · 23-04-2007, 13:05

Originariamente inviato da cortex
si sposta sotto perchè sfora
cmq ti consiglio di fare una prima prova seguendo la guida dei layout che trovi qui

Ho modificato le due definizioni di div cosi:

codice:

#subscribebox {
float:left;
width:556px;
height: 240px;
background: url(../img/subscribebox.jpg) no-repeat;
}

#topblogbox {
float:right;
float:134px;
height: 333px;
background: url(../img/topblogbox.jpg) no-repeat;
}

Ora il risultato in visualizzazione è anche corretto (salvo per le differenze fra 2 i browser). Per ridimensionando la pagina i due box restano ancorati li dove sono e non si ridimensionano con la pagina....

Qualche idea?

**iko82** · 23-04-2007, 16:19

Nessun suggerimento?

Forse mi sono spiegato malissimo. Provo a riformulare meglio la domanda.

Ho questo layout:

codice:

body {
	position:relative;
	color: #333;
	font: small/1.6em "Trebuchet MS", Arial, sans-serif;
	text-align: center;
	background: #2680ba;
}

#container {
	width: 100%;
	height: 750px;
	text-align: left;
	background: #2680ba url(../img/background.jpg) repeat-y;
	background-position: center;
}
#header	{
	width: 100%;
	height: 96px;
	text-align: left;
	background: #091f2d url(../img/header.jpg) repeat-y;
	background-position: center;	
}

In questo modo cambiando le dimensioni della finestra del browser il contenuto viene ridimensionato mantenendo la stessa dimensione della colonna centrale accorciando solo lo spazio sui bordi.

Quello che vorrei ottenere è l'inserimento di un tag div all'inizio del bordo sinistro della colonna centrale che si sposti nel ridimensionamento con la colonna centrale stessa...
Davvero non c'è nessuno in grado di darmi un suggerimento?

Discussione: affiancare 2 div

Strumenti discussione

Ricerca discussione

Visualizza

affiancare 2 div

Permessi di invio