Discussion :

[Fredovsky]

Bonjour à tous !

Ci-dessous le type de mise en page dont j'ai besoin pour mon site web.

http://picasaweb.google.fr/FredoPics...49634542874754

Le problème se situe au niveau des colonnes de gauche et de droite.

Je n'arrive pas à faire en sorte que leur largeur soit variable, c'est à dire qu'elles comble les bords de l'écran ci celui-ci est plus large que "Page" + "Sidebar".

De plus il faut que ce soit celles-ci qui disparaissent si l'utilisateur diminue la taille de sa fenêtre.

Une idée de la possibilité de faire ca en CSS ?
Une solution alternative ?

(lorsque je met dans les colonnes gauche et droite
width : auto;
ca ne fait rien.)

Merci d'avance

[Macmillenium]

bonsoir,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
#page { min-width:1024px; }
.left { width:20%; float:left; background:red;  }
.content { margin:0 20%; background:green;  }
.right { width:20%; background:black; position:absolute; top:0; right:0; }

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<div id="page">
	<div class="left"></div>
	<div class="content"></div>
	<div class="right"></div>
</div>

[devyan]

Salut,

C'est pas courant comme demande ...

Effectivement comme ça je ne vois pas comment faire...

Questions :
1/ Que vont contenir les colonnes L et R ?
2/ La zone centrale a une largeur fixe que tu connais, es-tu capable de "calculer" la largeur de L et R en % ?

[Fredovsky]

En fait les colonnes ne vont pratiquement rien contenir, elles s'adressent aux utilisateurs disposant d'une grande résolution de ne pas avoir le site centré au milieu, donc elles contiendront des images en fond (de telle maniere qu'il n'y ait pas de barres de scroll si la fenetre est trop petite pour contenir les colonnes).

Je connais la largeur de la zone centrale (990px), mais le pourcentage a gauche et a droite dépend de la résolution du visiteur.

Pas facile de s'en sortir...

[Macmillenium]

Je connais la largeur de la zone centrale (990px), mais le pourcentage a gauche et a droite dépend de la résolution du visiteur.

C'est clair que ce n'est pas du tout courant ...

[Fredovsky]

Merci je vois l'idée, mais le problème c'est surtout pour leur largeur. Je leur attribue quoi pour qu'elles aillent jusqu'à tout à gauche (ou tout a droite) de l'écran ?

J'imagine que si je met d'office une largeur trop grande (pour pallier à toutes les résolutions), je risque d'avoir une barre de scroll horizontale...?

Merci encore,

Fred.

[Macmillenium]

En fait les colonnes ne vont pratiquement rien contenir, elles s'adressent aux utilisateurs disposant d'une grande résolution de ne pas avoir le site centré au milieu, donc elles contiendront des images en fond (de telle maniere qu'il n'y ait pas de barres de scroll si la fenetre est trop petite pour contenir les colonnes).

Comme elles vont rien contenir, pourquoi ne pas mettre tes images en background du body ... ? il n y aura pas de scroll tant que la taille de fenêtre est > 990px ...

[Fredovsky]

oui mais le problème c'est qu'il y a plusieurs images, et notamment des différentes entre la gauche et la droite.

Donc au minimum une image pour la colonne de gauche, et une autre pour celle de droite.

[Macmillenium]

Tu pourra par exemple floatter les 2 div R et L avec 50% de largeur pour chaqu'une ET positionner ton bloc centrale en absolute pour qu'il passe au dessus ...
Un truc du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
.L { float:left; width:50%; background:url(tonBg.gif) no-repeat left; }
.R { float:left; width:50%; background:url(tonBg2.gif) no-repeat right; }
.centrale { width:990px; position:absolute; left:50%; margin-left:-495px; }

[Fredovsky]

Merci mais ça ne convient encore pas, l'image de la colonne de gauche en background va, lorsqu'on réduit la taille de la fenêtre, se rogner sur son coté droit alors que il faudrait que ca soit par le coté gauche.
(comme si l'image disparaissait par la gauche de l'écran et non derrière la div du centre.

Je laisse tomber, je vais essayer une approche différente.

Merci beaucoup pour tes propositions !

PS : sauriez-vous me dire comment cette personne affiche son fond ?

http://gottagettofowa.com/

c'est exactement ce type de fonctionnalités, un header qui continue a gauche comme à droite, et pareil pour le footer.

[Macmillenium]

Merci mais ça ne convient encore pas, l'image de la colonne de gauche en background va, lorsqu'on réduit la taille de la fenêtre, se rogner sur son coté droit alors que il faudrait que ca soit par le coté gauche.
(comme si l'image disparaissait par la gauche de l'écran et non derrière la div du centre.

et bien à toi de jouer sur le positionnement de ton background !

c'est exactement ce type de fonctionnalités, un header qui continue a gauche comme à droite, et pareil pour le footer.

Il utilise un background sur le body ce qui est logique.

[Macmillenium]

Je pourrais t'aider à résoudre ce problème si tu fournis ton html+css+tes images.

[Fredovsky]

Merci pour tous tes conseils, je travaille dessus ce soir et si je bloque toujours je t'envoie mes fichiers pour que tu jette un oeil.

Merci encore !

A+

[devyan]

Bonsoir,

La solution de Macmillenium ne semble pas mal...

Personnellement j'aurai plutôt placé les R et L en absolute et utilisé la méthode classique des marges gauche et droite automatiques pour le centrage.

float:left; width:50%; et float:left; width:50%; peut dans certains cas faire plus de 100% à cause de l'arrondi de calcul

[Macmillenium]

float:left; width:50%; et float:left; width:50%; peut dans certains cas faire plus de 100% à cause de l'arrondi de calcul

Même avec un padding:0; margin:0; sur le body ? non je crois pas a moins que je n'ai pas rencontré ce pb ...

[Macmillenium]

Personnellement j'aurai plutôt placé les R et L en absolute et utilisé la méthode classique des marges gauche et droite automatiques pour le centrage.

Oui pas mal aussi avec un z-index:-1 pour les deux si on veut éviter le positionnement du contrale !
bref, Fredovsky, tu as quand même plusieurs choix ;-)
Bon courage !

[GihefBey]

Bonjour,

Le plus simple est de n'utiliser qu'une image (regroupant les autres) en arrière-plan du body.
Et ensuite de placer un conteneur dedans.
C'est ce que fait http://gottagettofowa.com/---style.css.
Avec une image assez large (ici, 1700px) et avec du noir aussi pour compléter par le bas.

Par exemple.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Un titre</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
</head>
<body>
  <div id="conteneur">
    <div id="entete"></div>
    <div id="contenu"></div>
    <div id="pieddepage"></div>
  </div>
</body>
</html>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
    html, body {
      margin: 0;
      padding: 0;
      text-align: center;
      background: #eee url(ap.jpg) no-repeat center top;
      color : #344979;
      }
    #conteneur {
      position: relative;
      margin: 0 auto;
      width: 272px;
      background-color: #fff;
      font-family: 'Trebuchet MS', Verdana, sans-serif;
      }
    #entete {
      height : 92px;
      background-color: #ddf;
      }
    #contenu {
      height : 212px;
      padding-top : 14px;
      background-color : #fdd;
      }
    #pieddepage {
      height : 92px;
      background-color : #dfd;
      }

-