28172 sujets

CSS et mise en forme, CSS3

Comment divisié un div en deux dans du CSS ?

Bonjour tout le monde,

J'ai ce code html :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Positionnement CSS</title>
</head>
<body>
	<div id="bandeau">Ceci est le bandeau</div>
	<div id="menu">Ceci est le menu</div>
	<div id="contenu">Ceci est le contenu</div>
	<div id="pied_page">Ceci est le pied de page</div>
</body>
</html>


et ce code CSS :

div {
	text-align:center;
	}
div#bandeau {
	width:950px;
	height:75px;
	background-color:#00CCFF;
	}
div#menu {
	float:left;
	width:200px;
	height:400px;
	background-color:#FF6699;
	}
div#contenu {
	float:left;
	width:750px;
	height:400px;
	background-color:#FFCC00;
	}
div#pied_page {
	clear:both;
	width:950px;
	height:50px;
	background-color:#33FF99;
	}


Ce qui me donne :

* Une bannière
* Un menu positionné à gauche
* Un corps
* Un pied de page

J'aimerais diviser la bannière et le pied de page en deux.

Sauriez-vous me dire comment est-ce que l'on fait cela ?

Je vous en remercie d'avance.

beegees
beegees a écrit :
J'aimerais diviser la bannière et le pied de page en deux.

Sauriez-vous me dire comment est-ce que l'on fait cela ?

Je vous en remercie d'avance.

beegees

Bonjour,

En fait, tout dépend du contenu de ta bannière et de ton pied de page :
comme pour ton menu, tu as l'option d'utiliser les flottants ou encore d'utiliser les positionnement.
Je te conseille à ce propos la lecture de l'article de Benjamin DC à ce sujet.

Par ailleurs, il n'est nul besoin d'utiliser une <div> supplémentaire pour encadrer ton menu.
Un simple <ul id="menu">...</ul> suffira. Smiley cligne
Modifié par Cygnus (25 Sep 2008 - 11:47)
Bonjour,

Deux précisions:

1. Il n'y a pas de Doctype dans le code que tu indiques. Si ce n'est pas une simplification volontaire et qu'il te manque réellement un Doctype en bonne et due forme (y compris pour les simples pages de test), c'est une erreur à corriger avant toute autre chose.

2. Tu ne peux pas diviser un élément en deux en CSS. Il te faut deux éléments dans le code HTML. Smiley cligne
Florent V. a écrit :
Bonjour,

Deux précisions:

1. Il n'y a pas de Doctype dans le code que tu indiques. Si ce n'est pas une simplification volontaire et qu'il te manque réellement un Doctype en bonne et due forme (y compris pour les simples pages de test), c'est une erreur à corriger avant toute autre chose.

2. Tu ne peux pas diviser un élément en deux en CSS. Il te faut deux éléments dans le code HTML. Smiley cligne


Bonjour à vous deux,

Merci pour vos réponses.

Pour ce qui est des Doctypes, c'est normal, je n'ai montré que mon code HTML en ne copiant pas les doctypes.

On ne peut donc pas imbriquer deux DIV ?

Le code ci-dessous ne fonctionne pas :

#baniere{
height:taille_fixe px;
width:100%;
}

#baniere_gauche{
width:50%;
height:100%;
float:left;
}

#baniere_droite{
width:50%;
height:100%;
}


Merci encore pour votre aide.

beegees
essaie de mettre :

<div id="baniere">

<ul id="baniere_gauche"></ul>
<ul id="baniere_droite"></ul>

</div>


tu peux remplacer les ul par des div si tu le souhaite.
Modifié par mackean (25 Sep 2008 - 13:02)
Sujet clos
Aller à