Sujet Précédent Sujet Suivant

Comment changer la hauteur de mon menu

gaya_102 -  
 gaya_102 -
Bonjour,

Voila la page

http://www.lemondedegaya.fr/essaie.php

mon menu : mariage naissance.... est trop bas

Pourtant il s'agit d'un include qui est bien placé sur les autres pages. Pourquoi dans celle la c'est pas le cas car dans le ccs du menu je lui spécifie bien la hauteur à laquelle il doit être.

code de la page 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>La collection faire-part mariage - le monde de gaya</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1;" />
<meta name="description" content="Vos faire-part de naissance, mariage, remerciements, stickers et tableaux personnalisés qui vous correspondent le mieux ... Aide pour vos événements : mariage/pacs, communion, anniversaire ..." />
<meta http-equiv="content-language" content="fr, en" />
<meta name="author" content="Thaon Sandrine" />
<link rel="shortcut icon" type="image/x-icon" href="gaya_files/favicon0.htm" />
<link rel="stylesheet" href="page4.css" type="text/css" media="all" />
</head>
<body>
<div class="centreX">
	<div id="header">
		<p class="texte"><strong><span class="titre">Le monde de Gaya</span> <span class="slogan">Faire-part de mariage originaux et personnalisés.</span></strong></p>
		
					<?php
include("menu.php");
?>
		
	</div>
	<div id="content">

		<ul class="menuG">
			<li><a class="gauche" href="http://www.lemondedegaya.fr/collection.php">La collection</a></li>
			<li><a class="gauche" href="http://www.lemondedegaya.fr/format.php">Les formats</a></li>
			<li><a class="gauche" href="http://www.lemondedegaya.fr/papiers.php">Les papiers</a></li>
			<li><a class="gauche" href="http://www.lemondedegaya.fr/textes.php">Idées de textes</a></li>
			<li><a class="gauche" href="http://www.lemondedegaya.fr/conditions.php">Conditions de ventes</a> </li>
		</ul>
		<div class="fenetre">

			<h1>La collection de faire-part de mariage </h1>
			<ul>
				<li><a href="http://www.lemondedegaya.fr/faire-part-cygne.htm" class="uli" ><img src="images/comme_site_devant_petite.jpg" alt="" width="141" height="100" /><strong><p>La branche</strong></p></a>
					<p>A partir de 1.95 euros</p>
				</li>
				<li><a href="http://www.lemondedegaya.fr/faire-part-cygne.htm" class="uli" ><img src="images/comme_site_devant_petite.jpg" alt="" width="141" height="100" /><strong>La branche</strong></a>
					<p>A partir de 1.95 euros</p>
				</li>
				<li><a href="http://www.lemondedegaya.fr/faire-part-cygne.htm" class="uli" ><img src="images/comme_site_devant_petite.jpg" alt="" width="141" height="100" /><strong>La branche</strong></a>
					<p>A partir de 1.95 euros</p>
				</li>
				<li><a href="http://www.lemondedegaya.fr/faire-part-cygne.htm" class="uli" ><img src="images/comme_site_devant_petite.jpg" alt="" width="141" height="100" /><strong>La branche</strong></a>
					<p>A partir de 1.95 euros</p>
				</li>
				<li><a href="http://www.lemondedegaya.fr/faire-part-cygne.htm" class="uli" ><img src="images/comme_site_devant_petite.jpg"alt="" width="141" height="100" /><strong>La branche</strong></a>
					<p>A partir de 1.95 euros</p>
				</li>
			</ul>
		</div>
	</div>
	<div id="footer">...</div>
</div>
</body>
</html>


css de la page 

.hidden {
	position:absolute;
	top:-2000em;
	left:-2000em;
	width:1px;
	height:1px;
	overflow:hidden;
	}


li
{display:inline;}

