28172 sujets

CSS et mise en forme, CSS3

Menu rebel

Bonjour ou plutôt bonsoir,

je fais appel à votre aide car je possède un menu rebel Smiley ohwell

je tente de créé deux menu ayant le même rattachement à un fichier css avec un espace entre les deux.

Petit problème c'est qu'ils sont côte à côte au lieu d'être l'un en dessous de l'autre je ne trouve pas vraiment de solution adapté.

voici le code html
<div class="element_menu" >
<h3>NAVIGATION</h3>

<ul>
  <a href="index.php"><li>Accueil</li>
  </a>
</ul>
<ul>
  <a href="articles.php"><li>Articles</li>
  </a>
</ul>
<ul>
  <a href="partenaires.php"><li>Partenaires</li>
</ul>
</div>

</div>


<div id="menu">

<div class="element_menu" >
<h3>MA COLLECTION</h3>
<ul>
  <a href="arcade/arcade.html"><li>Arcade</li></a>
</ul>

<ul>
  <a href="console.php"><li>Consoles</li></a>
</ul>
<ul>
  <a href="jeux.php"><li>Jeux</li></a>
</ul>
<ul>
  <a href="rpg/rpg.html"><li>RPG</li></a>
</ul>
<ul>
  <a href="zelda.php"><li>zelda</li></a>
</ul>

</div>

</div>


et le css
#menu
{   
   width: 140px;
   margin-bottom: 20px;
   margin-top: 20px;
   border: solid 2px #FFFFFF;
   border-radius: 10px;
   background-color: #C0C0C0;
   background
}

}

.element_menu
{ 
   margin-bottom: 5px;

}

.element_menu h3
{    
   color: #FFFFFF;
   font-family: Bauhaus 93 normal,arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}

.element_menu ul
{
   background-color: #FFFFFF;
   border-radius: 10px;
   padding: 0px;
   margin: 0px;
}

.element_menu ul li
{
   list-style: none;
   margin-bottom: 4px;
   width: 140px; 
   height: 40px;
   text-align:right;
   text-transform: uppercase;
   font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
   font-size: 88%;
   border-bottom: solid 1px #FFFFFF;
   border-radius: 25px;
	
}

.element_menu a
{
	text-decoration: none;
	color: #000000;
}

.element_menu li:hover
{
   background:url(images/pac.png) no-repeat;
   border-radius: 10px;
   border-bottom: solid 1px #0000FF;
}


le seul truc que j'ai trouvé et de supprimer le float du #menu pour qu'il soit au bon endroit mais du coup cela décale toute ma page et son contenu se retrouve en bas de page.
Bonjour,

Pour pouvoir vraiment t'aider...
Commencer par faire quelques menues (sans jeu de mot...) révisions, la partie Apprendre de ce forum est là pour cela Smiley cligne
Revoir "par exemple" :
Structure HTML et rendu CSS des balises : bloc et en-ligne
Le guide de survie du positionnement (partie 1 & 2)
Évidemment, Créer des menus simples en CSS
Cela te permettra certainement de prendre conscience de tes erreurs (structure et construction de ton code html) et de les corriger facilement Smiley cligne
La liste est non exhaustive, et tu peux à loisir parcourir de fond en comble cette partie du forum Smiley cligne
La meilleur façon de t'aider, c'est de t'apprendre à t'aider toi même; en ayant une meilleur connaissance des langages que tu utilises, en utilisant des outils adéquats (validateur de code par exemple, outils spécifiques faciles d'utilisation et souvent liés aux navigateurs pour repérer et faire des corrections éventuelles en "live"), en acquérant une bonne méthodologie de travail (indentation de ton code pour repérer d'éventuelles erreurs...)

Bon courage, à bientôt.
Pour la révision c'est fait et franchement je dois pas etre doué car je vois pas d'où vient l erreur. le positionnement est bon on peut le voir sur le site www.doubycollection.fr.

Le menu en place est quasi identique sauf que tout est dans un seul div.
Tout est bien en place mais je vois pas l'on erreur elle est sûrement sous mon nez en plus Smiley lol
Je refait quand meme un tour des cours pour essayer de comprendre mon erreur.
Pour que je prenne la bonne direction ne serai ce pas un clear qui arrangerai la situation ^^
Commences par avoir un code html valide, évite la "divite", corrige les erreurs css... Smiley cligne
Quel erreur? Le code html est bon.
Si je demande de l aide c'est que je ne vois pas l erreur, j essai de corriger depuis sans succès.

Pour la "divite" tu es pas le premier a dire ça et pourtant certains site célèbre en possède 30X plus ^^
Hello.
Douby a écrit :
Quel erreur? Le code html est bon.

Je ne crois pas non : http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.doubycollection.fr.%2F et en bonus http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.doubycollection.fr.%2F&profile=css3&usermedium=all&warning=no&vextwarning=true&lang=fr

Douby a écrit :
et pourtant certains site célèbre en possède 30X plus ^^
C'est pas une raison.

HS: La balise marquee, il faut vraiment oublier. Vraiment.
D'où viennent ces liens?

Le marquée tu le remplace par quoi du coup?
Je connais rien d autre pour faire défiler un texte.
Ces liens, c'est juste ton site passé aux validateurs. Ce qui confirme bien ce que t'a dit 6l20, rends tout ça plus clean avant histoire d'avoir une base de travail propre.

Et le marquee, tu le remplaces par rien ; le défilement de texte, c'est kitsh au possible.
Ok ça peut etre très utile pour la suite. Je viens de comprendre une chose, meme si le site fonctionne cela n empêche pas des erreurs.

Le vérificateur est parfait pour moi du coup.

Je vais reprendre a zero.

Pour le marquee c'est une question de goût sa se discute pas Smiley cligne
Modifié par Douby (29 Sep 2011 - 13:40)
J observe un truc le validateur corrige une version qui n existe plus.
Les erreur détecté du background est corrigé.

La plupart des fichier ont été deja revue, supprimé ou modifier.

Cela ne change rien au problème de base, mon menu Smiley cligne
Douby...


Préambulle : "Alsacréations est une communauté dédiée à la conception web aux normes, et notamment aux standards W3C, aux feuilles de style CSS, au langage (X)HTML, ainsi qu'à l'accessibilité du Web en général."

5 Doctypes, autant de balise head, body et d'appels aux fichiers css, probablement un petit souci avec la fonction PHP include ?!...

Non, le code html est loin d'être bon, comme te l'a montré Florian...tu as peut-être fait des corrections en local ?

Concernant ton menu, puisque c'est de cela dont il s'agit :
Si tu avais visité les liens que je t'ai fourni, tu n'aurais probablement pas ce genre de code dans ta page... Smiley sweatdrop
Pour faire simple, ton menu se compose d'une liste de liens, et en html, cela s'écrit généralement comme ceci (code du tutoriel vers lequel je te renvoyais...) par exemple :

<ul id="navigation">
	<li><a href="#" title="aller à la section 1">item1</a></li>
	<li><a href="#" title="aller à la section 2">item2</a></li>
	<li><a href="#" title="aller à la section 3">item3</a></li>
	<li><a href="#" title="aller à la section 4">item4</a></li>
	<li><a href="#" title="aller à la section 5">item5</a></li>
</ul>

<ul> ne peut avoir qu'un <li> comme "enfant", pas de <li> dans un lien (<a>) Smiley rolleyes

Concernant la divite dont je parlais plus tôt et pour reprendre le code de ton menu :

<div id="menu">
	<h3>NAVIGATION</h3>
		<ul class="element_menu">
			<li><a href="index.php">Accueil</a></li>
			<li><a href="articles.php">Articles</a></li>
			<li><a href="partenaires.php">Partenaires</a></li>
		</ul>
	<h3>MA COLLECTION</h3>
		<ul class="element_menu">
			<li><a href="arcade/arcade.html">Arcade</a></li>
			<li><a href="console.php">Consoles</a></li>
			<li><a href="jeux.php">Jeux</a></li>
			<li><a href="rpg/rpg.html">RPG</a></li>
			<li><a href="zelda.php">zelda</a></li>
		</ul>	
</div>

C'est quand même plus "sexy" que ce que tu as produit (cela peut encore être amélioré, et cela nécessite évidemment des ajustements dans ta feuille de styles...)

Au passage, pourquoi des titres de niveau 3 ici ? (penser à vérifier la cohérence du document et notamment bien construire sa hiérarchie de titres

Concernant ta balise <marquee> (balise propriétaire) elle peut avantageusement être remplacée par du javascript, mais cela demande encore des efforts supplémentaires, toutefois, comme cela te l'a déjà été indiqué, et même si cela correspond assez bien au slogan du site ("c'était mieux avant"...) et à ton design en général, c'est un poil "has been"...
On peut aimé les choses du passé et les présenter de "façon moderne", pour des "outils modernes", la touche "ancien" n'est pas chose aisé, le web c'est un métier...

Rigueur, simplicité, humilité...il te reste du chemin à parcourir et du travail à fournir, notamment au niveau de tes qualités d'écoute Smiley cligne

Bon courage.
Modifié par 6l20 (29 Sep 2011 - 15:33)
Je comprends mieux mes erreurs.. Merci pour ta patience Smiley cligne

Je concluerai, avant de me remettre au boulot, que ce que tu juge "has been" ne l'est pas pour tous.
Je me suis grandement inspirer du design de nintendo france. Ceci étant dit chacun ces gouts Smiley cligne

Et merci encore pour m avoir éclairer, je manque un peu de recul. Je pensais avoir compris certaine choses et en fait non, le travail paye toujours.

Je vais revoir certaines choses et la soumettrai ici meme pour avoir un avis sur ma progression.
Pas de souci, nous te souhaitons sincèrement bonne progression Smiley cligne

Concernant le design "grandement inspiré" de Nintendo France, tu n'as pas précisé l'année de référence ?!... Smiley lol
c'est vrai ^^ aussi

qu'est ce que vous reprochez à mon design exactement?

en même temps la je reprends le cours du site du zéro et me rends compte que c'est sur leur cours que j'ai pris l'idée du
<div id="menu">
<div class="element_menu" >
Douby a écrit :
Le code html est bon.

Parfaitement. Le validateur a tort car il est l'oeuvre du démon! Cette vérité supérieure me fut révélée par l'archange Gabriel qui me dicta le Livre de la Vérité Supravalide Transcendantale.

Douby a écrit :
Pour la "divite" tu es pas le premier a dire ça et pourtant certains site célèbre en possède 30X plus ^^

La célebrité n'excuse ou ne légitime rien. Charles Manson est célèbre, c'est pas un modèle à suivre pour autant. (J'ai aussi pensé à Hitler et à Paris Hilton comme exemples, mais pour cette dernière j'ai eu peur qu'on voie ça comme un point Godewin.)
Modifié par fvsch (29 Sep 2011 - 21:58)
Douby a écrit :
en même temps la je reprends le cours du site du zéro et me rends compte que c'est sur leur cours que j'ai pris l'idée du
<div id="menu">
<div class="element_menu" >

Si le but de cet exemple de code est de fournir la structure de base d'un menu simple, par exemple comme ceci:
<div id="menu">
  <div class="element_menu"><a href="#">Un</a></div>
  <div class="element_menu"><a href="#">Deux</a></div>
  <div class="element_menu"><a href="#">Trois</a></div>
</div>

Alors on gagnera à utiliser la convention qui dit qu'un menu est une liste de liens, ce qui nous donne donc:
<ul id="menu">
  <li class="element_menu"><a href="#">Un</a></li>
  <li class="element_menu"><a href="#">Deux</a></li>
  <li class="element_menu"><a href="#">Trois</a></li>
</ul>

Un des avantages est que ça donne un rendu plus lisible dans le cas (certes rare) d'un affichage sans styles appliqués. Après c'est une convention, on n'est pas obligé de la suivre (et ça n'est pas capital ici), mais elle est pas mal.

Une autre erreur que tu avais dans ton code de départ c'est d'utiliser une nouvelle liste pour chaque nouvel élément de liste. Tu écrivais (en enlevant les liens et l'erreur associée, pour simplifier):
<ul>
  <li>Un</li>
</ul>
<ul>
  <li>Deux</li>
</ul>
là où la logique dicterait:
<ul>
  <li>Un</li>
  <li>Deux</li>
</ul>
Sujet clos
Aller à