[css] centrer/ aligner

Question

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 ;)

Pitch@n · Answer

Eu je sais pas si j'ai bien compris mais si c 'est ca : pour creer ton bloc tu met dans ton html:

le contenu

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

Dalida · Answer

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;
}

warlix · Answer

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

IgiXcs · Answer

le bloc text a aligner au niveau du header :)

mieu expliqué là?

Dalida · Answer

on va y arriver !
#texte {
width : 700px;
margin : auto;
}

IgiXcs · Answer

bon, un grand merci ;)

IgiXcs · Answer

margin correspond a quoi?

Dalida · Answer

une définition de {margin}

Pitch@n · Answer

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 ;)

IgiXcs · Answer

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

Pitch@n · Answer

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

Pitch@n · Answer

A ouai cool t'explique bien en plus Dalida :) hihi

Je flood un peu la sorry

IgiXcs · Answer

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. */
}

' 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 ;)

IgiXcs · Answer

#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...

Dalida · Answer

le mieux est de fixer la largeur de '' 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 '' ou est ce que les colonnes droite et gauche doivent l'encadrer elle aussi ?

IgiXcs · Answer

bas une largeur total de la page (menu+header+pub)



bon je doit y aller a demain matin ;)

IgiXcs · Answer

up ;)

Dalida · Answer

bonjour,

up de quoi ?
on en est où ?
tu veux faire quoi ?

IgiXcs · Answer

bah mettre une largeur fixe pour la page ;)

Dalida · Answer

oui ç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 ?

IgiXcs · Answer

parti :)

oki! (surtout que suis over nul en csshtml mes premiers pas! mais j'ai soif d'apprendre -site du zéro le tuto sur css il est bof bof-)

http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS je look les css ... ;)

Dalida · Answer

donc en premier, tu effaces ta feuille de style EN ENTIER, plus rien, que dalle, nada&hellip;

ensuite on va se pencher sur HTML.
tu as choisi XTML 1.0 Strict, va falloir assumer !!!
-:oD

&bull; le DocType, l'architecture du document, c'est ok ;
&bull; pour le moment tu vires tout le Javascript (fais une copie quand même !), il nous gênerait pour la validation, on le remettra tout à l'heure plus proprement.

et zou, tu mets en ligne et tu fais valider le tout par le W3C.

IgiXcs · Answer

http://validator.w3.org/...

hoho

Dalida · Answer

rien de bien méchant ! mais tu vois, c'est par là qu'il faut commencer ! les navigateurs réagissent différemment les uns des autres mais si en plus ton document n'est pas valide, va savoir ce qui peut bien en ressortir !!! pour les erreurs : • VIRE LE JAVASCRIPT ; • dans la balise '' tu vires tous les attributs ; • tu vires toutes les balises '
' (on les remplacera par la balise '
' si besoin mais pour le moment faut seulement nettoyer) ; et ça devrait à peu près passer.

IgiXcs · Answer

ouai ce que jevenai tout juste de faire ;)

Dalida · Answer

oups, j'ai oublié ! la balise '' n'existe plus (à virer !) et l'attribut 'border' pour '' non plus (idem !).

IgiXcs · Answer

apres chaques balise j'ai mis retour a la ligne pour voir mais c'est pas pour autant qu'il aime mieu :p

plus que 10erreur :p

IgiXcs · Answer

youpi ;)

no error

Dalida · Answer

c'est la balise ' qui est mal fermée :

avec ça et ce qu'il y a au dessus ça doit être bon.

IgiXcs · Answer

j'avait compris quand tu avait écrit oups, j'ai oublié ! la balise '' n'existe plus (à virer !) et l'attribut 'border' pour '' non plus (idem !). donc, j'ai bien refermé

IgiXcs · Answer

Maintanant,c'est le css que l'on va voir?

Dalida · Answer

à l'assaut de css !!! comme on travaille avec des propriétés qui peuvent être héritées, il faut commencer par les balises les plus englobantes pour finir par les détails. moi je commence toujours par préciser deux ou trois trucs à '', ça mange pas de pain et on part sur de bonnes bases ! -;o) html { font-familly:Verdana, Arial, Helvetica, sans-serif; font-size:100%; margin:0; padding:0; } • la police : à toi de choisir deux ou trois polices mais tu dois rester dans la même famille (sérif, sans sérif ou monospace) et toujours finir par le nom générique au cas où l'ordi n'est pas les polices demandées, il mettra la police par défaut de la même famille ; • on prend la taille de police par défaut (100%) pour l'ensemble du document, on modifiera par la suite ; • j'initialise toujours marges et espacements, c'est une habitude. body { font-size:.8em; width:800px; margin:0 auto; } • tu définies la taille de police (toujours en 'em' sauf pour '') que tu veux pour le texte du document ; • tu définies la largeur de la page ; • j'ai centré le corps, sans les marges en haut et en bas, à toi de voir si c'est ce que tu veux.

Dalida · Answer

est-ce que tu veux que la bannière fasse 800px de large ???

IgiXcs · Answer

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fteam-c4.fr%2F.cfg%2F&warning=1&profile=css21&usermedium=all

