[css] centrer/ aligner
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
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.
-
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 -
Contributeursalut,
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; } -
Contributeursalut
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à? -
Contributeuron va y arriver !
#texte { width : 700px; margin : auto; }
-
bon, un grand merci ;)
-
margin correspond a quoi?
-
Contributeur
-
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 ;)-
Contributeuren 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...
-
Contributeurle 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 ;)
-
up ;)
-
Contributeurbonjour,
up de quoi ?
on en est où ?
tu veux faire quoi ?
-
bah mettre une largeur fixe pour la page ;)
-
Contributeuroui ça j'avais suivi !!!
bon je viens de regarder le html, y a deux ou trois trucs à modifier, pour le css à mon avis mieux vaut tout mettre par terre et recommencer.
si tu es libre d'ici, 11h, 11h30 on peut se le faire pas à pas en direct.
ça pourrait servir d'exemple à ceux qui veulent construire une mise en page css, partant ?
- 1
- 2
- 3
- 4
- 5
Suivant
