28211 sujets

CSS et mise en forme, CSS3

Problèmes avec les float... entre autre...

Salut

J'ai plusieurs problémes avec les float sur une page que j'essaye de réaliser. J'ai pas mal cherché mais je n'ai pas réussi a les résoudre. Certains me paraissent tout bêtes, d'autres plus complexes, mais j'arrive à rien Smiley bawling

Donc, sur cette page : http://panik2.w3h.org/

1) Mon header contient un logo à droite, une image de 1px de large se répétant, et image de gauche. J'aimerai qu'il prenne toute la largeur de la page, mais je ne sais pas comment faire. J'ai essayé en donnant un width de 100% au div du milieu (logo_repeat), mais ca ne marche pas.

2) J'utilise des float:left pour les div du logo, puis du menu. Donc, pour repasser à la ligne entre ces 2 éléments, je met ces deux groupes de div dans 2 div avec un float:none, mais ca ne donne rien.

3) Sous firefox un espace se met entre certain div de mon menu. J'ai bien mis les marges à 0 mais ca ne change rien, et ca a l'air assez aléatoire, selon la taille de la page notament.
Ce défaut n'apparait pas sous IE Smiley ohwell

Voilà, si quelqu'un pouvait me filer un coup de main, ce serait bien appréciable, je crois que j'ai épuisé les limites de mon savoir là (malgrés les multiples relecture du tuto de ce site) Smiley confused
Modifié le 21 Nov 2004 - 05:28
Humm... J'ai résolu le 2) en mettant les div contenant les groupes de div header et menu à float:right, mais je ne comprend pas pourquoi ca marche, donc ca ne me plait pas trop.
Si quelqu'un avait une explication et/ou une correction...

Pour les 1) et 3), je bloque toujours Smiley ohwell

Aussi, je précise que je travaille en fluid, donc les tailles doivent être en % et pas en pixel.
Modifié le 21 Nov 2004 - 05:24
Pourquoi tu fais des <div> vides avec des backgrounds en CSS ?


#logo_l{
	background:url(/images/logo_l.png);
	height:80px;
	width:380px;
	float:left;
	}
#logo_repeat{
	background:url(/images/logo_repeat.png) repeat-x;
	height:80px;
	width:300px;
	float:left;
	}
#logo_r{
	background:url(/images/logo_r.png);
	height:80px;
	width:26px;
	float:left;
	}
Ça c'est faible : 

<div class="block">
<div class="menu"><a class="link_menu" href="/">ACCUEIL</a></div>
<div class="menu"><a class="link_menu" href="/lists/">LISTES</a></div>
<div class="menu"><a class="link_menu" href="/search/">RECHERCHE</a></div>
<div class="menu"><a class="link_menu" href="/links/">LIENS</a></div>
<div class="menu"><a class="link_menu" href="/contact/">CONTACT</a></div>

</div>


Ça c'est mieux : 

<ul class="block">
 <li class="menu"><a class="link_menu" href="/">ACCUEIL</a></li>
 <li class="menu"><a class="link_menu" href="/lists/">LISTES</a></li>
 <li class="menu"><a class="link_menu" href="/search/">RECHERCHE</a></li>
 <li class="menu"><a class="link_menu" href="/links/">LIENS</a></li>
 <li class="menu"><a class="link_menu" href="/contact/">CONTACT</a></li>
</ul>
Et ça c'est "top" Smiley winner

Le code HTML :

<ul id="menu">
 <li><a href="/">ACCUEIL</a></li>
 <li><a href="/lists/">LISTES</a></li>
 <li><a href="/search/">RECHERCHE</a></li>
 <li><a href="/links/">LIENS</a></li>
 <li><a href="/contact/">CONTACT</a></li>
</ul>

Le code CSS :

#menu { 
}

#menu li { 
   display: inline; 
}

#menu li a { 
}

#menu li a:hover { 
}

À toi de remplir le CSS !
Modifié le 21 Nov 2004 - 06:15
Merci beaucoup pour toutes tes infos Stephan Smiley cligne

Alors, j'ai fais comme tu m'a dis pour le menu, effectivement, c'est plus propre ! Ca m'a l'air de marcher correctement sauf que le dernier élément de la liste se retrouve en dessous des autres. Je verrai plus tard, c'est peut-être lié cet un autre probléme :

Comme tu me l'as finement fait remarqué, les div vides pour le header contenant le logo, c'est pas terrible (je présente les signes clinique de la divimanie !). J'ai donc remplacé ca par un seul div qui contient l'image de 1 pixel de large qui se répete en fond et le logo en img à gauche.
J'essaye donc de mettre l'image de droite... à droite. Pour ce faire, je crée un autre div avec float:right contenu dans le div header. Mais mon image semble sortir du div pour se caler juste en dessous (à droite, comme prévu).

Le code de ce probléme :
CSS :
#header{
	width:100%;
	height:80px;
	background:url(/images/logo_repeat.png) repeat-x;
	}

#header_right{
	float:right;
	}

HTML :
<div id="header">
  <img src="/images/logo_l.png" alt="Panik Records" />
  <div id="header_right"><img src="/images/logo_r.png" alt="" /></div>
</div>
Regardes ce qu'il se passe si tu supprimes les déclarations en rouge : 

#menu li a{
	padding-top:12px;
	background:url(/images/menu.png) repeat-x;
	text-align:center;
	margin:0px;
	height:30px;
	width:19%;
	[#red]float:left;[/#]
	[#red]display:block;[/#]
	color:#FFB761;
	font-weight:bold;
	font-size:10px;
	text-decoration:underline;
	}

Ah ça c'est bien !

<div id="header">
  <div class="left"><img src="/images/logo_l.png" alt="Panik Records" /></div>
  <div class="right"><img src="/images/logo_r.png" alt="" /></div>
</div>

Mais : 

<div id="header">
  <img class="left" src="/images/logo_l.png" alt="Panik Records" />
  <img class="right" src="/images/logo_r.png" alt="" />
</div>

N'oublies pas que Tous les éléments peuvent être positionnés
Je vois que tu suis ce que je fais, c'est trés sympa de ta part Smiley biggrin

Interressante la discussion sur l'intéret du strict par rapport au transitional. Je m'étais imposé le strict plus par challenge qu'en connaissance de cause. Maintenant, je comprend un peu mieux le pourquoi de ces restrictions.
Ceci dit, certaines me posent probléme : faut-il plus favoriser la portabilité et l'accessibilité (plus hypotétique que réelement utilisée d'ailleurs) ou l'ergonomie de la naviguation ? Vaste et interressante question !

Pour en revenir à mes p'ti css (lol), j'ai toujours le probléme n°3 et ca me chagrine parce que je n'en comprend pas l'origine. Tu vois cet espace entre certains li ? Je ne l'ai pas sous IE, seulement sous FF, et selon la taille de la page (en changeant la taille de la fenetre FF), j'en ai plus ou moins.
J'aimerai bien le faire disparaitre, c'est vraiment pas beau !

Et merci pour tes précieux conseils !
Voilà bien quelque chose d'inutile : 

<p>&nbsp;</p>


Solidifier ton <h1> (Et régler petit problème)

h1 { 
   clear: both; 
   font-size: 24px; 
   padding: 0; 
   margin: 0; 
   text-align: center; 
}
Moi, je voulais juste dire un truc à propros de la casse des élément, pourquoi écrire en majuscule ???, je le ferais via CSS perso, il me semble que c'est plus par effet de style qu'autre chose.

<ul id="menu">
 <li><a href="/">Accueil</a></li>
 <li><a href="/lists/">Listes</a></li>
 <li><a href="/search/">Recherche</a></li>
 <li><a href="/links/">Liens</a></li>
 <li><a href="/contact/">Contact</a></li>
</ul>

Et le CSS

ul#menu li a
{
  text-transform: uppercase ;
}

Ou pour faire plus joli encore, tu peux mettre des petites majuscules :

ul#menu li a
{
  font-variant: small-caps ;
}


Voilà, c'était juste en passant, pour le reste, Stephan semble plus au fait que moi Smiley cligne
Sympa le smallcaps ElMoustiko, adopté Smiley biggrin Décidement, c'est dingue les possibilités des CSS !

Pour le <p> </p> je l'ai mis pour sauter une ligne, tout simplement. Tu lui aurais préféré des <br /> ? Je ne préfére pas toucher à margin-top de h1 car je n'aurai pas besoin tout le temps de cette marge.

Sinon, j'ai un instant eu l'espoir que le clear:both allait régler mon problème d'espace dans ma liste, mais non Smiley decu
Je vous met une image pour bien illustrer le probléme. Si quelqu'un a une solution, je suis preneur !!
upload/396-menu.jpg

Un p'ti PS : le code HTML de nos messages est interprété par la fonction de prévisualisation. Un petit htmlspecialchars() serait bienvenu Smiley cligne
Administrateur
Ben a écrit :

Pour le <p> </p> je l'ai mis pour sauter une ligne, tout simplement. Tu lui aurais préféré des <br /> ? Je ne préfére pas toucher à margin-top de h1 car je n'aurai pas besoin tout le temps de cette marge.

Essaye, si possible, de ne jamais rajouter de structure (balise) pour avoir un affichage spécifique.
Donc ni <p> ni <br />
Dans ton cas, il est préférable de créer une classe spécifique (".espace" par exemple) que tu peux, ou non, appliquer aux titres <h1> selon tes envies.
Je n'ai pas constaté le problème auquel tu fais référence.

<p>&nbsp;</p> c'est vraiment pas génial !

Firefox 1.0 et Netscape 7.1 le rende d'une façon,
Opera 7.51 et Internet Explorer 6 le rende d'une autre.

La solution proposé par Raphael est sans doute la meilleure.

<h1 class="espace"></h1>
Modifié le 21 Nov 2004 - 16:52
Bonjour,

Deux commentaires en passant (rien à voir avec ta demande, cependant):

Les liens de ta barre de menu débordent largement de la barre en hauteur et s'étendent loin au delà du titre du lien en largeur. Cela peut amener le visiteur à cliquer par erreur, ou à cliquer sur le mauvais lien, puisqu'il n'y a pas de signalement des limites des zones actives des liens (saus la disparition du soulignement, mais c'est plutôt discret). Rendre toute une zone cliquable autour d'un énoncé de lien est intéressant si les limites de cette zone sont clairement signalées (zones de couleurs distinctes par zone active, bordures autour des zones actives, changement de couleur au passage du curseur, espace inactif entre deux zones actives). Dans le cas contraire, il vaut peut-être mieux limiter la zone active aux titres, a fortiori si ceux-ci sont susfisamment grands, ou simplement la réduire en largeur et en hauteur.

L'absence de bouton pour la recherche peut également poser problème à certains visiteurs, qui ne comprendront pas qu'il faut alors (je présume) simplement appuyer sur Enter. Il me semble préférable d'ajouter un bouton, d'autant que la place existe pour cela.
Histoire d'apporter ma modeste pierre à ton édifice, je pense que le trou variable dans ton menu horizontal est dû à un problème de précision de calcul quelquepart dans Firefox.
En effet, dans le style CSS de ta balise "li", si tu remplace le "width:16.5%" par une valeur fixe comme "width:120px" le problème semble disparaître, du moins c'est ce que j'ai constaté.

Qu'en disent les gourous du coin ? Smiley smile
Ok pour le <p>, je l'ai remplacé par une class. Je crois que je commence à cerner la philosophie du xhtml : tout le style dans la css, et le contenu dans la page Smiley smile

@thierry : merci pour tes remarques, j'avais pensé au bouton pour le formulaire de recherche (en fait, j'ai surtout pensé à ne pas le mettre Smiley cligne ). J'hésites encore... Ca me parait l'évidence même d'appuyer sur entrée pour entrer (justement) ses données, mais c'est vrai que c'est pas forcement le cas pour tout le monde. Aussi, j'aime bien le "concept" du formulaire sans bouton.
Pour la zone réactive du menu, je devais être en train de bosser dessus quand tu as regardé. J'ai mis un roll-over un peu plus significatif, mais c'est vrai que la zone est un peu grande, surtout en hauteur. Je vais voir à la réduire.

@Nilpohc : oui, ca sent la petite erreur de rendu, mais ca m'etonne de gecko. J'ai aussi utilisé des largeur de 20% avec 5 élements (16.5 * 6 = 99 et non pas 100%), mais le probléme est identique. Tu es sous IE Stephan ? Smiley murf

Merci pour votre aide et vos suggestions Smiley cligne
Modifié le 21 Nov 2004 - 23:41
Sujet clos
Aller à