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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Positionnement avec CSS: Problème

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Positionnement avec CSS: Problème

n°498968
Kt-Redfox
Posté le 26-08-2003 à 21:38:52  profilanswer
 

Bonjour j'explique mon problème:
Je n'arrive pas a obtenir les mêmes résultats avec IE et Mozilla pour mon site en utilisant les calques et le positionnement par CSS.
La différence s'effectue la dessus:
http://csdc.free.fr/mozie.png
Comme vous voyez, il y a un espace non désiré sous Internet Explorer :'(
Si vous pouviez me donner un coup de main!
 
Mon code:

Code :
  1. <div class="a">
  2. <img src="images/menu_h.jpg" />
  3. <div class="b">
  4. pouet
  5. </div>
  6. <img src="images/menu_b.gif" />
  7. </div>


 
et le contenu de la CSS:

Code :
  1. .a {
  2.   width: 165px;
  3. margin: 0px;
  4. padding: 0px;
  6. }
  9. }
  10. .b {
  11. background-color: #9999FE;
  12. padding-left: 5px;
  13. margin: 0px;
  14. }

mood
Publicité
Posté le 26-08-2003 à 21:38:52  profilanswer
 

n°498975
gizmo
Posté le 26-08-2003 à 21:47:40  profilanswer
 

met tes images en display:block

n°498979
Kt-Redfox
Posté le 26-08-2003 à 21:51:43  profilanswer
 

merci beaucoup, ca marche!

n°499040
Kt-Redfox
Posté le 26-08-2003 à 22:50:20  profilanswer
 

Autre question:
Comment fonctionne le positionnement avec float sous IE?
Je n'arrive pas a mettre deux divs au même niveau sous IE, le deuxième div se retrouve sous le premier (évidemment ça marche nickel sous Moz). J'avoue ne pas capter du tout :'(
 

Code :
  1. <div class="a">
  2. <img src="images/h.gif" />
  3. <div class="b">
  4. pouet
  5. pouet
  6. pouet
  7. </div>
  8. <img src="images/b.gif" />
  9. </div>
  11. <div class="c">
  12. <img src="images/h.gif" />
  13. <div class="b">
  14. pouet
  15. pouet
  16. pouet
  17. </div>
  18. <img src="images/_b.gif" />
  19. </div>


 
code css:

Code :
  1. .a {
  2.   margin-left: 0px;
  3. width: 250px;
  4.   border: 0px;
  5.   padding-left: 2px;
  6. float: left;
  8. }
  10. .c {
  11.   margin-left: 260px;
  12. width: 350px;
  13.   border: 0px;
  14.   padding-left: 2px;
  17. }


Message édité par Kt-Redfox le 26-08-2003 à 22:50:36
n°499831
Kt-Redfox
Posté le 27-08-2003 à 17:07:29  profilanswer
 

up  :sweat:

n°499855
Le Castor
Neurasténique...
Posté le 27-08-2003 à 17:38:08  profilanswer
 

faut mettre float: left; aussi dans la .c


---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club
n°499860
Kt-Redfox
Posté le 27-08-2003 à 17:41:07  profilanswer
 

Le Castor a écrit :

faut mettre float: left; aussi dans la .c


Ca ne fonctionne toujours pas :'(

n°499868
Le Castor
Neurasténique...
Posté le 27-08-2003 à 17:46:55  profilanswer
 

KT-RedFOX a écrit :


Ca ne fonctionne toujours pas :'(


 
Attend, j'examine la chose...


---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club
n°499872
Le Castor
Neurasténique...
Posté le 27-08-2003 à 17:48:36  profilanswer
 

Bizarre, le code d'origine fonctionne parfaitement chez moi... T'utilise quelle version de IE ?


---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club
n°503463
Kt-Redfox
Posté le 31-08-2003 à 19:15:13  profilanswer
 

en fait ca marche mais j'ai trouvé d'ou vient le problème!
En fait les divs sont contenues dans une autre dont les propriétés sont:

Code :
  1. .xyz {
  2.   margin-left: 170px;
  3. width: 600px;
  4.   border: 0px;
  5.   padding-left: 2px;
  8. }


