Positionnement div css
Résolu
Bonjour,
Je cherche à positionner deux div en css, de sorte à avoir deux colonnes (à gauche, et le reste à droite).
Si j'écris ceci, c'est ok sur vista. Mais sous xp, la div menu est décalée sur la droite et superpose la div banniere (donc il y a peut être une erreur ???):
Merci de m'indiquer la bonne façon de faire
Je cherche à positionner deux div en css, de sorte à avoir deux colonnes (à gauche, et le reste à droite).
Si j'écris ceci, c'est ok sur vista. Mais sous xp, la div menu est décalée sur la droite et superpose la div banniere (donc il y a peut être une erreur ???):
.banniere {
margin-left: 165px;
}
.titre {
margin-top : -60px;
margin-left: 317px;
font-size: 80px;
color: #800000;
font-weight: bold;
}
.menu {
position: absolute;
float: left;
width: 160px;
height: 560px;
overflow: auto;
}
.drapeau {
margin-top: 20px;
margin-left: 35px;
}
.logobrumath {
margin-left: 1000px;
margin-top: -80px;
}
.frame {
margin-left: 150px;
margin-right: 40px;
height: 470px;
font-family: Comic sans MS, verdana, arial, helvetica, sans-serif;
overflow: auto;
}
//
..........
<div class="menu">..........
</div >
<div class="banniere">
<div class="drapeau"><img src="images/drapeau.jpg"></div>
<div class="titre">titre</div>
<div class="logobrumath"><img src="images/logo.gif"></div>
</div>
<div class="frame"> ..............
</div>
Merci de m'indiquer la bonne façon de faire
7 réponses
-
as tu essayés " http://jigsaw.w3.org/css-validator/ "
-
Bonjour,
Je ne sais pas si c'est une erreur de copier/coller mais dans ton CSS tu as des instructions qui ne sont sous aucunes classes/id. C'est surement de là que vient ton problème.
A+ -
Pour nob51 : effectivement, j'avais oublié ".menu" dans mon copier/coller ......
Pour matalex59: je suis allé voir ton lien. J'ai 13 avertissements (La même couleur est utilisée en tant que couleur.............) => pas méchant, et j'ai "Votre feuille de style CSS validée :", avec ma feuille css sans correction apparente !?
Vous pouvez tester le site ici : http://kotoka.free.fr/ -
Personnellement, le site marche bien chez moi (en ce qui concerne les div). Je pense plus qu'il s'agit d'un problème de compatibilité entre les navigateurs (quelle version utilises-tu sur l'XP et sur Vista).
Autre hypothèse : est-ce que tu utilises deux écrans ? Si oui, ils doivent être de résolution différentes et c'est pour cela que les div se chevauchent. -
Les différents affichages :
(chez moi, pc et écran différent)
Sur Vista, IE8 = ok
Sur vista Firefox = ok
Sur XP IE8 = nok
Sur XP Firefox = ok
(au boulot)
Sur XP, IE7 ou6 = nok.
Ce que je ne comprends pas, c'est que quelque soit la résolution de l'écran, l'affichage devrait est ok. Sinon, tous les affichages devraient foirés ....... !!!!!
Compatibilité entre navigateur, peut-être. Quoique chez moi, l'affichage est différent entre Vista et XP sur IE8, uniquement pour ce site ....... -
Voilà ! J'ai revu mes pages internet et mon css. J'ai placé au maximum avec des % dans le css. Sous Vista, l'affichage est beaucoup mieux, meilleur cadrage.
Mais sous mon xp, mon menu est toujours décalé sur la droite, et passe dessus mon texte central.
.banniere { margin-left: 13%; } .kotoka { margin-top : -5%; margin-left: 28%; font-size: 80px; color: #800000; font-weight: bold; } .menu { position: absolute; float: left; width: 12%; height: 95%; overflow: auto; } .frame { margin-left: 12%; margin-right: 3%; height: 470px; font-family: Comic sans MS, verdana, arial, helvetica, sans-serif; overflow: auto; } .drapeau { margin-top: 2%; margin-left: 2%; } .logobrumath { margin-left: 85%; margin-top: -7%; }
Et l'écran sous xp et vista est le même. Les paramètres d'affichage sont les mêmes ..............
Etrange ...... ???!!!! -
J'ai testé ton lien, et c'est pareil.
Par contre, si dans le ".menu" j'enlève "position: absolute;", là mon menu prend la bonne place sous XP. Mais dans ce cas, le "overflow: auto;" ne fonctionne plus nulle part. Et en plus, je dois remonter la div bannière de -43%, sinon elle disparait sous la page .............
