[css] centrer/ aligner
IgiXcs
Messages postés
172
Date d'inscription
Statut
Membre
Dernière intervention
-
IgiXcs Messages postés 172 Date d'inscription Statut Membre Dernière intervention -
IgiXcs Messages postés 172 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
comment contrer ou sinon aligner un bloc par raport a un autre
www.cfg-serv.c.la j'essaye sans résultat d'aligner le texte avec le header :
merci d'avance ;)
comment contrer ou sinon aligner un bloc par raport a un autre
www.cfg-serv.c.la j'essaye sans résultat d'aligner le texte avec le header :
merci d'avance ;)
A voir également:
- [css] centrer/ aligner
- Enlever le soulignement d'un lien css - Astuces et Solutions
- Css exposant ✓ - Forum CSS
- Dans le document à télécharger, léa a utilisé 2 méthodes différentes pour centrer le nom des continents. lesquels sont centrés correctement ? - Forum C
- Enlever trait sous un lien href ✓ - Forum Webmastering
- Fusionner et centrer excel grisé - Forum Bureautique
90 réponses
un truce du genre :
avec comme styles :
et hop, comme ça c'est joli en plus !
-;o)
<div id="footer"> <ul> <li><a href="http://validator.w3.org/check?uri=referer" class="w3c"><span>W3C</span><span class="spec"> XHTML 1.0 </span></a></li> <li><a href="http://jigsaw.w3.org/css-validator/check/referer" class="w3c"><span>W3C</span><span class="spec"> CSS 2.1 </span></a></li> </ul> </div>
avec comme styles :
div#footer{
clear:both;
padding:0 150px;
}
div#footer ul{
list-style-type:none;
padding:0;
margin:.4em 1.2em;
}
div#footer ul li{
float:left;
margin-right:1em;
}
div#footer ul li a{
font-size:.72em;
}
div#footer ul li a.footer {
font-family: Arial,sans-serif;
font-size: .64em;
color:#0c479d;
background-color:#fff;
border:1px solid #09c;
}
div#footer ul li a.footer:link,
div#footer ul li a.footer:visited,
div#footer ul li a.footer:hover,
div#footer ul li a.footer:active{
text-decoration: none;
}
div#footer ul li a.footer span {
padding: 0 .24em 0 .36em;
}
div#footer ul li a.footer span.spec{
background-color: #fc6;
color:#000;
padding:0 .24em 0 0;
}
et hop, comme ça c'est joli en plus !
-;o)
Eu je sais pas si j'ai bien compris mais si c 'est ca :
pour creer ton bloc tu met dans ton html:
<div class="bloc1">le contenu</div>
Dans ton css tu met :
#bloc1 {
text-align:center;
}
Vala je sais pas trop ce que tu veux mais comme t'as mis le lien vers ton site dis plutot quelle element tu veux deplacer ou centrer
@bientot
pour creer ton bloc tu met dans ton html:
<div class="bloc1">le contenu</div>
Dans ton css tu met :
#bloc1 {
text-align:center;
}
Vala je sais pas trop ce que tu veux mais comme t'as mis le lien vers ton site dis plutot quelle element tu veux deplacer ou centrer
@bientot
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
salut,
il suffit d'ajouter la règle de style {text-align:center;}.
il suffit d'ajouter la règle de style {text-align:center;}.
#header {
margin : auto;
margin-top : 0;
margin-bottom : 0;
background-image : url("images/header.jpg");
background-repeat : no-repeat;
height : 150px;
width : 700px;
text-align:center;
}
salut
tu veux dire alligner le header avec le bas (central) ?
le mieux c est soit de mettre ton div menu en float left et lui donner une plus grande hauteur de manière à ce que la partie central soit aligné de la même manière que ton head
ou de faire un div central avec 2 block dont un qui va être de la même largeur que celui de ton menu
ou encore de faire un margin left de la taille de ton menu , mais cette solution est assez chiante suivant les config
tu veux dire alligner le header avec le bas (central) ?
le mieux c est soit de mettre ton div menu en float left et lui donner une plus grande hauteur de manière à ce que la partie central soit aligné de la même manière que ton head
ou de faire un div central avec 2 block dont un qui va être de la même largeur que celui de ton menu
ou encore de faire un margin left de la taille de ton menu , mais cette solution est assez chiante suivant les config
dans ton css je trouve ca :
#texte {
position:absolue;
width : 700px;
float : left;
margin-left : 153px;
top:140px;
right:330;
}
Je suis pas expert car j'apprend moi aussi a creer un site web :) mais pourquoi avoir mis un float left et un margin-left si tu veux que ce soit centrer.
Tu devrais peut etre fair ca :
#menu {
margin-top : 50%;
float : left;
width : 150px;
top:100px;
right:1200px;
border:2px dotted black;
width:150px;
height:120px;
}
#texte {
position:absolue;
text-align:center;
width : 700px;
top:140px;
right:330;
}
Je c'est pas si ca marche corrigés moi au cas ou lol si j'ecris des conneries j'apprend en meme temp comme ca ;)
#texte {
position:absolue;
width : 700px;
float : left;
margin-left : 153px;
top:140px;
right:330;
}
Je suis pas expert car j'apprend moi aussi a creer un site web :) mais pourquoi avoir mis un float left et un margin-left si tu veux que ce soit centrer.
Tu devrais peut etre fair ca :
#menu {
margin-top : 50%;
float : left;
width : 150px;
top:100px;
right:1200px;
border:2px dotted black;
width:150px;
height:120px;
}
#texte {
position:absolue;
text-align:center;
width : 700px;
top:140px;
right:330;
}
Je c'est pas si ca marche corrigés moi au cas ou lol si j'ecris des conneries j'apprend en meme temp comme ca ;)
en fait il faut laisser le bloc dans le flux de positionnement normal, donc virer {position:absolute;}.
comme il n'y a plus de {position:absolute;}, {top} et {right} sont inutiles, on vire aussi !
enfin, puisque la largeur du bloc est définie, il suffit de lui appliquer des marges droite et gauche automatiques pour que le '<div>' se centre dans son conteneur.
au final il suffit de garder :
comme il n'y a plus de {position:absolute;}, {top} et {right} sont inutiles, on vire aussi !
enfin, puisque la largeur du bloc est définie, il suffit de lui appliquer des marges droite et gauche automatiques pour que le '<div>' se centre dans son conteneur.
au final il suffit de garder :
#texte {
width:700px;
margin:auto; /* ou 'margin:0 auto;' pour ne pas avoir de marge auto en haut et en bas. */
}
le css du menu c'est un ami qui me la fait en 2-2 ^^ je up ce que tu ma passé pour voir
oula la c'est pas ça :p
oula la c'est pas ça :p
Euh ben ta reussi la non ? enfin je suis allé sur ton site et ton texte est centré
Pas grace a moi mais j'ai participé !!! lol
Pas grace a moi mais j'ai participé !!! lol
en fait il faut laisser le bloc dans le flux de positionnement normal, donc virer {position:absolute;}.
comme il n'y a plus de {position:absolute;}, {top} et {right} sont inutiles, on vire aussi !
enfin, puisque la largeur du bloc est définie, il suffit de lui appliquer des marges droite et gauche automatiques pour que le '<div>' se centre dans son conteneur.
au final il suffit de garder :
#texte {
width:700px;
margin:auto; /* ou 'margin:0 auto;' pour ne pas avoir de marge auto en haut et en bas. */
}
donc je test ;)
comme il n'y a plus de {position:absolute;}, {top} et {right} sont inutiles, on vire aussi !
enfin, puisque la largeur du bloc est définie, il suffit de lui appliquer des marges droite et gauche automatiques pour que le '<div>' se centre dans son conteneur.
au final il suffit de garder :
#texte {
width:700px;
margin:auto; /* ou 'margin:0 auto;' pour ne pas avoir de marge auto en haut et en bas. */
}
donc je test ;)
#14 une page avec largeur fixe si possible car quand je passe d'un pc a un autre ca depend des config graphique la largeur change donc...
le mieux est de fixer la largeur de '<body>' après tous tes blocs seront limités par lui.
par exemple pour un corps de 800 pixels centré :
ensuite, tu veux que la bannière fasse la largeur de '<body>' ou est ce que les colonnes droite et gauche doivent l'encadrer elle aussi ?
par exemple pour un corps de 800 pixels centré :
body {
margin :0 auto;
width:800px;
}
ensuite, tu veux que la bannière fasse la largeur de '<body>' ou est ce que les colonnes droite et gauche doivent l'encadrer elle aussi ?
