Besoin d'aide .... <div> et css ...

Besoin d'aide .... <div> et css ... - HTML/CSS - Programmation

Marsh Posté le 15-08-2003 à 06:07:00    

http://193.253.205.152/clanadbf/
 
http://193.253.205.152/clanadbf/style/default.css
 
 
Voilà mon probleme est que je n'arrive pas a aligner les trois div de couleurs verte jaune et rouge ...
 
je ne trouve pas le moyen de mettre le div rouge a hauteur des autres, sauf si je passe par le "position: absolute;" mais doit y'avoir plus simple ...
 


<div class="cadre">
  <div class="banniere">
  </div>
  <div class="centre">
    <div class="menu">
    </div>
    <div class="contenu">
    </div>
    <div class="menu2">
    </div>
  </div>
  <div class="bas">
  </div>
</div>

 
 


div.cadre
{  /* largeur du conteneur global... modifiable */
 width: 800px;
 margin-left: auto;
 margin-right: auto;
}
 
div.banniere
{  /* bloc haut : hauteur définie et image de fond */
 width: 800px;
 height: 200px;
 /* background-image:url(../logo.gif); */
}
 
div.centre
{  /* bloc centre */
 width: 100%;
 background-color: #000033;
}
 
div.contenu
{  /* bloc contenu */
 width: 69%;
 margin-left: 15%;
 background-color: #FF9900;
}
 
div.menu
{  /* bloc gauche */
 left: 0%;
 float: left;
 width: 15%;
 background-color: #003300;
}
 
div.menu2
{
 position: relative;
 right:0%;
 margin-right: 85%;
 width: 15%;
 background-color: #660000;
}
 
div.bas
{  /* bloc bas */
}

 
 
il y a surement bcp de conneires dans le css, mais j'ai essayé plusisuers trucs .. sans succes.
 
merci


Message édité par paranoidandroid le 15-08-2003 à 06:08:36
Reply

Marsh Posté le 15-08-2003 à 06:07:00   

Reply

Marsh Posté le 15-08-2003 à 06:49:11    

Code :
  1. div.centre
  2. {  /* bloc centre */
  3. width: 100%;
  4. background-color: #000033;
  5. }
  7. div.contenu
  8. {  /* bloc contenu */
  9. margin-left: 15%;
  10. width: 70%;
  11. background-color: #FF9900;
  12. }
  14. div.menu
  15. {  /* bloc gauche */
  16. float: left;
  17. width: 15%;
  18. background-color: #003300;
  19. }
  21. div.menu2
  22. {
  23. float: right;
  24. margin-right: 1px;
  25. width: 15%;
  26. background-color: #660000;
  27. }


 
 
le div rouge veut pas rentrer :sweat:


Message édité par paranoidandroid le 15-08-2003 à 06:49:38
Reply

Marsh Posté le 15-08-2003 à 07:00:14    

y'a plus rien sur ton url d'origine
peux-tu nous donne ton code html?

Reply

Marsh Posté le 15-08-2003 à 07:01:57    

Urd-sama a écrit :

y'a plus rien sur ton url d'origine
peux-tu nous donne ton code html?


 
erf j'ai modifié deux trois trucs ...  
le serv apache est up ..
je remets mes div comme ils étaient.
 
 
 

Code :
  1. <body style="default">
  2. <?
  3.   // info de cnnec a une base
  4. ?>
  5. <!-- Mise en forme de la page -->
  6.  <div class="cadre">
  7.   <div class="banniere">&nbsp
  8.   </div>
  9.   <div class="centre">
  10.    <div class="menu">&nbsp
  11.      <? /* include("menu.html" ); */ ?>
  12.    </div>
  13.    <div class="contenu">&nbsp
  14.     <? /*
  15.      if (isset($_GET['section'])) { $sec=$_GET['section']; } else { $sec = ""; }
  16.      if (($sec=="acceuil" )||($sec=="" )) { include("acceuil.html" ); }
  17.      else if ($sec=="recrut" ) { include("recrutement.html" ); }
  18.      else if ($sec=="members" ) { include("membres.html" ); }
  19.      else if ($sec=="links" ) { include("liens.html" ); }
  20.      else if ($sec=="matchs" ) { include("matchs.html" ); } */
  21.     ?>
  22.    </div>
  23.    <div class="menu2">&nbsp
  24.     <? /* include("menu2.php" ); */ ?>
  25.    </div>
  26.    <div class="spacer">
  27.    </div>
  28.   </div>
  29.   <div class="bas">
  30.   </div>
  31.  </div>
  32. </body>
  33. </html>


Message édité par paranoidandroid le 15-08-2003 à 07:03:36
Reply

Marsh Posté le 15-08-2003 à 07:06:28    

Je trouve le but des css associé au div 'achement pratique .. mais c pas facile a mettre en place :/

Reply

Marsh Posté le 15-08-2003 à 07:09:15    

à première vue je dirais qu'il faut que ta div contenu soit de type float, pour que menu2 puisse "glisser" à coté. ta div menu2 quant à elle n'a pas besoin d'être en float.
et en passant les espaces insécables il me semble que c'est &nbsp; (ou alors on peut écrire sans le ; peut-etre?)


Message édité par urd-sama le 15-08-2003 à 07:09:47
Reply

Marsh Posté le 15-08-2003 à 07:10:39    

Urd-sama a écrit :

à première vue je dirais qu'il faut que ta div contenu soit de type float, pour que menu2 puisse "glisser" à coté. ta div menu2 quant à elle n'a pas besoin d'être en float.
et en passant les espaces insécables il me semble que c'est &nbsp; (ou alors on peut écrire sans le ; peut-etre?)


 
je vais essayer pour les div ..
 
pourles espaces .. je vois pas du tout de quoi du parles, j'ai tjs procédé comme ça :/. Ici, c'est surtout pour que les div soit visible sous mozilla.


Message édité par paranoidandroid le 15-08-2003 à 07:11:04
Reply

Marsh Posté le 15-08-2003 à 07:15:07    

Sous mozilla c'est nickel ..
Sous IE c'est n'importe quoi :/
 
 

Code :
  1. div.contenu
  2. { 
  3. background-color: #FF9900;
  4. float: right;
  5. width: 70%;
  6. margin-right: 15%;
  7. }
  9. div.menu
  10. { 
  11. background-color: #003300;
  12. width: 15%;
  13. float: left;
  14. }
  16. div.menu2
  17. {
  18. background-color: #660000;
  19. margin-left: 85%;
  20. width: 15%;
  21. }


 
 
 http://perso.wanadoo.fr/paranoidandroid/pictures/div.png


Message édité par paranoidandroid le 15-08-2003 à 07:27:27
Reply

Marsh Posté le 15-08-2003 à 07:35:59    

Code :
  1. div.contenu
  2.   {
  3.      background-color: #FF9900;
  4.      float: left;
  5.      width: 70%;
  6.   }
  8.   div.menu
  9.   {
  10.      background-color: #003300;
  11.      float: left;
  12.      width: 15%;
  13.   }
  15.   div.menu2
  16.   {
  17.      background-color: #660000;
  18.   }


je pense que c'était ie qui supportait mal les attributs margin, j'ai souvent des problèmes avec lui et ce thème  [:spamafote]  
de cette facon ca a l'air de fonctionner en tout cas

Reply

Marsh Posté le 15-08-2003 à 07:37:37    

en plus j'avais vu un truc sur plusieurs div imbriqués avec les mêmes attributs ( float: left; )
 
Merci man
 


Message édité par paranoidandroid le 15-08-2003 à 07:39:11
Reply

Marsh Posté le 15-08-2003 à 07:37:37   

Reply

Marsh Posté le 15-08-2003 à 07:42:43    

paranoidandroid a écrit :


Merci man  

 
 
mademoiselle [:aloy]


Message édité par uriel le 15-08-2003 à 07:42:58

---------------
IVG en france
Reply

Marsh Posté le 15-08-2003 à 07:44:12    

uriel a écrit :

 
 
mademoiselle [:aloy]


 
souatteuh ... merci mademoiselle.
 
(de peur de faire une faute d'orthographe, j'ai forcé la connerie :o =>  soit ?)


Message édité par paranoidandroid le 15-08-2003 à 07:45:03
Reply

Marsh Posté le 15-08-2003 à 07:50:21    

paranoidandroid a écrit :


souatteuh ... merci mademoiselle.
(de peur de faire une faute d'orthographe, j'ai forcé la connerie :o =>  soit ?)


:jap: et effectivement, c'est bien "soit" [:aloy]
sinon tu risques d'avoir d'autres problèmes en fixant notamment les attribut de padding et margin divers par la suite, au cas ou poste tout ca ici

Reply

Marsh Posté le 15-08-2003 à 08:05:05    

Urd-sama a écrit :


:jap: et effectivement, c'est bien "soit" [:aloy]
sinon tu risques d'avoir d'autres problèmes en fixant notamment les attribut de padding et margin divers par la suite, au cas ou poste tout ca ici


 
en fait ..
en enlevant les commentaires pour afficher les contenus des div ... ma div rouge est repassé en bas. Il semblerait que le contenu du div rouge soit trop grand ( pas mal de <table>, ce que j'en déduis mais ça peut etre faux )
 
Et comme c un site que je "reprends" et que je suis en train de faire évoluer ( php, utilisation de base mysql, j'en profite pour le "moderniser" ) alors j'en profite pour passer les <table> en <div ..>, ça résoud des problemes mais des fois ça en crée ^^

Reply

Marsh Posté le 15-08-2003 à 08:08:49    

paranoidandroid a écrit :


en enlevant les commentaires pour afficher les contenus des div ... ma div rouge est repassé en bas. Il semblerait que le contenu du div rouge soit trop grand ( pas mal de <table>, ce que j'en déduis mais ça peut etre faux )


controle tout ce qui est attribut de taille dans la page incriminée. Dans la limite du possible (c'est à dire autre que données tabulaire) supprime les table. D'autant + qu'avec ta nouvelle mise en page en div elle ne serviront pas à grand-chose pour ton menu je suppose

Reply

Marsh Posté le 15-08-2003 à 08:11:27    

Urd-sama a écrit :


controle tout ce qui est attribut de taille dans la page incriminée. Dans la limite du possible (c'est à dire autre que données tabulaire) supprime les table. D'autant + qu'avec ta nouvelle mise en page en div elle ne serviront pas à grand-chose pour ton menu je suppose


 
C'est ce que je suis en train de faire... je voudrais foutre que du div. Je verrais par la suite quelles sont les posssibilités au niveau de la présentation, parce que esthétiquement c'est trop a chier.
 
Encore quelques lignes pis dodo là :/

Reply

Marsh Posté le 15-08-2003 à 08:15:20    

paranoidandroid a écrit :


C'est ce que je suis en train de faire... je voudrais foutre que du div. Je verrais par la suite quelles sont les posssibilités au niveau de la présentation, parce que esthétiquement c'est trop a chier.
Encore quelques lignes pis dodo là :/


en tout cas bon courage  :hello:

Reply

Marsh Posté le 15-08-2003 à 11:34:22    

Urd-sama a écrit :


en tout cas bon courage  :hello:  


 
Merci :)
 
 
 
J'aurais une autre question ... est il possible de fixer la largeur d'un div ( je pense que je peux limiter la casse avec un table dedans avec un certain width qui n'est pas plus large que le div ... ainsi le div gardera sa taille normal ) ?
 
Mais en travaillant directement sur le div est ce que c'est possible ?

Reply

Marsh Posté le 15-08-2003 à 11:36:37    

paranoidandroid a écrit :


J'aurais une autre question ... est il possible de fixer la largeur d'un div ( je pense que je peux limiter la casse avec un table dedans avec un certain width qui n'est pas plus large que le div ... ainsi le div gardera sa taille normal ) ?
Mais en travaillant directement sur le div est ce que c'est possible ?


à première vu je dirais "oui sans problèmes"
après ca dépend du contenu et des réactions du navigateurs.
mais perso je fixe toujours la taille de mes menus, et le principal je lui donne le reste de la page.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed