CSS / HTML : Design extensible
korn651
Messages postés
3
Date d'inscription
Statut
Membre
Dernière intervention
-
beate Messages postés 166 Date d'inscription Statut Membre Dernière intervention -
beate Messages postés 166 Date d'inscription Statut Membre Dernière intervention -
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
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:
- CSS / HTML : Design extensible
- Editeur html - Télécharger - HTML
- Espace en html ✓ - Forum HTML
- Espace html ✓ - Forum Webmastering
- Html download - Télécharger - HTML
- /Var/www/html/index.html ✓ - Forum Linux / Unix
5 réponses
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?
Peux-tu nous envoyer son contenu tel que tu l'as écrit?
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;
}
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;
}
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à :)
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à :)
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 ;)
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 ;)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
