CSS et positionnement

CSS et positionnement - HTML/CSS - Programmation

Marsh Posté le 02-10-2002 à 13:14:12    

Bonjour à tous
 
J'ai des pages centrées sur l'écran à partir de 800X600 à l'aide d'un tableau centré de 750PX de large,j'ai un fichier Haut dans lequel il y a une image et un bandeau de pub.
 
<div align="center">
<table width="754" height="138" border="0">
<tr>  
<td valign="top">
<div id="Layer1" style="position:relative; width:750px; height:136px; z-index:1; left:0px; top: 9px">
<img src="Images/titre2.gif" width="751" height="137">  
<div id="Layer2" style="position:absolute; width:468px; height:60px;; z-index:2; left: 265px; top: 62px">
<img src="Images/essai_pub.gif"></div></div>
</td>
</tr>
</table>
</div>
 
Ca fonctionne bien, mais sous netscape 4.7 je perd les CSS du reste de la page et je ne comprend pas pourquoi, donc quitte à tout refaire, je veux me mettre à la norme WC3, donc tout CSS.
 
<div style="position: absolute; top:0px; left:10px; width:750px; heigth:60px;">
<img src="Images/titre2.gif"></div>
<div style="position: absolute; top:71px; left:282px; width:460px; heigth:60px;">
<img src="Images/essai_pub.gif"></div>
 
Fonctionne mais comment center sur la page en fonction des résolutions d'écran ?
 
Merci

Reply

Marsh Posté le 02-10-2002 à 13:14:12   

Reply

Marsh Posté le 02-10-2002 à 13:28:17    

Quel résultat attends-tu ? Comment doivent être les 2 images l'une par rapport à l'autre ?

Reply

Marsh Posté le 02-10-2002 à 18:43:41    

Et surtout y a des trucs bizarres : une image de 751px dans un layer de 750px... :D à quoi bon spécifier des tailles si c pour commettre de telles ignominies :D

Reply

Marsh Posté le 02-10-2002 à 18:53:33    

elles doivent être l'une dans l'autre c'est à dire image d'entête et bandeau de pub par dessus  ;)  
Pour les différence de taille j'ai tellement fait d'essais que je me suis trompé  :sweat:

Reply

Marsh Posté le 02-10-2002 à 19:03:56    

Je réponds pas à ta question parce que je bosse à fond là... mais deux remarques qui vont quand même t'aider :
 
Sépares tes styles du reste en utilisant les css, et donnes des noms évocateurs à la place des layers. C'est tout de suite plus clair et les gens pourront te répondre 10 fois plus vite et 10 fois mieux.

Reply

Marsh Posté le 02-10-2002 à 19:21:42    

FlyMan30 a écrit a écrit :

elles doivent être l'une dans l'autre c'est à dire image d'entête et bandeau de pub par dessus  ;)  
Pour les différence de taille j'ai tellement fait d'essais que je me suis trompé  :sweat:



Tu ne donnes pas beaucoup plus d'info, donc voilà ce que tu vas faire :
 
1. Tu crées d'abord un <div> qui a des dimensions telles qu'il englobe exactement les 2 images. Admettons qu'il fasse 754x138. Ce <div> va servir à centrer horizontalement les 2 images :

div#images {
  position: absolute;
  left: 50%
  top: 10px;
  margin-left: -377px;
  width: 754px;
  height: 138px;
}


 
2. Dans ce <div> tu positionnes tes 2 images de manière absolue :
 

img#titre {
  position: absolute;
  left: 0px;
  top: 0px;
}
 
img#pub {
  position: absolute;
  left: 282px;
  top: 71px;
}


 
3. le HTML

<div id="images">
  <img src="Images/titre2.gif" id="titre" height="xxx" width="xxx" alt="Titre" />
  <img src="Images/essai_pub.gif" id="pub" height="xxx" width="xxx" alt="Pub" />
</div>


 
Ne pas oublier les hauteur/largeurs dans les tags <img> et le alt= afin d'être conforme aux normes.


Message édité par gm_superstar le 02-10-2002 à 19:22:15
Reply

Marsh Posté le 02-10-2002 à 20:10:20    

gm_superstar a écrit a écrit :

 
Tu ne donnes pas beaucoup plus d'info, donc voilà ce que tu vas faire :
 
1. Tu crées d'abord un <div> qui a des dimensions telles qu'il englobe exactement les 2 images. Admettons qu'il fasse 754x138. Ce <div> va servir à centrer horizontalement les 2 images :

div#images {
  position: absolute;
  left: 50%
  top: 10px;
  margin-left: -377px;
  width: 754px;
  height: 138px;
}


 
2. Dans ce <div> tu positionnes tes 2 images de manière absolue :
 

img#titre {
  position: absolute;
  left: 0px;
  top: 0px;
}
 
img#pub {
  position: absolute;
  left: 282px;
  top: 71px;
}


 
3. le HTML

