Passage en XHTML/CSS > problèmes à l'horizon

Passage en XHTML/CSS > problèmes à l'horizon - HTML/CSS - Programmation

Marsh Posté le 10-05-2003 à 19:49:03    

Hello,
 
Je me jette à l'eau dans l'XHTML/CSS.
 
Etant donné la complexité de ma mise en page, j'ai opté pour du positionnement absolu. Ca marchait pas trop mal pour le moment avec un comportement étonnamment similaire entre IE6 et Moz 1.3 pour le moment mais là j'ai un souci...
 
La page de test :
http://fastclemmy.online.fr/lesjoyeuxdrilles/v3/
 
La CSS :
http://fastclemmy.online.fr/lesjoy [...] rilles.css
 
Sous IE : le texte en vert "> Lire la blague > Voir la liste des blagues marrantes" est bien superposé sur l'image dans le bloc bleu, mais sous Moz 1.3 il se place inexeplicablement en-dessous...
 
Des idées ? [:ludo2604]


Message édité par fastclemmy le 11-05-2003 à 15:07:42
Reply

Marsh Posté le 10-05-2003 à 19:49:03   

Reply

Marsh Posté le 10-05-2003 à 20:04:27    

Tu as mis :

Code :
  1. #blocBlagueDuJour;
  2. position:absolute;
  3. height:232px;
  4. width:257px;
  5. }


 
il faut :

Code :
  1. #blocBlagueDuJour{
  2. position:absolute;
  3. height:232px;
  4. width:257px;
  5. }

Reply

Marsh Posté le 10-05-2003 à 20:32:14    

Petite question (bête?) en passant :
 
A quoi te sert une position absolue si tu ne lui donnes pas de coordonnées (top, left,...) ???
 
As-tu essayé sans le position:absolute ? Qu'est-ce que ça change ?


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 10-05-2003 à 20:56:23    

flyman30 a écrit :

Tu as mis :


 
Arf, la coquille, merci  
 
 :)

Reply

Marsh Posté le 10-05-2003 à 20:57:40    

SIBELIUS a écrit :

Petite question (bête?) en passant :
 
A quoi te sert une position absolue si tu ne lui donnes pas de coordonnées (top, left,...) ???
 
As-tu essayé sans le position:absolute ? Qu'est-ce que ça change ?
 


 
Ca semble effectivement superflu...

Reply

Marsh Posté le 10-05-2003 à 21:04:44    

fastclemmy a écrit :


 
Arf, la coquille, merci  
 
 :)  


 
Avec la coloration syntaxique de VS.net ça saute aux yeux  ;)

Reply

Marsh Posté le 10-05-2003 à 21:21:06    

flyman30 a écrit :


 
Avec la coloration syntaxique de VS.net ça saute aux yeux  ;)  


 
Pas avec celles par défaut de UltraEdit :/

Reply

Marsh Posté le 10-05-2003 à 21:53:20    

Sous Opéra 7 y a comme des problèmes  :sweat:  
 
http://www.multimania.com/Planul/Joyeuxdrilles.png


Message édité par Flyman30 le 10-05-2003 à 21:54:18
Reply

Marsh Posté le 10-05-2003 à 21:58:13    

flyman30 a écrit :

Sous Opéra 7 y a comme des problèmes  :sweat:  
 
http://www.multimania.com/Planul/Joyeuxdrilles.png


 
Hum, bon, je le téléchargerai... si j'ai le courage :sweat:

Reply

Marsh Posté le 10-05-2003 à 22:04:03    

fastclemmy a écrit :


 
Hum, bon, je le téléchargerai... si j'ai le courage :sweat:


 
Après la correction que tu a fait ça passe presque normalement sous Opéra7 mais les inscriptions dans les fond bleu sont légèrement trop basse  ;)
 
PS: de toute façon avoir Opéra est la seule façon d'avoir un site crossbrowsers  ;)


Message édité par Flyman30 le 10-05-2003 à 22:05:04
Reply

Marsh Posté le 10-05-2003 à 22:04:03   

Reply

Marsh Posté le 10-05-2003 à 23:14:39    

flyman30 a écrit :


 
Après la correction que tu a fait ça passe presque normalement sous Opéra7 mais les inscriptions dans les fond bleu sont légèrement trop basse  ;)
 
PS: de toute façon avoir Opéra est la seule façon d'avoir un site crossbrowsers  ;)  


 
Ayé, j'ai téléchargé Opera 7, maintenant le site est conforme XHTML 1.0 strict avec CSS valide, testé avec succès et sans aucune déformation sous IE6, Moz1.3 et Opera 7  :sweat:

Reply

Marsh Posté le 11-05-2003 à 22:22:40    

Bravo ! Très chouette site et très clair au niveau du code :jap:


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 12-05-2003 à 09:30:22    

gm_superstar a écrit :

Bravo ! Très chouette site et très clair au niveau du code :jap:


 
[:prosterne] Merci Ô Maître vénéré [:prosterne2]

Reply

Marsh Posté le 30-05-2003 à 15:40:32    

Nouveau souci :
http://www.lesjoyeuxdrilles.com/im [...] php?id=781
 
Sous Moz nickel, sous IE, les filets partent dans le vide à droite [:splinter]

Reply

Marsh Posté le 30-05-2003 à 16:51:14    

problème d'héritage dans IE (c'est décidément une grosse bouse).
Quand tu indiques 90% dans ton titreandco, il prend 90% de la taille du bloc conteneur qui a une taille, soit 90% de contenu alors que cela devrait porter sur infodroite vu qu'il est en absolu.
 
Si tu donnes une valeur à ce dernier, ca devrait rentrer dans l'ordre.

Reply

Marsh Posté le 30-05-2003 à 17:40:56    

Après moult bidouilles, ça marche...
 
Sauf que mes bordures disparaissent sous IE lorsque #infosGauche est en position:relative voilà qui arrange mes affaires [:kiki]
http://www.lesjoyeuxdrilles.com/im [...] php?id=100

Reply

Marsh Posté le 02-06-2003 à 15:28:36    

Pas d'idées pour mes bordures qui disparaissent sous IE6 dès que je spécifie une width à #infogauche ou #infodroite ? (gm ? [:cupra])

Reply

Marsh Posté le 02-06-2003 à 19:17:25    

Je ne vois pas pourquoi tes bordures disparaissent, par contre je me demande pourquoi tu utilises le positionnement relatif :
 

#infosGauche {
  margin-left: 20px;
  width: 90%;
}


 
marche tout aussi bien et résout ton problème.


Message édité par gm_superstar le 02-06-2003 à 19:17:50

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 03-06-2003 à 17:38:37    

Effectivement, merci beaucoup du tuyau, j'avais pas du tout pensé au coup des margin.  :jap:

Reply

Marsh Posté le 05-06-2003 à 14:04:09    

Nouvelle page, nouveau problème...
http://www.lesjoyeuxdrilles.com/bl [...] n.php?id=9
Celle-là marche nickel.
 
Mais évidemment comme c'est du dynamique, j'ai des blagues plus courtes :
http://www.lesjoyeuxdrilles.com/bl [...] .php?id=10
 
Résultat,  
"> Envoyer "Le lapin et le renard" à un ami
> Lire une autre blague drôle aléatoire" passent sous le bloc de vote, évidemment.
 
J'ai bien pensé à mettre un min-height au div #blagueDrole, mais cette propriété ne s'appliquent qu'aux tableaux sous IE, gênant.
 
Des idées de workarounds ?

Reply

Marsh Posté le 05-06-2003 à 14:06:51    

Il est en positionnement absolu le cadre bleu en bas à droite ?


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 05-06-2003 à 14:12:21    

Non (enfin je pense pas :))
 

Code :
  1. #moduleVote {
  2. position:relative;
  3. left:313px;
  4. width:314px;
  5. height:42px;
  6. background-image:url("../Images/v3/imgDuJour_votreAvis.gif" );
  7. }

 
 
(je me souviens m'être galéré pour le caler comme ça, maintenant je ne sais pas si c'était la bonne solution...)

Reply

Marsh Posté le 05-06-2003 à 14:51:49    

En fait c'est ton #infosDroite qui est en cause. Il est en positionnement absolu et donc il se fait marcher dessus par #moduleVote.
 
Tu devrais essayer de le passer en flottant.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 05-06-2003 à 15:17:15    

Effectivement ça a l'air de prendre forme. Mais pourquoi mon #infosDroite qui est en float:right est nécessairement en-dessous de mon #blagueDrole (qui est en position:relative, est-ce que ça joue ?) ?
 
Après des recherches sur le net, leurs floats n'ont pas l'air d'avoir ce comportement, cf. http://www.w3.org/2002/02/css-float-test
 
[:meganne]

Reply

Marsh Posté le 05-06-2003 à 15:19:53    

Il faut que tu places dans le source #infosDroite avant #blagueDrole


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 05-06-2003 à 15:24:51    

Impeccable, ça marche :
http://www.lesjoyeuxdrilles.com/bl [...] .php?id=10
http://www.lesjoyeuxdrilles.com/bl [...] n.php?id=9
 
[:prosterne] gm_superstar [:prosterne2]
 
Va falloir que je retouche ma page des images en conséquence [:meganne]

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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