Problema con float

**ResianTaxidrive** · 20-02-2008, 11:03

Allora ho due immagini, una è il logo l'altra è un banner. Voglio che il logo appaia un po' sopra il banner (visto che cmq quest'ultimo ha parti bianche) e non riesco. Ho fatto così:

stili:

codice:

#logo {
	background-image: url(logo.jpg);
	background-repeat: no-repeat;
	height: 80px;
	width: 80px;
	margin-top: 0px;
	margin-left: 370px;
	float: left;
}
#banner {
	background-image: url(banner.jpg);
	background-repeat: no-repeat;
	height: 200px;
	width: 788px;
	float: none;
}

html:

codice:

<body>
<div id="contenitore">
  <div id="logo">
  </div>
    <div id = "banner" >
    </div>
  </div>
</div>
</body>

FF ha il risultato più simile, mettendo il logo a float, il banner mi va a finire sotto; ie7 invece lascia i due oggetti ben distinti (non mi immagino ie6 cosa potrebbe combinare). Inoltre se metto il margin-top del banner diciamo a 30, ie7 aumenta la distanza tra i due (il comportamento mi pare ragionevole) mentre FF sposta in basso il logo e il banner e non capisco perchè li considera come un tuttuno.
Che cavolo, in alternativa come potrei fare?

**ricmanx** · 20-02-2008, 13:13

Non ho capito bene il tuo problema... però probabilmente togliendo i due "margin" del logo, assegnando la "position: relative;" e poi un "left:370px" ottieni qualcosa simile a ciò che ho interpretato io dal tuo post...

**gengix** · 20-02-2008, 14:51

Per prima cosa attenzione perchè hai messo una chiusura di div in più.
Se ho capito bene prova così:
css:

#logo {
background: url(europe_empty.jpg) no-repeat center top;
height: 80px;
width: 80px;
float: left;
border:solid 1px #000;
}
#banner
{
background:url(europe_empty.jpg) no-repeat center top;
height: 200px;
width: 788px;
margin-left:-30px;
border:solid 1px #000;
float: left;
}

**ResianTaxidrive** · 20-02-2008, 15:46

ancora non mi funziona, allego delle immagini per far capire:
1) quello che voglio ottenere:

**ResianTaxidrive** · 20-02-2008, 15:47

scusate non capisco come allegare più immagini.

2) con internet explorer

**ResianTaxidrive** · 20-02-2008, 15:47

con firefox.

Le scritte solo per capire gli elementi.

**gengix** · 20-02-2008, 15:53

quello che vuoi ottenere è nell'ultima immagine vero?

**gengix** · 20-02-2008, 15:54

A posto ho visto, è la prima immagine.

**gengix** · 20-02-2008, 16:11

Prova così, a me va con tutti i browser compreso IE5,

css:
*
{
margin:0;
padding:0;
}
#contenitore /*for IE5*/
{
text-align:center;
}
#banner
{
margin: 0 auto;
margin-top:40px;
padding:0;
background:red;
height: 200px;
width: 788px;
}
#logo {
margin: 0 auto;
padding:0;
margin-top:-240px;
background:#000;
height: 80px;
width: 80px;
}

struttura:

<div id="contenitore">
<div id="banner">
</div>
<div id="logo">
</div>
</div>

io li ho centrati in mezzo alla pagina, te farai come credi, ho impostato delle altezze fittizie

**ResianTaxidrive** · 20-02-2008, 16:24

Grazie mille, ora va! che lotta però.
Ho visto il valore negativo del margin-top, pensavo che ie6 desse problemi perchè ieri da un'altra parte avevo messo un valore negativo nel margine sinistro e ie6 mi tagliava un pezzo dell'immagine.

Discussione: Problema con float

Strumenti discussione

Ricerca discussione

Visualizza

Problema con float

Permessi di invio