28172 sujets

CSS et mise en forme, CSS3

Positionnement absolu / relatif Problème background + décalage

Bonsoir tout le monde et merci d'avance pour l'aide que vous pourrez m'apporter car avant de poster dans le forum je fais l'effort de chercher (alsacreations, site du zero etc... mais là je sèche et ça m'énerve Smiley rolleyes

Tout dabord je vous explique comment ce présente mon site :

- Un container du nom de #global
- Un header du nom de #bandeau_haut avec un object flash avec dimensions et hauteurs fixes
- Un div #milieu qui va contenir #menu_gauche et #contenu, il contient un background qui se répète verticalement)
- Un footer du nom de #bandeau_bas

Dans ma feuille CSS j'ai un * { margin:0 auto; padding:0; } pour être sur de ne pas avoir de problème de marges / espaces imprévus quelque part...

Par rapport à mon site il me semblait que le positionnement absolu était ce qu'il y'avait de mieux seulement regardez le problème : http://www.visioline.fr/pizzas/absolute/ pas besoin de vous expliquer le problème je pense Smiley biggrin (pas de background qui se répète et mes puces sont IE ne s'affichent pas...)

Un ami m'a conseiller d'utiliser le positionnement relatif, sans trop y croire c'est ce que j'ai fais et voilà ce que ça donne : http://www.visioline.fr/pizzas/relative/ Sous IE mes puces disparaissent et sous firefox il y'a un gros espace imprévu....

Après avoir lu différents articles je pense quand même que le positionnement absolu est la meilleure solution pour mon site, qu'en pensez vous ?

Une âme charitable pour m'aider à résoudre ces divers problèmes ? Smiley smile

Je vous joins ci-dessous le code CSS (je le fais toujours tenir sur une ligne c'est plus facile à lire je trouve) ainsi que la partie xhtml pour l'absolute et le relative :

(Merci beaucoup pour votre aide)

Feuille CSS pour le positionnement en absolu :


body                                                  { background-color:#666666;background:url(../images/bois.jpg);font-family:verdana; }
*                                                        { margin:0 auto; padding:0; }
#global                                            { width:713px;text-align:left; }
#bandeau_haut                                { width:713px;height:430px; }
#milieu                                            { width:713px;position:absolute;background:url(../images/milieu.png) repeat-y;padding-bottom:10px; }
#menu_gauche                                  { width:150px;position:absolute;margin-left:70px;text-align:left; }
#contenu                                          { width:460px;position:absolute;left:200px;padding-right:25px;font-size:0.7em; }
#bandeau_bas                                  { width:713px;height:95px;background:url(../images/bas.png) no-repeat; }
.titre_centre                                { color:#753E14;text-align:center; }
.paragraphe_centre_gras            { margin:5px;color:#96501A;font-weight:bold;text-align:center; }
.paragraphe_justify                    { margin:5px;color:#753E14;font-size:1em;text-align:left; }
.paragraphe_gauche                      { margin:5px;color:#753E14;font-size:1em;text-align:left; }
.paragraphe_gauche_gras            { margin:5px;color:#96501A;font-weight:bold; }
.paragraphe_gauche_gras_u        { margin:5px;color:#96501A;font-weight:bold;text-decoration:underline; }
.puce                                                { list-style-image:url("../images/puce.png");margin-top:10px;margin-bottom:10px; }
.puce_li                                          { margin-bottom:5px;color:#753E14;font-weight:bold;font-size:0.7em;margin-left:-15px; }
.lien_menu                                      { color:#4D2B0E;text-decoration:none; }
.lien_menu:hover                          { color:#9E591C; }
.photo_accueil                              { width:280px;float:left;margin-right:10px;margin-bottom:10px;border-width:1px;border-color:#753E14;border-style:solid; }
.puce_square                                  { color:#753E14;text-align:justify; }


Feuille CSS concernant le positionnement relatif :


body                                                  { background-color:#666666;background:url(../images/bois.jpg);font-family:verdana; }
*                                                        { margin:0 auto; padding:0; }
#global                                            { width:713px;text-align:left; }
#bandeau_haut                                { width:713px;height:430px; }
#milieu                                            { width:713px;position:relative;background:url(../images/milieu.png) repeat-y;padding-bottom:10px; }
#menu_gauche                                  { width:150px;position:relative;margin-left:70px;text-align:left; }
#contenu                                          { width:460px;position:relative;left:100px;top:-190px;padding-right:25px;font-size:0.7em; }
#bandeau_bas                                  { width:713px;height:95px;background:url(../images/bas.png) no-repeat; }
.titre_centre                                { color:#753E14;text-align:center; }
.paragraphe_centre_gras            { margin:5px;color:#96501A;font-weight:bold;text-align:center; }
.paragraphe_justify                    { margin:5px;color:#753E14;font-size:1em;text-align:left; }
.paragraphe_gauche                      { margin:5px;color:#753E14;font-size:1em;text-align:left; }
.paragraphe_gauche_gras            { margin:5px;color:#96501A;font-weight:bold; }
.paragraphe_gauche_gras_u        { margin:5px;color:#96501A;font-weight:bold;text-decoration:underline; }
.puce                                                { list-style-image:url("../images/puce.png");margin-top:10px;margin-bottom:10px; }
.puce_li                                          { margin-bottom:5px;color:#753E14;font-weight:bold;font-size:0.7em;margin-left:-15px; }
.lien_menu                                      { color:#4D2B0E;text-decoration:none; }
.lien_menu:hover                          { color:#9E591C; }
.photo_accueil                              { width:280px;float:left;margin-right:10px;margin-bottom:10px;border-width:1px;border-color:#753E14;border-style:solid; }
.puce_square                                  { color:#753E14;text-align:justify; }


Partie html commune :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="include/ecole.css" title="Ecole des Chefs" />
<meta http-equiv="content:Content-type:text/html; charset:utf-8" />
<title>Ecole des Chefs - Formation Cr&ecirc;piers, Pizzaiolos et Glaciers -  http://www.ecole-des-chefs.fr</title>
 
</head>
<body>
<div id="global">
	<div id="bandeau_haut">
	<object type="application/x-shockwave-flash" data="intro.swf" width="713" height="430">
	<param name="movie" value="intro.swf" />
	<param name="wmode" value="transparent" />
	</object>
	</div>
	<div id="milieu">
		<div id="menu_gauche">
		<ul class="puce">
		<li class="puce_li" /> <a href="index.php" class="lien_menu" title="Page d'accueil">Accueil</a>
		<li class="puce_li" /> <a href="pedagogie.php" class="lien_menu" title="Page d'accueil">Notre pédagogie</a>
		<li class="puce_li" /> <a href="#" class="lien_menu" title="Nos formations">Nos formations</a>
		<li class="puce_li" /> <a href="#" class="lien_menu" title="Notre calendrier">Notre calendrier</a>
		<li class="puce_li" /> <a href="#" class="lien_menu" title="Inscription">Inscription</a>
		<li class="puce_li" /> <a href="#" class="lien_menu" title="Conditions Générales de Ventes">CGV</a>
		<li class="puce_li" /> <a href="#" class="lien_menu" title="Situation / Accès">Situation / accès</a>
		<li class="puce_li" /> <a href="#" class="lien_menu" title="Nous contacter">Nous contacter</a>
		<li class="puce_li" /> <a href="#" class="lien_menu" title="Hébergement">Hébergement</a>
		<li class="puce_li" /> <a href="#" class="lien_menu" title="Offres d'emploi">Offres d'emploi</a>
		</ul>
		</div>
		<div id="contenu">
		<h3 class="titre_centre">PROCHAINEMENT OUVERTURE</h3>
		<p class="paragraphe_centre_gras">École des Chefs Crêpiers, Pizzaiolos et Glaciers Christian LOSTANLEN<br />29 rue Charles de Gaulle 29940 LA FORÊT FOUESNANT</p>
		<img src="images/accueil.jpg" alt="Pizza" style="float:left;width:280px;height:210px;margin-right:10px;margin-bottom:10px;border-width:1px;border-color:#753E14;border-style:solid;" />
		<p class="paragraphe_gauche">De l’École des Chefs Crêpiers,Pizzaiolos et Glaciers</p>
		<p class="paragraphe_gauche">Dans le Sud Finistère, à la Forêt Fouesnant la ville des vainqueurs du Vendée Globe entre mer, culture et traditions.</p>
		<p class="paragraphe_gauche">Dans un local réservé exclusivement à la formation, pour professionnels et particuliers.</p>
		<p class="paragraphe_gauche">Vous serez encadré par un professionnel ayant 13 années d’expérience. Il vous proposera de vous former et de vous accompagner dans les métiers de la crêpe, de la pizza  et de la glace.</p>
		<p class="paragraphe_centre_gras">Venez découvrir nos nouveautés en exclusivité.</p>
		<p class="paragraphe_centre_gras">POUR TOUT RENSEIGNEMENT</p>
		<p class="paragraphe_centre_gras">06.66.77.84.97.77</p>
		<hr size="1" />
		</div>
	</div>
	<div id="bandeau_bas"></div>
</div>
</body>
</html>
bonsoir,

d'après moi c'est ton paragraphe <div id="contenu"> qui fout le souk et qui décale les deux div, créant cet espace entre les 2 (dans le second lien que tu donnes)
perso je n'utilise ni le positionnement relatif ni l'absolu et je m'en porte bien, c'est bien assez emmerdant comme ça.
j'enquille les div les uns au dessus des autres dans le sens normal du flux. et les positionnant avec des marges auto. et des float:left ou right

dans les div, je mets des <p> puis des <ul>

et basta

exemple: http://www.web2aconcept.fr

ton code est hyper touffu, essaye de simplifier ne serait-ce qu'en utilisant les :

#global,#bandeau_haut,#milieu
{
width:713px;
}

tu n'auras qu'à changer la taille une seule fois si tu en as besoin.

de plus télécharge (si ce n'est déjà fait firefox avec le module firebug) et ta vie changera.

même chose pour les répetitions de:

.paragraphe_gauche_gras_u ?, (TOUS LES AUTRES QUI SONT IDENTIQUES SEPARES PAR UNE VIRGULE)
{ 
margin:5px;
color:#96501A;
font-weight:bold;
}


que tu répètes un paquet de fois pour rien.
un fois cela fait, tu y verras plus clair.

essaye aussi d'indenter un peu , ca aide à comprendre
Modifié par kayorn (28 Apr 2009 - 22:50)
Bonsoir,
Pour l'espace imprévu sous FF (en version relative) ça vient de :

.puce                                                { list-style-image:url("../images/puce.png");margin-top:10px;margin-bottom:10px; }


Enlèves:
margin-top:10px;
tu peut le remplacer par un padding-top si tu souhaites tout de même garder l'espace.

Bon courage pour le reste...
Modifié par pass1 (29 Apr 2009 - 00:22)
Salut,

visioline a écrit :
Après avoir lu différents articles je pense quand même que le positionnement absolu est la meilleure solution pour mon site, qu'en pensez vous ?
Non : ni absolute ni relative... ton menu devrait être en float:left et le contenu avec un margin-left qui va bien. (Re)lire avec attention le guide du positionnement CSS.

+1 pour le margin-top en trop...
merci pour vos réponses et je vais apporter vos modifications et reuploader Smiley smile

Au début je n'utilisais jamais le positionnement absolu ou relatif mais uniquement des float mais dans cette version j'avais eu un soucis je vais retester ça tout à l'heure et je vosu tiens au courant Smiley cligne
Voilà je viens de finir les modifications en float :

http://www.visioline.fr/pizzas/float/

La mise en forme est à peu près pareil sur IE et Mozilla (mis à part sous IE sur le bord droit entre les 2ers divs il y'a un petit décalage dans le dégradé...)

J'ai tenu compte de vos remarques pour la mise en forme de mon css et si vous avez d'autres conseils à me donner je suis preneur Smiley smile

Voilà mon code si ça peut aider quelqu'un :

Partie CSS :


/* Valeurs générales, principaux conteneurs & id */
body 
{
background-color:#666666;
background:url(../images/bois.jpg);
font-family:verdana;
}

*
{
margin:0 auto;
padding:0;
}

#global, #bandeau_haut, #milieu, #bandeau_bas 
{
width:713px;
}

#global 
{
text-align:left;
}

#bandeau_haut
{
height:430px; 
}

#milieu 
{
background:url(../images/milieu.png) repeat-y;
padding-bottom:10px; 
}

#menu_gauche 
{
width:130px;
float:left;
margin-left:70px;
text-align:left;
}

#contenu
{
width:460px;
margin-right:35px;
font-size:0.7em;
}

#bandeau_bas
{
height:95px;
background:url(../images/bas.png) no-repeat;
}
/* Mise en forme */
.titre_centre
{
color:#753E14;
text-align:center;
}

.paragraphe_centre_gras, .paragraphe_justify, .paragraphe_gauche , .paragraphe_gauche_gras, .paragraphe_gauche_gras_u  
{ 
margin:5px;
color:#96501A; 
}

.paragraphe_centre_gras
{
font-weight:bold;
text-align:center; 
}

.paragraphe_justify
{
font-size:1em;
text-align:left;
}

.paragraphe_gauche
{ font-size:1em;
text-align:left; }

.paragraphe_gauche_gras
{
font-weight:bold; 
}

.paragraphe_gauche_gras_u
{
font-weight:bold;
text-decoration:underline; 
}

.puce
{
list-style-image:url("../images/puce.png");
padding-top:10px;
padding-bottom:10px;
}

.puce_li
{
margin-left:-15px;
margin-bottom:5px;
color:#753E14;
font-weight:bold;
font-size:0.7em;
}

.lien_menu
{
color:#4D2B0E;
text-decoration:none;
}

.lien_menu:hover
{
color:#9E591C;
}

.photo_accueil
{
width:280px;
float:left;
margin-right:10px;
margin-bottom:10px;
border-width:1px;
border-color:#753E14;
border-style:solid;
}


Partie XHTML :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="include/ecole.css" title="Ecole des Chefs" />
<meta http-equiv="content:Content-type:text/html; charset:utf-8" />
<title>Ecole des Chefs - Formation Cr&ecirc;piers, Pizzaiolos et Glaciers -  http://www.ecole-des-chefs.fr</title>
 
</head>
<body>
<div id="global">
	<div id="bandeau_haut">
	<object type="application/x-shockwave-flash" data="intro.swf" width="713" height="430">
	<param name="movie" value="intro.swf" />
	<param name="wmode" value="transparent" />
	</object>
	</div>
	<div id="milieu">
		<div id="menu_gauche">
		<ul class="puce">
		<li class="puce_li" /> <a href="index.php" class="lien_menu" title="Page d'accueil">Accueil</a>
		<li class="puce_li" /> <a href="pedagogie.php" class="lien_menu" title="Page d'accueil">Notre pédagogie</a>
		<li class="puce_li" /> <a href="#" class="lien_menu" title="Nos formations">Nos formations</a>
		<li class="puce_li" /> <a href="#" class="lien_menu" title="Notre calendrier">Notre calendrier</a>
		<li class="puce_li" /> <a href="#" class="lien_menu" title="Inscription">Inscription</a>
		<li class="puce_li" /> <a href="#" class="lien_menu" title="Conditions Générales de Ventes">CGV</a>
		<li class="puce_li" /> <a href="#" class="lien_menu" title="Situation / Accès">Situation / accès</a>
		<li class="puce_li" /> <a href="#" class="lien_menu" title="Nous contacter">Nous contacter</a>
		<li class="puce_li" /> <a href="#" class="lien_menu" title="Hébergement">Hébergement</a>
		<li class="puce_li" /> <a href="#" class="lien_menu" title="Offres d'emploi">Offres d'emploi</a>
		</ul>
		</div>
		<div id="contenu">
		<h3 class="titre_centre">PROCHAINEMENT OUVERTURE</h3>
		<p class="paragraphe_centre_gras">École des Chefs Crêpiers, Pizzaiolos et Glaciers Christian LOSTANLEN<br />29 rue Charles de Gaulle 29940 LA FORÊT FOUESNANT</p>
		<img src="images/accueil.jpg" alt="Pizza" style="float:left;width:280px;height:210px;margin-right:10px;margin-bottom:10px;border-width:1px;border-color:#753E14;border-style:solid;" />
		<p class="paragraphe_gauche">De l’École des Chefs Crêpiers,Pizzaiolos et Glaciers</p>
		<p class="paragraphe_gauche">Dans le Sud Finistère, à la Forêt Fouesnant la ville des vainqueurs du Vendée Globe entre mer, culture et traditions.</p>
		<p class="paragraphe_gauche">Dans un local réservé exclusivement à la formation, pour professionnels et particuliers.</p>
		<p class="paragraphe_gauche">Vous serez encadré par un professionnel ayant 13 années d’expérience. Il vous proposera de vous former et de vous accompagner dans les métiers de la crêpe, de la pizza  et de la glace.</p>
		<p class="paragraphe_centre_gras">Venez découvrir nos nouveautés en exclusivité.</p>
		<p class="paragraphe_centre_gras">POUR TOUT RENSEIGNEMENT</p>
		<p class="paragraphe_centre_gras">06.66.77.84.97.77</p>
		<hr size="1" />
		</div>
	</div>
	<div id="bandeau_bas"></div>
</div>
</body>
</html>


Merci encore de l'aide que vous pouvez m'apporter Smiley smile
Salut,

visioline a écrit :
J'ai tenu compte de vos remarques pour la mise en forme de mon css et si vous avez d'autres conseils à me donner je suis preneur

N'oublie pas de regarder sur IE6.
Agylus a écrit :
N'oublie pas de regarder sur IE6.
+1

Tu as affaire à un bug bien connu d'IE6 : le double margin bug qui intervient quand une marge est précisée sur un élément flottant du même côté que le float (c'est le cas pour #menu_gauche).

Pour le corriger tu peux remplacer le margin-left par un padding-left équivalent.

Il faudrait aussi (re)lire cette astuce.


Et pour finir corriger les erreurs de validation.
Modifié par Heyoan (29 Apr 2009 - 11:27)
Heyoan a écrit :
le double margin bug qui intervient quand une marge est précisée sur un élément flottant du même côté que le float (c'est le cas pour #menu_gauche).

Attention, ce bug n'apparaît que sur le premier élément d'une série de flottants.

<div style="float:left;margin-left:10px">Texte1</div> <!-- Doubled float margin bug -->
<div style="float:left;margin-left:10px">Texte2</div> <!-- Pas Doubled float margin bug -->
<div style="float:left;margin-left:10px">Texte3</div> <!-- Pas Doubled float margin bug -->


Heyoan a écrit :
Pour le corriger tu peux remplacer le margin-left par un padding-left équivalent.

Ou mieux, mettre un display:inline sur ce premier élément.
Agylus a écrit :
Ou mieux, mettre un display:inline sur ce premier élément.
Pourquoi mieux ? Dans le cas présent le padding fait l'affaire et évite d'avoir recours à cette "bizarrerie" spécifique à IE6 non ?
@Heyoan : Le display:inline fonctionne dans tous les cas. Même si c'est vrai que dans le cas présent un padding à la place du margin peut faire l'affaire puisque la colonne flottante n'a pas de couleur de fond, admettons que visioline revient demain avec un autre site, dont la colonne flottante a également un margin faisant apparaître le bug sur IE6, sauf qu'il a une couleur de fond sur cette colonne et ne veut pas qu'elle se propage sur les 70px du padding.

Il a deux solutions :
- Ajouter un nouveau niveau d'imbrication sur lequel il va mettre la couleur de fond et le padding sur le parent.
- Revenir ici demander de l'aide.

Sachant en plus qu'il n'est pas nécessaire de mettre le display:inline dans une feuille spécifique à IE6, les autres navigateurs s'en accommodant très bien étant donné que le formatage block est assuré par le float.
Agylus a écrit :
Sachant en plus qu'il n'est pas nécessaire de mettre le display:inline dans une feuille spécifique à IE6, les autres navigateurs s'en accommodant très bien étant donné que le formatage block est assuré par le float.
Mouaip... pour moi ça reste un hack et du coup je le mets dans un commentaire conditionnel pour IE6... et du coup si je peux éviter de m'en servir (= quand un padding fait l'affaire) j'évite. Smiley murf

Cela dit c'est effectivement une bonne idée d'en parler et pas seulement du padding.
Sujet clos
Aller à