élements de rendu bloc ne se placent pas l'un en dessous de l'autre.

Question

30 Aug 2012 à 18:57

Bonjour à tous,

J'essaie d'apprendre xthml et CSS (selon la méthode goetter).

Pour le moment, j'essaie
- de mettre un bandeau avec un logo en haut a gauche
- Et ensuite de mettre un conteneur qui se placera en dessous (ou je mettrais le contenu, les menus, etc).

Raphael écrit dans le site : "les éléments de rendu "bloc" se placent toujours l'un en dessous de l'autre par défaut "
=>je pensais que c'était valable pour les div.
Mais en fait, non. Mon conteneur va a droite du header (au lieu d'aller en dessous).

Savez-vous ou j'ai fait une erreur?
(en post scriptum, j'ai mis une image du rendu)

Merci pour votre aide !

voici le code html :

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>vive la galette des rois</title>
    <link href="style.css" rel="stylesheet" type="text/css" media="screen"
</head>
<body>
	<div id="header">
		<img width="170" height="232" alt="une galette des rois" src="theme/logo1.jpg">
		<h1>vive la galette des rois</h1>
		<p>Concevoir des galettes des rois avec HTML et CSS</p>
	</div>
	<div id="conteneur">
	voici comment on fait une galette des rois avec CSS
	</div>
</body>
</html>

Et le CSS:


@charset "UTF-8";
/* CSS Document */
body{
background-color: #eaeaea;
margin:0;
padding:0;
font-family: "Lucida Handwriting", "Monotype Corsiva", sans-serif;
font-size:80%;
}
#header{
margin:5px;
}
#header img{
float:left;
margin:5px 0 0 5px
}
#header h1{
text-indent: -5000px;
margin:0;
line-height:0;
}
#header p{
margin: 45px 0 0 200px;
font-weight:bold;
color:black;
font-size:1.1em;
}
#conteneur{
background-color:#CCFF66;
width:500px;
margin:0 auto;
}
#menu_top{
}

ps :

Modifié par unmondedecreation (30 Aug 2012 - 19:05)

Apoooo

30 Aug 2012 à 20:02

Le problème doit venir de là :


#header img{
[b]float:left;[/b]
margin:5px 0 0 5px
}

Petit question, dans ton code tu as <h1>vive la galette des rois</h1>, il est où dans ton rendu ?

EDIT : Et pour eviter les problèmes de "float", crée une classe qui te les nettoie :


.clear{
     clear: both;
}

Et ton code :


<div id="header">
		<img width="170" height="232" alt="une galette des rois" src="theme/logo1.jpg">
		<h1>vive la galette des rois</h1>
		<p>Concevoir des galettes des rois avec HTML et CSS</p>
	</div>
        [b]<div class="clear"></div>[/b]
	<div id="conteneur">
	voici comment on fait une galette des rois avec CSS
	</div>

Modifié par Apoooo (30 Aug 2012 - 20:04)

Laurie-Anne

30 Aug 2012 à 20:19

Bonjour,

Pas besoin de rajouter un élément vide (et donc inutile). Overflow:hidden; sur ton header sera tout aussi efficace.

De plus ton H1 est totalement inutile, puisque masqué. Tu peux très bien placé une image comme contenu pour ton titre, le alt de l'image sera pris en compte comme tout autre contenu.

unmondedecreation

30 Aug 2012 à 20:22

Apoooo a écrit :
Le problème doit venir de là :
.clear{
clear: both;
}

Merci, ca marche !

Apoooo a écrit :

Petit question, dans ton code tu as
vive la galette des rois

, il est où dans ton rendu ?

Alors, pour t'expliquer , c'est un conseil de Raphael Goetter pour
- cacher du contenu aux navigateurs graphiques
- proposer un titre aux navigateurs incapables de restituer les graphiques
=> dans la pratique, le titre sera dans une bannière que je mettrais a coté du logo, et pour les personnes déficientes visuelles (accessiblité), ils auront le titre. Bon, ca marche aussi avec alt, mais je mets ca sans vraiment comprendre pourquoi. lol. C'est tiré du livre CSS2.1 de goetter page 213.

Merci pour ton aide !

Cdlt,

unmondedecreation

30 Aug 2012 à 20:31

Laurie-Anne a écrit :
Bonjour,

Pas besoin de rajouter un élément vide (et donc inutile). Overflow:hidden; sur ton header sera tout aussi efficace.

De plus ton H1 est totalement inutile, puisque masqué. Tu peux très bien placé une image comme contenu pour ton titre, le alt de l'image sera pris en compte comme tout autre contenu.

Merci Laurie Anne pour ta réponse,

1/ Je n'ai pas compris ce que tu veux dire par "rajouter un élément vide" (et donc inutile)
=> tu veux parler de la propriété clear both?
Je peux changer clear both par overflow hidden tu veux dire?

2. pour le h1, je l'ai tiré du livre de Raphael...Je ne remets pas en cause tes compétences, mais je suis un peu perdu, lol.

