Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2988 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Design fluide : Petit souci

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Design fluide : Petit souci

n°1817998
darkgloom
Posté le 27-11-2008 à 18:54:14  profilanswer
 

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
mood
Publicité
Posté le 27-11-2008 à 18:54:14  profilanswer
 

n°1818014
tpierron
Posté le 27-11-2008 à 19:37:15  profilanswer
 

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
n°1818016
darkgloom
Posté le 27-11-2008 à 19:53:16  profilanswer
 

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
n°1818024
darkgloom
Posté le 27-11-2008 à 20:17:56  profilanswer
 

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 ?

n°1818034
tpierron
Posté le 27-11-2008 à 20:48:04  profilanswer
 

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.

n°1818041
darkgloom
Posté le 27-11-2008 à 21:05:01  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Design fluide : Petit souci

 

Sujets relatifs
Souci avec formulaire en base Sql (la base ne se remplit pas)petit programme batch
Petit soucis de liens avec un site web multilangue[résolu] petit script en python
[Design][Telethon] Rechercherealisation d'un petit programme pour firefox
J'ai un souci d'iframes, je peux vous demander votre aide ?Petit problème avec $_FILES
Petit probléme pour une suppresion d'enregistrementSoucis actionscript..ou..php? petit formulaire
Plus de sujets relatifs à : Design fluide : Petit souci


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR