27802 sujets

CSS et mise en forme, CSS3

Pages :
RESOLU : methode Merkel Smiley cligne 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)
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 !
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 ...)
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 ?
Modérateur
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)
<!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)
Modérateur
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 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
Modérateur
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)
Modérateur
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)
Modérateur
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 :