Mise en Page CSS (Box..)

Version imprimable

22/12/2008, 17h24
Fredovsky

Mise en Page CSS (Box..)

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

bonsoir,

Code:

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:

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

22/12/2008, 18h06
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 % ?
22/12/2008, 18h27
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...
22/12/2008, 20h43
Macmillenium

Citation:

Envoyé par Fredovsky

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 ...
22/12/2008, 20h52
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.
22/12/2008, 20h56
Macmillenium

Citation:

Envoyé par 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).

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 ...
22/12/2008, 21h06
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.

:(

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:

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; }

22/12/2008, 22h12
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.
22/12/2008, 22h22
Macmillenium

Citation:

Envoyé par 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.

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

Citation:

Envoyé par Fredovsky

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.
22/12/2008, 22h26
Macmillenium

Je pourrais t'aider à résoudre ce problème si tu fournis ton html+css+tes images.
22/12/2008, 22h28
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+
22/12/2008, 22h31
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% :aie: à cause de l'arrondi de calcul
22/12/2008, 22h43
Macmillenium

Citation:

Envoyé par devyan

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

Même avec un padding:0; margin:0; sur le body ? non je crois pas :D a moins que je n'ai pas rencontré ce pb ...
22/12/2008, 22h47
Macmillenium

Citation:

Envoyé par devyan

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 !

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:

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:

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;
      }