Barre de menu

Bonjour a tous, j'ai commencé a apprendre le html+css cette nuit pour me mettre rapidement a la création d'une page web, pour débuter. J'ai donc créer un premier essai de template et me suis mit a la réalisation de la page d'accueil.

Après une première galère sur le background et le logo, j'en arrive à la barre de menu.


3 soucis que j'aimerai résoudre :

*Comme vous pouvez le constater, le menu est un peu déformer... J'ai en gros fait une découpe de celui-ci en plusieurs petites images... Surement que durant la découpe d'image celles-ci n'ont pas prit les même positions. Je voulais donc savoir s'il était possible de les recadrer sur la page pixel par pixel.

*Quand je fais un zoom sur la barre, et bien les dernières images se position les unes en dessous des autres, comment faire pour que la barre reste fixe ?

*J'aimerai également remonter cette dite barre au niveau du logo, a 1 centimètres du slogan "let's put a smile on that face" environ.

Le code est court pour le moment... Et j'espère que mes questions vous seront agréablement posés sans quoi je détaillerai d'avantage.

<div class="bloc_page">
<header>
<div class="logo_principal">
<a class="accueil" href="#"><img src="images/logo.png" alt="InSane"></a>
</div>
<ul id="menu">
<li><img class="barre_1" src="images/bouton/barre_1.png" alt="barre_1"></li>
<li><a class="accueil" href="#"><img src="images/bouton/accueil0.png" alt="accueil" title="Accueil"/></a></li>
<li><a class="actu" href="#"><img src="images/bouton/actualites0.png" alt="actualites" title="Actualités"/></a></li>
<li><a class="streaming" href="#"><img src="images/bouton/streaming0.png" alt="streaming" title="Streaming"/></a></li>
<li><a class="events" href="#"><img src="images/bouton/events0.png" alt="evenements" title="Evenements"/></a></li>
<li><a class="galerie" href="#"><img src="images/bouton/galerie0.png" alt="galerie" title="Galerie"/></a></li>
<li><a class="equipes" href="#"><img src="images/bouton/equipes0.png" alt="equipes" title="Equipes"/></a></li>
<li><a class="about" href="#"><img src="images/bouton/propos0.png" alt="about" title="A propos"/></a></li>
<li><a class="contact" href="#"><img src="images/bouton/contact0.png" alt="contact" title="Contact"/></a></li>
<li><img class="barre_2" src="images/bouton/barre_2.png" alt="barre_2"></li>
</ul>
<p class="construction"> En Construction... </p>
</header>
</div>

.logo_principal{
margin-top: 50px; text-align: center;
}

body
{
background: url("images/background.png") fixed no-repeat;
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardisée */
}

.construction
{
	font-family: Impact, "Arial Black", Arial, Verdana, sans-serif;
	color: white;
	font-size: 30px;
	text-align: center;
}

#menu{
text-align: center;
}

#menu li{
display: inline; list-style: none;
}
	
#menu a {  
display: inline-block; margin: 0px 0px; 
}

PS: Je ne demande pas vraiment une réponse en code, simplement des indications, conseils de balises !

En vous remerciant par avance !

Grouh
Modifié par Grouh (24 Jul 2013 - 14:34)

Bonjour,

Je ne t'aiderai pas à trouver une solution pour faire de la bidouille, c'est pas trés propre tout çà ! Par contre t'aurais pu mettre ta bordure toi même sans image...