front familly il aime pas :p

IgiXcs · Answer

700*150 la bah, la taille d'origine, on la touche pas ;)

Dalida · Answer

petite modification pour le html, j'ai juste mis les éléments dans l'ordre et ajouté une balise de titre (on pourra masquer le texte après mais il faut un titre au contenu !).

Publicitée :

Bonjour,
Je viens anoncer que le site est fini!
Pour les personnes désirant des tutos, merci de les demander via le forum ;)
IgiX

Bonjour,
Je suis heureux de vous accueillir sur le site de #cfg-serv, aide à la configuration de serveurs cs/cz. Le site est encore en cours de réalisation, mais le forum est ouvert!
Pour toutes vos questions, vos sugestions ou autre à propos de #cfg-serv, merci de vous adresser à IgiX soit via le forum (messages privés), où sinon par email : igix@laposte.net
IgiX

IgiXcs · Answer

Oki, Le titre!!! vien fair son entrée :p

Dalida · Answer

pour une bannière "image" :
div#header h1
{
height:150px;
margin:0;
padding:0;
text-indent:-1000em;
overflow:hidden:
background-image:url(monimage.png);
background-position:center;
background-repeat:no-repeat;
}
&bull; on définit une hauteur fixe ;
&bull; pas de marges ni d'espacements qui modifieraient sa taille ;
&bull; on cache le texte et on affiche une image en arrière plan à la place : c'est plus joli !!!

Dalida · Answer

pour les colonnes tu veux quoi ?

à gauche le menu et à droite la pub ?
quelle largeur pour les colonnes ?

IgiXcs · Answer

menu a droite
pub a gauche
un bon 70px pour les 2 ;)


background-image:url(monimage.png);  y a un pb :S
nn c'est bon

overflow:hidden; et non overflow:hidden: ;)

IgiXcs · Answer

http://validator.w3.org/... :S (on s'en fiche ou on voit après? je crois c'est ton code html qui a foiré x)

IgiXcs · Answer

oki lol

IgiXcs · Answer

c'est bon j'avait mal fermé le et

Dalida · Answer

ensuite, les colonnes ! on va tenter on verra ce que ça donne ! div#menu { width:80px; float:left; } div#pubs { width:80px; float:right; } div#texte { padding:0 100px; } tu ne veux pas que les colonnes soient à la même hauteur que la bannière ?

IgiXcs · Answer

ok, mais pk on maius div#bloc et pas #bloc?

c'est bon, bloc menu a gauche et pub a droite huhu

et si possibble après si on y vient mettre le block menu (et aussi mais pub) pas en haut mais 10px au dessus du hgaut de la page et 10 px a gauche dela marge (10px a droite ppour la pub ;) )

IgiXcs · Answer

oki tu a lu mon édit?


c'est bon, bloc menu a gauche et pub a droite huhu

et si possibble après si on y vient mettre le block menu (et aussi mais pub) pas en haut mais 10px au dessus du hgaut de la page et 10 px a gauche dela marge (10px a droite ppour la pub ;) )

Dalida · Answer

ouais mais il faut augmenter la largeur de '<body>' sinon c'est vraiment rikiki&hellip;
j'ai mis des bordures aux blocs pour mieux les visualiser.
html
{
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size:100%;
margin:0;
padding:0;
}

body
{
font-size:.9em;
width:860px;
margin:0 auto;
position:relative;
}
div#header h1
{
height:150px;
margin:0;
padding:0;
text-indent:-1000em;
overflow:hidden;
background-image:url("images/header.jpg");
background-position:center;
background-repeat:no-repeat;
}
div#menu
{
position:absolute;
top:20px;
left:0;
width:70px;
border:1px dotted red;
}
div#menu ul
{
margin:0;
padding:0;
list-style-type:none;
}
div#menu ul li
{
margin:0;
padding:0;
}
div#pubs
{
position:absolute;
top:20px;
right:0;
width:70px;
border:1px dotted red;
}
div#texte
{
padding:0 100px;
}

IgiXcs · Answer

Re ;)

ouai, j'ai mis mais, oulalala :p

IgiXcs · Answer

pour le block pub quand je met width:90px; ça deborde sur la banière :S

IgiXcs · Answer

tjrs là?

Dalida · Answer

yep ! il faut augmenter la largeur de '' en conséquence. body { font-size:.9em; width:900px; /* = largeur menu + marge + largeur bannière + marge + largeur pub */ margin:0 auto; position:relative; } et la largeur de le pub doit être réglée sur le '

' par sur '

'

IgiXcs · Answer

<ul> ? c'est quoi?

IgiXcs · Answer

et de ce fait, le texte n'est plus aligné :s je t'aime moi, pourquoi t'en fait aps autan avec moi?

Dalida · Answer

un liste non triée (Unordered List).

IgiXcs · Answer

nan, lol le css ,il ne m'aime pas, ça ce voit :p

revenons a nos moutons, faut refaire le div#texte pour l'aligner avec le header?

IgiXcs · Answer

oky, mais padding:0 150px le 0 correspond a la auteur?

IgiXcs · Answer

