Discussion :

[fccman]

Salut à tous
Voila je sollicite votre aide car je me suis mit au div j ai compris le fonctionnement avec les pixels mais pas avec les pourcentages. je comprend pas pourquoi mon 3 eme div est pas mis à la suite...
pour imager la chose voici le lien de mon travail


Si quelqu'un pourrait m'aider cela serait sympa...

[slack457]

Bonjour,

essai peut-être de mettre un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 display: inline;

dans les 4 classes :
- header
- logo
- slogan
- image


Mais sinon... il me semble que si tu applique une même classe pour tes 3 div (logo, slogan, et image) et que dans cette classe tu met un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
une_classe {
     display: inline-block;
}

ça devrait marcher, je crois avoir fait un truc dans le genre il y a un moment...

Ensuite si tu veux gérer indépendamment tes 3 div (logo, slogan, et image) tu leur met un ID, genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
	<div id="logo" class="une_classe"> logo </div>
	<div id="slogan" class="une_classe"> slogan </div>
	<div id="image" class="une_classe"> image </div>

comme ça tu leur met un background différent.

[Bisûnûrs]

Personnellement je ne me fierais juste pas au rendu Dreamweaver. Affiche ta page dans un vrai navigateur.

Et au passage, avec ce que tu nous montres, on ne peut pas savoir si tu as un DOCTYPE valide.

[Emasc]

Salut,
à mon avis il s'agit d'un problème de flottant:
dans ton flux html les éléments flottants sont censés apparaitre avant l'élément autours duquel ils flottent.

Test en modifiant ton code comme sa:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div class="logo">LOGO</div>
<div class="image">IMAGE</div>
<div class="slogan">SLOGAN</div>

je pense que sa devrait marché avec cette modification.

[Macmillenium]

je pense que sa devrait marché avec cette modification.

Oui mais si le contenu de .slogan est plus long, il passera en dessous des flottants (sauf sous IE7- vu que width confère le Layout) et afin de tenir compte de la place réservée au flottants, il faudrait donc :
- Soit conférer un nouveau contexte de formatage ;
- Soit attribuer à .slogan des marges externes latérales égales aux largeurs des flottants.

Cependant, comme .slogan a une largeur renseignée, pourquoi ne pas simplement le flotter (sans changer l'ordre du code HTML) ?

Au passage :
- Attention à la manière dont les navigateurs calculent les valeurs en pourcentage, exemple de IE http://www.developpez.net/forums/d54...e/#post3263914 ;
- Attention à .header qui n'englobe pas ses enfants flottants (voir la FAQ CSS).