28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Bordures d'un site

Bonjour,

Je travaille actuellement sur un site XHTML Transitional / CSS pour lequel je cherche une solution d'optimisation..

Le site est très simple, il est contenu dans un div blanc de largeur fixe, et centré au milieu de la page dont le fond est gris foncé.

Je cherche à ajouter de part et d'autre du div conteneur une image de contour de type dégradé.


La solution couramment employée est de fixer la largeur de ces images de contour.


Mon problème est le suivant :

Je ne souhaite pas que la largeur de ces images vienne s'ajouter à la largeur du div conteneur, ni qu'elles en fassent partie, le but de ces images étant juste de combler esthétiquement les espaces vides pour les hautes résolutions.

La meilleure solution est donc de les mettre en images de fond dans des divs élastiques, en faisant un site en 3 colonnes d'une largeur totale de 100% :


colonne de gauche élastique , image de fond positionnée à droite
colonne de centre de taille fixe
colonne de droite élastique, image de fond positionnée à gauche


J'ai eu beau faire différents essais, si faire des sites en 3 colonnes avec celles des côtés fixes ne me pose pas de problème, là je dois avouer que j'ai un peu de mal à trouver..

équivalent de ce que je souhaite faire en mise en forme tableau "à l'ancienne" Smiley cligne :

<table width="100%">
<tr>
<td></td><td width="700"></td><td></td>
</tr>
</table>

Quelqu'un a une solution ou une meilleure pratique ? merci d'avance.
Modifié par Active-Concept (18 Feb 2008 - 01:34)
Salut,

a écrit :
La meilleure solution est donc de les mettre en images de fond dans des divs élastiques, en faisant un site en 3 colonnes d'une largeur totale de 100%
Mauvaise idée, sauf si tu veux t'arracher les cheveux Smiley cligne

Pourquoi ne pas simplement mettre l'image de fond sur body ? Il suffit de faire une image de fond très large, mais d'une très petite hauteur, sur laquelle tu crées le dégradé souhaité et que tu fais se répéter sur toute la hauteur de la page : 
body {
   background: #ccc url(monImage.png) center top repeat-x;
}
bonjour,

tout d'abord, merci pour ta réponse.

En effet ta solution est plus simple, elle est presque parfaite, seul problème : on n'a alors aucun moyen à ma connaissance de faire correspondre inconditionnellement la longueur de la page et celle du fond, sachant que les pages peuvent avoir des longueurs différentes, et que leurs espace espace par rapport au bas du document varie si elles sont plus petites que le document.

quoi qu'il en soit ta démarche est évidemment largement meilleure que la mienne et elle m'évite quelques arrachages de cheveux inutiles...on dira qu'il s'agissait d'un moment d'égarement Smiley cligne Smiley biggrin

voici la solution plus que largement inspirée par la tienne que je propose pour la postérité Smiley cligne

style :

body {

     background: #ccc; text-align:center;

}

#conteneur {

     background-image:url(monImage.png) center top repeat-y;
 
}

#page {

      width: 800 px; margin-left:auto;margin-right:auto; background-color:#fff; text-align:left;

}



html :


<body>
   <div id="conteneur">
       <div id="page"> ma page </div>
   </div>
</body>


on va dire que je chippote, mais si un jour quelqu'un a l'esprit aussi tordu que moi ca pourra l'aider Smiley cligne . merci à toi
Bonjour,

Si tu appliques une couleur de fond au body qui reprend la dernière couleur de ton dégradé, tu obtiendras je pense un résultat satisfaisant.

Tu crées ton dégradé avec une image de 1px par 600px (par exemple), elle sera alors très légère et se chargera facilement.

Imaginons maintenant que ton dégradé aille d'un vert foncé jusqu'à un vert clair... Tu appliques au body un background-color vert clair (le même que la fin du dégradé).

Tu obtiendras par ce moyen un dégradé vert foncé -> vert clair, qui semblera ce prolonger jusqu'en bas de ta page... En effet, en partant d'en haut tu auras, de 0px à 600px ton dégradé et à partir du 601ème pixel ta couleur de fond...

Ca donne le code suivant :


body {
     background-image: url(tondegrade.jpg);
     background-repeat: repeat-x; 
     background-color: #ADC500;
     text-align:center;
}

...


J'espère être assez clair, il est tard (ou tôt, ca dépend de quel coté on se place)... mais je pense que c'est à ca que voulait aussi te faire arriver Thomas D.

Cordialement,

Bruntho.
Sujet clos
Aller à