.centreX
{
	position:absolute;
	left:50%;
	margin-left:-490px;
	width: 980px;
	top:50%;
	margin-top:-271px;
	height: 542px;
	background-image : url("images/fond_page.jpg");
	background-repeat: no-repeat;
	border :2px solid black;
	font-style: italic;
}
body {
	background-color: #f7d8fc;
	font-family:Georgia,Comic Sans MS, Times New Roman, Times, serif;
	font-style: italic;}
	
	span.titre {
color: #b04cbf;
	font-family: Georgia,Comic Sans MS, Times New Roman, Times, serif;

	font-size: 35px;
	text-decoration: none;
	text-align: center;
	position:absolute;
	top: 5px;
	left : 185px;
	font-style: italic;

}

a {
	color: #781d89;
	font-family:Georgia,Comic Sans MS, Times New Roman, Times, serif;
font-style: italic;
	font-size: 15px;
	text-decoration: none;
	text-align: center;
} 

a:hover {
    color: #e365f6;
	font-family:Georgia,comic Sans MS, Times New Roman, Times, serif;

	font-size: 15px;
	text-decoration: none;
	text-align: center;
	font-style: italic;
}

span.slogan {
color: #7890d2;
	font-family: Georgia ,Comic Sans MS, Times New Roman, Times, serif;

	font-size: 17px;
	text-decoration: none;
	text-align: right;
	position:absolute;
	top: 50px;
	left: 558px;
	font-style: italic;
	margin-right:15px;
	}
	
	h1
	{
	font-size: 17px;
color: #781d89;
text-align:left;
text-decoration: underline ;
position:absolute;
top: 140px;
left:230px
}
	
	
	#menuHorizon {
	 margin-top: 108px;
	 float:right;
	 padding-right: 5px;
}

.menuG {
position: relative;
	float:left;
	width:208px;
	height:283px;
	top: 210px;
	left: 5px;
	text-align: center;
	font-size: 17px;
	}


merci d'avance pour votre aide
A voir également:

6 réponses

Réponse 1 / 6
M@dien Messages postés 451 Statut Membre 74
 
Bonjour,

Je te propose plusieurs modifications:

A modifier: 
#menuHorizon {
float:right;
margin-top:105px;
padding-right:5px;
}


A ajouter: 
#header p.texte {
margin:0px;
}
#menuHorizon li {
display:inline;
height:26px;
line-height:26px;
vertical-align:bottom;
}


Ca devrait régler le problème et améliorer la compatibilité entre les navigateurs, mais je n'ai testé que sur Firefox, par manque de temps.

Bon courage pour la suite!
0
gaya_102
 
merci pour ton aide mais du coup menu est completement en haut et pourtant j'ai changer la hauteur mais il ne bouge pas 

.hidden {
	position:absolute;
	top:-2000em;
	left:-2000em;
	width:1px;
	height:1px;
	overflow:hidden;
	}


li
{display:inline;}

.centreX
{
	position:absolute;
	left:50%;
	margin-left:-490px;
	width: 980px;
	top:50%;
	margin-top:-271px;
	height: 542px;
	background-image : url("images/fond_page.jpg");
	background-repeat: no-repeat;
	border :2px solid black;
	font-style: italic;
}
body {
	background-color: #f7d8fc;
	font-family:Georgia,Comic Sans MS, Times New Roman, Times, serif;
	font-style: italic;}
	
	span.titre {
color: #b04cbf;
	font-family: Georgia,Comic Sans MS, Times New Roman, Times, serif;

	font-size: 35px;
	text-decoration: none;
	text-align: center;
	position:absolute;
	top: 5px;
	left : 185px;
	font-style: italic;

}

a {
	color: #781d89;
	font-family:Georgia,Comic Sans MS, Times New Roman, Times, serif;
font-style: italic;
	font-size: 15px;
	text-decoration: none;
	text-align: center;
} 

a:hover {
    color: #e365f6;
	font-family:Georgia,comic Sans MS, Times New Roman, Times, serif;

	font-size: 15px;
	text-decoration: none;
	text-align: center;
	font-style: italic;
}

span.slogan {
color: #7890d2;
	font-family: Georgia ,Comic Sans MS, Times New Roman, Times, serif;

	font-size: 17px;
	text-decoration: none;
	text-align: right;
	position:absolute;
	top: 50px;
	left: 558px;
	font-style: italic;
	margin-right:15px;
	}
	
	h1
	{
	font-size: 17px;
color: #781d89;
text-align:left;
text-decoration: underline ;
position:absolute;
top: 140px;
left:230px
}
	
	
#header p.texte {
margin:0px;
}
#menuHorizon li {
display:inline;
height:400px;
line-height:26px;
vertical-align:bottom;
left:100px
}

.menuG {
position: relative;
	float:left;
	width:208px;
	height:283px;
	top: 210px;
	left: 5px;
	text-align: center;
	font-size: 17px;
	}
0
Réponse 2 / 6
M@dien Messages postés 451 Statut Membre 74
 
Ré-essaye avec ce code CSS complet: 
.hidden {
	position:absolute;
	top:-2000em;
	left:-2000em;
	width:1px;
	height:1px;
	overflow:hidden;
	}


li
{display:inline;}

.centreX
{
	position:absolute;
	left:50%;
	margin-left:-490px;
	width: 980px;
	top:50%;
	margin-top:-271px;
	height: 542px;
	background-image : url("images/fond_page.jpg");
	background-repeat: no-repeat;
	border :2px solid black;
	font-style: italic;
}
body {
	background-color: #f7d8fc;
	font-family:Georgia,Comic Sans MS, Times New Roman, Times, serif;
	font-style: italic;}
	
	span.titre {
color: #b04cbf;
	font-family: Georgia,Comic Sans MS, Times New Roman, Times, serif;

	font-size: 35px;
	text-decoration: none;
	text-align: center;
	position:absolute;
	top: 5px;
	left : 185px;
	font-style: italic;

}

a {
	color: #781d89;
	font-family:Georgia,Comic Sans MS, Times New Roman, Times, serif;
font-style: italic;
	font-size: 15px;
	text-decoration: none;
	text-align: center;
} 

a:hover {
    color: #e365f6;
	font-family:Georgia,comic Sans MS, Times New Roman, Times, serif;

	font-size: 15px;
	text-decoration: none;
	text-align: center;
	font-style: italic;
}

span.slogan {
color: #7890d2;
	font-family: Georgia ,Comic Sans MS, Times New Roman, Times, serif;

	font-size: 17px;
	text-decoration: none;
	text-align: right;
	position:absolute;
	top: 50px;
	left: 558px;
	font-style: italic;
	margin-right:15px;
	}
	
	h1
	{
	font-size: 17px;
color: #781d89;
text-align:left;
text-decoration: underline ;
position:absolute;
top: 140px;
left:230px
}
	
	
	#menuHorizon {
	 margin-top: 108px;
	 float:right;
	 padding-right: 5px;
}

#header p.texte {
margin:0px;
}
#menuHorizon li {
display:inline;
height:400px;
line-height:26px;
vertical-align:bottom;
left:100px
}


.menuG {
position: relative;
	float:left;
	width:208px;
	height:283px;
	top: 210px;
	left: 5px;
	text-align: center;
	font-size: 17px;
	}
0
Réponse 3 / 6
gaya_102
 
merci ca marche. Par contre comment je peux faire pour que ca prenne toute la place qui lui ai réservé cet a dire bande rose. ON pourai mettre des espaces entre les titre et les photos?

Par contre sous IE le menu est un poil trop bas je pense faire un code css que pour ie. Tu penses que ca irai?

en tout cas vraiment merci de ton aide
0
Réponse 4 / 6
gaya_102
 
ou plus tot mettre 20 px entre le bord du site et mon dernier titre. Merci
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
M@dien Messages postés 451 Statut Membre 74
 
Pour ajouter une marge à droite dans le menu: 
#menuHorizon {
float:right;
margin-top:108px;
padding-left:0;
padding-right:20px;
}

Un test pour IE pour le menu (pas sûr du résultat, je ne teste que sur firefox avec Firebug): 
#menuHorizon li {
display:inline;
height:400px;
line-height:26px;
vertical-align:top;
left:100px
}

0
Réponse 6 / 6
gaya_102
 
Franchement c'est parfait merci beaucoup
0

Discussions similaires

Dimensions L x l x H : comment lire ces infos ?
Miss-Curieuse -
valou -

8 réponses
couleur personnage
Gasper -
Izzi -

9 réponses