Problème alignement d'un div en css
15 messages
• Page 1 sur 1
- mahdivitche
- WRInaute impliqué
- Messages: 967
- Inscription: 6 Jan 2008
Problème alignement d'un div en css
le Jeu Juin 26, 2008 4:18
Bonjour,
Je veux réalisé un page qui contient des div et je veux aligner tous les div en centre pour sorte comme des frame
J’ai aligner tous les div seulement Menu haut et Menu bas qui reste toujours à gauche et si je change il affiche à place du la div principale :
code page css :
et code page html
merci d'avance
.
Je veux réalisé un page qui contient des div et je veux aligner tous les div en centre pour sorte comme des frame
J’ai aligner tous les div seulement Menu haut et Menu bas qui reste toujours à gauche et si je change il affiche à place du la div principale :
code page css :
- Code: Tout sélectionner
div {
text-align:center;
margin-left:auto;
margin-right:auto;
}
#bandeau {
width:600px;
height:50px;
background-color:#00CCFF;
}
#menu {
float:left;
width:100px;
height:400px;
background-color:#FF6699;
}
#menu_haut {
width:100px;
height:200px;
background-color:#66CC33;
}
#menu_bas {
width:100px;
height:200px;
background-color:#CC99CC;
}
#contenu {
width:500px;
height:400px;
background-color:#FFCC00;
}
#bloc_news {
width:150px;
height:150px;
background-color:#FF3300;
}
#pied_page {
clear:both;
width:600px;
height:50px;
background-color:#33FF99;
}
et code page html
- Code: Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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" align="center">
<div id="menu_haut">Menu haut</div>
<div id="menu_bas">Menu bas</div>
</div>
<div id="contenu">
<div id="bloc_news">Bloc News</div>
<p> </p>
<p>Principe
</p>
</div>
<div id="pied_page">Ceci est le pied de page</div>
</body>
</html>
merci d'avance
.
- mahdivitche
- WRInaute impliqué
- Messages: 967
- Inscription: 6 Jan 2008
le Jeu Juin 26, 2008 5:33
allignol a écrit:Bonjour,
tu peux englober toutes tes div dans une autre que tu centres (tu lui donnes une largeur en px et margin left et right: auto;)
merci mais je suis débutant en css
si tu peux me donné le code stp !
- allignol
- Nouveau WRInaute
- Messages: 29
- Inscription: 13 Juin 2007
le Jeu Juin 26, 2008 6:18
pour le html:
et pour les css:
- Code: Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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="page">
<div id="bandeau">Ceci est le bandeau</div>
<div id="menu" align="center">
<div id="menu_haut">Menu haut</div>
<div id="menu_bas">Menu bas</div>
</div>
<div id="contenu">
<div id="bloc_news">Bloc News</div>
<p> </p>
<p>Principe
</p>
</div>
<div id="pied_page">Ceci est le pied de page</div>
</div>
</body>
</html>
et pour les css:
- Code: Tout sélectionner
div #page{
text-align:center;
margin-left:auto;
margin-right:auto;
}
#bandeau {
width:600px;
height:50px;
background-color:#00CCFF;
}
#menu {
float:left;
width:100px;
height:400px;
background-color:#FF6699;
}
#menu_haut {
width:100px;
height:200px;
background-color:#66CC33;
}
#menu_bas {
width:100px;
height:200px;
background-color:#CC99CC;
}
#contenu {
width:500px;
height:400px;
background-color:#FFCC00;
}
#bloc_news {
width:150px;
height:150px;
background-color:#FF3300;
}
#pied_page {
clear:both;
width:600px;
height:50px;
background-color:#33FF99;
}
- mahdivitche
- WRInaute impliqué
- Messages: 967
- Inscription: 6 Jan 2008
le Jeu Juin 26, 2008 12:27
merci allignol
mais le code que tu as donné affiche les div à guache
et moi je veux centrer les div
merci d'avance
mais le code que tu as donné affiche les div à guache
et moi je veux centrer les div
merci d'avance
- allignol
- Nouveau WRInaute
- Messages: 29
- Inscription: 13 Juin 2007
le Jeu Juin 26, 2008 12:33
Pardon, j'ai oublié: il faut préciser une largeur en px pour div #page:
pour ton cas, ce sera apparement 600px, la même que pour le bandeau.
- Code: Tout sélectionner
#page {
width:***px;
margin:0 auto;}
pour ton cas, ce sera apparement 600px, la même que pour le bandeau.
- mahdivitche
- WRInaute impliqué
- Messages: 967
- Inscription: 6 Jan 2008
le Jeu Juin 26, 2008 12:37
allignol a écrit:Pardon, j'ai oublié: il faut préciser une largeur en px pour div #page:
- Code: Tout sélectionner
#page {
width:***px;
margin:0 auto;}
pour ton cas, ce sera apparement 600px, la même que pour le bandeau.
non
toujours le même résultat
il affiche tous les div ç gauche de la page
- mahdivitche
- WRInaute impliqué
- Messages: 967
- Inscription: 6 Jan 2008
le Jeu Juin 26, 2008 12:52
allignol a écrit:si tu utilises ie5, je crois qu'il t'affichera toujours ton contenu à gauche.
Le code html que tu m'as donné est toujours le même maintenant?
Sinon, refais un copier-coller.
j'utilisé IE6
et j'ai copier le code mais les div est toujours à guache
- allignol
- Nouveau WRInaute
- Messages: 29
- Inscription: 13 Juin 2007
le Jeu Juin 26, 2008 12:54
Autant pour moi, dans ta feuille de styles CSS, déclare
Ca doit marcher normalement.
- Code: Tout sélectionner
#page{...}
- Code: Tout sélectionner
div #page{...}
Ca doit marcher normalement.
- mahdivitche
- WRInaute impliqué
- Messages: 967
- Inscription: 6 Jan 2008
le Jeu Juin 26, 2008 13:02
- Code: Tout sélectionner
#page {
text-align:center;
margin-left:auto;
margin-right:auto;
width:600px;
}
#bandeau {
width:600px;
height:50px;
background-color:#00CCFF;
}
#menu {
float:left;
width:100px;
height:400px;
background-color:#FF6699;
}
#menu_haut {
width:100px;
height:200px;
background-color:#66CC33;
}
#menu_bas {
width:100px;
height:200px;
background-color:#CC99CC;
}
#contenu {
width:500px;
height:400px;
background-color:#FFCC00;
}
#bloc_news {
width:150px;
height:150px;
background-color:#FF3300;
}
#pied_page {
clear:both;
width:600px;
height:50px;
background-color:#33FF99;
}
oui il centrer les div mais "Menu haut" et "Menu bas" est en haut de "div principe"
- allignol
- Nouveau WRInaute
- Messages: 29
- Inscription: 13 Juin 2007
le Jeu Juin 26, 2008 13:03
Ca doit être un problème de margin ou padding;
insère au début de ta CSS
insère au début de ta CSS
- Code: Tout sélectionner
body{
margin:0;
padding:0;}
- mahdivitche
- WRInaute impliqué
- Messages: 967
- Inscription: 6 Jan 2008
le Jeu Juin 26, 2008 13:08
allignol a écrit:Ca doit être un problème de margin ou padding;
insère au début de ta CSS
- Code: Tout sélectionner
body{
margin:0;
padding:0;}
toujour même résultat les div sont centré mais "div Menu haut" , "div Menu bas" en haut de "div principale"
- romualb
- WRInaute discret
- Messages: 59
- Inscription: 3 Mar 2006
le Jeu Juin 26, 2008 14:13
et comme ca
- Code: Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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>
<style>
#page {
text-align:center;
margin-left:auto;
margin-right:auto;
width:600px;
}
#bandeau {
width:600px;
height:50px;
background-color:#00CCFF;
}
#menu {
float:left;
width:100px;
height:400px;
background-color:#FF6699;
}
#menu_haut {
width:100px;
height:200px;
background-color:#66CC33;
}
#menu_bas {
width:100px;
height:200px;
background-color:#CC99CC;
}
#contenu {
margin-left:100px;
width:500px;
height:400px;
background-color:#FFCC00;
text-align:center;
}
#bloc_news {
width:150px;
height:150px;
background-color:#FF3300;
margin-left:175px;
}
#pied_page {
clear:both;
width:600px;
height:50px;
background-color:#33FF99;
}
</style>
</head>
<body>
<div id="page">
<div id="bandeau">Ceci est le bandeau</div>
<div id="menu" align="center">
<div id="menu_haut">Menu haut</div>
<div id="menu_bas">Menu bas</div>
</div>
<div id="contenu">
<div id="bloc_news">Bloc News</div>
<p> </p>
<p>Principe
</p>
</div>
<div id="pied_page">Ceci est le pied de page</div>
</div>
</body>
</html>
- mahdivitche
- WRInaute impliqué
- Messages: 967
- Inscription: 6 Jan 2008
le Jeu Juin 26, 2008 17:44
merci romualb
mais toujour même résultat
peut être impossible
mais toujour même résultat
peut être impossible
15 messages
• Page 1 sur 1
Lectures recommandées sur ce thème :
- Css et alignement image
- CSS alignement texte
- Alignement vertical et CSS
- [CSS] Alignement vertical du texte
- CSS alignement texte image
- Css et alignement de texte [réglé]
- [CSS] Bug alignement en bas
- css alignement input IE et firefox : perte de cheveux ! RESOLU
- probleme alignement bouton en html
- probleme avec alignement de cellule
Qui est en ligne
Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité
Contact
Confidentialité