[CSS] chevauchement de divs

Marsh Posté le 18-08-2003 à 10:19:43

Bon en gros j'ai le code suivant:

Code :

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>3 divs</title>
<style type="text/css">
div{
position: absolute;
width: 200px;
height: 150px;
top: 100px;
}
div#div1{
background: yellow;
left: 10px;
}
div#div2{
background: red;
left:50%;
margin-left: -100px;
}
div#div3{
background: blue;
right: 10px;
}
</style>
</head>
<body>
<div id="div1">div de gauche</div>
<div id="div2">div du centre</div>
<div id="div3">div de droite</div>
</body>
</html>

Rien de bien compliqué jusque la.
Le probleme c'est que ça marche très bien à condition que la surface affichage dans le browser fasse plus de 600px de large, sinon les divs se chevauchent, ce que je voudrais éviter.

Comment s'est-y qu'il faut que je fasse?

Reply

Marsh Posté le 18-08-2003 à 10:19:43

Reply

Marsh Posté le 18-08-2003 à 10:37:15

excuse moi de squatter ton topic, mais est-ce-que la balise DIV est reconnue par Netscape maintenant, et si c'est le cas, depuis quelle version? Merci

Reply

Marsh Posté le 18-08-2003 à 10:43:01

Anapajari a écrit :

et si tu encapsules tes 3 divs dans un qui fait width:100% ... tu regles les autres a width:33%; [:spamafote]

---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence

Reply

Marsh Posté le 18-08-2003 à 10:53:39

simogeo a écrit :

et si tu encapsules tes 3 divs dans un qui fait width:100% ... tu regles les autres a width:33%; [:spamafote]

oui mais non! car je ne me retrouve plus avec ma largeur de divs à 200px.
Le truc c'est qu'avec un tableau ce que je demande c'est super facile, 1 ligne, 3 colonnes. La premiere et la dernière colonnes avec une largeur fixée à 200px et zouuu on en parle plus. Mais je veux plus utiliser de tableau !

Donc je seche...

Reply

Marsh Posté le 18-08-2003 à 10:57:42

ben c'est encore plus simple ...
tu fixes div1 et div3 a 200px ....avec div1 aligné a gauche et div3 a droite ....
div2 aligné a gauche avec une margin-left:205px; et width:*; (pas sur que ca passe ca..)

---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence

Reply

Marsh Posté le 18-08-2003 à 11:10:38

oui mais non ( bis)
parce que div2 du coup n'est plus centré ( et width:* ça marche pas en plus)!
Et que ça resoud pas le probleme de div3 qui chevauche quand même div1 et div2 si c'est pas assez grand!

Reply

Marsh Posté le 18-08-2003 à 11:36:58

rufo a écrit :

excuse moi de squatter ton topic, mais est-ce-que la balise DIV est reconnue par Netscape maintenant, et si c'est le cas, depuis quelle version? Merci

depuis la version 4.7...

Sinon, pour le problème d'anpajari, il ne faut pas utiliser le positionnement absolu, mais plutôt les flottants, ou les relatifs à la limite vu que tu connais la hauteur de certains.

Reply

Marsh Posté le 18-08-2003 à 11:58:56

bon alors gizmo j'ai essayé les deux solutions que tu me proposais:
- en relative: ça resoud pas le probleme les divs se chevauchent quand même.
- en float il y a du mieux mais, si la largeur est insuffisante les divs se placent les un en dessous des autres. Or moi je voudrais juste un bete par de scroll.

Reply

Marsh Posté le 18-08-2003 à 12:03:03

si tu veux un scroll en deça d'une certains largeur, tu peux utiliser l'attribut CSS min-width que tu appliques à un div englobant.

IE ne connait pas cet attribut, mais il existe un moyen pour lui faire obtenir le même résultat. Voici l'exemple pour le max-width, à transposer:

max-width:30em;
width:expression(document.body.clientWidth > (500/12) * parseInt(document.body.currentStyle.fontSize)?"30em": "auto" );

Reply

Marsh Posté le 18-08-2003 à 12:14:47

:jap: merci bien ça marche nickel !!!!

Par contre obligé de l'appliquer à un div container c'est ça, parce que sur le body j'ai essayé ça marche po !!!

Reply

[CSS] chevauchement de divs

Sujets relatifs:

Leave a Replay