28172 sujets

CSS et mise en forme, CSS3

[Résolu] Div déplacé si border absent

Bonsoir !

Je suis actuellement en train de réaliser un site web (quoi de plus logique i je pose une question ici...). Passons sur le thème, l'intérêt etc...

voici mon problème :

J'ai fait un div pour positionner mon menu (horizontal). Dans ce div, une liste avec mes boutons de menu. Mon souci est que si je ne mets pas de bordure autour du div de menu, il est complètement décalé sous firefox. Il n'y a pas ce problème sous IE7 (IE6 est un cas à part....). J'ai donc mis une bordure transparente. Mais mon "hack" d'utiliser une bordure transparente n'est pas satisfaisant sous IE7. Et puis ça ne m'explique pas le comportement non plus...

Donc je suis venu vous demander, à vos, Ô experts Smiley ravi , comment résoudre ce dilemme et d'où vient cette bizarrerie (de firefox, de mon CSS ?)

Pour que ce soit plus clair, deux liens :
la page avec border : http://juluxx.free.fr/chambresV2/index.php
la page sans border : http://juluxx.free.fr/chambresV2/indexBis.php

Merci pour vos réponses.

Byron.

PS : si vous avez des propositions pour améliorer le code de façon générale, je suis preneur !
PPS : les images ne sont pas encore optimisées, le site ne gère rien au niveau des différenciations de navigateurs etc.
Modifié par Byron (25 Oct 2008 - 02:10)
Modérateur
bonjour,
trop de div peut-etre Smiley smile

applique un overflow:auto; a ton header , cela aura le même effet que les bordures transparente ....



gc
Merci pour ta solution, ça marche nickel.

Et donné super rapidement, tip top !

Concernant ta remarque de div, je me suis déjà dit ça aussi. Mais alors comment remplacer ces div ? Et par quoi ?

Merci en tout cas !
Par exemple:


- le div "header_content" peut être rempacé par un "<h2>" puisque je suppose qu'il y a aura un titre sur ta page
- les div "flow_content" et "texte" peuvent être remplacé par des paragraphes ("<p>"). Pas des paragraphe imbriqués mais à la suite l'un de l'autre, pour chaque paragraphe (en évitant des <br /> comme ça.
- tu intègre le bas du cadre à l'image de "footer" à la place de "footer_content"


Tu peux appliquer plus de style au body (largeur de la fenêtre, image de fond, ...) ca retirera déjà quelques div.
Pour ce qui est du header en lui même, il est peut-être à revoir:
- Tu n'as pas de balise <h1> ou <h2>, alors qu'ici elles pourraient se justifier.


En fait, la meilleure méthode pour créer une arborescence html sémantique et logique, c'est de commencer par faire le code html le plus propre justement, avant de mettre du css.
Une fois que tu as une structure logique, par exemple: 

je passe ici tout ce qui doit se trouver dans <head>

<body>
    <h1>Le haut Pont Foult</h1>
    <h2>Chambre d'hote dans la baie du Mont Saint-Michel</h2>
    <ul>
         <li><a href="index.php">Accueil</a></li>
         <li><a href="chambres.php">Les chambres</a></li>
         <li><a href="acces.php">Accès</a></li>
         <li><a href="loisirs.php">Loisirs</a></li>
         <li><a href="contact.php">Contact</a></li>
     </ul>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</body>

Tu te débrouille, avec cette structure, pour arriver au résultat que tu désire. Et s'il n'y a pas moyen, rajoute par-ci par-là les balises nécessaires.

C'est ma philosophe, tu prends ou pas, c'est toi qui vois Smiley cligne

Note: Il te manque aussi les liens d'accessibilité et d'accès rapide ("Aller au contenu, etc)
Merci pour ce mini cours de perfectionnement.

Je fais tâcher de mettre ces conseils en place.

Il n'y a que la fin de ton post que je ne saisis pas : qu'entends tu par "les liens d'accessibilité et d'accès rapide" ?

Merci

(et bonne nuit...)
Merci, c'était très intéressant. Je vais essayer d'intégrer tous vos conseils.

Merci encore !

A+
Sujet clos
Aller à