18073 sujets

Questions générales et questions de débutants

Pb de lien

bonjour a tous

en tant que débutante j'en appelle a votre expérience et votre savoir pour ésoudre un pb qui vous semblera surement bien anodin mais qui me fait m'arracher les cheveux depuis des heures :
comment faire pour que ça:
li a:hover {color: ##FF9933; background: #ffffff url(images/menualtai4.jpg) top left no-repeat;}

li a:active {color :#005300;}


ne s'applique pas a tous les liens de la page.
Parce qu'en fait j'ai un menu dans le cadre de gauche pour lequel ce code s'applique mais je voudrais faire un sous menu dans le cadre de droite auquel ces caractéristiques ne s'appliqueraient pas Smiley biggol ben dur dur ... moi j'y arrive pas Smiley decu
Bonjour,

Normalement, ton code n'affecte uniquement que les liens contenus dans les éléments d'une liste à puce.
Comme tes menus sont certainement constitués de listes à puces, ce comportement vaut pour eux deux avec ce code.

J'imagine que tes menus sont dans deux blocs div distincts, avec chacun un ID propre. Dans ce cas, tu peux sélectionner les listes en fonction de leur div parent (qui les contient). Si tu avais un bloc div#menuGauche pour le menu à gauche, et div#menuDroite pour l'autre, ça donnerait ceci : 
[#gray]/* menu gauche */[/#]
[#orange]#menuGauche[/#] li a:hover {
    color: #ff9933;
    background: #fff url(images/menualtai4.jpg) top left no-repeat;
    }

[#orange]#menuGauche[/#] li a:active{
    color :#005300;
    }



[#gray]/* menu droite */[/#]
[#orange]#menuDroite[/#] li a:hover {
    (...)
    }

[#orange]#menuDroite[/#] li a:active{
    (...)
    }


Dans la première partie, on donne un style qui ne vaut que pour les éléments "li" contenus dans le bloc div#menuGauche, dans l'autre on modifie ceux dans le bloc div#menuDroite.
On peut ainsi agir sur un élément en fonction de son élément parent.

Attention, dans ton premier color, tu as un dièse en trop.
Modifié par Smiley neko (16 May 2006 - 02:04)
merci Neko pour ta réponse (et pour le # en trop Smiley cligne )
par contre j'ai peur que ça ne soit un peu plus compliqué que ça
jusque là j'avais peur de mettre tout le code (qui doit être truffé d'erreurs Smiley biggol )
mais finalement ça serait pas un mauvaise chose
alors voilà la feuille de style :

<!--

body { background-color: #ffffff; }

h1 {  font-family: Papyrus, Verdana, Arial, Helvetica; font-size: 40pt; color: #FF9933; text-align: center; font-weight: 700; text-transform : capitalize; letter-spacing: 3px;}
h2 {  font-family: Papyrus, Verdana, Arial, Helvetica; font-size: 24pt; color: #000000; text-align: center; font-weight: bold; text-transform : capitalize; letter-spacing: 2px;}
h3 {  font-family: Papyrus, Verdana, Arial, Helvetica; font-size: 16pt; color: #000000; text-align: center; font-weight: 700;}
h4 {  font-family: Papyrus, Verdana, Arial, Helvetica; font-size: 10pt; color: #000000; text-align: center; font-weight: 400;}
h5 {  font-family: Papyrus, Verdana, Arial, Helvetica; font-size: 16pt; color: #FF9933; text-align: center; font-weight: 700; text-decoration: underline;}

ul, li 
{	/* utilisation de liste pour le menu */
list-style-type: none;	/* suppression des puces de liste */
margin:0;
padding:0;
}

ul#ulmenu
{
position: absolute;	/* positionnement pour IE5 et IE5.5 */
top: 0px;
left: 0%;
background: #000000 url(images/menualtai4.jpg) top left no-repeat;	/* arrière-plan général du menu */
width: 200px;
height: 400px;
padding-top: 102px;
text-align: center;
}

li#ulmenu
 
{display: inline;}	/* correction pour IE5 et IE5.5 */

li a 
{	/* dimensions et définitions des boutons */
display: block;	/* mise en block de <a> pour lui donner des dimensions */
height: 30px;
width: 200px;
color: #005300;
font-size: 16px;
font-weight: 900;
letter-spacing: 2px;
font-family:  papyrus, serif;
text-decoration: none;
line-height: 30px;	/* hauteur de ligne pour éviter les paddings */
}

li a:hover {color: #FF9933; background: #ffffff url(images/menualtai4.jpg) top left no-repeat;}

li a:active {color :#005300;}


a#menu1:hover {	/* décalage de l'arrière-plan pour chaque bouton */
background-position: 0% -603px;
}
a#menu2:hover {	
background-position: 0% -633px;
}

a#menu3:hover {
background-position: 0% -663px;
}
a#menu4:hover {
background-position: 0% -693px;
}
a#menu5:hover {
background-position: 0% -723px;
}
a#menu6:hover {
background-position: 0% -753px;
}

a#menu7:hover {
background-position: 0% -783px;
}
a#menu8:hover {
background-position: 0% -813px;
}
a#menu9:hover {
background-position: 0% -843px;
}

#menu
{
	position: 		absolute;
   	list-style-type: 	none;
   	top: 			80px;
   	left: 			20px;
   	border : 		2px solid #005300;
   	border-style: outset;
   	background: 	#7fdfdf;
   	width: 		200px;
   	height: 		501px;
   	z-index: 20;
}

#corps
{
	position: absolute;
	list-style-type : 		none;
	text-align: justify;
	top: 				80px;
	left: 				15px;
	right:			222px;
	margin-left: 220px;
	margin-right: 15px;
	padding-top: 5px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	border : 			2px solid #005300;
    background-color: #dee8c2;
	height: 491px;
	width: 590px;
	max-width: 600px;
	z-index: 30;
}

#titre
{
	position: absolute;
	list-style-type : none;
	top: 10px;
	left: 220px;
	right: 10px;
	margin-left: auto;
	margin-right: auto;
	border : 2px solid #005300;
    background-color: #ffffff;
	height: 25px;	
}

#droite
{
	position: 			absolute;
	list-style-type : 		none;
	top: 80px;
	left :855px;
	border : 			2px solid #005300;
	border-style: outset;
	background-image: 	url("images/voltadroite5.jpg");
	background-position: 	bottom;
	width:			210px;
	height: 			501px;
}

-->


et la page en cause :

<!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">
<head>
<title>le golden retriever</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" href="stylesite3.css" />

<style type="text/css">


-->


#texte
{
position: absolute;
	list-style-type : 		none;
	text-align: justify;
	text-indent: 10%;
	top: 82px;
	left: 0px;
	right: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0px 5px 0px 5px;
    background-color: #dee8c2;
	height: 400px;
	width: 590px;
	max-width: 590px;
	min-width: 590px;
	border: 1px solid #f000000;
	z-index: 32;	
}

#resolution
{
	position: absolute;
	list-style-type : 		none;
	top: 				60px;
	left: 				50px;
	right:			222px;
	margin-left: 200px;
	margin-right: 15px;	
	width: 600px;
	max-width: 600px;
	text-align: center;
}

#ssmenudroite
{
	
	position: 			absolute;
	list-style-type : 		none;
	top: 110px;
	left :850px;
	padding-left: 10px;
	width:			200px;
	height: 			100px;	
}
.ssmenu ul
{
position: absolute;	/* positionnement pour IE5 et IE5.5 */
top: 0px;
left: 0%;
background: #000000 ;	/* arrière-plan général du menu */
width: 200px;
height: 100px;
padding-top: 0px;
text-align: center;
}

.ssmenu il
{display: inline;}

uk.li a.ss:hover {CURSOR: crosshair;  COLOR: #FF9933; font-style: italic; font-weight: bold; font-size : 12pt; TEXT-DECORATION: none}

a#ssmenu2:hover {CURSOR: crosshair;  COLOR: #FF9933; font-style: italic; font-weight: bold; font-size : 12pt; TEXT-DECORATION: none}

a#ssmenu3:hover {CURSOR: crosshair;  COLOR: #FF9933; font-style: italic; font-weight: bold; font-size : 12pt; TEXT-DECORATION: none}

</style>

</head>


<div id="menu">
   
<ul id="ulmenu">
	<li id="limenu"><a id="menu1" title="menu1" accesskey="1" href="accueilcss.htm">Accueil</a></li>
	<li id="limenu"><a id="menu2" title="menu2" accesskey="2" href="golden3.htm">Golden Retriever</a></li>
	<li id="limenu"><a id="menu3" title="menu3" accesskey="3" href="mellowfields volta.htm">Volta</a></li>
	<li id="limenu"><a id="menu4" title="menu4" accesskey="4" href="vick bricinesse.htm">Vick</a></li>
	<li id="limenu"><a id="menu5" title="menu5" accesskey="5" href="altai isledegarde.htm">Altaï</a></li>
	<li id="limenu"><a id="menu6" title="menu6" accesskey="6" href="portees.htm">Portées</a></li>
	<li id="limenu"><a id="menu7" title="menu7" accesskey="7" href="galerie.htm">Galerie</a></li>
	<li id="limenu"><a id="menu8" title="menu8" accesskey="8" href="nos liens.htm">Liens</a></li>
	<li id="limenu"><a id="menu9" title="menu9" accesskey="9" href="contacter.htm">Contact</a></li>
</ul>
</div> 

<div id="resolution">
<h4>site optimisé pour une résolution de 1260 x 1024 </h4>
</div>


<div id="corps">
	<h5>Le Golden Retriever </h5>
	<div id="texte">
	<p><h4> description du Golden Retriever, du point de vue morphologie, caractère .......
description du Golden Retriever, du point de vue morphologie, caractère fggsgf.......<br/>
description du Golden Retriever, du point de vue morphologie, caractère fgsgsfg.......<br/>
description du Golden Retriever, du point de vue morphologie, caractère gfgsgffggf.......<br/>
description du Golden Retriever, du point de vue morphologie, caractère .......<br>
description du Golden Retriever, du point de vue morphologie, caractère .......<br/>
description du Golden Retriever, du point de vue morphologie, caractère .......<br/>
description du Golden Retriever, du point de vue morphologie, caractère .......<br/>
description du Golden Retriever, du point de vue morphologie, caractère .......<br/>
description du Golden Retriever, du point de vue morphologie, caractère .......<br/>
description du Golden Retriever, du point de vue morphologie, caractère .......<br/>
description du Golden Retriever, du point de vue morphologie, caractère .......<br/>
description du Golden Retriever, du point de vue morphologie, caractère .......<br/>
description du Golden Retriever, du point de vue morphologie, caractère .......<br/>
description du Golden Retriever, du point de vue morphologie, caractère .......<br/>
description du Golden Retriever, du point de vue morphologie, caractère .......desc</h4></p>

</div>


</div>


<div id="droite">
</div>

<div id="ssmenudroite">
<ul class="ssmenu">

		<li class="ssmenu"><a class="ss"  href="accueilcss.htm">Caractère</a></li>
 		<li><a id="ssmenu2" title="menu1" accesskey="1" href="accueilcss.htm">Morphologie</a></li>
 		<li><a id="ssmenu3" title="menu1" accesskey="1" href="accueilcss.htm">Activités</a></li>
 	</ul>
	</div>

</body>
</html>


bon ben mon post il fait 3 km de long maintenant mais faut ce qu'il faut Smiley cligne
Mouais... *remonte ses manches qu'il n'a pas*

Tout d'abord, première remarque, concernant cet extrait du balisage (menu droite) :

<ul class="ssmenu">
   <li class="ssmenu"><a class="ss"  href="accueilcss.htm">Caractère</a></li>
   <li><a id="ssmenu2" title="menu1" accesskey="1" href="accueilcss.htm">Morphologie</a></li>
   <li><a id="ssmenu3" title="menu1" accesskey="1" href="accueilcss.htm">Activités</a></li>
</ul>

[#orange]Associé à ce code CSS:[/#]

.ssmenu [#red]il[/#] [#orange]/* ->.ssmenu [b]li[/b] */[/#]
{display: inline;}

uk.li a.ss:hover {
	CURSOR: crosshair;
	COLOR: #FF9933;
	font-style: italic;
	font-weight: bold; font-size : 12pt;
	TEXT-DECORATION: none;
	}

a#ssmenu2:hover {
	CURSOR: crosshair;
	COLOR: #FF9933;
	font-style: italic;
	font-weight: bold;
	font-size : 12pt;
	TEXT-DECORATION: none;
	}

a#ssmenu3:hover {
	CURSOR: crosshair;
	COLOR: #FF9933;
	font-style: italic;
	font-weight: bold;
	font-size : 12pt;
	TEXT-DECORATION: none;
	}


Le li en rouge est à l'envers (ce qui arrive quand on tape trop vite et sans faire attention). Smiley cligne
Le premier lien n'a aucun comportement car "uk.li a.ss:hover" n'est pas repris dans le balisaged du LI. Les deux autres liens ont un ID différent qui ne sert à rien car la partie CSS est la même : il faut utiliser une SEULE classe pour les trois si leur comportement doit être le même. On peut affecter la classe soit à la balise LI, soit à la balise A du lien (mais pas les deux, ce qui ne sert à rien ici).

Remarque : "display: line;" va mettre tous ces liens en ligne. C'est bien ce que tu veux ? (Je vais mettre "display: bloc;" dans mon exemple).

Voici le balisage et code CSS correspondant à l'extrait de code plus haut :
[#orange]BALISAGE :[/#]

<ul class="ssmenu">
	<li><a href="accueilcss.htm">Caractère</a></li>
 	<li><a href="accueilcss.htm">Morphologie</a></li>
 	<li><a href="accueilcss.htm">Activités</a></li>
</ul>

[#orange]CODE CSS :[/#]

.ssmenu ul {display: bloc;}

.ssmenu a:hover {
	cursor: crosshair;
	color: #FF9933;
	font-style: italic;
	font-weight: bold;
	font-size : 12pt;
	text-decoration: none;
	}



On dirait que ton code vise à avoir trois colonnes : une à gauche, une centrale pour le contenu, une à droite. Si oui, il y a quelques petites choses qui ne vont pas et il faudrait reprendre quelques petits trucs.
(Je regarde ça.)




Edit -- Pendant que je regarde ça, et si tu repasses avant que j'ai finis, je préfère te sensibiliser au problème des raccourcis-claviers (accesskeys) - avant d'oublier.

C'est bien de s'en servir, mais pas sur tous les liens de ton menu et pas sur n'importe quel lien. Ce n'est pas la peine de s'en servir pour les liens de navigation dans les pages normales.

On les utilises principalement dans un souci d'accessibilité et donc avec certains contenus spécifiques :
-> lien pointant sur le contenu
-> lien pointant sur le formulaire de contact
-> lien pointant sur la recherche
-> ...

Autre chose encore : les visiteurs qui ont principalement recours à ces liens ont des agents utilisateurs (navigateurs) spéciaux qui utilisent certaines touches (comme les chiffres) du clavier.
Si tu affectes un raccourci-clavier à tous les chiffres, tu risques de gêner tes visiteurs mal ou non-voyants car tes raccourcis vont parasiter ceux propre aux navigateurs.

Si tu fais quelques recherches sur le sujet, tu verras qu'on utilise presque toujours les mêmes (comme les chiffres 0 - 3 - 4 - 7 - 9) qui ne sont - normalement - pas utilisés.

Un peu de lecture sur le site Openweb : Accesskey, essai non transformé.
Modifié par Smiley neko (16 May 2006 - 14:28)
oups pour les erreurs d'inattention ... Smiley confused c'est juste qu'il n'y a que la nuit que je peux "travailler" tranquillement .. ça a ses avantages mais aussi ses inconvénients (la fatigue poru ne pas la citer Smiley murf )
pour les raccourcis clavier en fait (et vous vous en seriez douté) ils étaient dans le code que j'ai "piqué" (ici même) et je ne savais absolument pas a quoi ça correspondait donc me coucherais un peu moins bête ce soir.
Sinon j'ai fait les modifs que tu m'a indiquées seulement il me reste encore un tout piti pb, à savoir que lorque je survole le lien du sous menu j'ai le fond du menu qui s'affiche dans le block dudit lien
mais comme une image parle souvent mieux qu'un long discours voilà ce que ça donne en ligne : http://www.devilangels-golden.com/golden3.htm
et le lien vers la feuille de style : http://www.devilangels-golden.com/stylesite3.css

en tout cas merci pour tout le temps que tu passes a réparer mes âneries Smiley cligne
Concernant mon message précédent, dans le dernier extrait de code, j'ai oublié un truc : je n'avais pas supprimé les classes sur le LI (ce que je viens de faire:
<ul class="ssmenu">
	<li><a href="accueilcss.htm">Caractère</a></li>
 	<li><a href="accueilcss.htm">Morphologie</a></li>
 	<li><a href="accueilcss.htm">Activités</a></li>
</ul>



Je suis en train de revoir tout ton code, en passant, voici quelques petits trucs :

PROBLÈME #1
Concernant les ID. Un ID est une étiquette correspondant à un nom propre ; il ne doit pas y en avoir deux identiques dans le balisage d'une même page.
Ceci ne va pas :
<ul id="ulmenu">
	<li [#red]id="limenu"[/#]><a title="menu1" href="accueilcss.htm">Accueil</a></li
	<li [#red]id="limenu"[/#]><a title="menu2" href="golden3.htm">Golden Retriever</a></li>
	<li [#red]id="limenu"[/#]><a title="menu3" href="mellowfields volta.htm">Volta</a></li>
	<li [#red]id="limenu"[/#]><a title="menu4" href="vick bricinesse.htm">Vick</a></li>
	<li [#red]id="limenu"[/#]><a title="menu5" href="altai isledegarde.htm">Altaï</a></li>
	<li [#red]id="limenu"[/#]><a title="menu6" href="portees.htm">Portées</a></li>
	<li [#red]id="limenu"[/#]><a title="menu7" href="galerie.htm">Galerie</a></li>
	<li [#red]id="limenu"[/#]><a title="menu8" href="nos liens.htm">Liens</a></li>
	<li [#red]id="limenu"[/#]><a title="menu9" href="contacter.htm">Contact</a></li>
</ul>
car les listes ont toutes le même ID. Il faut utiliser une classe à la place.


PROBLÈME #2
Faire un design optimisé pour tel navigateur ou telle résolution, c'était bon pour les années 90. De nos jours, c'est quelque chose à éviter. Maintenant, à la limite, on parle de design optimisé pour navigateur conformes - pour sensibiliser les visiteurs surfant à l'aide de navigateurs dépassés.
Si tu fais réellement un design "optimisé pour une résolution de 1260 x 1024", tu vas imposer à la majorité de tes visiteurs de faire défiler l'affichage vers la droite pour voir le menu "droit".

On ne doit faire des design optimisé pour tel navigateur ou telle résolution que lorsqu'on est certain des conditions de navigation du visiteur (cas d'un intranet d'entreprise ou tous les employés auraient la même résolution d'écran et le même navigateur).

Dans ton cas, la meilleure solution serait de tenter de faire un design extensible : on parle alors de mise en page fluide, extensible. Avantage, elle s'adapte à la résolution d'écran du visiteur.


PROBLÈME #3
"list-style-type : none;" ne s'applique pas à un DIV, mais à UL :
ul {
   list-style-type : none;
   }



PROBLÈME #4
H4 ne sert pas à styler un texte de paragraphe mais à s'applique à un titre de niveau 4. Il ne faut pas encadrer un texte par une balise Hn (où n peut être un chiffre 1 à 6) dans une balise P.
On utilise "font-size: xxx%/px/em/pt;" pour spécifier la taille d'un texte.

Autre chose, il faut respecter un certain ordre avec les balises Hn : évites de placer un H5 avant un H4.
Modifié par Smiley neko (16 May 2006 - 14:25)
neko a écrit :
Concernant mon message précédent, dans le dernier extrait de code, j'ai oublié un truc : je n'avais pas supprimé les classes sur le LI

c'est changé !


neko a écrit :
Je suis en train de revoir tout ton code, en passant, voici quelques petits trucs :

PROBLÈME #1
Concernant les ID. Un ID est une étiquette correspondant à un nom propre ; il ne doit pas y en avoir deux identiques dans le balisage d'une même page.
Ceci ne va pas :
<ul id="ulmenu">
	<li [#red]id="limenu"[/#]><a title="menu1" href="accueilcss.htm">Accueil</a></li
	<li [#red]id="limenu"[/#]><a title="menu2" href="golden3.htm">Golden Retriever</a></li>
	<li [#red]id="limenu"[/#]><a title="menu3" href="mellowfields volta.htm">Volta</a></li>
	<li [#red]id="limenu"[/#]><a title="menu4" href="vick bricinesse.htm">Vick</a></li>
	<li [#red]id="limenu"[/#]><a title="menu5" href="altai isledegarde.htm">Altaï</a></li>
	<li [#red]id="limenu"[/#]><a title="menu6" href="portees.htm">Portées</a></li>
	<li [#red]id="limenu"[/#]><a title="menu7" href="galerie.htm">Galerie</a></li>
	<li [#red]id="limenu"[/#]><a title="menu8" href="nos liens.htm">Liens</a></li>
	<li [#red]id="limenu"[/#]><a title="menu9" href="contacter.htm">Contact</a></li>
</ul>
car les listes ont toutes le même ID. Il faut utiliser une classe à la place.

ce qui signifie que je dois virer tous les 
<li id="limenu">
et mettre seulement des <li> devant chaque lien ?


neko a écrit :
PROBLÈME #2
Dans ton cas, la meilleure solution serait de tenter de faire un design extensible : on parle alors de mise en page fluide, extensible. Avantage, elle s'adapte à la résolution d'écran du visiteur.

si je te dis que j 'ai essayé mais que je n'y arrive pas ... ça t'etonnerait outre mesure ??? Smiley biggrin

pour les H merci des infos, j'en tiendrais compte Smiley cligne
a écrit :
ce qui signifie que je dois virer tous les
<li id="limenu">
et mettre seulement des <li> devant chaque lien ?
Oui, avec ce type de code CSS : 
#id-du-div-contenant-la-liste li a {
   (style des liens)
   }

#id-du-div-contenant-la-liste li a:hover {
   (style des liens au survol)
   }


a écrit :
si je te dis que j 'ai essayé mais que je n'y arrive pas ... ça t'etonnerait outre mesure ???
Non, c'est pas le plus facile. Pour le moment, tu devrais tenter un design fixe pour commencer.

Conseil de positionnement pour un tel design :
-> div#entête (bannière) : reste dans le flux (pas de positionnement)
-> div#menu gauche : flotte à gauche
-> div#central : flotte à gauche
-> div#menu droite : flotte à gauche
-> div#bas-de-page : flotte à gauche + "clear: both" pour qu'il se place en bas de page

(tout ceci se trouve dans un grand div#conteneur qu'on va centrer au milieu de l'écran.)


Sers-toi de commentaires dans le balisage pour délimiter (encadrer) les blocs div, afin de savoir où ils commencent et finissent. (Ça évite d'avoir un </div> en trop quand le site se complexifie :
<!-- tel bloc div -->
<div id="tel bloc">
(contenu)
</div>
<!-- fin de tel bloc ->
question : si je veux pas mettre de bannière ni de pied de page (ou du moins qu'ils ne se voient pas), avec un tel positionnement, est-ce que je pourrais leur donner un background de la même couleur que le background général (de manière a ce qu'ils se fondent dans le paysage si ces div sont absolument necessaires) ?
et autre question idiote : pourrais je envisager de mettre des div "intercalaires'" entre chaque div de façon a conserver un espacement entre eux ?
je me demande s'il ne va pas falloir que je change le titre de mon post moaaa Smiley biggrin
pfiou .... j'ai tenté de faire un nouveau design pour qu'il s'adapte a tous les ecrans (bon ok oui j'ai pompé un truc Smiley confus mais on se debrouille comme on peut hein Smiley cligne ) et j'en suis encore a m'arracher les cheveux !!!
sur IE mon image de fond du menu gauche n'apparait pas (alors que sur Opéra oui) et plus grave que tout : mon menu droite ne veut absolument pas s'aligner avec les 2 autres div, il se place bien a droite mais systématiquement en dessous .... que faire ??? ou est-ce que j'ai peché ??? Smiley rolleyes 
body {margin: 10px; background-color: #ffffff;}

#conteneur {
background-color:#ffffff; 
}

#margehaut {
background-color:#ffffff;
height:100px;
text-align:center;
line-height:60px;
}

#gauche {
width:200px;
height: 501px;
float:left;
margin-bottom:-1.2em;
padding:5px;
text-align: center;
border: 2px solid #005300;
background: url(images/menualtai4.jpg) top-left no-repeat;

}

#centre{
margin-right: 210px;
margin-left: 210px;
height: 501px;
border: 2px solid #005300;
padding: 5px;
text-align: center;
background-color:#dee8c2;
position:relative;
z-index:1;
}

#droite {
width:200px;
height: 501px;
float:right;
border: 2px solid #005300;
margin-bottom:-1.2em;
padding:5px;
text-align: center;
}


<body>
<div id="conteneur">
	<div id="margehaut"></div>
	<div id="gauche">jlqjqjgkqjlfg</div>
	<div id="centre">gqdfgqgfqgfqdgfq</div>
	<div id="droite">gqdfgqgfqgfqdgfq</div>
</div>
</body>
quelques heures en plus et des centaines de milliers de cheveux en moins, mon cadre de droite est aligné verticalement avec les 2 autres en lui collant un margin-top negatif ...
c'est bon comme méthode ?
a écrit :
et autre question idiote : pourrais je envisager de mettre des div "intercalaires'" entre chaque div de façon a conserver un espacement entre eux ?
Non !!
Ça, c'est ce qu'on faisait avec une mise en page en tableaux, en utilisant des cellules vides pour créer des espacements.
En CSS, il suffit de jouer avec les marges pour espacer (positionner) un élément. (On peut aussi jouer avec les paddings, mais ça demande un brin de connaissances en plus pour ne pas avoir de mauvaises surprises.)


a écrit :
<div id="margehaut"></div>
Plus de ça.

Si tu veux vraiment une marge en haut, sans bannière, tu as trois solutions :
1 - englober ton design dans un grand div sur lequel tu places une marge haute : "margin-top: xxxpx;"
2 - placer la même marge sur chacun de tes divs (menu gauche, bloc central, menu droit)
3 - placer directement cette marge sur le body. La fenêtre du navigateur correspond à l'élément HTML, mais le body, on peut le modifier en largeur/hauteur, lui filer des marges :
body {
margin-top: 100px;
}



Rappel : 
margin : top right bottom left;
(Pour s'en souvenir : [b]TR[/b]ou[b]BL[/b]e)

margin-top: 100px;
< = >
margin : 100px 0 0 0;



a écrit :
c'est bon comme méthode ?
On peut probablement faire plus propre, mais les designs fluides, ce n'est pas mon truc. Smiley smile
Modifié par Smiley neko (17 May 2006 - 15:11)
Sujet clos
Aller à