28173 sujets

CSS et mise en forme, CSS3

Besoin de quelques conseils

Bonjour,

je suis nouveau sur le forum, je viens de me mettre aux normes W3C et j'aurai besoin de quelques conseils.

En effet, j'ai crée ma feuille de style et je me retrouve face à différents problèmes.

Voici le site web http://guillaume.lellouche.free.fr/
(c'est un site test, ne vous fiez pas au texte, je l'ai fait dans une période dépressive Smiley langue )

Pour commencer, j'ai un petit problème sous IE, en effet, mon menu de gauche ne veut pas s'afficher correctement, il n'a pas l'air de prendre en compte mon float: left.

Ensuite, le menu en haut dans l'entête est décalé comparé à la version FF.

Enfin, lorsque j'augmente la taille de police sous IE le calque "enveloppe" du milieu ne s'agrandit pas contrairement aux autres, j'ai pensé que cela doit être à cause de l'image que j'ai mis en background mais je me trompe peut-être.

Aussi, j'ai un problème lorsque je fais ma validation W3C, j'ai un avertissement que j'arrive pas à résoudre :
Ligne : 26 (Level : 2) Redéfinition de la propriété border-left-style : #entete

Voili voilou, je crois que c'est tout Smiley smile

Merci d'avance pour votre aide.

Edit : je précise que j'aimerai éviter les méthodes barbares telles que le positionnement "absolute" et les "!important".
Modifié par Barty (13 Jul 2006 - 17:31)
#contenu
{
	border-right:  solid 0.1em #999;
	border-left:  solid 0.1em #999;
	background-color: #fff;
	padding: 0.4em 0.4em 0.4em 0.8em;
	width: 47.85em;
	[#red]--> float:left; au lieu de ton margin-left[/#]
	color: #000;
}


Je met tjs mon menu gauche et contenu en float left et au moins la taille en px ou em pour le menu gauche. La largeur du contenu s'étirant sur le reste. Sans doute que ton bug de menu se résoudra

Essaye aussi de mettre un width suffisant pour que ton menu du dessus passe dedans sans prob, peut-etre que le prob sur explorer sera réglé aussi
Modifié par Oryo (13 Jul 2006 - 17:47)
Normalement, il ne devrait pas être nécessaire de faire flotter les deux éléments. Seul le premier élément dans le code (ici le menu) doit être flottant, et la techique de la marge appliquée à l'élément en flux est très efficace.

Il y a juste un petit bug de HasLayout avec Internet Explorer Windows, qui fait que le bloc de contenu, s'il est doté de layout, ne peut plus se glisser (lui ou sa marge de gauche) en dessous du flottant. Il suffit donc d'éviter les propriétés qui confèrent le layout à ce bloc. En particulier les dimmensions fixes. Ici, la largeur fixe me semble superflue, vu qu'elle sera obtenue automatiquement par soustraction (largeur du conteneur moins marges).
Donc, pour que le bloc de contenu se mette toujours a droite du menu en "float:left", il suffit de lui mettre une taille fixe?

J'avoue m'être souvent posé la question avec des images et un paragraphe à placer dans un contenu. Dans ce cas, une image en "float right par exemple" et le paragraphe avec une taille fixe. ok j'essayerai cela
Merci Mpop, ta solution me parait plus logique et effectivement ca marche aussi.

Par contre en ce qui concerne les autre bugs ? Vous me conseillerez d'adopter quelle méthode?
Oryo a écrit :
Donc, pour que le bloc de contenu se mette toujours a droite du menu en "float:left", il suffit de lui mettre une taille fixe?

J'avoue m'être souvent posé la question avec des images et un paragraphe à placer dans un contenu. Dans ce cas, une image en "float right par exemple" et le paragraphe avec une taille fixe. ok j'essayerai cela

Non, c'est l'inverse.
Taille fixe ou pas, ce n'est pas censé changer quoi que ce soit. Pour que le deuxième élément se mette à côté du premier, il suffit que le premier soit flottant, rien de plus. Si on veut un rendu visuel « en colonnes », et que le deuxième élément ne se glisse pas en dessous du premier, on peut utiliser une marge sur le deuxième élément.
Cf :
http://web.covertprestige.info/test/07-colonnes-flottantes-et-place-dans-le-flux.html
http://web.covertprestige.info/test/11-page-fluide-avec-trois-colonnes-1.html

Le problème vient d'Internet Explorer (windows) : les blocs dotés de layout (une propriété propre au moteur de rendu d'IE, et qui est activée par certaines propriétés CSS, donc les dimmensions fixes) ne se glissent plus sous les flottants (ou bien les flottants ne peuvent plus survoler les blocs dotés de layout, ce qui revient au même). Il s'agit donc d'un bug de IE. Donc si on veut faire des colonnes sans mettre toutes les colonnes en flottant, il faut éviter de donner une dimmension fixe au(x) bloc(s) qui ne sera(/seront) pas flottant(s).
Bonjour,

mpop a écrit :
Si on veut un rendu visuel « en colonnes », et que le deuxième élément ne se glisse pas en dessous du premier, on peut utiliser une marge sur le deuxième élément.


Un contexte de formatage (overflow autre que visible sur le flux) produit le même résultat sans avoir à gérer une marge et à anticiper la dimension du flottant. Avec quelques avantages annexes (gestion plus aisée de la propriété clear et d'éventuels flottants dans le bloc en flux, notamment).
Modifié par Laurent Denis (16 Jul 2006 - 06:15)
Sujet clos
Aller à