[Résolu] Header extensible

Header extensible [Résolu] - Web design - Graphisme

Marsh Posté le 24-07-2008 à 14:57:51    

Bonjour, je crée actuellement un site extensible XHTML & CSS
J'aimerais que mon header puisse s'agrandir en même temps que le site.
 
Différente contrainte, je doit respecter les standards (pas de hack) et ma bannière est arrondie donc je ne peu pas la centrer et mettre le fond de la Div en couleur...
 
Je pensais construire le header en 3 parties dont 2 fixes.
Bannière principal placé à gauche | un morceau de fond de bannière de couleur | le bout de la bannière d'origine qui est arrondi
 
J'ai déjà essayé pas mal de CSS différent mais j'ss encore au niveau des CSS fixes donc je nage un peu
 

Code :
  1. </head>
  2. <body>
  3. <div id="header">
  4.  <div id="fixgauche">
  5.  </div>
  6.  <div id="mobile">
  7.  </div>
  8.  <div id="fixdroit">
  9.  </div>
  10. </div>
  11. </body>
  12. </head>


 

Code :
  1. /*la page*/
  2. body
  3. {
  4.    width: 984px = 100%; /* 1024 : taille réduite pour meilleur lisibilité */
  5.    margin: auto; /* Pour centrer page */
  6.    margin-left: 20px; /* marge gauche */
  7.    margin-right: 20px; /* marge droite */
  8.    margin-top: 20px; /* marge haut */
  9.    margin-bottom: 20px;    /* marge bas */
  10.    background-image: url("images/background_theme1.png" ); /* image de fond */
  11.    font: 0.8em "Trebuchet MS", helvetica, sans-serif ; /* police par défaut */
  12. }
  14. #header
  15. {
  16.    width: 100%;
  17.    height: 180px;
  18.    margin-right: 20px;
  19.    margin-left: 0px;
  20.    /*background-image: url("images/banniere.png" );*/
  21.    background-repeat: no-repeat;
  22.    margin-bottom: 0px;
  23. }
  25. #fixgauche
  26. {
  27.    width: 925px;
  28.    height: 180px;
  29.    margin-left: 0px;
  30.    margin-right: 0px;
  31.    margin-bottom: 0px;
  32.    background-image:url("images/banniere.png" );
  33.    background-repeat: no-repeat;
  34. }
  36. #mobile
  37. {
  38.    width: 100%;
  39.    height: 180px;
  40.    margin-left: 925px;
  41.    margin-right: 0px;
  42.    margin-top: -180px;
  43.    background-image:url("images/banniere_2.png" );
  44.  
  45. }
  47. #fixdroit
  48. {
  49.    width: 55%;
  50.    height: 180px;
  51.    margin-right: 20px;
  52.    margin-left: 100%;
  53.    margin-top: -180px;
  54.    background-image:url("images/banniere_3.png" );
  55.    background-repeat: no-repeat;
  56. }


 
Voila si quelqu'un peu me guider dans la modification du CSS en sachant que c'est la partie "#mobile" qui doit s'agrandir et bien sur les autres être fixes.
 
(Je n'ai encore jamais vu sur un site web et c'est peut-être pas possible mais je ne m'amuse pas à cliquer sur chaque header pour voir comment il est découpé  :sarcastic: lol)
 
Voila merci de m'aider...

Message cité 1 fois
Message édité par Sephirius2 le 26-07-2008 à 18:36:19
Reply

Marsh Posté le 24-07-2008 à 14:57:51   

Reply

Marsh Posté le 24-07-2008 à 21:12:32    

Code :
  1. #gauche {
  2. float: left;
  3. width: 100px;//à adapter selon la taille de ton image
  4. height:100px;//à adapter selon la taille de ton image
  5. background-image:url(TON_IMAGE_DE_GAUCHE);
  6. }
  7. #droite{
  8. float: right;
  9. width: 100px;//à adapter selon la taille de ton image
  10. height:100px;//à adapter selon la taille de ton image
  11. background-image:url(TON_IMAGE_DE_DROITE);
  13. }
  14. #centre {
  15. height:100px;
  16. background-image:url(TON_IMAGE_DU_CENTRE);
 
Code :
  1. <div id="gauche"></div>
  2. <div id="droite"></div>
  3. <div id="centre"></div>


Message édité par bricocoman le 25-07-2008 à 12:59:02
Reply

Marsh Posté le 25-07-2008 à 07:33:28    

Sephirius2 a écrit :

Bonjour, je crée actuellement un site extensible XHTML & CSS
J'aimerais que mon header puisse s'agrandir en même temps que le site.
 
Différente contrainte, je doit respecter les standards (pas de hack) et ma bannière est arrondie donc je ne peu pas la centrer et mettre le fond de la Div en couleur...


