28220 sujets

CSS et mise en forme, CSS3

Mise en page partiellement mouvante

Voilà, j'essaye de réaliser une mise en page avec du CSS qui à l'air simple à première vue, mais qui me pose problème.

En effet, j'essaye d'agencer un en-tête, un menu et le corps de la page ensemble, et le tout centré en fonction de la fenêtre. Jusqu'ici rien de difficile.

Les difficultés commencent lors que le corps de la page, ici le Bloc C à une largeur variable... Et le Bloc A, l'entête, doit correspondre à cette largeur. Et le tout doit continuer à respecteur le centrage au coeur du navigateur.

Voici un schéma:


http://img185.echo.cx/img185/5242/esquisse6po.jpg


Voilà, vous avez une idée. Sachant que j'aimerai que le tout réponde aux normes Firefox et Internet Explorer.
Je part du principe que l'ordre de déclaration des bloc dans la source html est


<body>

<bloc A>
<bloc B>
<bloc C>

</body>


Proposition de css


body {
padding-left:10%;
padding-right:10%;
}

#blocB {
float:left;
width:300px;/* valeur au hasard */
}

#blocC {
margin-left:310px;/*marge de 10px entre B et C*/
}


J'espère que celà t'aidera
je sais pas si ca te conviendrais mais bon en partant du principe ou tu ajoutes un 4eme bloc div "bloc D" qui entoure les blocs B et C ca deviens tout de suite plus simple d'avoir une page centrée. Ca donnerai en gros :
<div id="bloc A"> </div>
<div id="bloc D"> 
<div id="bloc B"> </div>
<div id="bloc C"> </div>
</div>


et dans le CSS tu centre les blocs A et D avec l'attribut "margin : auto;" tu fixe la largeur que tu veux a ton bloc B et le bloc C s'adaptera tout seul tout en gardant l'ensemble centré.
Alors tout d'abord bonjour et merci... Alors oui j'ai posté en d'autres endroit mais ça va faire deux semaines que je m'arrache les cheveux avec cette histoire...

Alors désolé, je ne voulais offusquer personne.

benny a écrit :
je sais pas si ca te conviendrais mais bon en partant du principe ou tu ajoutes un 4eme bloc div "bloc D" qui entoure les blocs B et C ca deviens tout de suite plus simple d'avoir une page centrée. Ca donnerai en gros :
<div id="bloc A"> </div>
<div id="bloc D"> 
<div id="bloc B"> </div>
<div id="bloc C"> </div>
</div>


et dans le CSS tu centre les blocs A et D avec l'attribut "margin : auto;" tu fixe la largeur que tu veux a ton bloc B et le bloc C s'adaptera tout seul tout en gardant l'ensemble centré.

C'est exactement ce que j'avais fais. Sauf que si je ne fixe pas une valeur fixe à mon bloc a, les margin auto ne servent à rien... Et si je fixe une valeur fixe, et bien le Bloc A ne s'adaptera pas au Bloc C.

Voici actuellement mon code:


.Bloc A {
  margin-left: auto;
  margin-right: auto;
  width: 935px;
  height: 100px;
}

.Conteneur{
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 935px;
  height: 100%;
  top: 20px;
  text-align: center;
}

.Bloc B {
  position: absolute;
  width: 180px;
  top: 0px;
  left: 0px;
}

.Bloc C {
  position: absolute;
  top: 0px;
  left: 200px;
  right: 0px;
  text-align: left;
}
Raphael a écrit :
Salut à toi,

Pourquoi n'exploites-tu pas la réponse de clb56 ?

Parce que le padding empêcherait à ma page de pouvoir, sur une petite fenêtre, occuper l'intégralité du navigateur.

Vous voyez ce que je veux dire ?
Administrateur
Silent a écrit :

Parce que le padding empêcherait à ma page de pouvoir, sur une petite fenêtre, occuper l'intégralité du navigateur.

Vous voyez ce que je veux dire ?

Dans ton exemple, tu veux une marge latérale en fonction de la résolution. C'est exactement ce que fait le code de clb56 : un padding en % donc dépendant de la résolution.
Si tu ne veux pas de marges, il suffit de supprimer le padding.

Si ce n'est pas ça, je n'ai pas compris ce que tu veux par "largeur mouvante en fonction de la taille de la fenêtre" Smiley confus
Si tu veux une largeur qui puisse devenir nulle, c'est impossible... sauf à grand renfort de script.
Modifié par Raphael (28 May 2005 - 17:51)
1 - Par largeur mouvante, je veux dire que le Bloc C sera un forum phpBB, et vous savez, si une image est trop grande, le forum s'agrandit de lui-même... et donc il faut que le Bloc A puisse suivre.

2 - J'ai testé la méthode de clb56. La redimensionnement excessif (faire une toute petite fenêtre par exemple) fait un bazar monstre. De plus, c'est pas super concluant avec IE.

Donc pour l'instant, je me dirige plus vers la méthode 'conteneur', même si elle ne marche pas non plus...

(ça me rend fou cette histoire...)
Sujet clos
Aller à