28172 sujets

CSS et mise en forme, CSS3

Aligner horizontalement un menu

Salut à tous, je tente de comprendre mais ça me dépasse totalement... j'ai lu et relu tous tutoriels, sur x sites mais je mène a rien Smiley decu

Code HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DJ Greeki's website</title>
<link href="styles/style_basic.css" rel="stylesheet" media="all" type="text/css">
</head>

<body>
<div class="header"><img src="img/kit/header.png" height="189" width="1024"></div>
<div class="menu_home"><img src="img/kit/menu_home.png" height="48" width="425"></div>
<div class="menu_about"><img src="img/kit/menu_about.png" height="48" width="143"></div>
<div class="menu_gallery"><img src="img/kit/menu_gallery.png" height="48" width="142"></div>
<div class="menu_podcast"><img src="img/kit/menu_podcast.png" height="48" width="155"></div>
<div class="menu_contact"><img src="img/kit/menu_contact.png" height="48" width="163"></div>
<div class="body"><img src="img/kit/body.png" height="533" width="1024"></div>



</body>
</html>





Code CSS:

header
{}

.menu_home
{}

.menu_about
{}

.menu_gallery
{position:absolute; left: 425px; bottom: 189px;}

.menu_podcast
{;}

.menu_contact
{}

.body
{position:absolute;}


Oui je sais on frôle le néant mais je suis débordé et le rendu là est obtenu des suites de x tentatives.. Smiley rolleyes

Il semblerait que les positions absolutes sont les meilleures dans cette situation?
Modifié par greeki (13 Jun 2015 - 20:19)
salut,
il ne s'agit probablement pas d'aide que tu cherches tant ce que tu demandes est simplissime. Si tu as du mal à réaliser quelque chose d'aussi élémentaire, je te recommanderais vivement de (re)voir les bases du CSS pour mieux comprendre ce que tu fais.

Concernant les exemples de menus HTML, ce n'est vraiment pas ce qui manque sur le net : Mammouthland, Openclassroom, ici même ! Et un dernier Creativejuiz. D'autant qu'on te donne un code final pour voir directement le résultat.

PS : si tu pouvais utiliser les balises codes appropriées ça serait plus sympa pour ceux qui lisent.
Salut Zelalszan,

Le dernier lien m'avait totalement échapé... Je propose de le faire moi même et de lâcher le résultat final Smiley lol 


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>DJ Greeki's website</title>
		<link href="styles/style_basic.css" rel="stylesheet" media="all" type="text/css"> 
    </head>

    <body>
	<img src="img/kit/header.png" height="189" width="1024">
	
	<ul id="menu">
	<li><img src="img/kit/menu_home.png" height="48" width="425"></li>
	<li><img src="img/kit/menu_about.png" height="48" width="143"></li>
	<li><img src="img/kit/menu_gallery.png" height="48" width="142"></li>
	<li><img src="img/kit/menu_podcast.png" height="48" width="155"></li>
	<li><img src="img/kit/menu_contact.png" height="48" width="163"></li>
	</ul>
	
	<img src="img/kit/body.png" height="533" width="1024">
	
    </body>
</html>






ul#menu li 
{display:inline;
padding: 0px;}

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


Sauf que j'ai bien toutes mes images ordonnées mais, une marge à chaque fois entre elles... Comment les supprimer?
Modifié par greeki (13 Jun 2015 - 21:17)
Sujet clos
Aller à