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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Taille header variable.

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Taille header variable.

n°1982720
Qwerty111
Posté le 10-04-2010 à 00:13:13  profilanswer
 

Bonjour, je voudrais savoir si l'un de vous n'aurais pas une solution, une astuce.  
 
J'ai un header, un div, avec une image en background no repeat. Cette image fait 1630 pixel, pour convenir au grand écran. (voir le css ci dessous). J'aimerais savoir comment n'afficher qu'une partie de l'image sur les petit écran, la partie qui collerais parfaitement avec leur résolution. Le div ne contient aucun texte. Aucune information n'est présente sur la droite, ce n'est pas une question de redimensionnement, c'est un découpage, quitte à charger une image très large et à n'en afficher qu'un bout chez le client.  
 

Code :
  1. position:absolute;
  2. left:304px;
  3. top:0px;
  4. min-width:663px;
  5.         width:1630px;
  6. height:184px;
  7. background: url('images/header_img.jpg') no-repeat;

mood
Publicité
Posté le 10-04-2010 à 00:13:13  profilanswer
 

n°1982739
aspirateur
Posté le 10-04-2010 à 09:55:20  profilanswer
 

tu veux afficher quelle partie ? Début, fin, milieu?
 
Au pire tu mets ton width en % en ton background-position: left ou right ou center...

n°1982923
Qwerty111
Posté le 11-04-2010 à 12:35:32  profilanswer
 

Le truc, c'est que j'ai un autre div sur la droite de ce header (un petit polaroid qui affiche aléatoirement des photos). C'est la partie droite du header que je voudrais afficher.  
 
voir screen :  
http://img181.imageshack.us/img181/2866/screenheader.th.png
 
Donc c'est le bout en rouge qui pose problème.


Message édité par Qwerty111 le 11-04-2010 à 12:36:42
n°1983059
aspirateur
Posté le 12-04-2010 à 07:46:22  profilanswer
 

Ben non, il n'y a pas de problème, tu mets ton width à 100% avec un background-position:left;
 
Si l'ecran fait moins de 1630px, l'image à droite ne sera pas affichée entièrement...
 
Tu peux poster le code de ta page ? Parce que la div du polaroid est par dessus le fond ou c'est 2 div collées ?

n°1983198
Qwerty111
Posté le 12-04-2010 à 11:50:33  profilanswer
 

Je vais essayer ça, mais bon, c'est deux div collés.

n°1983403
Qwerty111
Posté le 12-04-2010 à 23:26:37  profilanswer
 

up !
 
Et non pour aspirateur, ça ne fonctionnne pas. :/


Message édité par Qwerty111 le 12-04-2010 à 23:30:12
n°1983425
aspirateur
Posté le 13-04-2010 à 07:48:47  profilanswer
 

Tu as un lien vers ton site ? Ou est ce que tu peux afficher ton code stp ?

n°1983529
Qwerty111
Posté le 13-04-2010 à 11:55:38  profilanswer
 

Code :
  1. <div id="wrap">
  2. <div id="headerElements">
  3.  <div id="polaroid">
  4.   <div id="polaroidimage">
  5.    <a href="#"><img src="<?php bloginfo('template_directory'); ?>/randimages/rotatorm.php" width="202px" height="187px" alt="Polaroid Photo" /></a>
  6.   </div>
  7.   <div id="polaroidcaption"><p><?php printf(__('Pictures from %s', 'travelogue'), get_bloginfo('name')); ?></p></div>
  8.  </div>
  9.  <div id="header-img">
  10.   &nbsp;
  11.  </div>


 
Et pour le .css :  
 

Code :
  1. #headerElements {
  2. position:relative;
  3. width:100%;
  4. }
  5. #polaroid {
  6. left:0px;
  7. top:0px;
  8. width:304px;
  9. height:297px;
  10. background: url('images/polaroid.jpg') no-repeat;
  11. }
  12. #polaroidimage {
  13.  position:relative;
  14.  left:44px;
  15.  top:31px;
  16.  width:202px;
  17.  height:187px;
  18.  overflow:hidden;
  19. }
  20. #polaroidcaption{
  21.  position:relative;
  22.  left:42px;
  23.  top:40px;
  24.  width:202px;
  25.  height:26px;
  26.  overflow:hidden;
  27. }
  28. #header-img {
  29. position:absolute;
  30. left:304px;
  31. top:0px;
  32. min-width:663px;
  33.         width:1630px;
  34. height:184px;
  35. background: url('images/header_img.jpg') no-repeat;
  36. }


 
La base du site est un Wordpress.

n°1984579
Qwerty111
Posté le 15-04-2010 à 21:35:42  profilanswer
 

up !

n°1984613
Pascal le ​nain
Posté le 16-04-2010 à 01:49:45  profilanswer
 

Tu n'aurais pas un lien ? C'est difficile de comprendre par un screen.
C'est plus sympa de tester le truc avec firebug  :p


Message édité par Pascal le nain le 16-04-2010 à 01:56:25
mood
Publicité
Posté le 16-04-2010 à 01:49:45  profilanswer
 

n°1985085
Qwerty111
Posté le 17-04-2010 à 15:24:11  profilanswer
 

Ben ouai mais non
 
http://localhost:81 ça te va pas ? :p
 
C'est encore hébergé nul part.

n°1985104
rufo
Pas me confondre avec Lycos!
Posté le 17-04-2010 à 16:37:24  profilanswer
 

Sinon, une solution en javascript : tu détectes la résolution de l'écran et tu modifies à la vollée le nom des classes des styles qui sont fonction de la résolution, genre "MonStyle1024", "MonStyle800"... et dans ta feuille de style, on y trouve ces classes.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
n°1985488
Qwerty111
Posté le 19-04-2010 à 15:41:38  profilanswer
 

Oui, en fait, le truc, concrètement, vu que j'ai deux div cote à cote.  
 
Il n'y a pas moyen de faire des opérations dans du css ?  
Faudrait que mon div de gauche soit à 100% - la taille du petit div de droite.  
Pas de solutions non plus en JavaScript pour modifier dynamiquement dans le css la taille du div en fonction de la largeur d'écran que l'ont aura détecté ?

n°1985490
rufo
Pas me confondre avec Lycos!
Posté le 19-04-2010 à 15:44:24  profilanswer
 

avec javascript, tu modifies à la volée les styles (noms ou valeurs des propriétés).


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta

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

  Taille header variable.

 

Sujets relatifs
[RESOLU] Requete SQL avec variable dynamique sous MS-DOSRégler la taille de la longueur du texte
Problème variable dans une arborescencevariable d'environnement
Variable vide après un LEFT JOIN malgré une requête okVariable d'envirronnement ?
GridBagLayout : La taille d'un composant prend tout le videphp/mysql résultat requête dans une seule variable
Parser une chaine de caractere de longueur variablememoire, variable et erreur de segmentation
Plus de sujets relatifs à : Taille header variable.


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