[Div] Positionnement

Question

Cawc

28 Sep 2010 à 14:23

Bonjour,

J'aimerais pouvoir positionner deux calques différents dans un calque. J'ai un calque principal dans lequel je souhaite positionner deux menus différents. Le premier menu se trouve en haut à droite du calque principal et le second menu devrait se trouver en bas à gauche du calque principal. Pour le premier menu, je suis arriver à le positionner comme je le souhaitais, mais pour le deuxième j'ai quelques problèmes.

Voici une capture d'écran de mon site :

Comme vous le voyez sur l'image, le deuxième menu est collé au premier. J'aimerais donc pouvoir le mettre en bas du calque principal (calque avec le fond gris).

Merci d'avance pour votre réponse.
Modifié par Cawc (28 Sep 2010 - 18:06)

Stéphanie W.

28 Sep 2010 à 14:28

Bonjour

Par calque principal tu entends quoi exactement ? Le trucs gris en fond ?

Quelques lignes de code seraient les bienvenues également.

Bon sinon là comme ça sans code :
- position relative sur le calque que tu appelles "principal"
- pour placer ton calque haut droit


position:absolute;
top:0px;
right:0px;

- pour placer ton calque bas gauche


position:absolute;
bottom:0px;
left:0px;

à adapter avec plus ou moins de px de marge, mais encore une fois, le code css / html serait le bienvenue Smiley smile

Modifié par InpIxelItrust (28 Sep 2010 - 14:30)

Cawc

28 Sep 2010 à 14:37

Oui, excuse-moi. Par calque principal, j'entends le calque avec le fond gris. Voici mon code :

Code HTML :


<!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">
	<head>
		<link href="style.css" rel="stylesheet" type="text/css" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Site personnel</title>
	</head>
	<body>
		<div id="global">
        	<div id="header">
            	<div id="topmenu">
                	<ul>
                    	<li><a href="#">Lien 1.1</a></li>
                        <li><a href="#">Lien 1.2</a></li>
                        <li><a href="#">Lien 1.3</a></li>
                        <li><a href="#">Lien 1.4</a></li>
                    </ul>
                </div>
                <div id="headermenu">
                	<ul>
                    	<li><a href="#">Lien 2.1</a></li>
                        <li><a href="#">Lien 2.2</a></li>
                        <li><a href="#">Lien 2.3</a></li>
                        <li><a href="#">Lien 2.4</a></li>
                    </ul>
                </div>
            </div>
            <div id="content">Calque contenu</div>
            <div id="footer">Calque pied de page</div>
        </div>		
	</body>
</html>

Code CSS :


#topmenu
{
	background-color:#53A9FF;
	border:1px #000 solid;
	padding-right:10px;
	text-align:right;
}

#topmenu ul
{
	list-style-type:none;	
}

#topmenu ul li
{
	display:inline;
}

/* FIN Définition du menu du haut */

/* DEBUT Définition du menu principal */

#headermenu
{
	border:1px #000 solid;
	position:absolute;
	margin:0px;
	padding:0px;
	text-align:left;
}

#headermenu ul
{
	list-style-type:none;
}

#headermenu ul li
{
	display:inline;	
}

#headermenu ul li
{
	display:inline;	
}

/* FIN Définition du menu principal */

#content
{
	border:1px #000 solid;
	height:160px;
	margin-bottom:5px;
	width:800px;
}

#footer
{
	border:1px #000 solid;
	height:160px;
	width:800px;
}

Merci pour ton aide.

Cawc

28 Sep 2010 à 16:03

J'ai essayé avec les positions absolues et cela fonctionne très bien, merci pour ton aide !!!

Maintenant j'ai une autre question, j'aimerais pouvoir étendre mon calque du "topmenu" sur toute la longueur du calque principal "header" tout en laissant le menu aligner sur la droite. J'ai essayé plusieurs variantes, mais sans résultat. Si je donne une longueur au calque "topmenu", la couleur de fond s'étend sur toute la longueur comme je le souhaite mais le menu ne s'aligne plus sur la droite et là je n'arrive plus à le faire changer de position.

Pour être plus clair, voici mon site actuellement :

Et voilà à quoi je voudrais que cela ressemble :

Mon nouveau code CSS :


@charset "utf-8";
/* Feuille de style CSS */

/* Définition des calques */

#global
{
	margin:auto;
	width:800px;
}

#header
{
	background-color:#CCC; 
	height:160px;
	margin-bottom:5px;
	position:relative;
	width:800px;
}

/* DEBUT Définition du menu du haut */

#topmenu
{
	background-color:#53A9FF;
	position:absolute;
	right:0px;
}

#topmenu ul
{
	list-style-type:none;
	margin:auto;
	padding:0px;
	right:0px;		
}

#topmenu ul li
{
	float:left;
}

#topmenu ul li a
{
	display:block;
	text-align:center;
	width:100px;
}

/* FIN Définition du menu du haut */

/* DEBUT Définition du menu principal */

#headermenu
{
	bottom:0px;
	left:0px;
	position:absolute;
}

#headermenu ul
{
	list-style-type:none;
	margin:0px;
	padding:0px;	
}

#headermenu ul li
{
	float:left;	
	margin-right:10px;
}

#headermenu ul li a
{
	background-color:#53A9FF;
	display:block;
	padding:5px;
	text-align:center;
	width:100px;	
}

#headermenu ul li a:hover
{
	background-color:#FFF;
}


/* FIN Définition du menu principal */

#content
{
	border:1px #000 solid;
	height:160px;
	margin-bottom:5px;
	width:800px;
}

#footer
{
	border:1px #000 solid;
	height:160px;
	width:800px;
}

Merci pour votre aide.

Stéphanie W.

28 Sep 2010 à 16:38

Humm vu ton html, tu peux peut-être tricher avec un truc du genre :


#topmenu 
{ 
   background-color:#53A9FF; 
   width:800px; /* largeure de ton header gris si j'ai bien lu ? */
   /* edit */ 
  height: 20px;
} 

#topmenu ul 
{ 
   position:absolute; 
   right:0px;

}

L'idée étant de mettre la couleur de fond sur tout ton div, et de placer le ul plutôt que le div à droite. Par contre il faut mettre une largeur et hauteur à ton topmenu pour qu'on le voit en bleu du coup

A tester Smiley smile

Modifié par InpIxelItrust (28 Sep 2010 - 16:43)

Cawc

28 Sep 2010 à 17:43

Merci pour ta réponse, ça fonctionne. C'est étrange, car il me semble que j'avais essayé la même chose et ça ne marchait pas.

InpIxelItrust a écrit :

Humm vu ton html, tu peux peut-être tricher avec un truc du genre :

Il y aurait des choses incorrectes avec mon code ? Il est pourtant valide à la norme du W3C.

Est-ce que la manière dont j'ai structuré mon site est correcte ? J'entends par là, qu'est-ce que je pourrais changer pour avoir un code plus "propre" ?

Stéphanie W.

28 Sep 2010 à 18:04

Cawc a écrit :

Il y aurait des choses incorrectes avec mon code ? Il est pourtant valide à la norme du W3C.

Est-ce que la manière dont j'ai structuré mon site est correcte ? J'entends par là, qu'est-ce que je pourrais changer pour avoir un code plus "propre" ?

Noooo du tout je me suis mal exprimée disoulé Smiley sweatdrop

, ton code est clean justement, ce que je voulais dire, c'est que du coup tu as pas besoin d'ajouter un div en plus, tu peux utiliser directement #topmenu ul

Encore désolé pour la mécompréhension Smiley smile

Modifié par InpIxelItrust (28 Sep 2010 - 18:04)

Cawc

28 Sep 2010 à 18:05

Pas de soucis. Encore un grand merci pour ton aide. Grâce à toi j'ai bien pu avancer mon projet.

J'ai maintenant plus ou moins fini le gabarit de mon site et cela donne ça :

Je suis arrivé à ce que je voulais et le tout est validé XHTML et CSS. Mais quand je regarde mon fichier CSS, il me semble que la façon dont j'ai codé est un peu du bricolage. Je parle essentiellement du positionnement des trois calques se trouvant sur la droite.

Voici mon code CSS :


@charset "utf-8";

/* Définition des calques */

#global
{
	margin:auto;
	width:800px;
	position:relative;
}

#header
{
	background-color:#CCC; 
	height:160px;
	margin-bottom:5px;
	position:relative;
	width:800px;
}

/* DEBUT Définition du menu du haut */

#topmenu
{
	background-color:#53A9FF;
	height:20px;
	position:absolute;
	width:800px;
}

#topmenu ul
{
	list-style-type:none;
	margin:auto;
	padding:0px;
	position:absolute;
	right:0px;		
}

#topmenu ul li
{
	float:left;
}

#topmenu ul li a
{
	display:block;
	text-align:center;
	width:100px;
}

/* FIN Définition du menu du haut */

/* DEBUT Définition du menu principal */

#headermenu
{
	bottom:0px;
	left:0px;
	position:absolute;
}

#headermenu ul
{
	list-style-type:none;
	margin:0px;
	padding:0px;	
}

#headermenu ul li
{
	float:left;	
	margin-right:10px;
}

#headermenu ul li a
{
	background-color:#53A9FF;
	display:block;
	padding:5px;
	text-align:center;
	width:100px;	
}

#headermenu ul li a:hover
{
	background-color:#FFF;
}


/* FIN Définition du menu principal */

#content
{
	margin-bottom:5px;
	width:800px;
	
}

#section
{
	background-color:#CCC;
	height:400px;
	float:left;
	width:600px;
	margin-right:5px;
	margin-bottom:5px;
}

#news
{
	background-color:#CCC;
	height:100px;
	position:absolute;
	right:0px;
	width:195px;
}

#informations
{
	background-color:#CCC;
	position:absolute;
	top:270px;
	height:100px;
	right:0px;
	width:195px;
}

#links
{
	background-color:#CCC;
	position:absolute;
	top:375px;
	height:100px;
	right:0px;
	width:195px;
}

#footer
{
	background-color:#53A9FF;
	clear:both;
	height:20px;
	text-align:center;
	width:800px;
}

Et le code HTML :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<link href="style.css" rel="stylesheet" type="text/css" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Site personnel</title>
	</head>
	<body>
    	<div id="global">
            <div id="header">
                <div id="topmenu">
                    <ul>
                        <li><a href="#">Lien 1.1</a></li>
                        <li><a href="#">Lien 1.2</a></li>
                        <li><a href="#">Lien 1.3</a></li>
                        <li><a href="#">Lien 1.4</a></li>
                    </ul>
                </div>
                <div id="headermenu">
                    <ul>
                        <li><a href="#">Lien 2.1</a></li>
                        <li><a href="#">Lien 2.2</a></li>
                        <li><a href="#">Lien 2.3</a></li>
                        <li><a href="#">Lien 2.4</a></li>
                        <li><a href="#">Lien 2.5</a></li>
                    </ul>
                </div>
             </div>
             <div id="content">
                <div id="section"></div>
                <div id="news"></div>
                <div id="informations"></div>
                <div id="links"></div>
             </div>
             <div id="footer">Ce site est conforme aux normes <a href="http://validator.w3.org/check?uri=referer">XHTML</a> et <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>.</div>
    	</div>		
	</body>
</html>

Merci pour votre réponse.
Modifié par Cawc (29 Sep 2010 - 10:18)

Sujet clos