Structure site avec Width:100%

reedbedroom Messages postés 80 Date d'inscription   Statut Membre Dernière intervention   -  
inspiring Messages postés 1813 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Je suis actuellement en train de créer une structure pour un nouveau projet Web mais je rencontre un problème que ne doit pas être bien compliqué à résoudre ... mais moi je n'y arrive pas.

Ma structure se présente de la façon suivante :



Mon problème est que lorsque je mets une width à 100% pour la page, celle ci prend la largeur totale de l'écran et glisse donc sous la sidebar (float:left). Comment puis je laisser la page à droite de la sidebar tout en occupant la totalité du reste de l'écran ?

Merci pour votre aide !



A voir également:

8 réponses

Réponse 1 / 8
inspiring Messages postés 1813 Date d'inscription   Statut Membre Dernière intervention   265
 
Re,

J'espère que j'ai bien compris ta demande. Je poste directement le code, tu me diras si je me suis planter

Le HTML : 
<div class="wrapper">
<div id="mainLogo"><div class="left-wrapper">mainLogo</div></div>
<div id="header">header</div>
</div>
<div style="height:20px"></div><!-- NE SERT A RIEN, JUSTE POUR MARQUER L'ESPACE -->
<div class="wrapper">
<div id="left_sidebar"><div class="left-wrapper">left_sidebar</div></div>
<div id="pageContent">pageContent</div>
</div>


Le CSS : 
.wrapper {display:table}
.left-wrapper {width:320px}
#mainLogo {background:#eee;height: 100%;display:table-cell;}
#header {background:#ddd;display:table-cell;width:100%;}
#left_sidebar {background:#eee;height: 100%;display:table-cell;}
#pageContent {background:#ddd;display:table-cell;width:100%;}
#mainLogo, #header, #left_sidebar, #pageContent {vertical-align:top}


Je n'ai repris que l'essentiel du CSS, je te laisse y ajouter les background.

Tiens moi au courant :)

1
Réponse 2 / 8
reedbedroom Messages postés 80 Date d'inscription   Statut Membre Dernière intervention   98
 
Up !

J'aimerais par la même occasion que ma sidebar prenne la totalité de la hauteur de l'écran si possible, tout comme la page d'ailleurs :)

Merci !
0
Réponse 3 / 8
inspiring Messages postés 1813 Date d'inscription   Statut Membre Dernière intervention   265
 
Bonjour,

j'ai bien vu ton appel sur lautre post. :)

si personne ne répond avant, je m'occupe de ta question vers 21h30.
A toute (là j'ai plus le temps)
0
Mouslim02 Messages postés 320 Date d'inscription   Statut Membre Dernière intervention   11
 
salut
je ne suis pas tireur d'élite mais il se peut que je puisse t'aider :p
pour ce qui est du header c'est evident qu'il se positione en bas parce que tu as mis width:100% !!!
si tu veut mon conseil, met le logo à l'interieur de la balise header normalement ça marchera sans probleme, si tu ne veut pas (chaqu'un son gout) essai de mettreles attributs suivants
header
{
width:100%; // on donne la totalité de la largeur a l'entete
margin-left : 340px; // on lesse assez d'espace pour le logo ;)
display:inline-block; // on lui ordone de se mettre en ligne avec ses amis
vertical-align:top; // j'explique apres
}
#logo // je ne sais pas comment tu as nommé ta balise de logo !
{
float:left;
display:inline-block; // on lui ordone de se mettre en ligne avec ses amis
vertical-align:top; // c'est pour qu'il soit sur le meme niveau en haut
}
0
Mouslim02 Messages postés 320 Date d'inscription   Statut Membre Dernière intervention   11
 
resalut
désolé j'ai mal compris ton probleme je pense que j'ai fait une gaffe
bon oublie mon message d'avant et concentre toit sur celui ci
pour mettre la sidebar a gauche au meme niveau que la page il suffit de faire cela
#laPage
{
width:100%;
margin-left:340px;
display:inline-block;
vertical-align:top;
}
#laSideBar
{
width:320px;
display:inline-block;
vertical-align:top;
}

apres cela tu peut enlever l'attribut (float:left)
et désolé pour les erreurs que je fait, je suis sur un clavier catastrofik -_-
quelque explications :
width:100% donne la largeur totale a l'element html
margin-left fait en sorte qu'il reduit unpeu (320px) sa taille depuis la gauche
display:inline-block pour fait que lui et ceux qui ont le meme attribut soint sur la meme ligne
vertical-align:top c'est au cas ou ils n'ont pas la meme hauteur, il seront aligné sur le meme niveau en haut

ps : pour faire que la page prenne la totalité de l'ecran essai de faire height:100%;
bon courage et désolé pour le premier message j'ai mal compris
0
reedbedroom Messages postés 80 Date d'inscription   Statut Membre Dernière intervention   98
 
Bonsoir

Merci pour tes réponses, j'avais compris l'erreur dans le premier message, mais elle vient de moi. Quand je mets 100% sur le header et la page, j'entends 100% du restant de l'écran.

Mon div Logo et la sidebar reste à gauche quoi qu'il arrive et le header et la page doivent occupée la totalité de l'espace vertical restant.

voici mon CSS : 

#mainLogo {
	position:relative;
	float:left;
	width:320px;
	height:195px;
	background:url(../images/logo.png) no-repeat center left;	
}

#header {
	position:relative;
	float:right;
	height:45px;
	width:100%;
	padding:22.5px 0;
}

