28220 sujets

CSS et mise en forme, CSS3

[Résolu] Centrer 3 div dans une div...

Salut
je ne connaissais pas ce forum Smiley ohwell
J'espère que vous allez pouvoir m'aider Smiley biggrin
Voila mon problème:
- Pourquoi les cadres contenant "vignette 1", "vignette 2", "vignette 3" ne sont-ils pas centrés dans leur "cadreVignetteAccueil" respectives alors que "lien 1", "lien 2", "lien 3" le sont?
- Pourquoi la div1 n'englobe pas tout (on voit que la bordure s'arrete en haut des "cadreVignetteAccueil") ?

J'ai les mêmes problèmes sous IE que sous firefox.


<head>
<style>
.cadreVignette{width:160px;height:123px;border:1px #ff0000 solid;float:left;}
.cadreVignetteAccueil{width:33%;border:1px #00FFFF solid;text-align:center;}
.divIndex{position:relative;margin:5px;text-align:center;border:1px #000000 solid;}
.floatLeft{float:left;}
.separateur{clear:left;visibility:hidden;margin:0;padding:0;height:0;}
</style>
</head>
<body>

<div style="border:1px #FF0000 solid;" id="div1">
	<div class="divIndex" id="div2">
		bla bla bla
	</div>
	<div class="divIndex" id="div3">
		<br>Titre
		<div class="floatLeft cadreVignetteAccueil">
			<div class="cadreVignette">vignette 1
			</div>
			<hr class="separateur">
			<a href="#">lien 1</a>
		</div>
		<div class="floatLeft cadreVignetteAccueil">
			<div class="cadreVignette">vignette 2
			</div>
			<hr class="separateur">
			<a href="#">lien 2</a>
		</div>
		<div class="floatLeft cadreVignetteAccueil">
			<div class="cadreVignette">vignette 3
			</div>
			<hr class="separateur">
			<a href="#">lien3</a>
		</div>
	</div>
</div>

</body>


Merci pour vos réponses

edit: arf... l'indentation est perdue...
Modifié par jeromax (25 Mar 2005 - 15:41)
Slt,
tu devrais commencer par corriger ton, il est bourré d'erreurs:
a écrit :
<div class="divIndex" id="div3">
Tu déclares une classe et un id, pourquoi?
Le position:relative; ne sert a rien, supprime le.
a écrit :
<div class="floatLeft cadreVignetteAccueil">

Cela veut rien dire écrit plutot ce qui suit et met float:left; dans la classe cadreVignetteAccueil.
<div class="cadreVignetteAccueil">

Enfin pour aligner tes vignettes supprime float:left; dans:
.cadreVignette{width:160px;height:123px;border:1px #ff0000 solid;float:left;}

Quant à ton div1 je n'ai pas encore
Modifié par ocb2b (25 Mar 2005 - 21:38)
En ce qui concerne le div1 tu dois déclarer:
<div class="cadreVignetteAccueil" style="float:none; ">
dans ta troisième vignette.
Voilà j'espère que ca marchera chez toi Smiley smile
Merci ! !
ça fonctionne ! ouf !

Quelles sont les erreurs dans ce que j'ai donné?
Des erreurs de validité?
J'ai donné une page ultra-allégée pour ne voir que l'essentiel. Les id ne servent ici qu'à nommer les div pour vous exposer mon problème.
Pour le float:left, j'ai décidé de l'externaliser car je m'en sert un peu partout et j'ai des cadreVignette qui ne l'utilisent pas.
Et dans ce que j'ai déclaré, class="floatLeft cadreVignetteAccueil" veut dire quelque chose Smiley cligne
En tous cas merci beaucoup ! !
Bonne soirée !
Smiley biggrin Smiley biggrin
Modifié par jeromax (25 Mar 2005 - 22:11)
dsl je n'ai pas l'habitude de coder ainsi je n'avais pas compris ce que ca voulais dire au debut Smiley lol . Je préfère utiliser des style="" pour les exceptions et déclarer les floats dans la classe.
Sujet clos
Aller à