28220 sujets

CSS et mise en forme, CSS3

[Résolu]Décalage menu arrondi

Bonjour,

Tout d'abord, je me présente, Gaspar, 16 ans, Belge et jeune débutant dans le domaine du PHP/MySQL contrairement au XHTML/CSS que je pratique déjà depuis quelques mois.

Revenons-en au but de ce sujet, j'ai un problème avec mon menu à bords arrondis, il y a un espace entre le texte et les 2 bords du haut, je n'arrive pas à le supprimer, pourtant j'ai retirer toutes les marges mais rien à faire.

Voici l'adresse de la découpe: http://www.gaspif.be/decoupes/rpgfight/

Merci d'avance pour votre aide. Smiley smile
Modifié par Gaspoute (26 Aug 2006 - 00:38)
Bonjour Gaspar et bienvenue ici..... Smiley smile

Afin que l'on puisse t'aider efficacement , pourrais tu s'il te plait inclure un post avec ton code source et ton css . Cela évite des allers-retours et permet de tout voir d'un coup.

Pour ton problème , il est également apprécié que tu puisse le localiser de manière très précise . Est ce que tu parles du menu qui contient "crér un personnage" ?

Bien a toi ...
Modifié par RoseGrenouille (23 Aug 2006 - 21:44)
Voici les codes:
<!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>RPG Fight</title>
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
</head>
<!-- Découpage de Gaspoute sur CrazyGraf.com -->
<body>
<div id="global">
<div id="header">
<h1>RPG Fight</h1>
<p>Combattez et gagnez</p>
</div>
<div id="menu-gauche">
<div class="navigation">
	<div class="haut-menu"></div>
	<form action="#" method="post">
		<p>
		<label for="login">Login:</label><input type="text" name="login" size="18"/>
		<label for="motdepasse">Mot de passe:</label><input type="password" name="password" size="18" /><br /><br />
		<input type="submit" value="Valider" />
		</p>
	</form>
	<div class="bas-menu"></div>
</div>
<div class="navigation">
	<div class="haut-menu"></div>
	<ul>
		<li><a href="#">Cr&eacute;er un personnage</a></li>
		<li><a href="#">Mot de passe oubli&eacute; ?</a></li>
		<li><a href="#">Changer de mot de passe</a></li>
	</ul>
	<div class="bas-menu"></div>
</div>
</div>
<div id="menu-droite">
<h2>Partenaires</h2>
<ul>
	<li><a href="#">CrazyGraf.com</a></li>
	<li><a href="#">Glouboubilga.net</a></li>
</ul>
</div>
<div id="contenu">
<div class="news">
	<h2>RPG Fight</h2>
	<p><a href="#">CrazyGraf</a> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis quam turpis, convallis at, adipiscing sit amet, gravida at, leo. Sed velit diam, ultrices vitae, pharetra sollicitudin, tempus a, erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse egestas ligula nec diam. Aenean aliquet fermentum augue. Integer ultrices purus sit amet nunc. Morbi posuere laoreet enim. Pellentesque gravida sapien sit amet nisl. Fusce et est non mi dictum gravida. Maecenas tincidunt. Nulla dui est, convallis sit amet, pharetra nec, consequat vehicula, turpis. Vivamus mollis fringilla nunc. Donec quis erat et nibh eleifend iaculis. Curabitur a sapien ac elit mattis convallis. Proin ac sem. Ut ac justo ultrices sem accumsan luctus. Curabitur posuere mollis est. Nunc tempor dolor non tellus.</p>
	<div class="bas"></div>
</div>
<div class="news">
	<h2>RPG Fight</h2>
	<p><a href="#">CrazyGraf</a> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis quam turpis, convallis at, adipiscing sit amet, gravida at, leo. Sed velit diam, ultrices vitae, pharetra sollicitudin, tempus a, erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse egestas ligula nec diam. Aenean aliquet fermentum augue. Integer ultrices purus sit amet nunc. Morbi posuere laoreet enim. Pellentesque gravida sapien sit amet nisl. Fusce et est non mi dictum gravida. Maecenas tincidunt. Nulla dui est, convallis sit amet, pharetra nec, consequat vehicula, turpis. Vivamus mollis fringilla nunc. Donec quis erat et nibh eleifend iaculis. Curabitur a sapien ac elit mattis convallis. Proin ac sem. Ut ac justo ultrices sem accumsan luctus. Curabitur posuere mollis est. Nunc tempor dolor non tellus.</p>
	<div class="bas"></div>
</div>
<div class="news">
	<h2>RPG Fight</h2>
	<p><a href="#">CrazyGraf</a> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis quam turpis, convallis at, adipiscing sit amet, gravida at, leo. Sed velit diam, ultrices vitae, pharetra sollicitudin, tempus a, erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse egestas ligula nec diam. Aenean aliquet fermentum augue. Integer ultrices purus sit amet nunc. Morbi posuere laoreet enim. Pellentesque gravida sapien sit amet nisl. Fusce et est non mi dictum gravida. Maecenas tincidunt. Nulla dui est, convallis sit amet, pharetra nec, consequat vehicula, turpis. Vivamus mollis fringilla nunc. Donec quis erat et nibh eleifend iaculis. Curabitur a sapien ac elit mattis convallis. Proin ac sem. Ut ac justo ultrices sem accumsan luctus. Curabitur posuere mollis est. Nunc tempor dolor non tellus.</p>
	<div class="bas"></div>
