Taille header variable.

Taille header variable. - HTML/CSS - Programmation

Marsh Posté le 10-04-2010 à 00:13:13    

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;

Reply

Marsh Posté le 10-04-2010 à 00:13:13   

Reply

Marsh Posté le 10-04-2010 à 09:55:20    

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

Reply

Marsh Posté le 11-04-2010 à 12:35:32    

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
Reply

Marsh Posté le 12-04-2010 à 07:46:22    

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 ?

Reply

Marsh Posté le 12-04-2010 à 11:50:33    

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

Reply

Marsh Posté le 12-04-2010 à 23:26:37    

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


Message édité par Qwerty111 le 12-04-2010 à 23:30:12
Reply

Marsh Posté le 13-04-2010 à 07:48:47    

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

Reply

Marsh Posté le 13-04-2010 à 11:55:38    

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. }
  6. #polaroid {
  7. left:0px;
  8. top:0px;
  9. width:304px;
  10. height:297px;
  11. background: url('images/polaroid.jpg') no-repeat;
  12. }
  14. #polaroidimage {
  15.  position:relative;
  16.  left:44px;
  17.  top:31px;
  18.  width:202px;
  19.  height:187px;
  20.  overflow:hidden;
  21. }
  23. #polaroidcaption{
  24.  position:relative;
  25.  left:42px;
  26.  top:40px;
  27.  width:202px;
  28.  height:26px;
  29.  overflow:hidden;
  30. }
  32. #header-img {
  33. position:absolute;
  34. left:304px;
  35. top:0px;
  36. min-width:663px;
  37.         width:1630px;
  38. height:184px;
  39. background: url('images/header_img.jpg') no-repeat;
  40. }


 
La base du site est un Wordpress.

Reply

Marsh Posté le 15-04-2010 à 21:35:42    

up !

Reply

Marsh Posté le 16-04-2010 à 01:49:45    

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
Reply

Marsh Posté le 16-04-2010 à 01:49:45   

Reply

Marsh Posté le 17-04-2010 à 15:24:11    

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

Reply

Marsh Posté le 17-04-2010 à 16:37:24    

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
Reply

Marsh Posté le 19-04-2010 à 15:41:38    

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é ?

Reply

Marsh Posté le 19-04-2010 à 15:44:24    

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
Reply

Sujets relatifs:

Leave a Replay

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