Mise en page CSS avec fond d'étirement

Question

J'ai cette mise en page de conception qui a un arrière-plan dégradé dans le conteneur de contenu.

Le dégradé est une couleur unie à gauche et à droite et un dégradé à blanc près du centre. (gradient horizontal)

J'ai trois images left-solid.png et un right-solid.png pour étendre la gauche et la droite de la zone de contenu si la zone de visualisation est plus grande. J'ai main-gradient.png comme arrière-plan pour le contenu principal et est une taille fixe de 900px

Existe-t-il un moyen de disposer ceci sans utiliser une table html?

On dirait que je besoin de trois colonnes de quelque sorte

[leftcolumn] [contentcolumn] [rightcolumn]

rightcontent = peut étirer et rempli de répétition x
contenu droit solid.png = 900px rempli de main-gradient.png comme arrière-plan sans répétition
leftcontent = canstrech et rempli avec left-solid.png repeat-y

des suggestions?

Answer 1

Il existe plusieurs façons d'obtenir une disposition multi-colonnes sans utiliser de tables. En fait, l'utilisation de tables est sémantiquement incorrecte. Cette chose est l'une des raisons pour lesquelles CSS a été créé.

En utilisant la structure HTML suivant:

<div class="container"> 
    <div class="left"> 
    </div> 
    <div class="middle"> 
    </div> 
    <div class="right"> 
    </div> 
</div> 

Ensuite, vous pouvez le faire en CSS:

.left, .middle, .right { 
    display: inline-block; 
} 

Cela indiquera les années div à apparaître à côté de l'autre. Des styles CSS supplémentaires seront également nécessaires, comme les propriétés de largeur pour chaque colonne (préférable d'utiliser des pourcentages).

Une autre option pour CSS serait:

.left, .middle, .right { 
    float: left; 
} 

Cela aussi dire aux années div à apparaître à côté de l'autre, mais il le fait d'une manière très différente.

---

Une autre remarque est que vous n'avez pas besoin d'utiliser d'images pour votre dégradé. Vous pouvez faire des dégradés en utilisant CSS. Jetez un oeil à http://www.colorzilla.com