Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1643 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] Div non-centré sous Mozilla

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS] Div non-centré sous Mozilla

n°1058666
goldorak69
Posté le 24-04-2005 à 15:39:21  profilanswer
 

Tout d'abord voilà mes sources:
 
la page:

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. ...
  3. <body>
  5. <div class="page" id="page" name="page">
  6.   <!-- En-tête de la page //-->
  7.   <div class="entete" id="entete" name="entete">
  8.   </div>
  9.   <!-- Construction du menu de gauche //-->
  10.   <div class="colonne" id="colonne" name="colonne">
  11.   </div>
  12.   <!-- Corps //-->
  13.   <div class="corps" id="corps" name="corps">
  14.   </div>
  15. </div>
  17. </body>


 
la feuille de style:

Code :
  1. body {
  2.   text-align: center;
  3. }
  4. .page {
  5.   border: 1px solid black;
  6.   background-color: #ffffff;
  7.   width: 780px;
  8.   text-align: left;
  9. }
  10. .entete {
  11.   position: relative;
  12.   width: 780px;
  13.   height: 100px;
  14.   background: url(../images/entete.gif) top left no-repeat;
  15. }
  16. .colonne {
  17.   position: relative;
  18.   width: 170px;
  19. }
  20. .corps {
  21.   position: relative;
  22.   width: 610px;
  23. }


 
Mon premier problème est que je veux que le div "page" soit centré, ce qui se passe sous IE mais pas sous Mozilla... pourquoi je n'en sais rien.
 
Le deuxième problème est que je n'arrive aps à construire la page comme je veux dans le div "page", je voudrais le div "entete" en haut, le div "colonne" juste en dessous à gauche et le div "corps" à droite de "colonne" sur la même ligne.
J'ai essayé les float, clear, absolute mais rien n'y fait, aidez-moi svp.
 
merci.

mood
Publicité
Posté le 24-04-2005 à 15:39:21  profilanswer
 

n°1058673
KangOl
Profil : pointeur
Posté le 24-04-2005 à 15:47:42  profilanswer
 

faut que tu revois la notion de classe et d'id toi...
de plus, il n'y a pas a ma connaissance de propriété "name" pour les div...


---------------
Nos estans firs di nosse pitite patreye...
n°1058674
masklinn
í dag viðrar vel til loftárása
Posté le 24-04-2005 à 15:47:53  profilanswer
 

text-align n'est pas censé centrer les blocs, c'est un bug d'IE, pour le centrer dans les vrais navigateurs (Firefox, Opera, Safari) il faut mettre les marges latérales en auto
 
Donc ici

.page {
    margin: 0 auto; /* raccourci qui met les marges haut/bas à 0 et gauche/droite en auto */
}


Accessoirement, les classes sont pour les éléments qui se répètent, ce qui n'est pas le cas ici (tu n'as qu'un exemplaire de chaque par page) donc il faut utiliser les IDs et non les classes
 
Colonne n'a aucun sens sémantique (ça veut dire quoi colonne, en quoi ça décrit le rôle logique de l'élément?), de même "page" est assez limite et complètement redondant avec le body.
 