<div id="images">
  <img src="Images/titre2.gif" id="titre" height="xxx" width="xxx" alt="Titre" />
  <img src="Images/essai_pub.gif" id="pub" height="xxx" width="xxx" alt="Pub" />
</div>


 
Ne pas oublier les hauteur/largeurs dans les tags <img> et le alt= afin d'être conforme aux normes.




 
Ca marche nikel avec IE mais avec netscape 4.7  :sweat:  
J'ai le titre collé à gauche et le bandeau de pub en dessous et à gauche  :??:
http://www.multimania.com/Planul/layers.png


Message édité par Flyman30 le 02-10-2002 à 20:17:11
Reply

Marsh Posté le 02-10-2002 à 20:45:06    

C'est normal, Netscape 4 c'est tout pourri. Tu as un site où on peut voir ta page ? Ou alors le code ?

Reply

Marsh Posté le 02-10-2002 à 20:48:22    

gm_superstar a écrit a écrit :

C'est normal, Netscape 4 c'est tout pourri. Tu as un site où on peut voir ta page ? Ou alors le code ?




 
C'est ton code dont j'ai mis l'image  ;)  
 
Mon site www.planuldep.com

Reply

Marsh Posté le 02-10-2002 à 21:47:26    

Essaye ça :
 

div.images {
  width: 100%;
  text-align: center;
}
 
 
div.pub {
  position: relative;
  top: -80px;
  left: 125px;
}
 
[...]
 
<div class="images">
  <img src="titre2.gif" height="137" width="751" alt="PLANUL DEPANNAGE" />
  <div class="pub"><img src="essai_pub.gif" height="68" width="470" alt="Pub" /></div>
</div>

Reply

Marsh Posté le 02-10-2002 à 21:47:26   

Reply

Marsh Posté le 02-10-2002 à 21:59:27    

gm_superstar a écrit a écrit :

Essaye ça :
 

div.images {
  width: 100%;
  text-align: center;
}
 
 
div.pub {
  position: relative;
  top: -80px;
  left: 125px;
}
 
[...]
 
<div class="images">
  <img src="titre2.gif" height="137" width="751" alt="PLANUL DEPANNAGE" />
  <div class="pub"><img src="essai_pub.gif" height="68" width="470" alt="Pub" /></div>
</div>






 
Marche pas le bandeau de pub est en dessous de titre2  :sweat:

Reply

Marsh Posté le 02-10-2002 à 22:09:25    

Ouais enfin là je fais pas dans le paranormal hein !
 
http://perso.wanadoo.fr/moulin/hfr/flyman/

Reply

Marsh Posté le 02-10-2002 à 22:13:02    

gm_superstar a écrit a écrit :

Ouais enfin là je fais pas dans le paranormal hein !
 
http://perso.wanadoo.fr/moulin/hfr/flyman/




 
 :jap:  :jap:  :jap:  je comprend pas pourquoi ça n'as pas fonctionné chez moi  :??:  je vais retenter  
 
En tous cas encore merci  :jap:

Reply

Marsh Posté le 02-10-2002 à 22:22:37    

Ca marche  :bounce:  :bounce:  
 
Un grand merci  :jap:

Reply

Marsh Posté le 04-10-2002 à 20:18:12    

gm_superstar a écrit a écrit :

Essaye ça :
 

div.images {
  width: 100%;
  text-align: center;
}
 
 
div.pub {
  position: relative;
  top: -80px;
  left: 125px;
}
 
[...]
 
<div class="images">
  <img src="titre2.gif" height="137" width="751" alt="PLANUL DEPANNAGE" />
  <div class="pub"><img src="essai_pub.gif" height="68" width="470" alt="Pub" /></div>
</div>






 
Il reste un petit problème ! le div class pub provoque une boite invisible qui dépasse d'environ 70px vers le bas l'image de titre provoquant le décalage d'autant du texte qui suit l'entête ! :sweat: une solution ?

Reply

Marsh Posté le 04-10-2002 à 22:37:32    

margin-bottom: -70px; ?

Reply

Marsh Posté le 04-10-2002 à 22:44:25    

gm_superstar a écrit a écrit :

margin-bottom: -70px; ?




 
Impec pour IE6 mais ne fonctionne pas avec Netscape 4.7 mais le problème est mineur vu le nombre de visiteurs utilisant ce navigateur  
 
merci beaucoup  :jap:

Reply

Marsh Posté le 04-10-2002 à 22:47:43    

Oui j'ai l'impression que ce NS 4 ne reconnait pas les valeurs négatives. Sinon il te suffit de positionner ce que tu as dessous de manière absolue là où tu veux que ce soit exactement.

Reply

Marsh Posté le 04-10-2002 à 22:50:30    

Oui c'est bien beau le positionnement par CSS mais tant qu'il reste des clients avec d'ancien nav c'est quand même galère  :sweat:  
Alors j'utilise les CSS et les tableaux pour la compatibilitée  ;)

Reply

Sujets relatifs:

Leave a Replay

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