[RESOLU] comment aligner deux DIV sans utiliser de position absolu ???

Question

Pages :

nemohp

9 Mar 2005 à 20:07

RESOLU : methode Merkel en rajoutant le <HR> et le clear both

désolé pour les liens mal fait ...

salut

je cherche une technique pour gérer un div conteneur qui s'aggrandit suivant ses deux div en ligne qu'il contient, sachant qu'aucun des deux n'a de hauteur fixe
donc IMPOSSIBLE de placer un des element en ABSOLUTE (c'est important)

sur le net je trouve que des tuto avec le div de droit extensible en hauteur et le gauche fixe en hauteur, hors dans mon cas les deux div sont extensibles d'où la complexité de la gestion Smiley sweatdrop

bref un dessin vaut toute les paroles, je veux faire ça :

http://nemohp.dyndns.org/tmp/design.PNG

exemple 1 : c'est le div gauche qui fait étirer le conteneur en hauteur
exemple 2 : c'est le div droite qui etire le conteneur hauteur

ps : le div gauche a une taile fixe (width: 150px), le div droite utilise le reste de l'espace (donc width inconnu)

voila merci de me donner des pistes si vous avez Smiley lol

Modifié par nemohp (09 Mar 2005 - 21:12)

Julien L

9 Mar 2005 à 20:13

le float ! Y a que cela de vrai pour gérer ce genre de problème.

http://www.openweb.eu.org/articles/initiation_float/

nemohp

9 Mar 2005 à 20:23

avec un float left ça ne fonctionne pas vraiment bien

exemple 1 => OK

exemple 2 => KO

http://nemohp.dyndns.org/tmp/design2.PNG

donc c'est toujours pas bon Smiley bawling

Julien L

9 Mar 2005 à 20:29

Exemple 2.

DIVbleu

DIVjaune DIVvert /DIVvert /DIVjaune

/DIVbleu

Divjaune en FLOAT !

Je sais que c'est pas ce que tu veux vraiment mais avec un background de body en jaune cela marche...

Think about it !

nemohp

9 Mar 2005 à 20:31

non ce n'est pas possible (j'ai testé) , car sur le site il ya une entete et un pied de page, bref c pas gérable

il me faut a tout prix ce que je demande Smiley cligne

(ça fait une semaine que je cherche sans TABLE, avec un TABLE j'y arrive en 30 secondes ...)

Julien L

9 Mar 2005 à 20:36

Je t'ai donné la solution.

crois l'expérience en montage au lieu de me redire que cela ne marche pas.

C'est quoi ton bloc bleu ? du texte ?

Tony Monast

Modérateur

9 Mar 2005 à 20:41

Pour régler l'exemple 2, donne un margin-left de 150px (ou plus) à ton bloc bleu. Le bloc vert, quant à lui, est en float left.
Modifié par Merkel (09 Mar 2005 - 20:41)

Julien L

9 Mar 2005 à 20:41

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body style="background-color:yellow;"> 
<div style="background-color:blue; width: 100%"> 
  <div style="background-color:yellow; float:left; width: 30%; padding: 0 0 30px 0;"> 
    <div style="background-color:green; float:left; width: 75%;"> aaaa</div> 
	
	
  </div> 
  aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aa aaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa aaaaa </div> 
</body>
</html>

Modifié par Julien L (09 Mar 2005 - 20:42)

nemohp

9 Mar 2005 à 20:44

j'ai déja testé c'est pour ça que je dis que je peux pas Smiley decu

voila une des e-nieme version si tu veux voir :

http://nemohp.dyndns.org/test/accueil.php

je veux faire de cette forme (version TABLE donc à eviter) : http://nemohp.dyndns.org/test/accueil2.php

ps: le look est moche,mais on m'impose une charte graphique... Smiley confus

Tony Monast

Modérateur

9 Mar 2005 à 20:44

C'est pas plutôt ca qu'il veut faire ?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div#conteneur {
background-color:#FFF;
}

div#vert {
background-color:green;
float:left;
width:150px;
}

div#bleu {
margin-left:150px;
background-color:blue;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test</title>
</head>

<body>
<div id="conteneur">
	<div id="vert">Lorem ipsum eget</div>
	<div id="bleu">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vehicula mauris sit amet wisi. Etiam vitae nunc vel odio iaculis convallis. Mauris et wisi vitae nibh suscipit fermentum. Praesent sed leo sed dolor commodo porttitor. Nunc neque ante, ultrices eget, sollicitudin sed, rhoncus in, arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas dictum leo non sapien. Quisque ultrices. Sed ipsum turpis, adipiscing a, feugiat et, ullamcorper eu, leo. Sed adipiscing, mi ac auctor dictum, est enim dictum dolor, a elementum velit metus ut massa. Vivamus tempus arcu egestas massa. Donec velit eros, vehicula in, adipiscing sit amet, semper eget, magna. Mauris consectetuer accumsan elit. Fusce pellentesque laoreet sem. Proin sem metus, auctor ac, lacinia vitae, laoreet non, est. In sapien ligula, interdum ac, consectetuer aliquam, pulvinar vitae, tortor. Aliquam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vehicula mauris sit amet wisi. Etiam vitae nunc vel odio iaculis convallis. Mauris et wisi vitae nibh suscipit fermentum. Praesent sed leo sed dolor commodo porttitor. Nunc neque ante, ultrices eget, sollicitudin sed, rhoncus in, arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas dictum leo non sapien. Quisque ultrices. Sed ipsum turpis, adipiscing a, feugiat et, ullamcorper eu, leo. Sed adipiscing, mi ac auctor dictum, est enim dictum dolor, a elementum velit metus ut massa. Vivamus tempus arcu egestas massa. Donec velit eros, vehicula in, adipiscing sit amet, semper eget, magna. Mauris consectetuer accumsan elit. Fusce pellentesque laoreet sem. Proin sem metus, auctor ac, lacinia vitae, laoreet non, est. In sapien ligula, interdum ac, consectetuer aliquam, pulvinar vitae, tortor. Aliquam varius.</div>
</div>
</body>
</html>

J'ai fais ca rapidement... sans le doctype xhtml strict et compagnie. C'est qu'un exemple.

Julien L

9 Mar 2005 à 20:45

1 corrige tes urls.
2. test le code que je t'ai donné.

Julien L

9 Mar 2005 à 20:47

@Merkel : non c'est pas cela...c'est l'exemple 2 qu'il veut..

nemohp

9 Mar 2005 à 20:47

il marche pas mon dyndnS ?

nemohp

9 Mar 2005 à 20:49

Julien L a écrit :
@Merkel : non c'est pas cela...c'est l'exemple 2 qu'il veut..

je veux faire l'exemple 1 et 2 du shéma 1

je ne veux pas qu'il se passe l'exemple 2 du schéma 2

vous me suivez Smiley biggol

Julien L

9 Mar 2005 à 20:51

nemohp a écrit :
vous me suivez

Non désolé...

Merkel, j'te l'laisse...j'vais dîner...
Smiley smile

Tony Monast

Modérateur

9 Mar 2005 à 20:51

Bof, je te suis plus ou moins... essaye ca, et dis-moi si c'est ce que tu voulais :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div#conteneur {
background-color:yellow;
}

div#vert {
background-color:green;
float:left;
width:150px;
}

div#bleu {
margin-left:150px;
background-color:blue;
}

hr {
clear:both;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test</title>
</head>

<body>
<div id="conteneur">
	<div id="vert"> sit amet, consectetuer adipiscing elit. Mauris vehicula mauris sit amet wisi. Etiam vitae nunc vel odio iaculis convallis. Mauris et wisi vitae nibh suscipit fermentum. Praesent sed leo sed dolor commodo porttitor. Nunc neque ante, ultrices eget, sollicitudin sed, rhoncus in, arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas dictum leo non sapien. Quisque ultrices. Sed ipsum turpis, adipiscing a, feugiat et, ullamcorper eu, leo. Sed adipiscing, mi ac auctor dictum, est enim dictum dolor, a elementum velit metus ut massa. Vivamus tempus arcu egestas massa. Donec velit eros, vehicula in, adipiscing sit amet, semper eget, magna. Mauris consectetuer accumsan elit. Fusce pellentesque laoreet sem. Proin sem metus, auctor ac, lacinia vitae, laoreet non, est. In sapien ligula, interdum ac, consectetuer aliquam, pulvinar vitae, tortor. Aliquam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vehicula mauris sit amet wisi. Etiam vitae nunc vel odio iaculis convallis. Mauris et wisi vitae nibh suscipit fermentum. Praesent sed leo sed dolor commodo porttitor. Nunc neque ante, ultrices eget, sollicitudin sed, rhoncus in, arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas dictum leo non sapien. Quisque ultrices. Sed ipsum turpis, adipiscing a, feugiat et, ullamcorper eu, leo. Sed adipiscing, mi ac auctor dictum, est enim dictum dolor, a elementum velit metus ut massa. Vivamus tempus arcu egestas massa. Donec velit eros, vehicula in, adipiscing sit amet, semper eget, magna. Mauris consectetuer accumsan elit. Fusce pellentesque laoreet sem. Proin sem metus, auctor ac, lacinia vitae, laoreet non, est. In sapien ligula, interdum ac, consectetuer aliquam, pulvinar vitae, tortor. Aliquam varius.</div>
	<div id="bleu">Lorem ipsum dolor</div>
	<hr>
</div>
</body>
</html>

Inverse le contenu du div bleu et div vert, pour voir si c'est les résultats que tu voulais.
Modifié par Merkel (09 Mar 2005 - 20:51)

nemohp

9 Mar 2005 à 20:51

Julien L a écrit :

Non désolé...

Merkel, j'te l'laisse...j'vais dîner...

je veux pas ca : http://nemohp.dyndns.org/tmp/test_julien.html

mais comme sur l'exemple 1 et 2 du premier POST

Tony Monast

Modérateur

9 Mar 2005 à 20:57

Essaye le dernier code que j'ai donné, je crois que c'est ce que tu veux. Le hr sert à contrôler le conteneur pour qui s'étire, peu importe laquelle des colonnes est la plus longue. Tu pourrais utiliser visibility:hidden en css pour le cacher.
Modifié par Merkel (09 Mar 2005 - 20:57)

nemohp

9 Mar 2005 à 20:57

merci Merkel ta trouver

exemple 1 : http://nemohp.dyndns.org/tmp/test_merkel.html

exemple 2 : http://nemohp.dyndns.org/tmp/test_merkel2.html

dans les deux cas ça fais ce que je veux, nikel merci
(les deux cas seront possible d'un page à l'autre d'où l'importance du bien les gérer)

je vais etudié cette histoire de hr et de clear : both Smiley jap

Tony Monast

Modérateur

9 Mar 2005 à 21:01

Lorsque tu écris des liens sur le forum, essaye de faire attention de bien utiliser la balise Lien. Dans ton cas, comme tu met l'adresse au complet, n'utilise pas la balise Lien. Le forum s'occupe de rendre ton lien cliquable automatiquement. D'ailleurs, si tu essaye tes liens en cliquant, ca ne marche pas, étant donné que tu as mal utilisé la balise Lien.

Si ton problème est résolu, n'oublis pas d'éditer ton premier message en ajoutant [Résolu] au début du titre.

Merci Smiley smile

Modifié par Merkel (09 Mar 2005 - 21:01)

Pages :

Sujet clos

CSS et mise en forme, CSS3

[RESOLU] comment aligner deux DIV sans utiliser de position absolu ???