Ajoutons que les "name" on été retirés de la norme (sauf pour les frames), que finir ses commentaires par "//-->" est très con (// n'est utilisé que quand on commente les scripts, pour éviter que le script ne parse la fin de commentaire)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
n°1058676
KangOl
Profil : pointeur
Posté le 24-04-2005 à 15:49:29  profilanswer
 

et sinon, pour centrer le tout faut mettre les attribut sur la balise <html>
 
et tes commentaires sont mal foutus :o


---------------
Nos estans firs di nosse pitite patreye...
n°1058692
goldorak69
Posté le 24-04-2005 à 15:57:21  profilanswer
 

<!-- ... //--> ca marche
// ... ca marche pas
/* ... */ ca marche pas

n°1058694
KangOl
Profil : pointeur
Posté le 24-04-2005 à 15:58:20  profilanswer
 

la norme c'est

<!-- commentaire inutile -->


 


---------------
Nos estans firs di nosse pitite patreye...
n°1058698
goldorak69
Posté le 24-04-2005 à 16:06:17  profilanswer
 

ok merci

n°1058722
goldorak69
Posté le 24-04-2005 à 16:29:03  profilanswer
 

donc on recommence:
 
la page:

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html>
  4. ...
  5. <body>
  7. <div id="page">
  8.   <!-- En-tête de la page -->
  9.   <div id="entete">
  10.   </div>
  12.   <!-- Construction du premier menu -->
  13.   <div class="menu" id="menu_1">
  14.   </div>
  16.   <!-- Contenu du corps -->
  17.   <div id="corps">
  18.   </div>
  19. </div>
  21. </body>


 
le css:

Code :
  1. body {
  2.   margin: 0px;
  3.   background: url(../images/bgd.jpg) top left repeat;
  4. }
  5. #page {
  6.   margin-left: auto;
  7.   margin-right: auto;
  8.   border: 1px solid black;
  9.   background-color: #ffffff;
  10.   width: 780px;
  11. }
  12. #entete {
  13.   position: relative;
  14.   width: 780px;
  15.   height: 100px;
  16.   background: url(../images/entete.gif) top left no-repeat;
  17. }
  18. #corps {
  19.   position: relative;
  20.   width: 610px;
  21. }
  22. .menu {
  23.   position: relative;
  24.   width: 170px;
  25. }


 
le div "page" est bien centré maintenant, merci. En fait ce div sert juste à mettre une ligne noire autour de la page.
 
Comment je peux donc maintenant faire pour bien mettre en place mon menu et le corps de la page comme expliué plus haut?
 
PS: désolé de toutes ces erreurs mais c'est pour mon premier stage et c'est la première fois que j'utilise les .css.

n°1058729
masklinn
í dag viðrar vel til loftárása
Posté le 24-04-2005 à 16:31:41  profilanswer
 

[:petrus75]
 
// et /* */ sont des commentaires issus du C/C++, pas des commentaires SGML [:petrus75]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
n°1058762
goldorak69
Posté le 24-04-2005 à 16:58:16  profilanswer
 

comment je peux mettre en fait les div "menu" et "corps" sur la meme ligne ?
 
Sinon ma syntaxe est bonne maintenant ?
 
Merci pour vos remarques.

mood
Publicité
Posté le 24-04-2005 à 16:58:16  profilanswer
 

n°1058771
goldorak69
Posté le 24-04-2005 à 17:07:01  profilanswer
 

j'arrive mainteannt à mettre "menu" et "corps" sur la même ligne grçace à un 'float: left' sur chacun d'eux, mais un nouveau problème est généré sur mozilla: on dirait que ces deux blocs sont mainteant en dehors du div "page", la ligne  noire n'entoure plus que le div "entete"...
 
Et il y a aussi la propriété 'min-height' qui ne marche pas sous IE, comment y remédier ?

n°1061523
goldorak69
Posté le 26-04-2005 à 16:36:40  profilanswer
 

personne pour 'min-height'? comment faire sous IE ?


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] Div non-centré sous Mozilla

 

Sujets relatifs
Quel centre de formation PHP/MySQL?[CSS] [RESOLUT] Pb d'affichage d'un MAJ dans un block CSS par du PHP
DIV vide pb IE[CSS]Problème sur des <li> en inline.
[CSS] Comment définir plusieurs a:hover ?[CSS] Définir l'interligne ?
Aidez-moi, je ne comprends pas la philosophie CSS ![HTML/JS] Changer la couleur de fond d'un DIV ou d'un INPUT dynamiquem
[RESOLU] - Superposer 2 Div en position:relative ? 
Plus de sujets relatifs à : [CSS] Div non-centré sous Mozilla

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.076 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR