|
|
|
|
Bonjour à tous,
Je débute en CSS et je rencontre quelques problèmes au niveau de l'alignement de mes blocs J'ai un menu à gauche en "float:left", et un bloc à sa droite, le corps, contenant tout mon texte.
Sous firefox, y'a pas de pro, mais sous IE6, mon corps se positionne en dessous du menu (diagonalement car je lui ai appliqué une marge).
Voici mon code html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="styles/1ersite.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="en_tete"><img src="images/structure/images_bandeaux/FR/bandeau_bienvenue_FR.jpg" alt="" width="765" height="150" /></div>
<div id="menu"> <!-- Cadre englobant tous les sous-menus (en bleu marine sur le schéma) -->
<div class="element_menu"> <!-- Cadre correspondant à un sous-menu -->
<h3>Bienvenue aux Valades</h3>
<ul>
<li>Qui sommes-nous ?</li> <!-- Liste des liens du sous-menu -->
<li>Chalets bois</li>
<li>Le site</li>
<li>Etang de pêche</li>
</ul>
<h3>Nos formules</h3>
<ul>
<li>Escapade romantique</li> <!-- Liste des liens du sous-menu -->
<li>Aventure</li>
<li>Préhistoire</li>
<li>Tarifs</li>
</ul>
<h3>Contact</h3>
</div>
<div class="element_menu">
<h3>Nos liens</h3>
<ul>
<li>Camping</li> <!-- Liste des liens du sous-menu -->
<li>Blog</li>
<li>Vidéos</li>
</ul>
</div>
</div>
<div id="corps">
<h1>Locations de vacances en Dordogne</h1>
<h2>Hébergement en chalet bois sur un site naturel</h2>
<p>Venez séjourner dans le cadre intime et chalheureux d'un <a href="FR/chalets-bois.html">chalet en bois</a> et</p>
<p>Vous ressourcer dans un écrin de verdure paradisiaque</p>
<P>Surprise, <strong>idée cadeau</strong> à offrir ou à s'offrir</p>
<img src="images/contenu/animations/anim_1.jpg" alt="" /> <img src="images/contenu/animations/anim_2.jpg" alt="" /></P>
<h2>Découvrez nos idées week-end et nos séjours à thèmes</h2>
<p>Escapade romantique ? Séjour sportif ? Semaine farniente ? De l'<strong>hébergement simple</strong> au <strong>séjour organisé</strong>, trouvez la formule qui vous correspond !</p>
<p><strong>Etang de pêche</strong>, randonnée, calme et repos</p>
<h2>Découvrez nos idées week-end et nos séjours à thèmes</h2>
<p>Escapade romantique ? Séjour sportif ? Semaine farniente ? De l'<strong>hébergement simple</strong> au <strong>séjour organisé</strong>, trouvez la formule qui vous correspond !</p>
<p><strong>Etang de pêche</strong>, randonnée, calme et repos</p>
</div>
<div id="pied_de_page">
<p>Camping LES VALADES<a href="mailto:info@lesvalades.com">info@lesvalades.com</a>- +33 (0) 5 53 29 14 27<br/>
COPYRIGHT © 2008 Les Valades Dordogne</p>
</div>
</body>
</html>
Et voici mon CSS :
body
{
width: 1100px;
margin: 20px auto;
background-image:url('../images/structure/cadre%20general/fond_rayures.jpg');
color:#330000;
font-family:Trebuchet MS, georgia, arial; margin-top:20px; /
margin-bottom:20px
}
#en_tete
{
width: 1100px;
height: 180px;
background-image: url('../images/structure/cadre%20general/bandeau_nature.png');
background-repeat: no-repeat;
margin-bottom: 10px
}
#en_tete img
{
position: relative;
left: 323px;
top: 19px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#menu
{
float: left;
width: 187px;
border: 2px solid #A3A864;
}
.element_menu
{
background-color: #3E4307;
margin-bottom: 20px;
}
.element_menu h3
{
color: #FFDB32;
text-align: center;
}
.element_menu ul
{
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
color: #FFFFFF;
}
.element_menu a
{
color: #FFFFFF;
}
.element_menu a:hover
{
color: #FFFF33;
}
#corps
{
margin-left: 190px;
margin-bottom: 20px;
background-image: url('../images/structure/cadre%20general/fond_beige_milieu.jpg');
background-repeat: repeat-y;
border: 2px solid #A3A864;
width: 913px;
background-position: center 50%;
}
#corps h2
{
position: relative;
left: 30px;
}
#pied_de_page
{
width: 913px;
text-align: center;
margin-bottom: 20px;
font-size: small;
margin-left: 190px;
}
J'imagine que ce bug doit être assez courant (?)
Je vous remercie d'avance pour votre aide !
Bonjour,
|
Ok, je vais essayer de mettre un float left sur le corps et je reviens vers vous ;
|
A creuser:
|
Répondre à naflo
|
Bonjour, pour un div l'un au dessus de l'autre et suite à un décalage vertical entre Firefox et IE7 à cause d'un form dans le div du dessus, j'ai trouvé comme solution de mettre une marge presque inverse en mettant margin-bottom: 15px; pour le div au dessus et margin-top: -10px; pour le div en dessous. Même principe pour le premier div au dessus du form1 avec margin-bottom: 15px; et margin-top: -5px; pour le second div.
<div style="text-align: center; margin-bottom: 15px;"> </div> <div style="text-align: right; margin-top: -5px; margin-bottom: 15px;"> <form 1> </form> </div> <div style="text-align: center; margin-top: -10px;"> <form 2> </form> </div> Voila si ça peut aider en adaptant le principe de *marge presque inverse* (nom venant d'être inventé). J'ai moi-même un problème de positionnement mais c'est par manque de connaissance sur le sujet (je cherche sur le web de l'aide mais pas que sur le positionnement, des bouts de codes simples avec explications et cette page fait partie de ma recherche : 162 onglets ouverts ; voir l'addon pour Firefox 'Tab Counter'). Je voudrais centrer 2 lignes alignées au bord gauche sous un textarea (form2) lui-même centrer (Une aide je crois que j'ai trouvée qu'il faut que j'étudie ici : openweb.eu.org/IMG/article45/annexe1.html ). Et je voudrais pour faire un formulaire à onglet sans décentrer le textarea, mais en utilisant des boutons radios, placer les boutons radios à gauche du textarea = comment ne pas décentrer le texaera et placer les boutons radios à gauche ?. Accessoirement (pour votre aide), je veux pouvoir enregistrer le textaera dans un fichier en local afin de facilité la tâche de l'utilisateur et exécuter le script (.vbs) même sans enregistrement à partir de la page ouverte. Comment (j'ai vu la faq ccm mais c'est pas clair pour moi) lire le code de la page ouverte elle-même et l'insérer dans le texarea toujours sur la même page tout ET EN partie (= au choix du lecteur OU moi) ? Avec un code simple et détaillée sans fichier externe hormis la page html elle-même ? Merci. Bouton script et script interne et code '.vbs' autorisé ; le code vbs est l'origine du projet et tout le code libre utilisé reste libre. Merci. 1 seul fichier html contenant le textaera à enregistrer pour un fonctionnement en local = style css interne ; voir même placé dans les balises comme la présentation (du code je parle) ci-dessus. Pour les balises form peut-on mettre les mêmes balises styles de positionnement que dans un div pour évité un décalage, voir remplacer une balise div par une balise form pour éviter un décalage (double?) ? form = div ? div + form et inversement = double décalage ? Si l'on utilisent des div, un div de positionnement (c'est bien le but des div = positionner ?) du formulaire sur la page (au plus près du formulaire) doit toujours englober une balise form ? ___________________________ .............................1B 2B 3B 4B ___________________________ ...............................azrtyyui1op ..............................sdsdfsd1sdj ......... fichier: toto.bidule 1A (Rétablir) ......============== 1:@|......textarea............| 2:@|......textarea............| 3:@|......textarea............| ......|......textarea............| ......|......textarea............| ......============== ...... md5 : dfdfddsdds ...... sha-1 : dsdfsdfsdfs salut ; merci. |
Un conseil pour l'utilisation des float, la majorité des problèmes lui étant associés sont dus aux attributs "width" et "overflow".
|
Colone css probleme ie Css corporate Css if ie Css input ie Css lien ie Css position absolute Flocage tee shirt Floppy disk fail 40 Florent maladroit Hover css ie Ie firefox css Jacquie et michel tv florence Javascript css navigateur ie 7 8 Menu css contour bleu ie Menu deroulmant css compatible ie 8 Menu flottant en css Tag css _top:500px; css pour ie
