[css] Pbm mise en page avec IE

Pbm mise en page avec IE [css] - HTML/CSS - Programmation

Marsh Posté le 10-01-2006 à 20:16:14    

Bonjour tt le monde.
Voila je suis en train de réaliser un site internet http://www.hory-chauvelin.fr, j'ai utilisé le CSS afin de mettre en place le design ainsi que le texte. Le menu est réalisé avec du javascript ( je trouve cette partie du code assez lourde mais bon cela fonctionne).
En ce moment j'ai 2-3 questions pour finaliser le site:
 
- Il y a un petit espace blanc entre le menu et le milieu de la page. J'ai tout d'abord regardé si mes images du menu avaient un blanc mais non. J'ai donc jeté un coup d'oeil sur le fichier css pour voir si cette espace été lié à la config de la div, mais j'ai rien remarqué. Je peux mettre le fichier css si vous le souhaitez.
- Lorsque l'on navigue sur le site le cadre du texte change de place selon les pages, cela fait assez bizarre.
- Pour la page nous contacter je ne comprend pas pourquoi le footer est remonté au dessus de mon formulaire.
 
Si vous avez des suggestions je suis ouvert à toutes remarques. Merci


Message édité par 3tnieS le 20-01-2006 à 00:52:52
Reply

Marsh Posté le 10-01-2006 à 20:16:14   

Reply

Marsh Posté le 11-01-2006 à 09:03:08    

Salut,
 
Alors quelques petites remarques...
 
- Tant qu'à essayer de faire bien, un menu étant sémantiquement une liste de liens, on utilise les balises <ul>, <li>, et <a> (pas de palises img). En outre pour les rollovers tu n'a pas besoin d'utiliser JS, cherche du coté des portes coulissantes en CSS.
 
- Les balises orphelines (type img, input) se ferment avec un / avant le > (<img src="..." alt="..." /> ).
 
- Pour le formulaire... ton bug vient sûrement du fait que ton tableau n'est pas fermé. D'ailleurs à ce sujet tu aurais pu utiliser la balise <label> pour les libellés, et pourquoi utiliser un tableau pour mettre en forme ton formulaire...?  
 
Genre  par exemple :  
 
HTML :
 

Code :
  1. <p>
  2.    <label for="email">Adresse E-mail</label>
  3.    <input type="text" name="email" id="email" />
  4. </p>


 
CSS :
 

Code :
  1. label {
  2.    float:left; width:130px;
  3.    cursor:pointer;
  4. }


 
 
 


---------------
♈ ♋ ♌ ♍ ♎ ♏ - Agora Fidelio | Galerie d'art Toulousaine
Reply

Marsh Posté le 11-01-2006 à 10:51:08    

Pour le menu le refaire en CSS me parait une bonne idée, je n'aime pas trop le code actuel en JS.
 
Je ne savais pas qu'il fallait mettre un / sur les balises orphelines, cela vient du xhtml ?
 
enfin pour la balise label je connaissais pas, Je vais essayer la mise en forme avec.

Reply

Marsh Posté le 14-01-2006 à 15:58:27    

Après avoir bosser sur le site j'ai toujours le même probleme avec le menu.
Je n'ai pas utilisé les portes coulissante en css, mais un code JS un peu lourd. Le problème étant qui sous FF le menu s'affiche niquel, et sous IE il y a un tout petit espace entre le menu et le corps de la page.
Je n'arrive pas a retirer l'espace sous IE, si qqn a une idée.
 
Ci-joint l'extrait du fichier css pr le menu et le corps
 

Code :
  1. #menu
  2.   {
  3.    margin-bottom:0px;
  4.    margin-top: 0px;
  5.    height:36px;
  6.   }
  7.   #corps
  8.   {
  9.    margin-top: 0px;
  10.    margin-left: 0px;
  11.    margin-bottom: 0px; dessous */
  12.    padding: 15px;
  13.    background-image: url("images/middle.jpg" );
  14.    background-repeat: repeat;
  15.   }

Reply

Marsh Posté le 16-01-2006 à 08:44:20    

http://www.openweb.eu.org/articles [...] oites_css/
 
A première vue je dirais que ça vient de là...


---------------
♈ ♋ ♌ ♍ ♎ ♏ - Agora Fidelio | Galerie d'art Toulousaine
Reply

Marsh Posté le 20-01-2006 à 01:01:54    

dsl de repondre si tard aussi tard au message, je suis passé sur le site mais j'arrive tjs pas à résoudre l'ecart entre le menu et le corps.
 
Pour ma div  "menu", j'ai définis la taille à 36px sans aucune marge  
autour. Le pbm ne vient donc pas de cette div.
 
Je me dit donc que cela provient padding dans la div "corps". Seulement voila cette div n'a pas de taille fixe (elle doit s'agrandir selon le texte). Je ne peux donc pas utiliser la hack IE pour spécifier une fausse taille.
 
Je me trouve un peu bloqué xD

Reply

Sujets relatifs:

Leave a Replay

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