[CSS] chevauchement de divs

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS] chevauchement de divs

anapajari

s/travail/glanding on hfr/gs;

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?

Publicité

rufo

Pas me confondre avec Lycos!

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

simogeo

j'ai jamais tué de chats, ...

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

anapajari

s/travail/glanding on hfr/gs;

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...

simogeo

j'ai jamais tué de chats, ...

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

anapajari

s/travail/glanding on hfr/gs;

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!

gizmo

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.

anapajari

s/travail/glanding on hfr/gs;

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.

gizmo

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" );

anapajari

s/travail/glanding on hfr/gs;

: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 !!!

FORUM HardWare.fr

Programmation

HTML/CSS

[CSS] chevauchement de divs

Sujets relatifs
CSS et passage de parametres	Tutoriels et exercices CSS
[CSS] @page	[Validation] XHTML 1.0 Transitional CSS, Omittag No et Background
code CSS foireux ou bug de ie? (si c'est le cas j'ai besoin d'un fix)	[HTML / CSS] Problème avec le "positioning"
[HTML/CSS] Background, table et hover	Valider CSS
[HTML/CSS] Border dotted et IE	[HTML/CSS]un bord blanc avec les CSS et <SELECT>
Plus de sujets relatifs à : [CSS] chevauchement de divs

Page générée en 0.043 secondes