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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  problèmes css divers

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

problèmes css divers

n°519262
jabric
Think écolo!
Posté le 20-09-2003 à 23:11:31  profilanswer
 

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
mood
Publicité
Posté le 20-09-2003 à 23:11:31  profilanswer
 

n°519263
antp
Super Administrateur
Champion des excuses bidons
Posté le 20-09-2003 à 23:13:34  profilanswer
 

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
n°519295
jabric
Think écolo!
Posté le 21-09-2003 à 00:20:13  profilanswer
 

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>
  10. <META content="MSHTML 6.00.2800.1226" name=GENERATOR></HEAD>
  11. <BODY>
  12. <DIV class=conteneur>
  13.   <DIV class=bloc1>test</DIV>
  14.     <DIV class=bloc2>
  15.     <P>test</P>
  16.     <P>hopla</P>
  17.     <P>encore une ligne </P>
  18.   </DIV>
  19. </DIV>
  20. </BODY>
  21. </HTML>


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

n°519353
the real m​oins moins
Posté le 21-09-2003 à 03:44:14  profilanswer
 

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 ?
n°519364
sibelius
Vous êtes sûr ?
Posté le 21-09-2003 à 08:00:06  profilanswer
 

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
n°519486
the real m​oins moins
Posté le 21-09-2003 à 13:23:37  profilanswer
 

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 ?
n°519495
jabric
Think écolo!
Posté le 21-09-2003 à 13:33:52  profilanswer
 

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

n°519504
the real m​oins moins
Posté le 21-09-2003 à 13:40:12  profilanswer
 

peut pas deviner [:spamafote]


---------------
Hey toi, tu veux acheter des minifigurines Lego, non ?
n°519526
jabric
Think écolo!
Posté le 21-09-2003 à 14:21:25  profilanswer
 

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

n°519543
the real m​oins moins
Posté le 21-09-2003 à 14:53:41  profilanswer
 

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 ?
mood
Publicité
Posté le 21-09-2003 à 14:53:41  profilanswer
 

n°519588
jabric
Think écolo!
Posté le 21-09-2003 à 15:39:31  profilanswer
 

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:

n°520000
gm_superst​ar
Appelez-moi Super
Posté le 21-09-2003 à 21:07:19  profilanswer
 

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
n°520100
jabric
Think écolo!
Posté le 21-09-2003 à 23:24:53  profilanswer
 

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

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

  problèmes css divers

 

Sujets relatifs
[Divers] Utilisation d'une architecture LDAP - Commentaires[Divers] question a propos de prog et SMS
[Divers] Quels langage étudié en Bts IRIS ?[problemes mysql] innodb inside
Encore des problemes pour la signature d applet[divers] débutant en programmation WINDOWS
[php-gtk]problemes a l'installation[PHP MySQL] divers problemes de tres bas nivo
[CSS] Divers problèmes de marges et de listes[c] divers problèmes
Plus de sujets relatifs à : problèmes css divers


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