</div>
</div>
<div id="footer"><p>D&eacute;coupage de <a href="http://www.crazygraf.com" alt="CrazyGraf">Gaspoute</a></p></div>
</div>
</body>
</html>


body {
	margin: 0;
	padding: 0;
	background: #CCC;
	font-family: Arial, Verdana, Helvetica, Sans-serif;
	font-size: 10px;
	color: #000;
}

a {
	color: #a56d25;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

input, textarea {
	border: 1px solid #CCC;
	font-family: Arial, Verdana, Helvetica, Sans-serif;
	font-size: 10px;
	color: #000;
}

label {
	display: block;
}

#global {
	width: 807px;
	margin: 0 auto;
	background: url(images/fond.jpg) center repeat-y;
}

#header {
	height: 185px;
	background: url(images/header.gif) center no-repeat;
}

#header h1, #header p {
	display: none;
}

#menu-gauche {
	float: left;
	width: 142px;
}

#menu-gauche .navigation {
	width: 120px;
	margin: 0 auto;
}

#menu-gauche .haut-menu {
	height: 9px;
	background: url(images/haut-menu.gif) no-repeat;
}

#menu-gauche .bas-menu {
	height: 8px;
	background: url(images/bas-menu.gif) no-repeat;
}

#menu-gauche .navigation p {
	background: url(images/fond-menu.gif) repeat-y;
	margin: 0;
}

#menu-gauche .navigation ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	background: url(images/fond-menu.gif) repeat-y;
}

#menu-gauche .navigation form {
	margin: 0;
}

#menu-droite {
	float: right;
	width: 142px;
}

#menu-droite h2 {
	height: 39px;
	background: url(images/titre.gif) right no-repeat;
	margin: 0;
	line-height: 24px;
	text-align: center;
	font-size: 12px;
}

#menu-droite ul {
	list-style-type: none;
	margin: 0 0 0 20px;
	padding: 0;
}

#contenu .news {
	width: 492px;
	background: url(images/contenu.jpg) repeat-y;
	margin: 0 auto 20px auto;
}

#contenu h2 {
	height: 42px;
	font-size: 12px;
	line-height: 28px;
	background: url(images/haut.jpg) no-repeat;
	padding-left: 10px;
}

#contenu p {
	margin: 0;
	padding: 0 15px 5px 15px;
}

#contenu .bas {
	height: 16px;
	background: url(images/bas.jpg) no-repeat;
}

#footer {
	height: 39px;
	background: url(images/footer.jpg) center no-repeat;
	text-align: center;
}

#footer p {
	margin: 0;
	padding-top: 16px;
}

Et pour le décalage, il s'agit de la colonne de gauche et des 2 menus, ils ont les mêmes propriétés CSS.

Merci. Smiley smile
bonjour gaspar,

Avec FFox,
Je vois un manque de padding ou de centrage,
dans les elements du menu gauche.
(avec juste 'text-align: center' dans 'menu-gauche', c'est déjà mieux)

Je ne vois pas ce problème là:
"espace entre le texte et les 2 bords du haut"
effectivement sous FF , aucun problème,

c'est encore un bug de décalage d'IE mais je n'aurais malheureusement pas le temps de voir ca aujourd'hui, je laisse la place aux autres ....
Rien à voir, mais j'ai cru voir du texte dont la taille est fixée en pixels (ou peut-être en points).

Tu seras heureux d'apprendre qu'avec un écran un peu confortable (ici du 1280x1024), c'est tout bonnement illisible. Smiley decu

Utiliser des tailles de texte relatives en pourcentages ou en em serait un plus, au moins pour les textes de contenu principal. Smiley cligne
Bonjour Gaspar et désolé pour hier mais j'avais d'autres trucs à faire.....

Je n'ai pas trouvé le pourquoi mais j'ai trouvé le "comment arranger ca" .

Il ne faut pas considérer un <div> haut, une partie centrale et un <div> bas dans ton cas.

Tu dois plutot intégrer ton image menu-haut.gif dans ton premier <DIV> et appliquer un padding-top dessus pour décaler ce qu'elle contient et ne pas empieter visuellement sur l'image .

ce qui donne :


#menu-gauche .haut-menu {

	padding-top:8px;
	background: url(http://www.gaspif.be/decoupes/rpgfight/images/haut-menu.gif) no-repeat;


Et la plus de souci avec IE !
Smiley biggrin
Bonne journée
Bonjour,

Merci RoseGrenouille, je teste ça de suite. Smiley smile
Et à mpop, l'internaute qui m'a demandé de le découper avait déjà commencé mais en tableau, j'ai seulement tout recoder valide xhtml 1.0 strict et en oubliant complètement les tableaux, j'ai juste repris la police, la taille, les images, ... de sa découpe.
Sujet clos
Aller à