[CSS/HTML] bloc avec titre+contenu décoré avec img en fond

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS/HTML] bloc avec titre+contenu décoré avec img en fond

phenxdesign

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 :jap:

Message édité par phenxdesign le 04-04-2006 à 20:14:29

Publicité

phenxdesign

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 ...

phenxdesign

lol decidement, tout le monde s'en fout

phenxdesign

edit

Profil supprimé

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

phenxdesign

ok, ça me rassure, mais j'ai encore le probleme que ça se redimensionne pas quand le texte depasse

phenxdesign

personne n'a des idées pour mon probleme ?

benamoubeach

tivuplai

spécifie pas de hauteur fixe pitetre.

phenxdesign

j'aimerais bien, mais quand je le fais, les cotés disparaissent ... comment faire alors ?

FORUM HardWare.fr

Programmation

HTML/CSS

[CSS/HTML] bloc avec titre+contenu décoré avec img en fond

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...
Plus de sujets relatifs à : [CSS/HTML] bloc avec titre+contenu décoré avec img en fond

Page générée en 0.040 secondes