[Résolu] Site sur le 3/4 droite

Hello,

Voila un moment que je planche sur le probleme.
Je suis en train de reproduire le screen si dessous et mon soucis c'est d'afficher le trait gris en dessous du menu et la fond gris du footer uniquement sur la droite.

Alors j'ai reussi avec un background que j'ai posse sur le body, mais c'est tricher et suivant la resolution ca marche pas...



Si on pouvait juste m'aiguiller sur comment le faire, qu'apres je me debrouille quand meme, mais je vois pas trop comment faire

Merci
a+
nico
Modifié par nicodemo (22 Jul 2011 - 09:43)

tu n'as qu'à utiliser une div pour le header dans laquelle tu met ton background avec filet et une autre pour ton footer idem.

Bonjour à toutes et à tous,

bonne remarque petit vincent !

Pour mieux gérer la mise en page, tu dois placer des boites dans des boites et ainsi de suite.

Crée une balise <div id="conteneur"> ... </div> et dans celle-ci place les balises suivantes :

<div id="tete"> ... </div>
<div id="corps"> ... </div>
<div id="pied"> ... </div>

Le conteneur permettra de cadrer l'ensemble de ces boite dans le body en faisant par exemple un margin : 0 auto;

chaque div (tete, corps et pied) sera dans le conteneur les uns en dessous des autres. Si tu places l'image (la bande grise) dans tete alors elle sera au dessus de corps, qui elle même contiendra test six images centrales. Et si tu veux une autre image (une autre bande grise) dans pied, et bien elle sera en dessous de corps.

@+

Hello,

Voila la structure du site

<!-- DEBUT DU CONTAINER -->
<div id="wrapper">

	    <!-- DEBUT DU HEADER -->
            <div id="header">
            </div>

            <!-- DEBUT DU CONTENT -->  
            <div id="content">
            </div>
           
           <!-- DEBUT DU FOOTER -->
            <div id="footer">
              
            </div>
</div>

Mais comme ca je n'arrive pas a afficher du contenu sur la droite. alors je vais essayer de partir sur :


>container width:100%;margin-left:30%;
>>header width:100%; border-bottom (pour afficher mon trait gris jusque toute a droite)
>>>wrapper width:960px;margin:0 auto

Je vais le faire apres pour voir si comme ca, ca peu le faire.

j'en suis la pour le moment

Template

Merci pour votre aide.
a++
Nico

Hello,

Merci a vous, ca ma fait reflechir et ca marche comme j'ai explique plus haut
Des fois la nuit porte conseil.

A++
Nico

Bonjour,

Il n'y a pas de moyen vraiment simple en CSS de gérer ces cas de figure. On peut éventuellement regarder du côté d'une mise en page avec display:table-cell (moyennement convaincant...), ou avec Flex Box (CSS3, en cours d'évolution, implémentations dans certains navigateurs) ou encore de Grid Layout (CSS3, brouillon récent, la première implémentation sera dans IE10 à priori). C'est sans doute Grid Layout qui se prête le mieux à ce type de mise en page.

En attendant, on peut bricoler des choses convaincantes malgré tout. Voici un début de piste:
http://covertprestige.info/css/fond-triptyque/