Mise en place de Div

Salut,

Je ne parviens pas à aligner 3 images ... ou div ... dans une div ...

Je veux aligner les cases rouges (.ex) dans la Div .Visio, mais je n'y arrive pas, elle se positionne toujours en dessous de la Div ...

Enfin bref images pour comprendre :

Ce que je veux:

http://www.yank.fr/css/css.jpg

HTML :

<div id="frame">

<div id="visio">

<div class="encart"><img src="photo1.jpg" alt="" width="398" height="272" /></div>

<div class="ex">
<img src="photo1.jpg" alt="" width="76" height="76" />
</div>

</div>

<p>Blablabla</p>

</div>

CSS :

#frame {
	margin-left: 268px;
	margin-right: 123px;
	background-color:#FFFFFF;
	margin-top: -70px;
	margin-bottom: 25px;

}

#visio {

	width: 496px;
	height: 272px;
	margin:auto;
	padding-top: 20px;
	background-color:#00FF66;
}

.encart {
	background-color:#006633;
}

.ex {
	background-color:#003333;

}

Si quelqu'un veux bien me filer un pti coup de main

Merci

Salut,

ben pour commencer on dirait bien que tes images sont purement décoratives (pas de alt) et donc elles n'ont rien à faire dans le code HTML : elles devraient être en background CSS.

Ensuite elles sont dans des DIV (éléments ayant un rendu de bloc) et tu ne fais rien pour contrecarrer ce rendu (passage automatique à la ligne), typiquement en utilisant float... Donc je ne saisis pas très bien.

Heyoan a écrit :
Salut,

ben pour commencer on dirait bien que tes images sont purement décoratives (pas de alt) et donc elles n'ont rien à faire dans le code HTML : elles devraient être en background CSS.

Ensuite elles sont dans des DIV (éléments ayant un rendu de bloc) et tu ne fais rien pour contrecarrer ce rendu (passage automatique à la ligne), typiquement en utilisant float... Donc je ne saisis pas très bien.

Oui désolé je me suis mal expliqué, bon c'est clair que pour le moment mon code n'est pas propre du tout car je fais des tests donc voila la raison au "manquement" des Alt.

Par la suite à la place de ces blocs rouge, il y aura 1 vignette (Soit une image / Soit un Flash) qui affichera le contenu dans la grande image (une sorte de galerie ...)

Concernant les

Float

j'ai déjà essayé justement ...

Je vais voir ce que je peux faire pour vous fournir plus d'explications ...

Hello,

C'est une simple question de positionnement, non? Vu le schéma, il s'agit de juxtaposer horizontalement deux éléments. Tu peux faire ça avec un flottant, ou bien en utilisant display:table-cell, voire en utilisant un tableau de mise en forme (ce qui n'est pas conseillé en règle générale).

Si tu penses avoir des lacunes en positionnement CSS, je te laisse lire ou relire le Guide de survie du positionnement CSS, et les articles indiqués comme ressources.

Si tu penses savoir quel type de positionnement utilisé, mais que pour une raison ou une autre ça ne marche pas, il faudrait nous montrer ce que tu as tenté pour positionner tes blocs. Dans le code que tu as donné, je ne vois aucune propriété de positionnement et plus généralement rien qui serait censé placer les blocs côte-à-côte.

Normalement un float:left et un width sur .encart devrait faire l'affaire.

Tu dis que tu as essayer les flottants, un float:right sur .ex ?

Bonjour

Pour un problème de ce genre, je ne saurais que te conseillerde reprendre les bases du css ...

Si tu as la flemme, dans ton cas, appliquer des propriétés float:left accompagnés des width appropriés sur .ex et .encart suffira largement. En faisant attention à ce que les deux width additionés ne dépassent pas celle de .visio... Normalement tout baigne ^^

Ben oui , normalement ^^

Bon effectivement j'avais un peu la flemme, j'ai vu ça à 03h00 du mat

Je revois mon histoire de div tranquillement et je reviens vous voir