Problème de contenu, Sauvez moi la vie ^^

Coucou tout le monde =)

Voilà je viens demander votre aide car ca fait un bon petit moment que je suxx à un endroit

En fait mon problème est que ma div "vignettes" ne se répète pas sur la hauteur

Voici mon code :

<div id="vignettes" align="center">
    <div id="ah">
        <div id="contenu_vignette">
            <div id="haut_v">Title 1</div>
            <a href="#"><img style="margin-left: 5px; margin-top: 5px;" src="videos/image.png" /></a>
            <div id="bas_v">Title 2</div>
        </div>
    </div>
    
    <div id="ah">
        <div id="contenu_vignette">
            <div id="haut_v">Title 1</div>
            <a href="#"><img style="margin-left: 5px; margin-top: 5px;" src="videos/image.png" /></a>
            <div id="bas_v">Title 2</div>
        </div>
    </div>
    
    <div id="ah">
        <div id="contenu_vignette">
            <div id="haut_v">Title 1</div>
            <a href="#"><img style="margin-left: 5px; margin-top: 5px;" src="videos/image.png" /></a>
            <div id="bas_v">Title 2</div>
        </div>
    </div>
    
    <div id="ah">
        <div id="contenu_vignette">
            <div id="haut_v">Title 1</div>
            <a href="#"><img style="margin-left: 5px; margin-top: 5px;" src="videos/image.png" /></a>
            <div id="bas_v">Title 2</div>
        </div>
    </div>
    
    <div id="ah">
        <div id="contenu_vignette">
            <div id="haut_v">Title 1</div>
            <a href="#"><img style="margin-left: 5px; margin-top: 5px;" src="videos/image.png" /></a>
            <div id="bas_v">Title 2</div>
        </div>
    </div>
    
    <div id="ah">
        <div id="contenu_vignette">
            <div id="haut_v">Title 1</div>
            <a href="#"><img style="margin-left: 5px; margin-top: 5px;" src="videos/image.png" /></a>
            <div id="bas_v">Title 2</div>
        </div>
    </div>
    
    <div id="ah">
        <div id="contenu_vignette">
            <div id="haut_v">Title 1</div>
            <a href="#"><img style="margin-left: 5px; margin-top: 5px;" src="videos/image.png" /></a>
            <div id="bas_v">Title 2</div>
        </div>
    </div>
    
    <div id="ah">
        <div id="contenu_vignette">
            <div id="haut_v">Title 1</div>
            <a href="#"><img style="margin-left: 5px; margin-top: 5px;" src="videos/image.png" /></a>
            <div id="bas_v">Title 2</div>
        </div>
    </div>
</div>

Voici mon CSS :

#vignettes{
	background: url('images/transparent-bg.png');
	border: 1px solid black;
	width: 960px;
	margin: auto;
	min-height: 500px;
	position: relative;
}

#ah{
	position: relative;
	width: 308px;
	height: 232px;
	float: left;
	margin-left: 5px;
	margin-top: 5px;
}

#contenu_vignettes{
	width: 308px;
	height: 232px;
	position: relative;
}

#haut_v{
	margin-left: 5px;
	top: 5px;
	width: 308px;
	height: 25px;
	background: url('images/transparent-bg.png');
	position: absolute;
	line-height: 25px;
	vertical-align: middle;
	color: #FFF;
}

#bas_v{
	margin-left: 5px;
	top: 205px;
	width: 308px;
	height: 32px;
	background: url('images/transparent-bg.png');
	position: absolute; 
	line-height: 32px;
	vertical-align: middle;
	color: #FFF;
	font-size: 16px;
}

voici un apercu de mon problème :

http://www.noelshack.com/up/aac/test-33386b5042.jpg

Le fond "sombre" ne se répète pas sur la hauteur et ça me pompe le cerveau tonight ^^

Merci d'avance pour une aide (k)

cordialement,
noxo.
Modifié par noxo. (28 Jan 2010 - 00:41)

Re all ^^

J'ai finalement trouvé une meilleur solution ^^

J'ai utilise un tableau et tout roule sur des roulettes désormais

Merci tout de même ^^

En passant, l'utilisation faite de l'attribut id est erronée. D'ailleurs la page ne doit pas être valide.

Attention à ne pas confondre id et class, qui ont des rôles différents!

Bonjour,

Ton problème était un dépassement des flottants.

Accessoirement, utiliser le positionnement relatif et les flottants ne sert à rien, il faut choisir l'un des deux.

Laurie-Anne a écrit :
Accessoirement, utiliser le positionnement relatif et les flottants ne sert à rien, il faut choisir l'un des deux.

Absolument pas, c'est même souvent bien utile…

Laurie-Anne a écrit :
Accessoirement, utiliser le positionnement relatif et les flottants ne sert à rien.

Je dirais, pour mettre tout le monde d'accord, que les deux positionnements communs peuvent être très utiles... mais à condition de très bien les comprendre et les maîtriser, ce qui est rarement le cas.
Modifié par Raphael (28 Jan 2010 - 10:25)

Ben a écrit :
Absolument pas, c'est même souvent bien utile…

Raphael a écrit :
Je dirais, pour mettre tout le monde d'accord, que les deux positionnements communs peuvent être très utiles... mais à condition de très bien les comprendre et les maîtriser, ce qui est rarement le cas.

@Ben&Raph : J'avoue humblement ne pas être très à l'aise non plus avec l'appairage de ces deux propriétés

Pourriez-vous agrémenter vos réponses de quelques explications complémentaires, exemples bien sentis, liens interessants, si cela ne vous embête pas ?

Bah les gens, faut pas tous mélanger.
Trois cas de figure:

1. Je fais flotter mon bloc parce que j'ai besoin de ça pour le positionner (en général pour placer des blocs ou contenus côte-à-côte).

2. Je mets mon bloc en position:relative (sans utiliser [i]top, right[/i], bottom ou left) parce que je veux qu'il serve de référent à ses enfants et descendants positionnés en absolu.

3. Je positionne mon bloc en relatif et utilise des propriétés de coordonnées (top ou bottom, left ou right) parce que je veux légèrement décaler le bloc par rapport à sa position «normale». J'insiste sur l'adverbe «légèrement», s'il y a trois chiffres (ex: top: -180px) c'est très probablement une connerie.

Voilà pour l'essentiel. Ensuite, rien n'empêche de combiner pour un même élément les cas de figure #1 et #2, #1 et #3, #2 et #3, et même #1, #2 et #3.

6l20 a écrit :
Pourriez-vous agrémenter vos réponses de quelques explications complémentaires

Florent m'a devancé

Florent V. a écrit :
rien n'empêche de combiner pour un même élément les cas de figure #1 et #2