li{ border-bottom : 1px solid #aeaeae; }

Bonjour, tout d'abord merci de ta réponse.

Ce n'est pas une bordure mais une barre imagé qui part sur de la transparence sur les côtés.
Quand tu dis que ce n'est pas très propre, peux tu détailler ? Je débute a peine comme fait remarqué sur le premier post, donc si tu pouvais m'apporter quelques précisions afin que je corrige dès maintenant mes premières habitudes erronées.
Modifié par Grouh (24 Jul 2013 - 16:07)

Grouh a écrit :

Quand tu dis que ce n'est pas très propre, peux tu détailler ? Je débute a peine comme fait remarqué sur le premier post, donc si tu pouvais m'apporter quelques précisions afin que je corrige dès maintenant mes premières habitudes erronées.

Il voulais probablement comparer une image par rapport à une règle CSS.

Hum... Je ne vois toujours, ma façon d'incorporer la barre n'est pas la meilleur ?
Voici ce que j'ai fait de nouveau, pourriez-vous me dire s'il y a une meilleur façon d'optimiser le tout ?

l'HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>InSane Online - Le Site</title>
    </head>
    <body>
		<div id="bloc_page">
		<header>
		<div id="logo_principal">
			<a href=http://www.google.fr><img src="images/logo.png" alt="InSane" title="Retour a l'acceuil"></a>
			<ul id="list">
			<li><a href="#" title="Accueil">ACCUEIL</a></li>
			<li><a href="#" title="Actualités">ACTUALITES</a></li>
			<li><a href="#" title="Streaming">STREAMING</a></li>
			<li><a href="#" title="Evenements">EVENEMENTS</a></li>
			<li><a href="#" title="Galerie">GALERIE</a></li>
			<li><a href="#" title="Equipes">EQUIPES</a></li>
			<li><a href="#" title="A propos">A PROPOS</a></li>
			<li><a href="#" title="Contact">CONTACT</a></li>
			</ul>
			<img id ="barre" src="images/bouton/barre.png" alt="barre">
		</div>
		</header>
		</div>
		<p class="construction"> En construction. </p>
  </body>
</html>

Le CSS

body{
	background: url("images/background.png") fixed no-repeat;
	-webkit-background-size: cover; /* pour Chrome et Safari */
	-moz-background-size: cover; /* pour Firefox */
	-o-background-size: cover; /* pour Opera */
	background-size: cover; /* version standardisée */
}

#logo_principal{
	margin-top: 40px;
	text-align:center;
	width:1006px;
	margin:auto;
	position:relative;
}

#list{
	position:absolute;
	left:45px;
	top:0px;
}

#list{
	position:absolute;
	list-style:none;
	top: 464px;
	left: 100px;
	color: white;
	font-style:bold;
	font-family: "Myriad Pro";
	font-size: 16px;
}

#list li {  
    display: inline;  
    list-style: none; /* nécessaire pour IE7 */
	margin: 0 12px;
}

#list a{
	text-decoration:none; }

#list a:visited{
	color:white;
	text-decoration:none; 
}

#barre{
	position:absolute;
	left:40px;
	top:500px;
}

.construction{
	font-family: "Myriad Pro", Impact, "Arial Black", Arial, Verdana, sans-serif;
	color: white;
	font-size: 16px;
	text-align: center;
}

J'ai reussi a obtenir ce que je voulais

Mon objectif principal c'est de coder correctement, donc si vous avez des avis sur la question...
Des plus que j'ai du mal a comprendre le fonctionnement de la balise position...

Merci d'avance, encore une fois ^^
Modifié par Grouh (24 Jul 2013 - 21:09)

Dans ton CSS, tu écris deux fois :

#list{
	position:absolute;
	left:45px;
	top:0px;
}

#list{
	position:absolute;
	list-style:none;
	top: 464px;
	left: 100px;
	color: white;
	font-style:bold;
	font-family: "Myriad Pro";
	font-size: 16px;
}

Tu vois déjà çà c'est pas beau, tu as deux fois l'appel d'une id ... tu peux rassembler les deux en une seule ; tu pourras y observer que tu doubles et remplace ce que tu écris (position, top, left.

Ensuite moi je veux bien t'expliquer les positions :
- fixed : position qui restera fixe même quand tu vas scroller (elle te suit)
- absolute : position que se base à partir du bord ou d'un élément parent passé en relative
- relative : se positionne par rapport à son élément parent

Enfin si tu veux juste placer des blocs les uns à côté de autres, ou une liste à l'horizontal (menu) ; il faut utiliser float (left/right).

Evite au maximum de tous faire en pixel mais en % ; il faut penser à toutes résolutions et supports (portable, tablette, pc) , ... ; la dessus je peux te conseiller : BrowserStack ( .

Et enfin, validation W3C serait le top du top...