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

  FORUM HardWare.fr
  Graphisme
  Web design

  [Résolu] Header extensible

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[Résolu] Header extensible

n°1027373
Sephirius2
Posté le 24-07-2008 à 14:57:51  profilanswer
 

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
mood
Publicité
Posté le 24-07-2008 à 14:57:51  profilanswer
 

n°1027405
bricocoman
j'aime les modos
Posté le 24-07-2008 à 21:12:32  profilanswer
 

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
n°1027414
gatsu35
Blablaté par Harko
Posté le 25-07-2008 à 07:33:28  profilanswer
 

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)
 

n°1027446
Sephirius2
Posté le 25-07-2008 à 17:37:05  profilanswer
 

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...)

n°1027449
Sephirius2
Posté le 25-07-2008 à 17:48:17  profilanswer
 

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>

n°1027451
Sephirius2
Posté le 25-07-2008 à 17:56:23  profilanswer
 

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. }


n°1027496
TKG
Just a Sweet Transvestite...
Posté le 26-07-2008 à 04:11:50  profilanswer
 

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.|||
n°1027533
Sephirius2
Posté le 26-07-2008 à 18:35:27  profilanswer
 

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)

n°1027534
gatsu35
Blablaté par Harko
Posté le 26-07-2008 à 18:37:33  profilanswer
 

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)


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Graphisme
  Web design

  [Résolu] Header extensible

 

Sujets relatifs
[Resolu] Conseil pour le graphisme d'un site politiqueComemnt créer un header avec zone cliquable (et liens) ss Dreamweaver?
[résolu] Autocad: exploder des blocs[Maya] Textures en référence ? (résolu !)
[Résolu]Cherche Bandeau défilant flash automatique[RESOLU] Comme des points de suspension...
Header pour mon site[RESOLU] 3ds max - animation bipede
[Illustrator] [Résolu] Marge supplémentaire en PDF 
Plus de sujets relatifs à : [Résolu] Header extensible

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.074 secondes

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