Voici ce qu'il écrit dans CSS2.1
"Le titre « Alsacréations, le livre » ne doit être pris en compte que par les navigateurs
incapables de restituer les graphiques, car l’image de fond propose déjà le titre
« Alsacréations ».
Des diverses méthodes étudiées pour cacher du contenu aux navigateurs graphiques
sans trop gêner les autres, nous retiendrons ici la déclaration text-indent: -5000px.
Rappelons qu’elle engendre un retrait à gauche « poussant » le titre hors de la zone de
vision.
Tous les éléments de type bloc, à l’exception de <div>, possèdent par défaut des
marges internes et/ou externes différentes d’une navigateur à l’autre. C’est notamment
le cas de <h1>. Laissé en l’état, il induirait des décalages dépendant du navigateur.
Supprimons toutes ses marges ; annulons aussi la hauteur de ligne (lineheight)
pour éviter tout décalage avec l’élément <p> suivant."

et le code


#header h1 {
text-indent: -5000px;
margin:0;
line-height: 0;
}

Qu'en penses tu?

Cdlt,

~~supprimé~~

30 Aug 2012 à 20:31

Bonjour,
Pour éviter de rajouter une div vide entre la div header et la div conteneur, tu peux aussi dans le css de la div conteneur rajouter "clear:left;". "conteneur" se placera au-dessous.

Une astuce bien pratique (tirée du livre de Raphaël Goetter, "CSS avancées") pour se repérer dans l'organisation des div notamment : tu définis une couleur de fond (background-color:red;) différente pour chaque élément pour bien les faire ressortir sur ta page.

unmondedecreation

30 Aug 2012 à 20:45

Sebkra a écrit :

Pour éviter de rajouter une div vide entre la div header et la div conteneur, tu peux aussi dans le css de la div conteneur rajouter "clear:left;". "conteneur" se placera au-dessous.

1. tu me conseilles quoi entre overflox:hidden et "clear:left"
=> est ce que les deux auront le meme rendu?
2. je n'ai pas saisi le probleme d'avoir une div vide. Ca alourdit le code?

Sebkra a écrit :

Une astuce bien pratique (tirée du livre de Raphaël Goetter, "CSS avancées") pour se repérer dans l'organisation des div notamment : tu définis une couleur de fond (background-color:red;) différente pour chaque élément pour bien les faire ressortir sur ta page.

Merci pour ce conseil bien utile !
Smiley cligne

unmondedecreation

30 Aug 2012 à 20:53

Sebkra a écrit :
Bonjour,
Pour éviter de rajouter une div vide entre la div header et la div conteneur, tu peux aussi dans le css de la div conteneur rajouter "clear:left;". "conteneur" se placera au-dessous.

#header{
overflow: hidden;
}

=> ca marche.


#conteneur{
clear:left;
width:760px;
margin:0 auto;
}

=> ca ne marche pas chez moi. J'ai certainement dû faire une erreur....

~~supprimé~~

30 Aug 2012 à 21:06

Tout dépend de ce que tu souhaites obtenir au final. Avec des fonds de couleurs c'est net : avec clear:left; sur la div conteneur, la div header a la hauteur de son contenu textuel (donc assez étroit ici) et l'image déborde. Avec overflow:hidden pour la div header la hauteur de la div est celle de l'image. Dans les deux cas la div conteneur se place juste sur la ligne de base de l'image.

J'imagine qu'il y a sûrement des cas où une div vide est incontournable, mais si on peut organiser sa mise en page avec css (qui est là pour ça) plutôt qu'avec des éléments html (qui sont là pour le contenu) autant passer par css. Et ici, c'est a priori possible. Séparation de la forme et du contenu.

unmondedecreation

30 Aug 2012 à 21:20

Sebkra a écrit :

Tout dépend de ce que tu souhaites obtenir au final. Avec des fonds de couleurs c'est net : avec clear:left; sur la div conteneur, la div header a la hauteur de son contenu textuel (donc assez étroit ici) et l'image déborde. Avec overflow:hidden pour la div header la hauteur de la div est celle de l'image.

Ok, je vois.
Overflow => ca s'ajuste sur l'image.
clear:left => ca s'ajuste sur le texte
=> c'est ce que tu veux dire?

Sebkra a écrit :

Dans les deux cas la div conteneur se place juste sur la ligne de base de l'image.

Tu veux dire la div contenu ? (car le conteneur c'est ce qui englobe tout dans mon exemple si j'ai bien compris...

Sebkra a écrit :

Dans les deux cas la div conteneur se place juste sur la ligne de base de l'image.

Sebkra a écrit :

Séparation de la forme et du contenu.

Bien, vu ca a l'air important !

Une dernière chose, clear:left, je n'arrive pas à le mettre correctement ici....
Tu aurais une idée?

Merci pour tes précisions !

~~supprimé~~

30 Aug 2012 à 22:40

Mauvaise écriture de ma part ! Par div conteneur je veux dire la div à laquelle tu as donné l'ID "conteneur".

Pour le clear:left, je ne vois pas... Veux-tu dire qu'il n'a aucun effet ? J'ai testé sur FF, Opera et... IE6 Smiley confus

, sans soucis...

unmondedecreation

26 Sep 2012 à 18:55

Sebkra a écrit :
Mauvaise écriture de ma part ! Par div conteneur je veux dire la div à laquelle tu as donné l'ID "conteneur".

Pour le clear:left, je ne vois pas... Veux-tu dire qu'il n'a aucun effet ? J'ai testé sur FF, Opera et... IE6 , sans soucis...

Salut Sebkra,

CA ne marchait pas car la div avec clear n'était pas dans le bon conteneur.
Et une fois que c'est fait, ca marche.

Merci.

Sujet clos

CSS et mise en forme, CSS3

élements de rendu bloc ne se placent pas l'un en dessous de l'autre.