28173 sujets

CSS et mise en forme, CSS3

Exemple en ligne :
http://sd-10602.dedibox.fr/tmp/testCorner/

Je voudrai un bloc container (jaune) de hauteur variable en fonction du texte qu'il contient (pas de height fixée); et à l'intérieur de celui ci un autre bloc (rouge/bleu) qui prend toute sa hauteur et de largeur fixe.

Apparement un height de 100% ne marche pas Smiley decu
        <div id="container_txt">
                <div id="right_col"></div>
                <div id="left_col">&nbsp;</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer dictum nonummy augue. Aenean
porttitor ante ac justo. Mauris eget odio. Mauris tempus diam eu turpis. Ut rhoncus, quam quis
condimentum feugiat, lectus pede consectetuer est, et aliquam dui neque eget nisl. Donec
convallis ultricies mi. Sed euismod, dui bibendum mattis eleifend, magna ligula bibendum urna,
non rhoncus lacus erat condimentum est. Curabitur vel tellus sit amet tellus hendrerit dictum.
Etiam posuere elit ac augue.

        </div>


#container_txt {
        background : yellow;
        width : 400px;
}


#left_col{
        background : red;
        float : left;
        width : 10px;

        line-height : 100%;
}
#right_col{
        background : blue;
        float : right;
        width : 10px;

        height : 100%;
}


MERCI !
Modifié par zazeazeaze (30 Jul 2007 - 17:51)
Bonjour,

A priori ça ne marchera pas ... Smiley cligne
Maintenant si tes 2 colonnes extérieures sont purement décoratives tu places un background moitié rouge moitié bleu sur ton conteneur et le margin adéquat (margin: 0 10px 0 10px;) sur un bloc centre contenant ton texte avec un background yellow et voilou !
C'est en effet purement décoratif.
Le probleme c est que je ne veut pas de "marges" rouge et bleu, c est juste un exemple pour savoir comment faire et si c'est possible de prendre toute la hauteur d'un bloc à hauteur variable en fonction du texte.
Ou si il y a des astuces permettant d'y parvenir...
Re,

Dans ton background du conteneur tu y mets ce que tu veux ...
Si tu veux plus "d'astuces" précise mieux ton problème Smiley lol
Voila ce que je veux exactement.

http://sd-10602.dedibox.fr/tmp/testCorner/exemple.html

Un conteneur avec du texte (hauteur non fixe donc), avec les bordures arrondies. Voila pourquoi je veux 2 blocs qui prennent bien la hauteur du papa pour placer ensuite les arrondis qui vont bien.

J penses qu'avec le dessin c est assez clair, je détaille pas plus.
Modifié par zazeazeaze (30 Jul 2007 - 13:45)
Merci pour le lien Smiley smile
sincerement.

J'ai utilisé une technique qui consiste a mettre son texte dans 4 divs supplementaire :


 <div id="container">
  <div id="level-1"><div id="level-2"><div id="level-3"><div id="level-4">
   <span>Lorem etc.</span>
  </div></div></div></div>
 </div>


les div 'level-x' contiennent chacun un coin arrondi different.

C'est lourd mais ca passe.

Merci Alsa & Co