Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les forums > Site Web > XHTML / CSS > Centrer une classe > Lecture du sujet

Centrer une classe

Vous devez être inscrit pour pouvoir poster des messages

RésoluLe problème de ce sujet a été résolu

Page : 1 
Auteur Message
1 visiteur sur ce sujet (1 anonyme)
Page : 1 
Hors ligne darkwhite # Posté le 03/07/2008 à 16:37:39
Groupe : Membres
Salut à tous,
Voila tout est dans le titre.
J'ai une feuille Css qui gère des classes (plus classique tu meurt).
Je voudrais simplement que la classe appelée corps soit centré par rapport a la page
Au début j'avais tâtonner pour trouver des coordonnées absolue pour que sa fonctionne. Mais bon sa restreint les résolutions.
Je n'ai pas trouver ça sur le site du zero (je vais prendre des coups je sens :p )
Voila qu'elle est donc la commande a utiliser ?

Voici l'extrait du css concerné :
.corps
{
/* position:absolute;
left:240px;
top:180px;*/
background-color:gray;
color:gray;
margin-top:15px;
width:800px;
padding:3px;
border:2px solid black;
}


MErci d'avance

Hors ligne M@x93 # Posté le 03/07/2008 à 16:40:55
C'est moche mais pas méchant
Avatar
Groupe : Membres
Salut,
Ajoute
Code : CSS
1
2
text-align:center;
margin: auto;

et on ne le dira jamais assez de fois :
Utilisez les balises qui servent à colorer le code :colere:
Édité le 03/07/2008 à 16:41:40 par M@x93
Hors ligne darkwhite # Posté le 03/07/2008 à 23:43:40
Groupe : Membres
Milles pardon pour le code (je suis de la veille ecole qui ne connait pas les balises).
Dejà merci pour la réponsse rapide.
Cependant j'ai mis
Code : CSS
1
2
text-align:center;
margin: auto;

Dans ma class appellée .corps. Pourtant le l'ensemble titre / barre de navigation n'est pas centré avec le corps. En temoigne cette image: (si jarrive a l'afficher :( )
capture
Hors ligne sibox # Posté le 04/07/2008 à 00:06:40
Groupe : Membres
Bonjour,

Ton css c'est bien,

Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
.corps
{
background-color:gray;
color:gray;
margin-top:15px;
width:800px;
padding:3px;
border:2px solid black;
text-align:center;
margin: auto;
}


Sinon je ne vois pas trop pourquoi se n'est pas aligné, j'ai bien quelque idée mais il faudrai tout ton css et tout ton html voir si il n'y a pas un bloc caché qui traine quelque part :p
Hors ligne darkwhite # Posté le 04/07/2008 à 00:15:49
Groupe : Membres
Bon bah je me lance
Donc dabord la version light du css (avec seulement les classes appelées)
Css :
Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.en_tete
{

margin:auto;
width: 450px;
height: 64px;
background-repeat:none;
text-align:center;
}
 .corps
 {
 /*background-image:url("./fond.png");*/
 background-color:gray;
 color:gray;
 text-align:center;
 margin:auto;
 width:800px;
 padding:3px;
 border:2px solid black;
 margin-top:15px;
 }
.article
 {
  
 /*background-color:white;*/
 background-color:#ebcf5d;
 color:black;
 border:2px solid  ;
 margin:10px;
 padding:5px;
 margin:auto;
 text-align:center;

body
{
width:760px;
margin:auto; 
margin-top:20px;
margin-bottom:20px;
background-repeat:x-repeat;
background-image:url("./back.png");
color:white;


Puis le Html associé

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<HTML>
<title>Montagne Libert&eacute;e || Accueil</title>
<Head>
 <LINK rel="stylesheet" type="text/css" href="syles.css">

</head>
<body >
<div class="en_tete">

<img src="./Logo/logo(1).png" width="450px" height="64px" border="0" alt="">
</div>
<hr>
<table>
	<tr>
			<td><a href="index.html">Accueil</a></td>
			<td><a href="sorties.html">Sorties</a></td>
			<td><a href="grands_voyages.html">Grands voyages</a></td>
			<td><a href="http://montagne-liberte.forumpro.fr">forum</a></td>
			<td><a href="credits.html">Qui sommes nous ?</a></td>
	</tr>
</table>
<hr>
<div class="corps">

<div class="article">
<div class="titre">Nous contacter</div>
<div class="texte2"> 
<u>Email</u> : sergecapdessus@wanadoo.fr<br>
<u>Telephone</u> : <br>

</div>

</html>


Voila désolé de mettre autant de confiture d'un coup mais comme c'est proposé gentiment.
Hors ligne Cryde # Posté le 04/07/2008 à 00:47:12
Mouhahahahaha
Avatar
Groupe : Membres
Vérifie tes entête html...

ici => http://www.siteduzero.com/tuto-3-24-1- [...] tml#ss_part_2
Édité le 04/07/2008 à 00:48:34 par Cryde

Seul contre personne...

Mon site : Music-All.be
C'est pour les musiciens il n'est qu'en construction mais on peut déja si inscrire ^^
 
Hors ligne Tikiwi # Posté le 04/07/2008 à 00:59:06
Shodan
Avatar
Groupe : Membres
Tu as oublié de fermer une accolade aussi dans ton CSS.

Tikiwi.

Image utilisateur Play go - kyoshiro [1d] on KGS

Image utilisateur SRC[*]Mobile - Comment développer sur téléphone portable ?
Mon site Web (Solutions de jeux DS) > Gamegaia

 
Hors ligne mikadoz # Posté le 04/07/2008 à 01:06:39
This is a Néléphant !
Avatar
Groupe : Membres
Code : CSS
1
text-align: center;

Cette "commande" sert seulement à centrer ton texte elle n'aura aucun effet sur tes blocs.
Tu dois utilisé un positionnement absolute avec des valeur en pourcent pour que même si la résolution de l'utilisateur change les blocs reste a la même place seul problème leurs largeurs et leurs hauteurs de ton bloc ne seront pas proportionnel à la résolution ce qui fait que si une personne vient sur ton site avec une résolution très faible (ex:640*480) et que tu as conçut ton site sur une résolution 1024*768 par exemple il se pourrait que cette personne voit les bloc se chevaucher sinon voici quand même le code:
Code : CSS
1
2
3
4
5
6
7
8
9
#exemple
{
width: 500px;/*largeur du bloc qui restera la meme quoi qu il arrive*/
height: 500px;/*hauteur du bloc qui restera la meme quoi qu il arrive*/
position: absolute;/*ou relative voir Cour de mateo dans la troisième partie: Partie 3 : XHTML & CSS, toujours plus forts ! puis=> 3) Mise en boîte (partie 2/2)*/
top: 50%;/*valeur en pourcent pour que le bloc reste au même endroit 
          même si la résolution de l'utilisateur change*/
left: 50%;/*idem*/
}

Mais tu oublie aussi de fermé ces 2 balises Code : HTML
1
2
3
<div class="corps">

<div class="article">
c'est très important.

Il est aussi vivement conseillé d'utiliser:
Code : HTML
1
<div id="nom"></div>

Plutôt que :
Code : HTML
1
<div class="nom"></div>
Édité le 04/07/2008 à 01:42:18 par mikadoz
Hors ligne darkwhite # Posté le 04/07/2008 à 11:21:17
Groupe : Membres
Merci pour toutes ces réponses précises. Je vais pouvoir arriver a placer tous mes blocs avec les pourcentages.
J'ai encore des questions ...
-Comment fonctionne le positionnement d'un objet avec top et left ? est ce que c'est le coin supérieur gauche de l'objet qui reçoit la valeur du left et du top ou est ce que c'est le centre de l'objet qui reçoit ces coordonnées et qui ainsi se place sur l'écran. Car pour moi quand on met left:50% le bloc devrait se retrouver au milieu de l'écran non ?
Or à la place de ça on est obligé de tatonner pour trouver un alignement valable(meme si au final c'est très bien).

-Ensuite pourquoi vaux t-il mieux utiliser des id que des class ?
Hors ligne mikadoz # Posté le 04/07/2008 à 12:21:49
This is a Néléphant !
Avatar
Groupe : Membres
Pour répondre à tes questions:
-le positionnement top et left se fait comme sur l'image ci dessous (reprit honteusement sur le SDZ):
Image utilisateur
sachant que ceci n'est valable que pour le positionnement absolute.(le positionnement relative lui fonctionne avec tout les blocs, ils auront comme position par defaut le coin inférieur gauche du bloc qui les précèdent (sachant que le premier bloc sera au point d'origine 0,0) pour faire simple car c'est malgré tous plus compliqué que ça, snif merci HTML).
Pour ce qui est des valeurs en pourcentages oui en effet elles ne respectent pas les largeurs et hauteurs de l'écran par rapport à leurs valeurs mais si la résolution change le bloc gardera le même emplacement c'est super tordu en gros ton utilisateur peut avoir la résolution qu'il veut le bloc ne bougera pas (il gardera ses dimensions néanmoins, important) mais la valeur donné en pourcent ne correspond pas au vrai pourcentage par rapport au point d'origines.(j'espère m'être fait comprendre parce que c'est pas facile à expliquer :p ).

-pour la deuxième questions c'est abords une question de lisibilité de ton code on s'emmêle moins les pinceaux, l'attribut id est généralement utilisé pour des bloc car (expliqué dans le chapitre "Mettre en place le css") il ne peut être utilisé qu'une seul fois (vu que le bloc créé à des propriétés uniques, qui lui sont propres aucun autres blocs ne les utilisera donc autant mettre un id) contrairement à l'attribut class qui lui peut être utilisé plusieurs fois il est à sont tour généralement utilisé pour décoré du texte, des listes, etc sauf pour les blocs encore une fois c'est une généralité tu n'est pas obligé de faire comme sa, ton site marchera très bien avec le code que tu lui à mis.

Voila j'espère avoir pu t'éclairer sur tes questions :) .
Édité le 04/07/2008 à 12:24:15 par mikadoz
Hors ligne Cryde # Posté le 04/07/2008 à 12:43:53
Mouhahahahaha
Avatar
Groupe : Membres
J'ai remarquer que la taille de "body" était plus petite que celle du "corps" ...

Mais pour centrer un block je suis sur que margin: auto soit bon :D :D

Seul contre personne...

Mon site : Music-All.be
C'est pour les musiciens il n'est qu'en construction mais on peut déja si inscrire ^^
 
Hors ligne mikadoz # Posté le 04/07/2008 à 13:52:48
This is a Néléphant !
Avatar
Groupe : Membres
J'aimerais voir comment tu procède pour centré un bloc avec :
Code : CSS
1
margin: auto;

Pourrais tu me montrer le code que tu utilise car la j'avoue que je reste perplexe j'ai essayé de plusieurs méthode, pour moi "margin: auto" ne fonctionne pas. :)
Hors ligne darkwhite # Posté le 04/07/2008 à 14:19:43
Groupe : Membres
Bon, merci à tous c'est tout bon ;)
Et c'est vrai que j'aurai plutôt préféré que sa marche tout de suite avec seulement
Code : CSS
1
margin : auto

Retour au forum "XHTML / CSS" ou à la liste des forums

Vous devez être inscrit pour pouvoir poster des messages

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | RSS tutoriels | RSS news
Édité par Simple IT SARL : Nous contacter | Notre blog | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 565 Zéros connectés | Requêtes SQL 9 requêtes | Temps de génération de la page : Total (SQL) 0.0443s (0.0172s)