28172 sujets

CSS et mise en forme, CSS3

Problème mise en page <div> et float

Bonjour à tous,

Depuis hier je me casse la tête sur un problème qui ne doit pas être hyper compliqué... Smiley sweatdrop

http://img11.hostingpics.net/pics/556366site.jpg

J'aimerais que le menu soit en haut et que le display soit en dessous avec un espacement.

Je n'arrive pas à comprendre comment faire le retour à la ligne...

<html>
	<head>
		<link href="style.css" rel="stylesheet" media="all" type="text/css">
	</head>
	
	<body>
	<div id="menu">
		<div id="menu1">
		<h1>Portfolio</h1>
		</div>
		
		<div id="menu2">
		<h1>Projets</h1>
		</div>
	</div>
	
	<div id="content">
	<img src="IMGP3377.jpg">
	</div>
	</body>
	</html>


#menu {
	background: yellow;
}

#menu1 {
    float: left;
	width: 150px;
    background: lightblue;
}

#menu2 {
    float: left;
	margin-left: 10px;
    background: lightblue;
	
}#content {
	background: red;
	margin-top: 150px;
}


Merci à tous pour votre aide!
Modifié par Browzer (29 Jan 2012 - 12:47)
Bonjour,

Déjà, la structure HTML:
- Il te faut absolument un Doctype au début de ton code HTML. Tu peux faire des recherches sur le sujet pour en apprendre plus (Doctype et mode Quirks), mais pour faire simple rajoute juste <!DOCTYPE html> en première ligne de ton code HTML.
- Un menu ne se construit pas avec des DIV et des H1 en général. La structure conventionnelle c'est plutôt une liste non ordonnée (UL) avec un item de liste (LI) par élément du menu.
- Tout élément IMG doit avoir un attribut alt avec un texte alternatif pertinent. Tu peux lire cet article sur le sujet.

Maintenant, pour la mise en page:
- Le résultat que tu obtiens est une conséquence logique de l'utilisation de la propriété float. Je t'invite à lire Empêcher les flottants de dépasser de leur conteneur si tu souhaites conserver float et régler ce souci.
- Tu pourrais également utiliser display:inline ou display:inline-block plutôt que float pour placer tes éléments de menu côte-à-côte. Je recommanderais plutôt cette option. Plus généralement, je recommande la lecture du Guide de survie du positionnement CSS et des articles qui y sont référencés (notamment ceux donnés en introduction, et celui sur display:inline-block mentionné plus loin).

Voilà, je crois que ce sera tout. Smiley smile
Sujet clos
Aller à