#left_sidebar {
	position: relative;
	float:left;
	display:inline-block;
	width:320px;
	height: 100%;
	min-height: 680px;
	clear: left; /* pour que la sidebar se glisse sous le logo  */
	background:url(../images/yellow_background.png) repeat center center;	
}

#pageContent {
	position: relative;
	float:left;
	display:inline-block;
	height: 100%; 
	width: 100%;
	background:url(../images/background_page.png) repeat center center;
}


Voilà, j'ai ajouté les inline-block mais ça ne fonctionne pas. En fait je peux mettre le #pageContent à droite de la sidebar, mais si je lui donne la valeur width:100%, il dépasse de l'écran et j'aimerais que ce div comble uniquement l'espace de droite, mais pas qu'il dépasse...

Est ce que je m'exprime correctement ? :D
0
Mouslim02 Messages postés 320 Date d'inscription   Statut Membre Dernière intervention   11
 
il faut lui donner la valeur 100% pour width et ajouter un margin-left:330px; pour diminuer l'espace occupé par la sidebar
as tu mis le margin-left ????? (330px minimum pas 320px sinon ça marche pas) :)
tiens moi au courant ;)
0
Réponse 4 / 8
reedbedroom Messages postés 80 Date d'inscription   Statut Membre Dernière intervention   98
 
Salut ,

Merci pour ta réponse, pour le moment ça ne fonctionne pas.

Pour le wrapper du header, ça fonctionne pas mal, mais j'ai du mettre les éléments mainLogo et header et position:relative; float: left, sinon ils disparaissent totalement.

Apparemment ça ne fonctionne pas avec display:table-cell;

Je vais réessayer mais pour le moment ça n'a pas l'air d'etre bon ;)

Merci.
0
reedbedroom Messages postés 80 Date d'inscription   Statut Membre Dernière intervention   98
 
Je viens de revoir avec ton code et ça ressemble bien à ce que je veux, je vais tenter en partant de ton code et le personnalisant un peu ...

Merci !!
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
reedbedroom Messages postés 80 Date d'inscription   Statut Membre Dernière intervention   98
 
Bonjour inspiring

Après plusieurs essais concluant avec ton code, je me suis rendu compte que j'avais fais une erreur en regardant de plus près la maquette que j'ai. Et cela devient un peu plus difficile...

Le logo et le bloc "menu" ne font pas la même hauteur, et le contenu de la page doit se glisser directement sous le menu, il n'est donc plus a la même hauteur que la sidebar ...

Je n'avais encore jamais utilisé le display:table ... pourtant je connaissais pas mal les tableaux avant de me mettre au css :)

Voici un nouvel aperçu de ce que je doit pouvoir faire :



Can you help me ?!!!! Pleassssseeeeee :P
0
Réponse 6 / 8
inspiring Messages postés 1813 Date d'inscription   Statut Membre Dernière intervention   265
 
Bonjour,

CSS: 
.wrapper {display:table}
#col1, #col2 {display:table-cell;}
#col1 {background:yellow}
#col2 {width:100%}
#mainLogo {background:#eee;width:320px}
#header {background:#ddd;}
#left_sidebar {width:320px}
#pageContent {background:#ddd;}
#mainLogo, #header, #left_sidebar, #pageContent {vertical-align:top}

HTML: 

 <div class="wrapper">

<div id="col1">
<div id="mainLogo">mainLogo</div>
<div id="left_sidebar">left_sidebar</div>
</div>

<div id="col2">
<div id="header">Menu</div>
<div id="pageContent">pageContent</div>
</div>

</div>


Il n'y a pas grosse différence dans le principe. Avant on travaillais par ligne, là on créé une structure en colonne :)
Ecrit et assumé par Inspiring - copyright 2009-2014
0
Réponse 7 / 8
reedbedroom Messages postés 80 Date d'inscription   Statut Membre Dernière intervention   98
 
Bonjour inspiring

Merci, cela fonctionne très bien comme ça mais malheureusement il manque encore quelque chose.

En fait le div "pageContent" doit faire 100% de hauteur également ...

Je remue ça dans tous les sens depuis hier mais je ne trouve toujours pas la solution pour que mon "pageContent" fasse 100% width & height de l'espace restant ! Une vraie prise de tête ... tout ça parce que le client veut un fond noir transparent sur la partie totale de "pageContent" !

Tu as une idée toi qui semble maitriser ce sujet?

Merci encore pour ton aide.

Développeur Web Freelance - www.iwebu.com
0
Réponse 8 / 8
inspiring Messages postés 1813 Date d'inscription   Statut Membre Dernière intervention   265
 
Re,

Je ne comprend pas bien la demande ...

Si tu veux une structure comme décrite mais avec un background identique pour l'ensemble de la page (hors logo / sidebar /menu) occupant la totalité de l'espace, c'est au body qu'il faut attacher le background.
Une hauteur 100% du screen c'est utopique (une usine à gaz en fait) sauf en utilisant du positionnement absolute ou fixed, mais sans oublier qu'un contenu de page doit repondre au scroll.

tout ça parce que le client veut un fond noir transparent sur la partie totale de "pageContent" !

Avec un body "fond noir transparent" et un background propre à chaque autres éléments c'est tout bon :)

Tu es un Freelance ... Attention à ne pas accepter ce qui dépasse tes compétences, c'est risqué.

Au passage, moi aussi je suis Freelance, je pense que je devrais te faire une facture :)

Si besoin, tu repost à la suite
0

Discussions similaires

C'est quoi le site qui remplace coco chat
TP3 -
bazfile -

2 réponses