Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1821 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] chevauchement de divs

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS] chevauchement de divs

n°490008
anapajari
s/travail/glanding on hfr/gs;
Posté le 18-08-2003 à 10:19:43  profilanswer
 

Bon en gros j'ai le code suivant:

Code :
  1. <?xml version="1.0" encoding="ISO-8859-1" ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml"> 
  4. <head>
  5. <title>3 divs</title>
  6. <style type="text/css">
  7.     div{
  8.        position: absolute;
  9.        width: 200px;
  10.        height: 150px;
  11.        top: 100px;
  12.     }
  13.     div#div1{
  14.        background: yellow;
  15.        left: 10px;
  16.     }
  17.     div#div2{
  18.        background: red;
  19.        left:50%;
  20.        margin-left: -100px;
  21.     }
  22.     div#div3{
  23.        background: blue;
  24.        right: 10px;
  25.     }
  26.   </style>
  27. </head>
  28. <body>
  29.   <div id="div1">div de gauche</div>
  30.   <div id="div2">div du centre</div>
  31.   <div id="div3">div de droite</div>
  32. </body>
  33. </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?

mood
Publicité
Posté le 18-08-2003 à 10:19:43  profilanswer
 

n°490039
rufo
Pas me confondre avec Lycos!
Posté le 18-08-2003 à 10:37:15  profilanswer
 

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

n°490049
simogeo
j'ai jamais tué de chats, ...
Posté le 18-08-2003 à 10:43:01  profilanswer
 


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
n°490074
anapajari
s/travail/glanding on hfr/gs;
Posté le 18-08-2003 à 10:53:39  profilanswer
 

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

n°490084
simogeo
j'ai jamais tué de chats, ...
Posté le 18-08-2003 à 10:57:42  profilanswer
 

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
n°490098
anapajari
s/travail/glanding on hfr/gs;
Posté le 18-08-2003 à 11:10:38  profilanswer
 

oui mais non ( bis) :D
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!

n°490112
gizmo
Posté le 18-08-2003 à 11:36:58  profilanswer
 

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.

n°490134
anapajari
s/travail/glanding on hfr/gs;
Posté le 18-08-2003 à 11:58:56  profilanswer
 

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.
 

n°490138
gizmo
Posté le 18-08-2003 à 12:03:03  profilanswer
 

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

n°490147
anapajari
s/travail/glanding on hfr/gs;
Posté le 18-08-2003 à 12:14:47  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] chevauchement de divs

 

Sujets relatifs
CSS et passage de parametresTutoriels 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 hoverValider 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


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR