Une histoire de DIV

Une histoire de DIV - HTML/CSS - Programmation

Marsh Posté le 23-02-2006 à 15:35:48    

Salut,
 
Voici mon gros problème, je souhaiterais afficher 2 DIV l'un à côté de l'autre dans un conteneur de largeur mobile.
Et donc lorsque la margeur de ce conteneur serait insuffisante pour contenir les 2 DIV l'un à côté de l'autre,
celui de droite passerait sous celui de gauche...
 
Actuellement j'ai ça :
(mais ça ne vaut rien)
 

Code :
  1. div#VIP
  2. {
  3. position:relative;
  4. border: 1px solid #0000A4;
  5. margin-left:0px
  6. margin-right:0px
  7. }
  8. div#blocVIP
  9. {
  10. position:relative;
  11. float:left;
  12. width:342px;
  13. height:140px;
  14. }
  15. div#blocVIPCom
  16. {
  17. position:relative;
  18.   float:right;
  19.   width:342px;
  20.   height:140px;
  21. }


 
Je vous remercie par avance de votre aide.
 
PS : Les commentaires relous si ça vous tente c en MP, marre des gars qui écrive pour le plaisir de pourir un topic.

Reply

Marsh Posté le 23-02-2006 à 15:35:48   

Reply

Marsh Posté le 23-02-2006 à 15:56:05    

ne pas mettre à la fois "position:relative;" et "float".
 
"position:relative;" indique qu'on va afficher les éléments à l'intérieur de leur parent en indiquant les coordonées de l'éléments par rapport à un des coins du parent.
 
"float" indique qu'on colle lélément le plus à gauche ou à droit possible de la bordure du parent ou de la bordure de l'élément précédant.
 
 
Comme tu vois, c'est abérant d'indiquer les deux à la fois.

Reply

Marsh Posté le 24-02-2006 à 13:39:38    

essayes de mettre les 2 divs en float left.


---------------
Hebergement Web - Annuaire et forums indépendants - Notez votre hébergeur!
Reply

Marsh Posté le 24-02-2006 à 14:57:06    

Dorian BAC+4 a écrit :

Salut,
Actuellement j'ai ça :
(mais ça ne vaut rien)


 
Qu'entends-tu exactement par "ça ne vaut rien" ?
En quoi, cela ne correspond-il pas à tes attentes ?
 
A cause du cadre qui ne s'affiche pas autour de tes 2 blocs ? normal si le conteneur principal ne contient aucun élément dans le flux normal, il n'a donc pas de hauteur.
Parce que lorsqu'ils passent l'un en-dessous de l'autre l'un est aligné à droite ?  auquel cas la suggestion de quenting règle ton pb.

Reply

Marsh Posté le 28-02-2006 à 21:26:00    

Bonsoir,
merci les gars ça m'a bien aidé, maintenant j'ai juste un petit problème à savoir que le Div parent semble etre ignoré.
Je veux dire par là que les deux conteneurs internes ne semblent pas se limiter aux contours du Div parent... de plus ça apprait en arrière plan :'(
 

Code :
  1. div#VIP
  2. {
  3.   position:relative;
  4.   border: 1px solid #0000A4;
  5.   margin-left:0px margin-right:0px
  6. }
  7. div#blocVIP
  8. {
  9.   float:left;
  10.   width:342px;
  11.   height:140px;
  12. }
  13. div#blocVIPCom
  14. {
  15.   float:left;
  16.   width:342px;
  17.   height:140px;
  18. }


Message édité par Dorian BAC+4 le 01-03-2006 à 08:30:44
Reply

Marsh Posté le 02-03-2006 à 11:15:22    

up :'(


Message édité par Dorian BAC+4 le 02-03-2006 à 13:07:34
Reply

Marsh Posté le 02-03-2006 à 16:32:02    

ca aiderait si on voyait le contenu html, ou (encore mieux) la page. sans savoir comment tes div sont organisés, c'est un peu dur de deviner...


Message édité par quenting le 02-03-2006 à 16:33:50

---------------
Hebergement Web - Annuaire et forums indépendants - Notez votre hébergeur!
Reply

Marsh Posté le 02-03-2006 à 20:19:07    

http://rezoetudiants.free.fr/
 
voila en dimensionnant la fenetre vous verrez c caché derrière,
mon code n'est pas propre sur certaines parties... bon courage

Reply

Marsh Posté le 05-03-2006 à 18:01:17    

up up :'(

Reply

Marsh Posté le 05-03-2006 à 18:18:49    

omega2 a écrit :

"position:relative;" indique qu'on va afficher les éléments à l'intérieur de leur parent en indiquant les coordonées de l'éléments par rapport à un des coins du parent.


 
Heu non pas du tout [:pingouino]
 
 

omega2 a écrit :

"float" indique qu'on colle lélément le plus à gauche ou à droit possible de la bordure du parent ou de la bordure de l'élément précédant.


 
C'est un peu simplifié...
 
 

omega2 a écrit :

Comme tu vois, c'est abérant d'indiquer les deux à la fois.


En théorie non effectivement, mais en pratique on peut utiliser les deux... Cela produit un résultat cohérent. Encore faut il considérer les bonnes définitions de relative et de float...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 05-03-2006 à 18:18:49   

Reply

Marsh Posté le 05-03-2006 à 18:20:22    

Dorian BAC+4 a écrit :

http://rezoetudiants.free.fr/
 
voila en dimensionnant la fenetre vous verrez c caché derrière,
mon code n'est pas propre sur certaines parties... bon courage


 
Effectivement le code est assez affreux... Quel est le résultat attendu ?


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 06-03-2006 à 19:13:04    

et sinon en décidant de m'aider ça donne quoi?

Reply

