CSS + résolution ecran...

Consultez la formation à Google Analytics de WebRankInfo / Ranking Metrics

Grantome
WRInaute accro
WRInaute accro
 
Messages: 2899
Inscription: Ven Jan 16, 2004 19:47

CSS + résolution ecran...

Message le Jeu Avr 29, 2004 12:39

Salut,

Voilà mon pb.

Je souhaite faire un cadre avec au centre un contenu.
Le tout doit pouvoir se redimensionner selon la résolution d'écran du visiteur.

La feuille est divisé en 9.

1 2 3
4 5 6
7 8 9

les parties 1 3 7 et 9 sont des images fixe, se sont les angle du cadre.
les parties 2 4 6 et 8 sont des images qui doivent se répéter en fonstion de la largeur et de la hauteur de la page, se sont les bords du cadre.
la partie 5 et mon contenu.

Mon pb, et que soit j'arrive à coder pour faire varier les partie 2 et 8 (en largeur), soit j'arrive à coder pour faire varier les partie 4 et 6 (en hauteur).

Evidement, j'ai déjà parcouru le web en long et en travers, fait les site alsacecreations, openweb, etc... Mais rien trouvé pour mon soucis.

Sibelus, au secour...

milkiway
WRInaute accro
WRInaute accro
 
Messages: 2216
Inscription: Mar Fév 03, 2004 3:00

Message le Jeu Avr 29, 2004 12:43

je veux bien t'aider mais il me faut un dessin ou une URL ;)

Grantome
WRInaute accro
WRInaute accro
 
Messages: 2899
Inscription: Ven Jan 16, 2004 19:47

...

Message le Jeu Avr 29, 2004 15:57

Ahhhh, pas d'URL, c'est du local...

Voici le code:
CSS
Code: Tout sélectionner
html,body
{
background-image:url(./images/fond.jpg);
margin-top:0; margin-left:0; margin-right:0; margin-bottom:0;
}

#hautgauche {
position: absolute;
left:0;
width:189;
height:44;
background-image:url(./images/parchemin1.gif);
}

#hautcentre {
margin-left: 189px;
margin-right: 203px;
height:44;
background-image:url(./images/parchemin2.gif);
}

#hautdroite {
position: absolute;
right:0;
background-image:url(./images/parchemin3.gif);
width:203;
height:44;
}

#gauche {
position: absolute;
left:0;
background-image:url(./images/parchemin4.gif);
width:51;
height:81;
}

#centre {
background-color:#efe7d6;
margin-left: 51px;
margin-right: 42px;
}

#droite {
position: absolute;
right:0;
background-image:url(./images/parchemin5.gif);
width:42;
height:81;
}

#basgauche {
position: absolute;
left:0;
background-image:url(./images/parchemin6.gif);
width:189;
height:40;
}

#bascentre {
margin-left: 189px;
margin-right: 203px;
height:40px;
background-image:url(./images/parchemin7.gif);
}

#basdroite {
position: absolute;
right:0;
background-image:url(./images/parchemin8.gif);
width:203;
height:40;
}


Et le HTML
Code: Tout sélectionner
<head>
      <link href="./aaa.css" rel="stylesheet" type="text/css">
</head>

<body>
   <div>
     <div id="hautgauche"></div>
    
     <div id="hautdroite"></div>
    
     <div id="hautcentre"></div>
   </div>
   <div>
     <div id="gauche"></div>
    
     <div id="droite"></div>
    
     <div id="centre">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
      bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
      ccccccccccccccccccccccccccccccccccccccccccccccccc
      bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
      ccccccccccccccccccccccccccccccccccccccccccccccccc
      bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
      ccccccccccccccccccccccccccccccccccccccccccccccccc
      bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
      ccccccccccccccccccccccccccccccccccccccccccccccccc
      bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
      ccccccccccccccccccccccccccccccccccccccccccccccccc
      bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
      ccccccccccccccccccccccccccccccccccccccccccccccccc
      bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
      ccccccccccccccccccccccccccccccccccccccccccccccccc
      bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
      ccccccccccccccccccccccccccccccccccccccccccccccccc
      bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
      ccccccccccccccccccccccccccccccccccccccccccccccccc
      bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
      ccccccccccccccccccccccccccccccccccccccccccccccccc
      bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
      ccccccccccccccccccccccccccccccccccccccccccccccccc
      dddddddddddddddddddddddddddddddddddddddddddddd</div>
   </div>
   <div>
     <div id="basgauche"></div>
    
     <div id="basdroite"></div>
    
     <div id="bascentre"></div>
   </div>
</body>
</html>


Je te mets un screen se soir si tu veux.

milkiway
WRInaute accro
WRInaute accro
 
Messages: 2216
Inscription: Mar Fév 03, 2004 3:00

Message le Jeu Avr 29, 2004 17:01

oui je veux bien un screen qui explique ce que tu veux ^^

Grantome
WRInaute accro
WRInaute accro
 
Messages: 2899
Inscription: Ven Jan 16, 2004 19:47

...

Message le Jeu Avr 29, 2004 17:39

Voilà

h**p://60gp.ovh.net/~raikkone/screen.jpg

milkiway
WRInaute accro
WRInaute accro
 
Messages: 2216
Inscription: Mar Fév 03, 2004 3:00

Message le Jeu Avr 29, 2004 17:48

merci
et pour l'explication ? par ce que je n'ai rien compris au post

Grantome
WRInaute accro
WRInaute accro
 
Messages: 2899
Inscription: Ven Jan 16, 2004 19:47

...

Message le Jeu Avr 29, 2004 18:03

Héhhé

Le pb se situe sur les ID gauche et droit

Bon, l'image entre les 2 coin du parchemin varie bien en largeur, mais pas en hauteur.

Tu va me dire, normal, il y a un height de mis, mais en le retirant, en le mettant en auto, ou en plaçant un background-repeat, ça ne change rien.

milkiway
WRInaute accro
WRInaute accro
 
Messages: 2216
Inscription: Mar Fév 03, 2004 3:00

Message le Jeu Avr 29, 2004 18:07

et pourquoi ne pas uploader le site pour qu'on le voit "tourner" ? :S
par ce que là c'est très dur !

Grantome
WRInaute accro
WRInaute accro
 
Messages: 2899
Inscription: Ven Jan 16, 2004 19:47

...

Message le Jeu Avr 29, 2004 18:13

Pffffff, suis un peu truffe parfois............ mais bon...

h**p://60gp.ovh.net/~raikkone/aaa.html

milkiway
WRInaute accro
WRInaute accro
 
Messages: 2216
Inscription: Mar Fév 03, 2004 3:00

Message le Jeu Avr 29, 2004 18:20

chez moi en largeur ça marche
en hauteur ça marche
mais bien sur avec moins de texte ça se redimensionne plus
alors il faut quoi ?

Grantome
WRInaute accro
WRInaute accro
 
Messages: 2899
Inscription: Ven Jan 16, 2004 19:47

...

Message le Jeu Avr 29, 2004 18:38

Les bordures gauche et droite du parchemin marche ???

Tu peut faire un screen ?

T'as quel nav ?


Formation recommandée sur ce thème :

Formation Google Analytics : en 2 jours, apprenez comment exploiter l'essentiel des possibilités de l'outil de mesure d'audience de Google. Formation animée par Julien Coquet, expert certifié officiellement par Google Analytics.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.

Lectures recommandées sur ce thème :



Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités