[CSS/HTML] bloc avec titre+contenu décoré avec img en fond
bloc avec titre+contenu décoré avec img en fond [CSS/HTML] - HTML/CSS - Programmation
Marsh Posté le 17-03-2006 à 19:37:15
J'ai changé le code et j'obtiens ceci :
http://phenxdesign.net/bloc_div/menu2.htm
c'est un peu mieux, mais pas encore ça ...
Marsh Posté le 03-04-2006 à 16:54:19
ben moi jdis que t'es sur la bonne voie 
j'ai fais un truc comme le tiens, et ça marche vraiement bien en plus d'avoir une belle gueule
Marsh Posté le 03-04-2006 à 17:05:00
ok, ça me rassure, mais j'ai encore le probleme que ça se redimensionne pas quand le texte depasse 
Marsh Posté le 04-04-2006 à 20:16:46
j'aimerais bien, mais quand je le fais, les cotés disparaissent ... comment faire alors ?
Sujets relatifs:
- saisie HTML pour Csharp
- lancer un programme a partir du html
- [HTML] Les ptites icones "made with" ca se trouve ou ?
- [HTML] [PHP] problème d'affichage dans une frame
- [Résolu] Fond du flash
- [HTML] Div avec une scroolbar
- Besoin d'aide pour lister contenu d'un dossier
- Chercher le code HTML d'une page web, possible ?
- Récupérer le contenu textuel d'un noeud
- [CSS] pseudo-element : problème...
Marsh Posté le 17-03-2006 à 16:06:10
Bonjour, j'essaie de faire un bloc un peu comme ceci : (avec les bouts d'images que je veux utiliser)
voici là ou j'en suis :
http://phenxdesign.net/bloc_div/menu2.htm
pour les colonnes a droite et a gauche d'un site, comme ici : http://www.graphicbeaute.com/
mais pas avec des tables... avec des div, et je n'obtien vraiment pas ce que je veux, tous les elements se mettent l'un en dessous l'autre, donc tout est a la verticale
voici ce que j'ai fait deja :
html:
<div class="bloc">
<div class="head">
<div class="left"></div>
<div class="right"></div>
Titre
</div>
<div class="body">
<div class="left"></div>
<div class="right"></div>
Contenu
</div>
<div class="bottom">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
css : (il manque encore des classes, mais l'idée est la)
* {
margin:0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 11px;
}
.bloc {
height: 200px;
width: 120px;
}
/* HEAD -------------------------------------*/
.bloc .head {
background-image:url(bloc_head.jpg);
height:42px;
line-height: 42px;
margin:0px;
}
.bloc .head .left, .bloc .head .right, .bloc .head .content {
width:18px;
height:42px;
}
.bloc .head .left {
background-image:url(bloc_head_left.jpg);
float:left;
}
.bloc .head .right {
background-image:url(bloc_head_right.jpg);
float:right;
}
/* BODY -------------------------------------*/
.bloc .body {
background-image:url(bloc_body.jpg);
width: 120px;
height:100%;
}
.bloc .body .left, .bloc .body .right {
background-repeat:repeat-y;
width: 18px;
height: 100%;
}
.bloc .body .left {
background-image:url(bloc_body_left.jpg);
float:left;
}
.bloc .body .right {
background-image:url(bloc_body_right.jpg);
float:right;
}
/* BOTTOM -------------------------------------*/
.bloc .bottom {
height:17px;
bottom: 0px;
clear:both;
overflow:hidden;
background-image:url(bloc_bottom.jpg);
background-repeat:repeat-x;
}
.bloc .bottom .left {
width:18px;
height:100%;
background-image:url(bloc_bottom_left.jpg);
float:left;
}
.bloc .bottom .right {
width:18px;
height:100%;
background-image:url(bloc_bottom_right.jpg);
float:right;
}
merci de votre aide
Message édité par phenxdesign le 04-04-2006 à 20:14:29