Aller au contenu

Problème d'image de fond


Dart

Sujets conseillés

Bonjour ,

Tout d'abord , je tiens à prévenir que je suis un débutant en CSS , donc veuillez m'excusez si ma question vous semble stupide.... mais j'ai un peu de mal avec la mise en place de CSS.

Voila le problème , je souhaite mettre en place ce type d'interface pour un site internet :

calque19kf.gif

Mon problème vient surtout du fait que je souhaite que l'interface puissent être "étirable" .... en gros que le bloc bleu foncé puissent avoir la longueur que je souhaite. (avec à la limite une longueur fixe , peu importe).

J'ai donc crée trois bloc :

- Un bloc Supérieur

- Un bloc centrale

- Un bloc Inférieur

comme ceci :

couper3xa.jpg

L'idée était d'écrire ce que je souhaitais dans mon bloc centrale.

Vu que j'utilise Dreamweaver tout était en positionnement Absolu, ce qui m'empéchait de positionner mon Div Inférieur , en dessous du Centrale , peu importe sa longueur.

Donc voici le code HTML :

<div class="TextHautC"></div>
<div class="BlocTexte">Phrase Test1
<p>Phrase Test2</p>
<p>Phrase Test3 </p>
<p>Phrase Test4</p>
<p>Phrase Test5 </p></div>
</div><div class="TextBasC">

Et voici le code CSS correspondant :

div.TextHautC{
background-image:url(../image/PagePr/Texte/HautTexte.gif);
width:830px;
height:54px;
z-index:10;
left: 3px;
top: 422px;
}

div.BlocTexte{
width:831px;
height:65px;
z-index:10;
left: 9px;
top: 536px;
background-image:url(../image/PagePr/Texte/LigneTexte.gif);
background-color:#2A7FAA;
}
div.TextBasC{
background-image:url(../image/PagePr/Texte/BasTexte.gif);
width:830px;
height:50px;
z-index:10;
}

Malheuresement le resultat est différent de ce que j'attendais :

couper21ut.jpg

Pourquoi le texte entré entre lee bloc DIV centrale déborde sur celui d'en dessous ??

Comment résoudre le problème ??

Merci d'avance.

Modifié par Dart
Lien vers le commentaire
Partager sur d’autres sites

salut;

ta div ne s'agrandit pas car tu lui donne une hauteur fixe. donc elle ne s'adaptera pas au contenu.

ta div :

div.BlocTexte{

width:831px;

height:65px; à remplacer par height:auto;

z-index:10;

left: 9px;

top: 536px;

background-image:url(../image/PagePr/Texte/LigneTexte.gif);

background-color:#2A7FAA;

}

et sans oublier ton backround-repeat:repeat-x;

je crois ne rien avoir oublier la... mais il est tôt et sans café je vois rien :blink:

Modifié par drakulls
Lien vers le commentaire
Partager sur d’autres sites

je crois ne rien avoir oublier la... mais il est tôt et sans café je vois rien :blink:

Je devrais me mettre au Café :P

Merci beaucoup pour la réponse , c'était exactement ça , je le saurais pour la prochaine fois !

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...