C'est totalement faux.
 
On peut respecter les standards au niveau HTML, c'est 100% sur, mais les standards au niveau CSS, pourras les respecter, mais à partir du moment ou tu dois coder aussi pour IE6, tu seras forcément obligé d'utiliser certains hacks pour contrer les bugs récurrents de IE6 (3px float bug, hasLayout, etc, etc)
 

Reply

Marsh Posté le 25-07-2008 à 17:37:05    

hasLayout je connais pas encore... (jusque mtnt la compatibilité avec IE5.5 et supérieur est bonne.
 
Merci bricocoman... (en fait c'est le même principe que pour les menus latéral en CSS, j'aurais du y penser...)

Reply

Marsh Posté le 25-07-2008 à 17:48:17    

après test de ta solution Bricocoman j'ai un petit souci... lorsque je réduit la fenetre sous FF2.X ou 3.0 l'objet float droit passe sous le header... ce qui n'est pas esthétique, y a t'il une solution pour pallier à ce problème?
 
CSS:

Code :
  1. /*la page*/
  2. body
  3. {
  4.    width: 984px = 100%; /* 1024 : taille réduite pour meilleur lisibilité */
  5.    margin: auto; /* Pour centrer page */
  6.    margin-left: 20px; /* marge gauche */
  7.    margin-right: 20px; /* marge droite */
  8.    margin-top: 20px; /* marge haut */
  9.    margin-bottom: 20px;    /* marge bas */
  10.    background-image: url("images/background_theme1.png" ); /* image de fond */
  11.    font: 0.8em "Trebuchet MS", helvetica, sans-serif ; /* police par défaut */
  12. }
  14. #header
  15. {
  16.    width: 100%;
  17.    height: 180px;
  18.    margin-right: 20px;
  19.    margin-left: 0px;
  20.    /*background-image: url("images/banniere.png" );*/
  21.    background-repeat: no-repeat;
  22.    margin-bottom: 0px;
  23. }
  25. #fixgauche
  26. {
  27.    float: left;
  28.    width: 925px;
  29.    height: 180px;
  30.    background-image:url("images/banniere.png" );
  31. }
  33. #fixdroit
  34. {
  35.    float: right;
  36.    width: 55px;
  37.    height: 180px;
  38.    background-image:url("images/banniere_3.png" );
  39. }
  41. #mobile
  42. {
  43.    height: 180px;
  44.    margin-right: 55px; /*faire disparaitre le fond mobile sous les arrondis des fixes*/
  45.    margin-left: 55px;
  46.    background-image:url("images/banniere_2.png" );
  47.  
  48. }


 
XHTML:

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3.    <head>
  4.        <title>CDH-Hastière - Belgium</title>
  5.        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.    <link rel="icon" type="image/png" href="/images/favicon.png" />
  7.    <link rel="stylesheet" media="screen" type="text/css" title="Theme1" href="theme_1.css" />
  8.    <link rel="alternate stylesheet" media="screen" type="text/css" title="Theme2" href="theme_2.css" />
  9.    </head>
  10. <body>
  11. <div id="header">
  12.  <div id="fixgauche">
  13.  </div>
  14.  <div id="fixdroit">
  15.  </div>
  16.  <div id="mobile">
  17.  </div>
  18. </div>
  20. <div id="conteneur">
  21. </div>
  23. </body>
  24. </html>

Reply

Marsh Posté le 25-07-2008 à 17:56:23    

J'ai trouvé (j'ai découvert la commande POSITION: ABSOLUTE)
Merci de m'avoir aider
 
Correction du CSS:

Code :
  1. #fixgauche
  2. {
  3.    position: absolute;
  4.    float: left;
  5.    width: 925px;
  6.    height: 180px;
  7.    background-image:url("images/banniere.png" );
  8. }


Reply

Marsh Posté le 26-07-2008 à 04:11:50    

C'est pas censé aller dans programmation ce topic ? [:klemton]


---------------
Mini Zun a dit : "bon je vais aller mater le catalogue la redoute [:huit]" | La mer c'est dégeulasse, les poissons baisent dedans.|||
Reply

Marsh Posté le 26-07-2008 à 18:35:27    

le CSS c'est pas à proprement parlé de la programmation... mais après vérification c'est la que c'est classé. (a mon sens cela à plus sa place ici)

Reply

Marsh Posté le 26-07-2008 à 18:37:33    

la CSS c'est un un langage au meme titre que le HTML ou le XML, ou encore le TEX,  ce n'est pas de la programmation, mais de la mise en forme de contenus (css, tex) ou de la déclaration de données (html, xml)

Reply

Sujets relatifs:

Leave a Replay

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