Problème CSS

Placement du design

Sujet résolu

20 avril 2006 à 21:59:19

J'me suis lancé pour mettre un kit-design en CSS mais je bute sur un truc là.
Image utilisateur

Voyez dans l'encadré rouge, à gauche et à droite deux petites images a répéter verticalement(ceux présente sur le fond blanc). Donc au début j'ai pensé creer 4 balises div class comme ceci :

<div id="centre">
<div class="centre_haut">
</div>
<div class="centre_gauche">
</div>
<div class="centre_droite">
</div>
<div class="centre_centre">
</div>
</div>

Mais bon je n'arrive pas au résultat que je veux. Je pense que l'idée des 4 balises est pas bonne. Sinon voici le code CSS momentanément associé :

#centre
{
margin-left: 140px;
width: 470px;
}
.centre_haut
{
height: 20px;
background-image: url("images/centre.gif");
margin-top: 10px;
}
.centre_gauche
{
background-image: url("images/centre_gauche.gif");
background-repeat: repeat-y;
width: 5px;
float: left;
margin-top: 20px;
}
.centre_droite
{
background-image: url("images/centre_droite.gif");
background-repeat: repeat-y;
width: 5px;
float: right;
margin-top: 20px;
}
.centre_centre
{
width: 460px;
background-color: #3B496E;
margin-left: 5px;
padding-left: 5px;
}

Si quelqu'un a une idée ou est déjà tombé sur ce cas :-°

.
Merci d'avance

.
Sources kit-graphique : http://www.internetservices-fr.net

gcyrillus

20 avril 2006 à 23:02:36

bonjour,

<div id="centre">
<div class="centre_haut">
</div>
<div class="centre_gauche">
<div class="centre_droite">

</div>
</div>

</div>

et le css

.centre_gauche
{
background-image: url("images/centre_gauche.gif");
background-repeat: repeat-y;
padding-left:7px;
}
.centre_droite
{
background-image: url("images/centre_droite.gif");
background-repeat: repeat-y;
background-position: right;
padding-right:7px;
}

le centre_centre ne sert a rien,
centre droite et gauche, vont s'etendrent avec leurs contenus et dessiner leurs bordures respectives (affiché leurs fonds), le padding empeche le contenu de se superposer aux images de fond .

++

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

ljam

20 avril 2006 à 23:21:09

Salut,

Je ne suis pas sûr d'avoir bien compris mais je me lance quand même.

Pourquoi plutôt que de multiplier les div, ne pas utiliser une seule image qui serait répétée verticalement? Cette image serait en fait une "tranche" horizontale du fond que l'on peut voir sur screenshot et dont la largeur serait bien sur égale à celle de ton bloc. J'espère que j'ai réussi à me faire comprendre.

@++

NaBiSs

21 avril 2006 à 0:49:16

Ok merci gcyrillus le problème est règlé

. Et ljam, je n'y avais pas pensé mais c'est vrai que c'était plus simple

.
En tout cas merci pour les réponses rapides

djo0012

21 avril 2006 à 1:29:48

mais le probleme du une seule image rend le fond impossible a etendre... alors que les deux graphique separe le permette...
enfin sa depend toujours de se que l'ont veut comme design, si on veut un site dit 'centre' oui ils est vrai que c'est plus simple comme tu l'as dit ljam.

NaBiSs

21 avril 2006 à 12:54:49

Non en faite il parlait de relier le coté gauche et droit en une seule image, comme il s'agit d'un design fixe on connnait la largeur.Donc nous reste plus que 2 div à la place de 4 du départ.

gcyrillus

21 avril 2006 à 13:09:15

bonjour,

les deux solutions : 2 images dans 2 élèments ou une seule dans un seul élèment, ont chacunes leur utilitées:

1 seule image dans un seul élement, et la "colonne" ainsi dessiné ne pourra pas etre fluide, sa largeur devra rester fixe.

2 images dans 2 elements imbriqués permettent de rendre cette colonne extensible en largeur, (et elle peut bien sur rester en largeur fixe ).

Tout depend de l'effet final recherché.

++

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

Problème CSS

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Problème CSS

Placement du design

Problème CSS

Supprimer

Modérer

Signaler le message aux modérateurs