CSS / HTML : Design extensible

Fermé
korn651 Messages postés 3 Date d'inscription dimanche 17 août 2008 Statut Membre Dernière intervention 18 août 2008 - 17 août 2008 à 18:07
beate Messages postés 166 Date d'inscription dimanche 28 août 2005 Statut Membre Dernière intervention 7 juillet 2010 - 18 août 2008 à 11:56
Bonjour,


Je viens de créer ceci : http://mimode.be/test/
Et voilà la CSS : http://mimode.be/test/test.css



J'aimerais que le cadre épouse la taille de mon texte. Pour cela, comme vous le remarquerez sur la CSS, le cadre est divisé en 3 parties : deux parties fixes (a et c) et une partie extensible (b) qui devrait se répeter autant de fois que nécessaire. J'ai utilisé le z-index mais je ne sais pas quoi faire pour "dire" à la partie b que sa taille dépend de la <div id="contenu"> placée sur le calque supérieur...


Une idée ? Merci d'avance !

Korn651
A voir également:

5 réponses

beate Messages postés 166 Date d'inscription dimanche 28 août 2005 Statut Membre Dernière intervention 7 juillet 2010 6
17 août 2008 à 20:51
Ton fichier css est assz difficile à lire sous la forme que tu nous as donnée.
Peux-tu nous envoyer son contenu tel que tu l'as écrit?
0
korn651 Messages postés 3 Date d'inscription dimanche 17 août 2008 Statut Membre Dernière intervention 18 août 2008
17 août 2008 à 22:30
Merci pour ton intérêt
Le voici :



@charset "UTF-8";
/* CSS Document */

body {
margin : 0 0 0 0;
background:url(fond.jpg) repeat-x #66CCFF;
text-align: center;
padding: 0;
}

div#conteneur {
width:922px;
margin: 0 auto;
text-align: left;

}

div#header {
width:922px;
height:168px;
background:url(puzzle/header.jpg);
z-index:0;

}

div#contenu {
z-index:0;
position:absolute;
width:650px;
padding-left:145px;
padding-top:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#0066CC;
text-align:justify;


}

div#haut {
background: url(puzzle/a.jpg);
height: 397px;
width: 922px;
z-index:0;

}

div#milieu {
background: url(puzzle/b.jpg);
height:300px;
width: 922px;
z-index:0;}


div#bas {
background: url(puzzle/c.jpg);
height: 324px;
width: 922px;
z-index:0;

}

div#footer {
width:922px;
height:80px;
background:url(puzzle/footer.jpg);
z-index:0;


}
0
Joy_^ Messages postés 54 Date d'inscription mercredi 26 décembre 2007 Statut Membre Dernière intervention 12 septembre 2008 110
17 août 2008 à 22:40
Bonjour,

essaye en écrivant ton code html comme ça

<div id="haut"></div>
<div id="milieu">

<div id="contenu">Ton texte ici</div>

</div>
<div id="bas"></div>
<div id="footer"></div>


et dans ton css

div#milieu {
background: url(puzzle/b.jpg) repeat-y;
height:300px;
width: 922px;
z-index:0;
}

Donc ton contenu dans ton div milieu, et ton background de milieu en repeat-y

Voilà :)
0
korn651 Messages postés 3 Date d'inscription dimanche 17 août 2008 Statut Membre Dernière intervention 18 août 2008
18 août 2008 à 00:48
Non ça ne marche pas, tu avais oublié les parties a.jpg et c.jpg !

Peu importe, merci quand même j'ai finalement trouvé la solution !
C'est mon premier site en CSS, j'en suis vraiment content. Enfin il reste encore tout le contenu à mettre !


Le résultat : http://mimode.be/test/





A très bientôt ;)
0
beate Messages postés 166 Date d'inscription dimanche 28 août 2005 Statut Membre Dernière intervention 7 juillet 2010 6
18 août 2008 à 11:56
ça a l'air déjà très bien, très esthétique et sobre.
Courage!
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
elite_section Messages postés 5 Date d'inscription lundi 30 juillet 2007 Statut Membre Dernière intervention 17 septembre 2008
18 août 2008 à 00:57
Hello,

Excuse moi j'ai pas très bien compris se que tu voulais faire. Sinon un petit conseil, pense a indenté ton code c'est plus facile a lire après et mes des commentaire comme sa en cas de problème c'est plus facile de comprendre ton code si on veut t'aidai ^^.

bye.
0