et maintenant, comment enlever la bordure de l'iamge dans pub?

IgiXcs · Answer

border-style:none; marche pas :s

warlix · Answer

salut


border= 0

IgiXcs · Answer

@ #69, nan, border="0" donne des erreurs dans le w3c :S

IgiXcs · Answer

ah bah ouai! quel nul!!


ah bah, en tout cas je te remercie pour ton aide si précieuse :)

IgiXcs · Answer

Oki, lol

et comment mettre un pied de page (juste pour mettre css valid et xhtml aussi :p)

Dalida · Answer

un truce du genre : 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)

IgiXcs · Answer

aïe ma tete Sal*** lol ;)

IgiXcs · Answer

arf erreur xhtml :s

IgiXcs · Answer

ben lol pôur décaler le IgiX :) le mettre tout a gauche :)

Dalida · Answer

pour le css précédent il y a une erreur de sélecteurs :
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.w3c {
font-family: arial,sans-serif;
font-size: .64em;
color:#0c479d;
background-color:#fff;
border:1px solid #09c;
}
div#footer ul li a.w3c:link,
div#footer ul li a.w3c:visited,
div#footer ul li a.w3c:hover,
div#footer ul li a.w3c:active{
text-decoration: none;
}
div#footer ul li a.w3c span {
padding: 0 .24em 0 .36em;
}
div#footer ul li a.w3c span.spec{
background-color: #fc6;
color:#000;
padding:0 .24em 0 0;
}
comme ça ce sera mieux !!!

IgiXcs · Answer

Et mon javascript? :@ ta dit qu'onle mettrai tout beau? :p

Dalida · Answer

pour la validation, mieux vaut le mettre dans un fichier à part. donc tu crées un fichier (nommé 'date.js' par exemple) où tu colles le code JS et tu ajoutes dans le '' :

IgiXcs · Answer

lol, nan, sa affiche page no refered

IgiXcs · Answer

att je remet

Dalida · Answer

il faut refermer le deuxième paragraphe avant de mettre la deuxième signature : #

Bonjour,
# Je suis heureux de vous accueillir sur le site de #cfg-serv, aide à la configuration de serveurs cs/cz. # Le site est encore en cours de réalisation, mais le forum est ouvert!
# Pour toutes vos questions, vos sugestions ou autre à propos de #cfg-serv, merci de vous adresser à IgiX soit via le forum (messages privés), # où sinon par email : igix@laposte.net

#

IgiX

et la signature tu peux la décaler un tout petit peu à gauche… div#texte p.signature { text-align:right; padding-left:20px; }

IgiXcs · Answer

look result :s

Dalida · Answer

et ben ?! tout est ok, non ?
reste plus qu'à ajouter le JS&hellip;

IgiXcs · Answer

mais les 2liens en bas y sont comment dire... bad

Dalida · Answer

comment ça bad ?!
lol

les liens fonctionnent&hellip;

si tu veux qu'il soient alignés sur le texte il faut mettre le même 'padding' à 'div#footer' qu'à 'div#text" et si tu veux que ça ressemble à autre chose il faut mettre la main à la pâte !!!
-:oD

pour te former vite et bien à CSS, il n'y a pas mieux qu'AlsacréationS.
en connaissant un peu les bases tu feras ce que tu veux (ou presque) de ta page.

IgiXcs · Answer

oki oula mais klik sur les 2truc en bas et le lien est hs on dirait

Dalida · Answer

bis repetita placent :
les liens fonctionnent…

IgiXcs · Answer

pour le xhtml ca donne Sorry! This document can not be checked.
No Referer header found!

et un truc du genre pour le css :S

Dalida · Answer

tu ne serrais pas en train de tester la version locale par hasard ?
lien

IgiXcs · Answer

et le truc css alors :?

Dalida · Answer

le "truc CSS"&hellip;
-:oD

IgiXcs · Answer

ouai c'est bon :-p

IgiXcs · Answer

Re tout le monde, envie de vous en remercier pour cette aide =) depuis, me suis mis au css/html et php/sql =)
donc plus de problème ;=)

merci a vous pour cette aide ;)

IgiXcs · Answer

Une question tantqu'a faire la cacher =), pourquoi ne pas mettre un BBCode qui colore les code html/css/php/sql/...?

IgiXcs · Answer

:'( réponds :p

(juste pour l'anecdote : Je dévellope en php/sql et je maitrise assez bien le xHTML/CSS sauf si des fois, j'ai des moments de panique :D ), je te remercie encore dalida :D

IgiXcs · Answer

Ouai =)

Dalida · Answer

salut,

pour le BBCode je vois pas ce que tu veux dire.

tu veux une coloration syntaxique ?

+ MP

IgiXcs · Answer

Oui, ce serais plus sympa, faire un bbcode pour le forum webmastering (qui ne soit visible que sur les forum webmastering  :) )

ça pourrais attirer le monde, et simplifier l'aide, et surtout, c'est rapide a mettre en place ;)

IgiXcs · Answer

Salut toi!
Comment ça va depuis?

[css] centrer/ aligner

90 réponses

Discussions similaires

Newsletters