Et lorsqu'elles sont inclues dans cette div, elles passent les unes en dessous des autres :'(

mood
Publicité
Posté le 31-08-2003 à 19:15:13  profilanswer
 

n°503493
gm_superst​ar
Appelez-moi Super
Posté le 31-08-2003 à 19:50:51  profilanswer
 

Ben ça veut dire que xyz est trop étroit pour contenir a ET c...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°503518
Kt-Redfox
Posté le 31-08-2003 à 20:12:56  profilanswer
 

gm_superstar a écrit :

Ben ça veut dire que xyz est trop étroit pour contenir a ET c...


je suis vraiment trop con, j'y avais même pas pensé :D
Merci :jap:

n°504170
Kt-Redfox
Posté le 01-09-2003 à 14:34:23  profilanswer
 

Autre question:
 
Internet Explorer 5 n'a pas l'air de prendre en compte l'attribut float  :heink:
J'ai mon menu avec float:left puis une autre div sur la droite et avec IE6 et Moz no problemo mais IE5 affiche la div de droite en dessous du menu :(
 

n°504181
sibelius
Vous êtes sûr ?
Posté le 01-09-2003 à 14:43:59  profilanswer
 

Tes deux divs doivent être dans un même conteneur.  
Le conteneur doit avoir une largeur suffisante
le div de droite doit être placée à l'aide de margin-left
 
Regarde le code source : http://www.alsacreations.com/articles/design/tuto.htm


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°504388
Kt-Redfox
Posté le 01-09-2003 à 19:25:30  profilanswer
 

merci :jap:
Sinon comment faire pour optimiser l'affichage de la page?
Car après avoir passé mon site en div+css, l'affichage se révèle plus "lent" et moins agréable qu'avec les tableaux alors que le poids de la page a été divisé par 2.
Quand je dit moins agréable, c'est que le background se charge en dernier, les images apparaissent tardivement....

n°504404
sibelius
Vous êtes sûr ?
Posté le 01-09-2003 à 20:01:02  profilanswer
 

Rien ne t'empêche de faire un preload de tes images


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°504619
dew
Posté le 02-09-2003 à 02:06:28  profilanswer
 

une page intéressante concernant les hover/background sans preload :
http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/
 
ça marche relativement bien un peu partout

n°504623
sibelius
Vous êtes sûr ?
Posté le 02-09-2003 à 02:27:00  profilanswer
 

Sympa cette idée !!!


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°504851
Le Castor
Neurasténique...
Posté le 02-09-2003 à 11:06:34  profilanswer
 

dew a écrit :

une page intéressante concernant les hover/background sans preload :
http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/
 
ça marche relativement bien un peu partout


 
Excellent ! Merci pour le lien  :jap:


---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club
n°505838
fadenretur​ns
Posté le 02-09-2003 à 22:38:14  profilanswer
 

dew a écrit :

une page intéressante concernant les hover/background sans preload :
http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/
 
ça marche relativement bien un peu partout


 
 :non: Non ça marche très mal avec certaine version de IE6 ... ne conseiller pas au gens d'utiliser cela !

n°505848
fadenretur​ns
Posté le 02-09-2003 à 22:43:06  profilanswer
 

En fait ça marche pas trop mal mais IE6 télécharge à chaque fois l'image. Et ceci même si l'on ne fait que déplacer le background  :sweat: ... Très ennuyeux ... Surtout avec des images lourde...
 
En clair éviter les rollover d'image si possible.


Message édité par fadenreturns le 02-09-2003 à 22:43:59
n°505862
sibelius
Vous êtes sûr ?
Posté le 02-09-2003 à 22:53:25  profilanswer
 

Au fait, pourriez-vous tester les boutons issus de ce tuto svp ?  
http://www.alsacreations.com/articles/anim/
 
Et me dire sur quels navigateurs elles ne fonctionnent pas...
 
Merci d'avance


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
n°505874
fadenretur​ns
Posté le 02-09-2003 à 22:59:10  profilanswer
 

Chez moi (ie5), ça marche nickel. Je te dirai demain dès que j'ai une version bugé de IE6 sous la main  
 
A+
 
edit: Y a just un truc, quand je passe le curseur sur "menu3", le menu3 et deux remontent et vous se coller contre le "menu1"


Message édité par fadenreturns le 02-09-2003 à 23:00:08
n°505908
gm_superst​ar
Appelez-moi Super
Posté le 02-09-2003 à 23:33:44  profilanswer
 

Marche pas avec Opera 7, OK avec Moz
 
Edit: avec Konqueror 3.1.0 c'est bizarre, ça marche, la plupart du temps il zappe la partie animé du gif. En gros il passe directement à la dernière image du gif animé :heink:


Message édité par gm_superstar le 02-09-2003 à 23:36:54

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°505909
gizmo
Posté le 02-09-2003 à 23:35:10  profilanswer
 

gm_superstar a écrit :

Marche pas avec Opera 7, OK avec Moz


gni? ca marche avec opéra7...

n°505913
gm_superst​ar
Appelez-moi Super
Posté le 02-09-2003 à 23:38:27  profilanswer
 

gizmo a écrit :

gni? ca marche avec opéra7...


Pas avec Opéra 7.1.0 Beta 1 (Linux) en tout cas... Bon c'est ptet parce que c'est une beta [:spamafote] Faudra que je mette à jour...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
n°505938
gizmo
Posté le 02-09-2003 à 23:56:33  profilanswer
 

oui, ca doit être le fait que ce soit une beta, parce que ca marche depuis la 7.0 jusqu'à la 7.2b8 (ou b5 pour les non-WIN)

mood
Publicité
Posté le   profilanswer
 


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

  Positionnement avec CSS: Problème

 

Sujets relatifs
[python / Apache] Problème de récupération de l'utilisateurProbleme avec imagecopyresized( )
Petit probleme de compréhension avec realloc...Style Swticher creer 2 présentation differente CSS sur une page HTML
[PLSQL] problème dans un script dynamiqueProbleme d'importation de classe
[PHP/MySQL] Probleme de guillemets : A L'AIDE !![CSS] probleme de couleurs resolu
CSS et comportement etrange 
Plus de sujets relatifs à : Positionnement avec CSS: Problème

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.088 secondes

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