Immagini in dei div...come metterle tutte attaccate una accanto all'altra?

**AndreaNobili** · 21-10-2009, 15:26

Ciao,
se andate quì potete vedere cosa c'è che non và: http://www.siatec.net/andrea/header/index.html

Praticamente ho dei div: ogni div contiene al proprio interno un'immagine...
in sostanza le immagini devono essere messe una accanto all'altra in modo da formare un'unica immagine ma come potete vedere non mi funziona: l'immagine del div left1 a sinistra, poi attaccata alla sua destra quella del div left2, alla sua destra quella di middle, etcetc

Il codice html è:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<div id="header">
	<div id="left1"></div>
    <div id="left2"></div>
    <div id="middle"></div>
    <div id="right1"></div>
    <div id="right2"></div>
</div>

</html>

Mentre il codice CSS è:

codice:

body{
	background-color: #000000;
	}
	
#header{
	height: 200px;
	width: 980px;
}

#left1{
	background-image: url(images/banner1.gif);
	background-repeat: no-repeat;
	height: 200px;
	}

#left2{
	background-image: url(images/banner2.gif);
	background-repeat: no-repeat;
	height: 200px;
	float: left;
}

#middle{
	background-image: url(images/banner0.jpg);
	background-repeat: no-repeat;
	height: 200px;
	float: left;
}

#right1{
	background-image: url(images/banner3.gif);
	background-repeat: no-repeat;
	height: 200px;
	float: left;
}

#right2{
    background-image: url(images/banner4.gif);
	background-repeat: no-repeat;
	height: 200px;
	float: left;
}

Mi date una manina?
Grazie
Andrea

**moonba** · 21-10-2009, 15:45

..non hai impostato le larghezze per ogni div che contiene un img in bg.

**Mich_** · 21-10-2009, 15:50

La cosa piu` semplice e piu` corretta sarebbe mettere l'immagine unica come sfondo dell'oggetto header.

Comunque anche il tuo metodo puo` funzionare in quasi tutti i browser, ma devi definire la larghezza in px per ognuno dei blocchi affiancati; inoltre in ciascun blocco devi definire
margin: 0;
padding:0;
Poi ci dovra` essere un clear, che puoi mettere alla fine del contenitore, come proposto nella discussione [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float

Tieni presente che se la somma delle larghezze supera la larghezza del contenitore, i blocchi che non ci stanno andranno a capo.

**AndreaNobili** · 21-10-2009, 15:51

Risolto da me...mi ero dimenticato di mettere la lunghezza dei div doh...sbadataggine...

**AndreaNobili** · 21-10-2009, 15:53

Originariamente inviato da Mich_
La cosa piu` semplice e piu` corretta sarebbe mettere l'immagine unica come sfondo dell'oggetto header.

Comunque anche il tuo metodo puo` funzionare in quasi tutti i browser, ma devi definire la larghezza in px per ognuno dei blocchi affiancati; inoltre in ciascun blocco devi definire
margin: 0;
padding:0;
Poi ci dovra` essere un clear, che puoi mettere alla fine del contenitore, come proposto nella discussione [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float

Tieni presente che se la somma delle larghezze supera la larghezza del contenitore, i blocchi che non ci stanno andranno a capo.

eh si ma alcune immagini contengono un effetto movimento (gif animata...mentre le altre sono delle jpg)

Potresti gentilmente rinfrescarmi la mente sul perchè mettere il clear left finale? dove lo dovrei mettere?Se non lo mettessi che succederebbe?

Grazie
Andrea

Discussione: Immagini in dei div...come metterle tutte attaccate una accanto all'altra?

Strumenti discussione

Ricerca discussione

Visualizza

Immagini in dei div...come metterle tutte attaccate una accanto all'altra?

Permessi di invio