[css] centrer/ aligner
IgiXcs
Messages postés
172
Statut
Membre
-
IgiXcs Messages postés 172 Statut Membre -
IgiXcs Messages postés 172 Statut Membre -
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 ;)
--
team-c4.fr :)
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 ;)
--
team-c4.fr :)
Configuration: Windows XP Firefox 2.0.0.9
90 réponses
- 1
- 2
- 3
- 4
- 5
Suivant
Résumé de la discussion
La problématique centrale consiste à aligner un bloc de texte avec l'en-tête en utilisant le CSS, en explorant les stratégies de largeur, marge et positionnement pour obtenir un centrage fiable. Des propositions recommandent d'appliquer le centrage via #texte { width: 700px; margin: auto; }, d'éviter les conflits entre float et position absolue, et de tester avec des validateurs HTML et CSS. D'autres interventions suggèrent l'usage d'un footer avec clear:both et d'un arrangement de listes pour stabiliser le rendu tout en évitant des marges inattendues et des décalages entre blocs. En cas de bogues persistants, il peut être utile de vérifier les choix de positionnement (absolute vs relative) et de privilégier des solutions avec margin auto sur le conteneur.
-
on va y arriver !
#texte { width : 700px; margin : auto; }
-
un truce du genre :
<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)
-
et ben ?! tout est ok, non ?
reste plus qu'à ajouter le JS…
-
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 -
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;}.#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
-
le bloc text a aligner au niveau du header :)
mieu expliqué là? -
-
-
-
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 ;)-
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. */ }
-
-
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
-
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 -
A ouai cool t'explique bien en plus Dalida :) hihi
Je flood un peu la sorry -
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 ;) -
#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é :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 ?
-
bas une largeur total de la page (menu+header+pub)
bon je doit y aller a demain matin ;)
-
-
bonjour,
up de quoi ?
on en est où ?
tu veux faire quoi ?
- 1
- 2
- 3
- 4
- 5
Suivant