Marsh Posté le 06-03-2006 à 23:34:30    

Quand je dis "Quel est le résultat attendu ?" j'ai pas l'air de vouloir m'intéresser à ton problème ?


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 08-03-2006 à 20:40:41    

le résultat attendu est :
Deux DIV l'un à côté de l'autre dont celui de droite puisse glisser sous celui de gauche dans le cas où la fenêtre centrale (conteneur) deviendrait trop étroite...
A noter qu'actuellement les deux div sont cachés derrière et que je souhaiterais qu'ils ne dépassent pas les limites du conteneur corps1
 
merci d'avance

Reply

Marsh Posté le 09-03-2006 à 00:14:21    

Ben #blocVIP et #blocVIPCom sont des flottants, et donc, pour le reste de la page c'est comme s'ils n'existaient pas : ils n'ont plus d'influence sur le reste de la page et par conséquent, tes blocs conteneurs (VIP1, VIP2, VIP3) apparaîssent comme vides.
 
Il faut donc ajouter ceci après le div #blocVIPCom :
 

<div style="clear: both;"> </div>


 
ce qui va forcer le conteneur à s'allonger.
 
 
Bon par contre y'a ton JavaScript qui fout le bordel aussi... De toute façon tu n'as pas le droit d'avoir plusieurs éléments avec le même id. Donc pour ton JavaScript, au lieu d'afficher successivement tes 3 blocs, remplace plutôt le contenu à chaque fois. C'est un peu plus compliqué mais ce sera plus propre (et plus évolutif aussi, tu pourras ajouter plus facilement des persos)
 
Et par pitié nettoie ton code en commençant surtout par remplacer les < et les > par leurs entités HTML...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 10-03-2006 à 11:37:16    

gm_superstar a écrit :

Il faut donc ajouter ceci après le div #blocVIPCom :
 

<div style="clear: both;"> </div>




Ca fait très 2004 ça :D

div#VIP:after {
  clear: both;
  content: "SelfClear";
  display: block;
  height: 1px;
  visibility: hidden;
}


Et si ça foire sous IE, un  

* html div#VIP {
  height: 1%;
}


Et le tour est joué

Reply

Marsh Posté le 10-03-2006 à 13:07:16    

euhhhhh pour commencer la remarque sur le changement du contenu avec javascript g déjà fait et c entre autre pour ça qu'une partie du code est pourie parce que javascript ne semble pas apprécier les retours à la ligne de code (Cf gros paté de code du site)
 
pour ce qui est des Div de meme id je vois pas de koi tu parles jlé ai nomé VIP1 VIP2 VIP3 donc pas le meme id
 
pour ce qui est du changement du contenu je me limite pas à trois perso, je fais appel à mes bases de données ou je sélectionne 3 persos parmis bien d'autres suivant des critères -> VIP
 
 
merci à toi florentG pour ton autre code qui me convient bcq mieux (question de gout)
 
par contre g pas encore testé...
je reviendré pour vous dire ce qu'il en est
 
merci encore
 

Reply

Marsh Posté le 10-03-2006 à 14:19:10    

alors disons que c pas trop mal, maintenant un autre pb se pose... centrer tout ça!
pour celà je pense à la balise <center> avant le div VIP... le pb c que la largeur était auparavant définie par une margeur gauche et droite de 0px par rapport au bord.
Je voudrais donc que pour une largeur supérieur à 705px celle ci s'y fixe

Code :
  1. div#VIP2
  2. {
  3. position:relative;
  4. max-width:705px;
  5. width:expression(document.body.clientWidth > 705 ? "705px" : "auto" );
  6. border: 1px solid #A0E014;
  7. height:1%;
  8. }
  9. div#VIP2:after {
  10.   clear: both;
  11.   content: "SelfClear";
  12.   display: block;
  13.   height: 1px;
  14.   visibility: hidden;
  15. }


et que pour une valeur inférieure le div "entoure" les deuv div l'un sous l'autre... que le conteneur suit parfaitement le décalage en fait afin que le centrage prenne tout son sens...
 
le code cité ne marche pas... la condition sous IE pour > 705px marche mais qd la largeur devient inférieur la largeur ne suit pas et reste bloquée à 705px empéchant les div de passer l'un sous l'autre et déborde de la page
 
> 705px OK
 
|                 |
|   |[a][b]|   |
|                 |
 
pb: <705px
 
|      |
[[a][b]]
|      |
 
au lieu de
 
|         |
| |[a]| |
| |[b]| |
|         |


Message édité par Dorian BAC+4 le 10-03-2006 à 14:25:25
Reply

Marsh Posté le 11-03-2006 à 11:07:34    

et un autre problème encore... qd les persos changent la page fait un focus sur celui ci et donc se déplacer sur la page devient impossible

Reply

Marsh Posté le 16-03-2006 à 12:44:44    

uuuuppppp


Message édité par Dorian BAC+4 le 17-03-2006 à 18:02:31
Reply

Marsh Posté le 17-03-2006 à 18:03:54    

up up up

Reply

Marsh Posté le 19-03-2006 à 17:40:36    

sans dèk personne peut m'aider??

Reply

Marsh Posté le 28-03-2006 à 09:52:38    

UUUUUUUUUUUUPPPPPPPPP

Reply

Marsh Posté le 31-03-2006 à 07:32:25    

:'(:'(:'(

Reply

Marsh Posté le 07-04-2006 à 08:48:36    

what's upppppppppppppppppppppppppppppppppppppppppppppp

Reply

Marsh Posté le 13-04-2006 à 19:45:21    

:'(:'(:'(:'(:'(:'(:'(:'(:'(:'(:'(:'(


Message édité par Dorian BAC+4 le 13-04-2006 à 19:45:43
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed