problèmes css divers

problèmes css divers - HTML/CSS - Programmation

Marsh Posté le 20-09-2003 à 23:11:31    

Bonjour à tous!
 
Sur les conseils de Sibelius, que vous devez connaitre également (il est partout :pt1cable:) j'ai décidé de me mettre au full css.
Problème, je galère un max, et surtout je n'arrive pas à faire des trucs, sans savoir ou ca peut bien coincer...
 
Comme, finalement, j'ai vraiment plein de questions, je vais faire une liste, puis si vous êtes inspirés vous répondez à une ou deux :ange:  ;)  
 
Centrage de ma page
Bon, je croyais savoir faire un truc aussi simple... il semblerait que non :-/
Je veux juste avoir mon site centré horizontalement sur la page.
--> Ce que j'ai fait:
je mets tout mon code dans <div class="classique"></div> avec

Code :
  1. *{
  2. text-align:left;
  3. }
  4. body{
  5. margin: 0px;
  6. text-align:center;
  7. background-color: #EBEDF3;
  8. }
  9. .conteneur{
  10. border:black 1px solid;
  11. width: 772px;
  12. background-color : white;
  13. }


Qu'est-ce que je fais pas bien??
 
 
Menu image
Je me suis fait un super menu horizontal, composé d'images.
Probleme: absolument rien ne s'affiche...
 
code html:

Code :
  1. <ul class="menu">
  2. <li class="menufg"></li>
  3. <li><a class="menuaccueil" href="home.php" alt="Accueil"></a></li>
  4. <li>etc... idem juste avant</li>
  5. <li class="menufd"></li>
  6. </ul>


 
css:

Code :
  1. .menu {
  2. width: 772px;
  3. margin: 0px;
  4. }
  5. .menu  li {
  6.   display: inline;
  7.   list-style-type: none;
  8.   padding: 0px;
  9.   margin: 0px;
  10.   border: 0px;
  11. }
  12. .menufg{
  13. width: 42px;
  14. height: 23px;
  15. background-image : url(images/menu_flechesg.gif);
  16. }
  17. a.menuaccueil{
  18. width: 89px;
  19. height: 23px;
  20. background-image : url(images/menu_accueil.gif);
  21. }
  22. etc... idem juste avant
  23. .menufd{
  24. width: 47px;
  25. height: 23px;
  26. background-image : url(images/menu_flechesd.gif);
  27. }


 
 
Création de colonnes
J'ai besoin de deux colonnes dans mon design: une pour le menu, à gauche, et le reste pour la zone de texte (composée de plusieurs cadres, les uns au dessus des autres).
Le menu ne prend pas toute la hauteur de la page, mais je ne veux pas qu'il y ait qq chose en dessous.
Problème: quand je descends trop bas, mes cadres de la zone de texte passent sous le menu (à gauche) alors qu'ils doivent rester tout le temps à droite de ce menu.
 
code html du menu:

Code :
  1. <div class="classiquemenu">
  2.      <div class="hautmenu"><div class="hautdmenu"></div></div>
  3.      <div class="gauchemenu"><div class="contenumenu">
  4.   Rubrique 1:
  5.   <ul>
  6.   <li><a href="#">petit a</a></li>
  7.   <li>etc...</li>
  8.   </ul>
  9.   </div></div>
  10.      <div class="basmenu"><div class="basdmenu"></div></div>
  11.   </div>


 
code html de mes cadres (zone de texte à droite du menu)

Code :
  1. <div class="classiquedroite">
  2.      <div class="haut"><div class="hautd"></div></div>
  3.      <div class="centre"><div class="contenu">
  4.   <div class="conteneurvignette">ici une image</div>
  5.   <div class="conteneurinfo">ici du texte</div>
  6.  </div></div>
  7.      <div class="bas"><div class="basd"></div></div>
  8.   </div>


 
code css:

Code :
  1. .classique{
  2. width: 772px;
  3. height: 100%;
  4. padding: 20px 20px 10px 20px;
  5. }
  6. .classiquemenu{
  7. width:190px;
  8. height:100%;
  9. float:left;
  10. margin: 0px 10px 0px 0px;
  11. }
  12. .classiquedroite{
  13. width:531px;
  14. height:100%;
  15. padding:0px;
  16. float:left;
  17. }


 
Truc rigolo: quand je mets plus de 3 cadres les uns au dessus des autres, non seulement ca passe sous mon menu, mais en plus ils sortent visuellement de mon conteneur global... le conteneur qui englobe tout le code quoi.
 
Bon, je vais m'arreter là, ca fait déjà beaucoup de questions, et j'en suis désolé. Mais d'un autre côté j'aimerais bien avancer dans mon projet, et ca me bloque.
 
Merci d'avance à ceux qui prendront la peine de me répondre, et à ceux qui ont fait l'effort de me lire jusqu'au bout ;)
 :jap:


Message édité par jabric le 20-09-2003 à 23:16:34
Reply

Marsh Posté le 20-09-2003 à 23:11:31   

Reply

Marsh Posté le 20-09-2003 à 23:13:34    

tu ne mettrais pas plutôt ton topic dans la cat "html/js" ? :??:
 
pour le centrage, c'est expliqué dans la FAQ.


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 21-09-2003 à 00:20:13    

pour le centrage, j'ai effectivement trouvé que c'était la compatibilité avec Mozilla qui était en cause.
 
Par contre, pour un menu image j'ai pô trouvé...
 
Et pour mes histoires de colonnes, Sibelius m'a filé hier un code qui normalement marche  
pour info:

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
  2. <HTML
  3. xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Untitled Document</TITLE>
  4. <META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
  5. <STYLE type=text/css>
  6. .conteneur {WIDTH: 700px; HEIGHT: 100%; BACKGROUND-COLOR: #c90}
  7. .bloc1 {FLOAT: left; WIDTH: 200px; HEIGHT: 100%}
  8. .bloc2 {FLOAT: left; WIDTH: 500px; HEIGHT: 100%; BACKGROUND-COLOR: #cf6}
  9. </STYLE>
  11. <META content="MSHTML 6.00.2800.1226" name=GENERATOR></HEAD>
  12. <BODY>
  13. <DIV class=conteneur>
  14.   <DIV class=bloc1>test</DIV>
  15.     <DIV class=bloc2>
  16.     <P>test</P>
  17.     <P>hopla</P>
  18.     <P>encore une ligne </P>
  19.   </DIV>
  20. </DIV>
  21. </BODY>
  22. </HTML>


mais je ne vois pas ce qui coince chez moi par rapport à ca...

Reply

Marsh Posté le 21-09-2003 à 03:44:14    

Jabric a écrit :


mais je ne vois pas ce qui coince chez moi par rapport à ca...

y'a du boulot alors :/


---------------
Hey toi, tu veux acheter des minifigurines Lego, non ?
Reply

Marsh Posté le 21-09-2003 à 08:00:06    

Arg ! Pouah : MSN se met à modifier les fichiers maintenant !
Il met les balises en majuscules et vire les guillemets  :pt1cable:
 
En tout cas, ce commentaire ("y'a du boulot alors :/" ) est certainement très approprié, mais ne me semble pas très utile ni exploitable dans l'état.
 
PS : pour le centrage, je te l'avais dit : margin-left et margin-right en auto.
 
PS2 : pour le menu-image, tu ne peux pas mettre ton <li> en inline car un inline n'a pas le droit de contenir un bloc (<a> ). Il faut les floatter à gauche ou à droite par ex.
 
Où se situe donc le problème ?
 
.conteneur {
width: 700px;
height: 100%;
background-color: #c90;
}
.bloc1 {
float: left;
width: 200px;
height: 100%;
}
.bloc2 {
float: left;
width: 500px;
height: 100%;
background-color: #cf6;
}
 
et le html :
<div class="conteneur">
  <div class="bloc1">test</div>
  <div class="bloc2">
      <p>test</p>
      <p>hopla</p>
      <p>encore une ligne </p>
  </div>
</div>
 
Et pourquoi la colonne de gauche n'a t-elle pas la couleur du conteneur puisqu'elle s'y trouve ? Note : sur IE6 c'est ok, mais sur Firebird la colonne reste transparente


Message édité par sibelius le 21-09-2003 à 08:41:02

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 21-09-2003 à 13:23:37    

chez moi ça marche [:spamafote] (la couleur)
http://membres.lycos.fr/gggrrrreeeggg/hfr/20030921133406-261.png
 
pour le reste, voir la faq.


Message édité par the real moins moins le 21-09-2003 à 13:24:57

---------------
Hey toi, tu veux acheter des minifigurines Lego, non ?
Reply

Marsh Posté le 21-09-2003 à 13:33:52    

Je me suis mal exrpimé...
 
Le code de Sib marche bien, mais quand j'essaye de l'adapter pour mon site, ca ne fonctionne plus.
 
Pourtant, j'ai l'impression de garder les memes infos (height: 100% et definition du width) et la même structure que lui...

Reply

Marsh Posté le 21-09-2003 à 13:40:12    

peut pas deviner [:spamafote]


---------------
Hey toi, tu veux acheter des minifigurines Lego, non ?
Reply

Marsh Posté le 21-09-2003 à 14:21:25    

J'ai mis le code en question dans la troisième question, dans mon premier post :)

Reply

Marsh Posté le 21-09-2003 à 14:53:41    

Jabric a écrit :

J'ai mis le code en question dans la troisième question, dans mon premier post :)

y'a pas de background-color là [:spamafote]


---------------
Hey toi, tu veux acheter des minifigurines Lego, non ?
Reply

Marsh Posté le 21-09-2003 à 14:53:41   

Reply

Marsh Posté le 21-09-2003 à 15:39:31    

nope, y a pas de background-color puisque tout est blanc dans mon cas...  
Ce que je veux, c'est juste avoir une colonne à gauche, dans laquelle je mets ce que je veux, et une colonne qui prend le reste de la place.
Mais les colonnes ne sont pas visibles en elles même, il n'y a pas de "séparation physique" comme une différence de couleur par exemple...
 
C'est rigolo: plus je modifie mes fichiers, plus ca affiche n'importe quoi...  :o  :sleep:  :pt1cable:

Reply

Marsh Posté le 21-09-2003 à 21:07:19    

Jabric a écrit :

J'ai mis le code en question dans la troisième question, dans mon premier post :)


Oui mais c'est confu. Il n'y a pas toutes les classes CSS que tu utilises donc difficile de dire d'où vient le problème. Tu peut mettre ta page sur Internet qu'on puisse tester ?


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 21-09-2003 à 23:24:53    

Bon, j'ai eu une conversation msn avec Sib, et pas mal de problemes ont été résolus...
 
C'est toujours pas ca, mais ca s'en rapproche :-)
 
Merci ;)


Message édité par jabric le 21-09-2003 à 23:26:34
Reply

Sujets relatifs:

Leave a Replay

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