Entête de page avec deux images, css, ie et ff sont dans un bateau...

Entête de page avec deux images, css, ie et ff sont dans un bateau... - HTML/CSS - Programmation

Marsh Posté le 04-09-2006 à 10:39:20    

les plus courtes sont les meilleurs.
 
le html :  

Code :
  1. <div id="header">
  2.     <img id="logo" page="/images/logo.png" alt="Logo Trafic"/>
  3.     <img id="title" page="/images/titreexploit.png" alt="Titre"/>
  4. </div>
  5. <br/>
  6. <ul id="leftMenu">
  7. </ul>
  8. <div id="content">
  9. bla bla bla
  10. </div>


la css :

Code :
  1. * {
  2.     padding: 0;
  3.     margin: 0;
  4. }
  5.  
  6. BODY {
  7.     background-image: url("../images/back.png" );
  8.     background-repeat: repeat-y;
  9. }
  10.  
  11. br {
  12.     clear: both;
  13. }
  14.  
  15. #header {
  16.     margin-bottom: 30px;
  17. }
  18.  
  19. #logo {
  20.     margin-left: 35px;
  21.     float: left;
  22. }
  23.  
  24. #title {
  25.     vertical-align: top;
  26.     float: right;
  27. }
  28.  
  29. #leftMenu {
  30.     clear: left;
  31.     display: inline;
  32.     float: left;
  33.     width: 200px;
  34.     overflow: auto;
  35.     white-space: nowrap;
  36.     padding-left: 5px;
  37.     list-style-type: none;
  38.     list-style-position: outside;
  39. }
  40.  
  41. #content {
  42.     clear: right;
  43.     margin-left: 200px;
  44.     position: relative;
  45.     vertical-align: top;
  46.     color: inherit;
  47. }


 
et le soucis :
 
sous ie, pas de soucis (c'te blague), mais sou firefox, j'ai 30px entre le haut de la page et les images. En inspectant la page avec FireBug, j'ai comme l'impression que les deux images du header ne sont pas vraiment dans cette div header (c'est ça qui me dépasse). c'est comme si j'avait le header vide, la marge de 30 px, et les images, alors que je veux le header avec deux images dedant et une marge de 30px ensuite (le code que je crois avoir écrit donc)
 
à quel moment j'me suis mis dans le gaz ?
 
merci !


---------------
HFR - Mes sujets pour Chrome - Firefox - vérifie les nouveaux posts des topics suivis/favoris
Reply

Marsh Posté le 04-09-2006 à 10:39:20   

Reply

Marsh Posté le 04-09-2006 à 10:48:06    

Reply

Marsh Posté le 04-09-2006 à 10:51:28    

fantastique, égale à toi même.
 
Merci.


---------------
HFR - Mes sujets pour Chrome - Firefox - vérifie les nouveaux posts des topics suivis/favoris
Reply

Marsh Posté le 04-09-2006 à 11:11:00    

euh... sinon, pour éviter que l'image de droite passe à la ligne suivante en cas de redimentionnement à la baisse de la fenêtre ??
 
bon, en disant ça, je cherche aussi sur quiksmode...


---------------
HFR - Mes sujets pour Chrome - Firefox - vérifie les nouveaux posts des topics suivis/favoris
Reply

Marsh Posté le 04-09-2006 à 11:36:10    

en gros il te faudrait utiliser la propriété min-width sur ton div container. Problème ce n'est pas reconnu par IE.
Le faq d'alsacreations liste les solutions possibles:
http://forum.alsacreations.com/faq/#item75

Reply

Sujets relatifs:

Leave a Replay

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