28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Je suis en train de coder le menu d'un site, et sous Firefox, aucun problème !
Mais dès que l'on ouvre IE Smiley sweatdrop

Voici le code CSS :


#header-lien-1{
	display:block;
	float:left;
	margin-top:5px;
	margin-left:290px;
	width:65px;
	height:22px;
}

#header-lien-2{
	display:block;
	float:left;
	margin-top:5px;
	margin-left:15px;
	width:65px;
	height:22px;
}


Je n'ai mis que les deux 1er liens Smiley cligne


<a href="#" id="header-lien-1"></a>
<a href="#" id="header-lien-2"></a>


Et voici le résultat :

http://thymotep.info/autres/Tny/
Sous Firefox les liens sont en face ( des trous ) des mots, tandis que sous IE ils sont totalement décalés sur la droite, j'ai tenter pas mal de chose sans succès, je me tourne donc vers vous Smiley smile


Par avance merci
Modifié par thymo (29 Jul 2006 - 11:17)
Bonjour,

Bug de double marge des flottants (float:left et margin-left simultanés): corriger en ajoutant display:inline pour IE.

Sinon, une remarque: le "display:block" ne sert à rien ici et peut être supprimé.

<edit>Autre remarque, en passant: si le HTML comporte plusieurs balises, ce n'est pas tout à fait pour rien. En l'état, cette page réduite à une répétition d'éléments <div> n'a aucune structure.</>
Modifié par Laurent Denis (29 Jul 2006 - 11:00)
Merci bien Smiley smile Cela fonctionne, mais si IE pouvait ne pas éxisté sa serao parfait Smiley biggrin

Je n'ai pas bien compris ton EDIT ?
Tu as dans ce contenu une liste, un titre (même si c'est une image, qui n'a d'ailleurs rien à faire en background CSS), potentiellement des paragraphes, etc.

Chacun de ces types de contenu correspond à un balise HTML, qui permet de le rendre exploitable.

Pour l'instant, ta page peut uniquement être affichée dans un navigateur graphique avec CSS. Or l'affichage d'un document Web dans IE ou FF avec CSS n'est qu'un petit aspect des différentes exploitations d'une page Web.
Modifié par Laurent Denis (29 Jul 2006 - 11:11)
Un header ne doit pas être en background ? J'ai toujours coder comme celà, et je vois pas mal de site coder comme celà ! Je m'en inspire un petit peu !
Un arrière-plan CSS n'existe que pour un navigateur graphique supportant CSS, et encore, de manière partielle (l'utilisateur ne doit pas avoir modifié différents paramètres tels que l'affichage des images, celui des couleurs d'arrière-plan, l'activation des CSS, etc). En dehors de ce cadre, elle ne comporte aucune alternative accessible.

Le texte ainsi mis en image est donc absent pour une partie des utilisateurs, pour les robots d'indexation de moteurs de recherche, pour les outils de traduction, pour les synthèses vocales, pour les navigateurs textes, les navigateurs mobiles, etc.

Retenir simplement le principe: arrière-plan CSS = décoration, mais jamais contenu:

Sinon : oui, certains sites le font et il y a même des tutoriels qui le recommandent. Mais il y a hélas des aspects de CSS qui n'ont pas été bien compris. Cet exemple du header est assez fréquent... Smiley cligne
En clair pour mes menu et autres header , je dois mettre mes images dans le HTML ? mais si c'est bien cela, comme les rendres extensibles, a tel position etc ? En appliquant un style dans la balise ? Smiley biggol
Dans le cas de ton header :
- une portion de l'image (celle avec le texte) en image HTML
- l'autre (la déco extensible) en background CSS