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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  responsive design et height qui n'est pas pris en compte

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

responsive design et height qui n'est pas pris en compte

n°2177439
zouille75
Posté le 25-02-2013 à 18:39:50  profilanswer
 

Bonjour à tous,  
 
J'ai une image en background :
 

Code :
  1. <header id="top"></header>


 
mon code responsive design :  
 

Code :
  1. #top {
  2. background-size:contain;
  3. -moz-background-size:contain;
  4. -webkit-background-size:contain;
  5. background-repeat:no-repeat;
  6. width:auto;
  7. }


 
mon image se redimensionne bien
SAUF que ça garde la valeur du height du header
 
donc j'ai fait
 

Code :
  1. header {
  2. height:100%
  3. }


 
mais ça ne change rien
j'ai mon image redimensionner et un grand écart en dessous qui, j'ai l'impression, garde le height de l'image..
 
J'espère que je suis clair  :pt1cable:  
 
Quelqu'un pourrait il m'aider?
 
Merci ;)

mood
Publicité
Posté le 25-02-2013 à 18:39:50  profilanswer
 

n°2177454
abais
Posté le 25-02-2013 à 21:05:14  profilanswer
 

il faut que les parents ait un height:100% aussi (html>body...)


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°2177455
zouille75
Posté le 25-02-2013 à 21:14:21  profilanswer
 

merci pour ta réponse mais ça ne fonctionne pas plus
 
en gros j'ai :  
 

Code :
  1. @media screen and (max-width: 1000px) {
  2. html {
  3.  height:100%;
  4. }
  5.   body {
  6.         width: 100%;
  7. height:100%;
  8. background-color:#000000;
  9.   }
  10. #top {
  11. background-size:contain;
  12. -moz-background-size:contain;
  13. -webkit-background-size:contain;
  14. background-repeat:no-repeat;
  15. width:auto;
  16. }
  17. header {
  18. height:100%;
  19. }
  20. }

n°2177457
abais
Posté le 25-02-2013 à 21:22:35  profilanswer
 

Tu as un lien de test ?


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°2177458
zouille75
Posté le 25-02-2013 à 21:32:44  profilanswer
 

je t'ai envoyé un msg privé ;)

n°2177459
abais
Posté le 25-02-2013 à 22:37:05  profilanswer
 

Ok, ne confond pas le flux et les background... L'image de fond se fitera à son conteneur et non l'inverse !
Pour ce que tu demande, je te suggère :
 
<header id="top">
    <img alt="" width="100%" src="images/top.jpg" />
</header>
 
avec :
 
#top {
    width:100%;
}
 
Fait un conteneur global pour restraindre la largeur + centrage par margin:auto car c'est pas top de le faire sur ton <body>


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°2177492
zouille75
Posté le 26-02-2013 à 10:08:35  profilanswer
 

merci pour ta réponse
j'ai besoin de ce background car je vais y positionner des choses dessus...

n°2177515
abais
Posté le 26-02-2013 à 11:35:08  profilanswer
 

Je te suggère d'apprendre les bases du CSS, sur le siteduzero par exemple.
 
Rien ne t'empêche de sortir un élément HTML de son flux...
 
<header id="top">
    <img alt="" width="100%" src="images/top.jpg" />
    <div id="contenuHeader">
         <!-- Contenu par dessus l'image -->
    </div>
</header>
 
avec :
 
#top {
    width:100%;
    position:relative;
}
 
#contenuHeader{
    position:absolute;
    left:0;
    top:0;
}
 


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
n°2177516
zouille75
Posté le 26-02-2013 à 11:40:02  profilanswer
 

j'aurai aussi pu le faire comme ça
je vais tester

n°2177520
zouille75
Posté le 26-02-2013 à 12:00:10  profilanswer
 

c'est pas que je n'ai pas les bases c'est que je me suis dit que s'il existe un background-image c'est pas pour rien et donc que je n'ai pas pensé à la solution que tu m'as donné (qui me parait plus barbare qu'un simple background-image)
 
mais grace à cette soluce ça fonctionne
 
merci  :hello:

mood
Publicité
Posté le 26-02-2013 à 12:00:10  profilanswer
 

n°2177547
abais
Posté le 26-02-2013 à 14:11:55  profilanswer
 

Encore une fois, le background n'influe pas sur le flux :o
 
De rien  :jap:


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

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

  responsive design et height qui n'est pas pris en compte

 

Sujets relatifs
Responsiv designCréer un site Internet avec un design de qualité
CSS pas toujours prise en compte par IE ?erreur lors d'excecution pentaho design studio
[RESOLU]page de login avec compte à reboursStoper un compte à rebours
Compte à rebour en PHP (if/else) pour masquer lienAttribution de droit NTFS à un compte admin
height en % (résolu)possible ou pas? synchro de compte openldap -> active directory
Plus de sujets relatifs à : responsive design et height qui n'est pas pris en compte


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