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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Une histoire de DIV

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Une histoire de DIV

n°1312362
Dorian BAC​+4
Posté le 23-02-2006 à 15:35:48  profilanswer
 

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.

mood
Publicité
Posté le 23-02-2006 à 15:35:48  profilanswer
 

n°1312386
omega2
Posté le 23-02-2006 à 15:56:05  profilanswer
 

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.

n°1312991
quenting
Posté le 24-02-2006 à 13:39:38  profilanswer
 

essayes de mettre les 2 divs en float left.


---------------
Hebergement Web - Annuaire et forums indépendants - Notez votre hébergeur!
n°1313052
Pitsy
Posté le 24-02-2006 à 14:57:06  profilanswer
 

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.

n°1315652
Dorian BAC​+4
Posté le 28-02-2006 à 21:26:00  profilanswer
 

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
n°1316797
Dorian BAC​+4
Posté le 02-03-2006 à 11:15:22  profilanswer
 

up :'(


Message édité par Dorian BAC+4 le 02-03-2006 à 13:07:34
n°1317138
quenting
Posté le 02-03-2006 à 16:32:02  profilanswer
 

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!
n°1317356
Dorian BAC​+4
Posté le 02-03-2006 à 20:19:07  profilanswer
 

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

n°1319050
Dorian BAC​+4
Posté le 05-03-2006 à 18:01:17  profilanswer
 

up up :'(

n°1319058
gm_superst​ar
Appelez-moi Super
Posté le 05-03-2006 à 18:18:49  profilanswer
 

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
mood
Publicité
Posté le 05-03-2006 à 18:18:49  profilanswer
 

n°1319059
gm_superst​ar
Appelez-moi Super
Posté le 05-03-2006 à 18:20:22  profilanswer
 

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
n°1319735
Dorian BAC​+4
Posté le 06-03-2006 à 19:13:04  profilanswer
 

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

n°1319870
gm_superst​ar
Appelez-moi Super
Posté le 06-03-2006 à 23:34:30  profilanswer
 

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
n°1321317
Dorian BAC​+4
Posté le 08-03-2006 à 20:40:41  profilanswer
 

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

n°1321497
gm_superst​ar
Appelez-moi Super
Posté le 09-03-2006 à 00:14:21  profilanswer
 

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
n°1322602
FlorentG
Posté le 10-03-2006 à 11:37:16  profilanswer
 

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é

n°1322701
Dorian BAC​+4
Posté le 10-03-2006 à 13:07:16  profilanswer
 

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
 

n°1322770
Dorian BAC​+4
Posté le 10-03-2006 à 14:19:10  profilanswer
 

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
n°1323246
Dorian BAC​+4
Posté le 11-03-2006 à 11:07:34  profilanswer
 

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

n°1326609
Dorian BAC​+4
Posté le 16-03-2006 à 12:44:44  profilanswer
 

uuuuppppp


Message édité par Dorian BAC+4 le 17-03-2006 à 18:02:31
n°1327515
Dorian BAC​+4
Posté le 17-03-2006 à 18:03:54  profilanswer
 

up up up

n°1328354
Dorian BAC​+4
Posté le 19-03-2006 à 17:40:36  profilanswer
 

sans dèk personne peut m'aider??

n°1333317
Dorian BAC​+4
Posté le 28-03-2006 à 09:52:38  profilanswer
 

UUUUUUUUUUUUPPPPPPPPP

n°1336029
Dorian BAC​+4
Posté le 31-03-2006 à 07:32:25  profilanswer
 

:'(:'(:'(

n°1341158
Dorian BAC​+4
Posté le 07-04-2006 à 08:48:36  profilanswer
 

what's upppppppppppppppppppppppppppppppppppppppppppppp

n°1346409
Dorian BAC​+4
Posté le 13-04-2006 à 19:45:21  profilanswer
 

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


Message édité par Dorian BAC+4 le 13-04-2006 à 19:45:43
mood
Publicité
Posté le   profilanswer
 


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

  Une histoire de DIV

 

Sujets relatifs
[Réglé]Positionnement du texte dans un DIV et Background-imageFaites place... une histoire de div...
Alignement vertical de DIVBalise DIV
Div et appendChildVie conjugale entre un SWF et un bête Div scrollable
Pb affichage 2 DIV un à coté de l'autre. Les CSS c'est chiant :DDIV mi-transparrent sous IE
Histoire de syntaxeDiv et Frame
Plus de sujets relatifs à : Une histoire de DIV


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