Rechercher : dans
Par :

CSS / HTML : Design extensible

Dernière réponse le 18 aoû 2008 à 11:56:35 korn651, le 17 aoû 2008 à 18:07:18 
 Signaler ce message aux modérateurs

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

Configuration: Mac OS X
Safari 525.20.1

Meilleures réponses pour « CSS / HTML : Design extensible » dans :
Enlever le soulignement sous les liens en HTML/CSS VoirPar défaut, les liens hypertextes en HTML sont soulignés, un trait de la couleur du lien apparaît en dessous du texte. Il est possible de supprimer ce soulignement à l'aide de la propriété CSS text-decoration:none : Grâce au CSS Grâce au CSS via...
CSS - Les couleurs VoirLes couleurs Le standard CSS propose différentes façons de définir des couleurs : par un nom avec la notation hexadécimale avec la notation décimale Appel d'une couleur par son nom Le langage HTML définit des noms pour un nombre limité de...
Déclaration d'une feuille de style (CSS) VoirDéclaration d'une feuille de style Les feuilles de style sont un sur-ensemble du langage HTML, cela signifie qu'elle ne sont pas intégrées directement dans les recommandations HTML du W3C. Ainsi, il est nécessaire de renseigner le code HTML avec...
Les classes de style (CSS) VoirLes classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des...

1

beate, le 17 aoû 2008 à 20:51:56

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?

Répondre à beate

2

korn651, le 17 aoû 2008 à 22:30:56

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;


}

Répondre à korn651

3

Joy_^, le 17 aoû 2008 à 22:40:07

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à :)

Répondre à Joy_^

4

korn651, le 18 aoû 2008 à 00:48:54

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 ;)

Répondre à korn651

6

 beate, le 18 aoû 2008 à 11:56:35

ça a l'air déjà très bien, très esthétique et sobre.
Courage!

Répondre à beate

5

elite_section, le 18 aoû 2008 à 00:57:11

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.

Répondre à elite_section