Design fluide : Petit souci

Design fluide : Petit souci - HTML/CSS - Programmation

Marsh Posté le 27-11-2008 à 18:54:14    

Bonjour,
 
Dans le cadre d'un projet scolaire je dois réaliser un site web.
J'ai un petit souci dans mon design.
L'adresse du "site" : http://darkgloom.free.fr/web
Le souci c'est que quand on agrandit ou réduit la taille du navigateur, le bloc de droite va "subduquer" le bloc central alors qu'il est fixé à droite, et que le bloc de gauche se comporte tout à fait normalement.
 
Voil mon code css :
 

Code :
  1. .sommaire {position : absolute ; top : 120px ; left : 1% ;
  2.    height : 400px ; width : 14% ; border : thin solid black ;
  3.    text-align : center ; background-color : #E5E3E2 }
  4. .droite {position : absolute ; top : 120px ; right : 1% ;
  5.    min-height : 500px ; width : 14% ; border : thin solid black ;
  6.    padding : 5px ; background-color : #E5E3E2 }
  7. .contenu {position : absolute ; top : 20px ; left : 19% ; width : 60% ;
  8.   border : thin solid black ; background-color : #DFDFDF ; padding : 20px ;
  9.   min-height : 600px}


 
Et voila comment je construis ma page :
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <link rel="stylesheet" type="text/css" href="style.css">
  4. <html>
  5. <head>
  6. <title> BDzine, vente de BD's en ligne </title>
  7. </head>
  8. <body>
  9. <div class="logo">
  10. ...
  11. </div>
  12. <div class="droite">
  13. ...
  14. </div>
  15. <div class="sommaire">
  16. ...
  17. </div>
  18.  
  19. <div class="contenu">
  20. ...
  21. <div class="contenu2">
  22. ...
  23. </div>
  24. </div>
  25. </body>
  26. </html>


Quelqu'un aurait-il une idée ?
 
Merci d'avance


Message édité par darkgloom le 27-11-2008 à 19:01:45
Reply

Marsh Posté le 27-11-2008 à 18:54:14   

Reply

Marsh Posté le 27-11-2008 à 19:37:15    

Ouais, ton problème, c'est le padding que tu rajoutes à ton div centre et droit. C'est un des cas ou le modèle de boite W3C est chiant. Le truc, c'est que lorsque tu mets "width: 60%", il va effectivement prendre 60% de la largeur de la fenêtre, auquel va se rajouter le padding, les marges, et la bordure.
 
Donc si tu mesures la largeur réelle de ton div, tu auras en fait 62 ou 63%. Le truc, c'est d'imbriquer deux divs : Le premier n'a aucune bordure, marge, padding, il te sert juste à positionner les divs englobant. Ceux-là, tu peux leurs mettre un padding, une bordure et avec un "width: auto" (ne mets surtout pas width: 100%, sinon tu auras le même problème).


Message édité par tpierron le 27-11-2008 à 19:40:02
Reply

Marsh Posté le 27-11-2008 à 19:53:16    

En effet, j'ai enlevé le padding de mon contenu et j'ai crée une nouvelle div comme cela :
 

Code :
  1. .contenu_ok{ width : auto ; padding : 20px }


 
Et tout roule :)
 
Merci beaucoup


Message édité par darkgloom le 27-11-2008 à 19:56:52
Reply

Marsh Posté le 27-11-2008 à 20:17:56    

Tiens par contre un autre petit souci, suivant si la page a besoin d'un ascenseur ou pas, sa largeur en est réduite et donc le design se décale légèrement. Une idée ?

Reply

Marsh Posté le 27-11-2008 à 20:48:04    

darkgloom a écrit :

Tiens par contre un autre petit souci, suivant si la page a besoin d'un ascenseur ou pas, sa largeur en est réduite et donc le design se décale légèrement. Une idée ?


Bah, c'est normal. Tout ton positionnement est fait avec des %. Quand l'ascenceur vertical disparait, la largeur change et les positionnements de tes divs changent légèrement.
 
C'est plutôt inhabituel comme layout. Que la largeur soit un pourcentage, c'est correct, mais que le positionnement (left, top, right) soit aussi des pourcentages, c'est un peu plus casse gueule. J'utiliserais des px à la place.

Reply

Marsh Posté le 27-11-2008 à 21:05:01    

Oui j'avais compris d'où venait le souci mais je cherchais donc une solution ;)
Des pixels oui mais bon en changeant la résolution ça ne risque pas de partir dans tous les sens ? Mais bon c'est peut être mon système à 3 bandes qui n'est pas performant  :D
 
edit : Puis j'y pense même si je fixe les espacements, les largeurs en % bougeront toujours non ? Il n'y a pas moyen de se caler sans prendre en compte l'ascenseur ?


Message édité par darkgloom le 27-11-2008 à 21:18:42
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed