CSS et IE: Marges sous les images // Firefox: chargement en 2 temps

CSS et IE: Marges sous les images // Firefox: chargement en 2 temps - HTML/CSS - Programmation

Marsh Posté le 23-06-2006 à 16:09:58    

Salut,
J'suis en train de développer un site web pour l'uni est j'ai rencontré trois problèmes assez originaux.
Le premier est avec IE. Lorsque j'ouvre mon site, les images ont une marge en dessous que je n'arrive pas à supprimer. Comme si "margin-bottom" était réglé à 2px, alors qu'il est expressement mis à 0.  
Le deuxième est avec Firefox: le chargement du site se fait en deux temps. D'abord l'entête puis, tant que je n'appuye pas sur "rafraîchir", le texte ne se charge pas.
Enfin, sous Opera, la marge du corps et décallé par rapport à l'entête. Ceci semble être lié à la prise en compte des border qui sont de 2px pour l'entête comme pour le corps. La largeur des div est donc de 896px afin que la largeur totale du site soit de 900px. Pour le corps, si je mais la largeur à 900px, il est en ligne avec l'entête dans opera mais pas dans firefox. Si je le mais à 896px, il est en ligne avec firefox mais pas dans opera. Beau paradoxe, non? Quelle browser devrais-je "favoriser"?  
J'ai fait qq recherches sur le web ss rien trouver. Quelqu'un à une idée? le site en projet peut être visité à www.maxoettliphotograph.ch/uni/projet1
Merci d'avance,
jr


Message édité par jyer le 23-06-2006 à 16:33:54
Reply

Marsh Posté le 23-06-2006 à 16:09:58   

Reply

Marsh Posté le 23-06-2006 à 16:30:36    

Pour un site on met toujours:

Code :
  1. * {
  2. margin:0;
  3. padding:0;
  4. }


 
au début du CSS, pour pas se faire chier avec les marges...
 

Code :
  1. <a href="pgs/prgm.html"><li>Programme</a>


 
 :heink: ça on me lavais jamais fait, toi tu la inventé bravo  :sweat:  
 
ça c'est mieux:
 

Code :
  1. <li><a href="pgs/prgm.html">Programme</a></li>


 
Si tu veux appliquer un style en plus sur programme, entoure le avec des <span>...
 
Sinon tente de corriger les erreurs de validation et ça devrait etre un peu mieux ;)

Reply

Marsh Posté le 23-06-2006 à 16:36:19    

Je reconnais que <a...><li>..</li></a> est original, mais c'est le seul moyen que j'ai trouvé de faire changer l'arrière plan de li lors d'un a:hover. Y a-t-il une autre méthode plus orthodoxe?
Merci pour le truc du *, je reboot sous windows pour voir si ça marche sous IE.

Reply

Marsh Posté le 23-06-2006 à 16:39:04    

je tai dit, petit homme qui lis pas tout....
 

Code :
  1. <li><a href="#"><span>hgzerufgze</span></a></li>


 
Désolé de te décevoir mais je trouve ton effet hover, horrible  :p  :sarcastic:


Message édité par xtof_83 le 23-06-2006 à 16:40:35
Reply

Marsh Posté le 23-06-2006 à 17:00:55    

Trois choses.  
1. J'avais lu ton histoire du span, mais suis pas convaincu qu'il permette de couvrire l'entier de mon horrible effet hover. En effet, il recouvrira que le texte du <a>...</a> et non l'entier de la case li.
2. T'as pas une idée pourquoi il se charge en deux temps sur firefox?
3. Qu'est-ce qui te fais dire que ch'suis un homme?

Reply

Marsh Posté le 23-06-2006 à 17:03:48    

lol mdr j'ai du faire une gaffe sur le sex ;)
 
men voit désolé, mes mains qui tape plus vite que mon cerveau...
 
Sinon toi tu veux quoi ...comme effet sur ton menu ?
 
Tu sais que tu peux appliquer un style au li du menu directement?
 
Pour le 2 temps, moi jai pas ce souci... c'est où exactement

Reply

Marsh Posté le 23-06-2006 à 17:09:38    

Bon. En ce qui concerne le menu, qd je passe la souris sur le lien, la case li du lien prend la même couleur de fond que le border un peu plus large sur la gauche et le texte devient blanc. En gros, ça fait un très beau rectangle rouge foncé encadrant le texte blanc du lien et s'étandant du boder-left au border right. Très esthètique ;-).
Concernant le deux temps, lorsque je le charge avec Firefox, toute la partie du haut s'affiche dans un premier temps puis je dois taper F5 pour que le reste du document s'affiche. Comme entrée en matière, il y a mieux.

Reply

Marsh Posté le 23-06-2006 à 17:10:58    

Ah oui, le truc du # {margin: 0;} n'a pas fonctionné. J'ai tjrs une marge bizarre qui apparaît sous mes images avec IE.

Reply

Marsh Posté le 23-06-2006 à 17:14:51    

Ah oui, cette fois-si j'ai lu un peu vite. Pour appliquer un style au li(t), j'ai remarqué que li:hover fonctionne très bien sous Firefox mais pas sous IE...

Reply

Marsh Posté le 23-06-2006 à 17:17:22    

:o  
 
* {margin: 0;}
 
ensuite pour ton menu la question se pose pas :o
Tu met comme j'ai dis et puis c'est tout, on invente pas des régles..
 
Et oui tu pourras stylé ça vite fait..
 
Ensuite sous FF, moi pas de souci, donc te prend pas la tête...
 
sous ie, pose toi des questions c'est pas trés beau à voir..
 
Aller change ce que je tai dis en logne, aprés on en rediscute...
 
Et donc au final --> fille ou garçon ?

Reply

Marsh Posté le 23-06-2006 à 17:17:22   

Reply

Marsh Posté le 23-06-2006 à 17:24:06    

Moi sous FF je dois aussi faire F5 :S
Mais sa fait que sa le premiere fois que tu va sur le site, apres sa le garde en mémoire, mais c'est clair que tu pe pas garder sa comme ça


Message édité par devilhunt le 23-06-2006 à 17:25:30
Reply

Marsh Posté le 23-06-2006 à 17:26:18    

Au risque de te décevoir: homme. J'aurai peut-être pas du dire ça mnt, si j'ai encore qq questions.
J'ai donc fait un menu w3c compatible, avec li avant le a, etc. Seulement, mon menu est du coup un désastre (j'en viendrai presque à être d'accord avec toi). Soit je fais un a:hover, en quel cas seul l'espace autour du lien change de background color (et non tout le rectangle jusqu'au border du menu) (et, en plus, si je ne passe pas exactement sur le texte du lien mais dans la zone du li, rien ne se passe). Soit je fais un li:hover, en quel cas le fond du li change de couleur quand je passe dans la case li, mais le lien reste noir....
 
le # au lieu de * était un faute de frappe sur le forum. Dans le script, j'ai mis * et ça n'a pas marché... En ce qui concerne IE, est-ce que t'as aussi l'espace sous les images (donc la magnifique rade de Genève et la déco)?

Reply

Marsh Posté le 23-06-2006 à 17:27:05    

jyer a écrit :

Ah oui, cette fois-si j'ai lu un peu vite. Pour appliquer un style au li(t), j'ai remarqué que li:hover fonctionne très bien sous Firefox mais pas sous IE...


 
 
Eh ouais, donc faut appliquer le hover sur <a>
 
et tu fais un display block

Reply

Marsh Posté le 23-06-2006 à 17:27:25    

Devilhunt: c'est clair que je veux pas garder ça comme ça, mais n'ai jms eu de problème semblable et ne sais donc pas comment le résoudre. Une idée?

Reply

Marsh Posté le 23-06-2006 à 17:30:20    

Si t'as vu mon topic, dsl je suis une vrai merde, sa fait que 3 jours que j'ai commencé a programmer (autrement que les istes multimania MDR ou les kit graphiques que je modifiai avec frontpage, sans jamais toucher aux lignes de codes). Donc je peut pas t'aider :S

Reply

Marsh Posté le 23-06-2006 à 17:31:59    

Homme, bien vais pouvoir etre méchand comme d'hab...lol
 
alors pour le menu, regarde mon post précédent...
 
ensuite, ton image de banniére, est un peu lourde, optimise là ;)
 
Aprés il y a plein dimage qui souvre pas sur ton site...va savoir pourquoi... lien mort...
 
Valid ton code,  
http://validator.w3.org/
 
Hum et met un doctype etc...
 
Pour toi aller on va faire avec xhtml 1.0 ;)
 
Donc met ça dans ton code:
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  3. <head>


 
....
 
Aller op op op au boulot... et pourquoi je savais que tetais un mec...dans le nom de ton site: max...

Reply

Marsh Posté le 23-06-2006 à 17:32:04    

Le display block il intervient où? Tu veux dire que je laisse complètement tomber les li?

Reply

Marsh Posté le 23-06-2006 à 17:33:34    

RRRrr t con ou tu écoutes rien...
 
Un menu c'est toujours et toujours:
 
<ul>
  <li>....</li>
  <li>.....
 
Tu applique les display:block sur le lien dans le <li>

Reply

Marsh Posté le 23-06-2006 à 17:35:38    

De un. Concernant le doctype, c'est pas que j'ai oublié, c'est que pour l'instant je m'en fous de l'introduire fais d'aobrd le site.  
De deux, max, c'est mon père. Donc que je sois sa fille ou son fils, ...
De trois, les liens morts, c'est un peu normal, vu que seule la page d'accueil a été écrite pour l'instant.  
Optimiser image de barrière = la convertir en png?
As-tu pu tester sous IE? Tu comprends ce que je veux dire par marges en plus sous les photos?
Une idée pour le chargement en deux temps?
Pourquoi t'es pas méchant avec les femmes, elles le sont svt avec nous?

Reply

Marsh Posté le 23-06-2006 à 17:36:51    

si je vois ce qu il veut dire sur ff
c est parce qu il definit un hover pour li et pour a
en sachant qu il vaut mieux eviter les hover s ils ne sont pas sur un a car ie ne comprend que sur a

 

donc tu vires les ul li et ul li:hover

 
Code :
  1. ul#menu a, a:visited {
  2. padding: 4px 0 0 4px;
  3. display:block;
  4. margin: 0px;
  5. color: #000000;
  6. background-color: #ffffff;
  7. text-decoration: none;
  8. font-weight: 100;
  9. }


et tu fais ton menu comme l a dit xtof :o

Reply

Marsh Posté le 23-06-2006 à 17:39:47    

Je te dis de foutre ce putain de doctype donc tu le met...sinon on peu pas bosser dans doctype, ils tapprenent quoi les abrutis qui te font cours à luniversité....
Sans doctype, le navigateur, prend un par défaut, et tu as pas toujours le comportement que tu souhaites...
 
Pour que ce soir plus simple, applique tes modifs, en ligne...merci
 
Vaide ton code...
 
Oui sous IE, je vois ton probléme...
Optimise el code, aprés on vois...
 
Optimier une image = tu ouvre gimp, car tu as pas les sousous pour photoshop... tu enregistes, et tu choisis le % de compression....
 
Chargement en 2 temps j'ai pas donc on voit ça plus tard...
 
Femmes= men fout, donc moi elle sont pas méchante avec moi...

Reply

Marsh Posté le 23-06-2006 à 17:49:44    

Ok.
J'ai insérer le doctype bien que j'ai pas capté tpn histoire de 1. Si t'es motiver pour expliquer, mais bon, c'est pas une priorité.
J'ai compressé l'image sous gimp car sous linux, il y a pas de photoshop (sous ou pas)
chargement en deux temps: sous FF, il faut vider le cache avant.

Reply

Marsh Posté le 23-06-2006 à 17:50:35    

ah oui, j'ai mis directement les modifs en ligne.
Qd on a display:block on peut jarter les li sur le code html, non?

Reply

Marsh Posté le 23-06-2006 à 17:51:44    

Nouveau, depuis l'insertion de doctype, j'ai aussi des marges en plus sur FF...

Reply

Marsh Posté le 23-06-2006 à 17:55:29    

jyer a écrit :

ah oui, j'ai mis directement les modifs en ligne.
Qd on a display:block on peut jarter les li sur le code html, non?


 
 
Dis moi tu veux que je te descende ou quoi, je vais le répété combien de fois  :fou:  :fou:  :fou:  :fou:  :fou:  
 
 
 :whistle: Aller je me resaisi, si tu veux ma mort  [:al bundy]  dis le de suite...
 
Bon tu vois now... tu as la meme connerie despacement sous FF, ça c'est cool ;)
 
* {
margin:0;
padding:0;
}
 
Oublie pas ça dnas le CSS. meme si là ça change rien, c'est pour les autres fois ;)
 
Bon aller vais regarder dou viend cette espacement

Reply

Marsh Posté le 23-06-2006 à 17:59:09    

Remplace ça:
 

Code :
  1. <div id="titreliens">
  2. <a href="index.html">Home</a> |
  3. <a href="pgs/contact.html"> Contact</a> |
  4. <a href="pgs/EHBA.html">EHBA</a>&nbsp;
  5. </div>


 
Par:
 

Code :
  1. <ul id="titreliens">
  2. <li><a href="index.html">Home</a></li>
  3. <li><a href="pgs/contact.html"> Contact</a></li>
  4. <li><a href="pgs/EHBA.html">EHBA</a></li>
  5. </ul>


 
Les "|" joue avec les borders ;)

Reply

Marsh Posté le 23-06-2006 à 18:06:34    

C'est fait.

Reply

Marsh Posté le 23-06-2006 à 18:20:35    

J'ai même adapté le script css pour compenser la nouvelle balise...

Reply

Marsh Posté le 23-06-2006 à 18:33:07    

J'ai fait validé le script html et css. Ils sont ok.

Reply

Marsh Posté le 23-06-2006 à 19:01:33    

Bon pas mal :D
 
Alors ensuite, les trucs du style <div><img/></div>
 
ça sert à rien ;) une div sert uniquement pour des blocs délément, si tu as qu'un élément pas besoin de lentourer de plus de truc...

Reply

Marsh Posté le 23-06-2006 à 19:11:19    

T'as ni trouvé pourquoi la page se charge en deux temps lors de la permière ouverture ni d'où proviennent ces mystérieux espaces?

Reply

Marsh Posté le 23-06-2006 à 19:17:45    

Te dis moi ma page se charge nickel, sous FF, IE windows, et FF linux
 
 
Mais tu as pas optimiser ton image, ça devrait faire 60-100ko max ;)

Reply

Marsh Posté le 23-06-2006 à 19:27:58    

Ok. Merci bcp pour toutes ces infos et pour le temps que t'as consacré à ce site horrible.;-)
jr

Reply

Marsh Posté le 23-06-2006 à 20:14:32    

ça marche tout nickel ?

Reply

Marsh Posté le 24-06-2006 à 20:25:47    

Ben, pas vraiment.  
1. Lorsque le cache du navigateur est vide, le site se charge tjrs en deux temps.
2. Il y a tjrs des marges inexpliquées sous les marges

Reply

Marsh Posté le 26-06-2006 à 19:22:53    

J'ai enfin trouvé une solution pour les images. Je le reporte ici pour clôre le sujet.  
 

Citation :


Hi,
 
By default, images are set to display inline, resulting in the space
underneath as a result of the baseline applied to inline elements.
 
To fix this, simply add display: block; to your img style.
 
Cheers,
 
Luke Redpath


 
src: http://archivist.incutio.com/viewl [...] cuss/25853
 
Un grand merci pour votre aide.
jr

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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