28173 sujets

CSS et mise en forme, CSS3

[semi-résolu] Float et espace disponible dans un div

Bonjour à toutes et à tous !

Désolé pour le sujet pas trés parlant mais je ne trouvait pas trop comment expliquer mon problème ...

Donc :

J'essaye de mettre en place un menu comme sur cet exemple.

Le soucis est que je ne sais pas comment faire en sorte que l'espace total de mon div soit utilisé. Mes liens sont bien les uns à la suite des autre sur plusieurs lignes; mais ces lignes ne font pas toutes la meme longueur ...

Je bloque un peu sur la manière de gérer ça ! si quelqu'un à une solutions miracle : un gros merci d'avance Smiley ravi

pour infos le code html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
<title>Txingudi Surf Eskola - menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>

	<div id="menu">
	
		<ul>
			<li id="li1"><a href="" title="" accesskey="">accueil</a></li>

			<li id="li2"><a href="" title="" accesskey="">galerie</a></li>
			
			<li id="li3"><a href="" title="" accesskey="">presentation</a></li>
			<li id="li4"><a href="" title="" accesskey="">liens</a></li>
			<li id="li5"><a href="" title="" accesskey="">contact</a></li>
			<li id="li6"><a href="" title="" accesskey="">tarifs</a></li>
			<li></li>

			<li id="li7"><a href="" title="" accesskey="">partenaires</a></li>
			
			
			
		</ul>

</body>
</html>


et le css :
* {margin:o;padding:0;}
body {
background-color: #000;
color: #fff;
}
a{
color: #fff;
text-decoration: none;
}

#menu {
position: absolute;
top: 300px;
left: 25px;
width: 15em;
border: 1px solid red;
}

ul {
list-style-type: none;
}

li {
float : left;
}
a {
display: block;
padding: 5px;
background-color: blue;
text-align: center;
font-size: 2em;
}

a:hover {
background-color: yellow;
color: gray;
}


Merci à vous
Modifié par barbe douce (15 Jul 2006 - 22:06)
Bonjour,

A moins d'avoir un nombre de lettre égal pour chaque lien, je procéderais de la manière suivante:
Un div conteneur et un div par lien, si ils sont courts (nbre de lettre) utiliser un float ...

Du style

<div id="conteneur">
<div class="lien2"><a href .....></div>
<div class="lien1"><a href .....></div>
<div class="lien1"><a href .....></div>
</div>

<style>
#conteneur {width: 100px;...}

.lien1 {width: 50px; float : left;...}

.lien2 {width: 100px; ...}

...

</style>


Ou quelque chose d'approchant en faisant attention aux bordures etc ...
C'est juste une idée.

Cordialement.
Salut Ghost

Je cherchais quelque chose de moins "macgyver" mais c'est sur c'est une solution !
Et en y réfléchissant c'est peut-etre la seule solution ...

D'autres avis ?

En tout cas merci à toi de m'avoir répondu !

EDIT : En fait un des parametre que j'ai pas signalé : je cherche à faire une mise en page fluide donc si redimmensionnement du corps de texte : tout le menu doit s'ajuster; les dimensions en px à proscrire donc ...
Modifié par barbe douce (15 Jul 2006 - 07:34)
Salut,
Effectivement la technique fonctionne ... Cool !

Je reste un peu sceptique pour l'utilisation de tous ces div mais bon ... Si je n'ais pas d'autres solutions qui pointe à l'horizon ...
Je mets un [semi-résolu] pour pas verouiller le topic aux bonnes idées !

Merci à toi ghost en tout les cas Smiley cligne
Bonjour,

Ce qui se fait avec des div anonymes se fera tout aussi bien sur des éléments <li> Smiley cligne

Par ailleurs, il est préférable d'éviter dans toute la mesure du possible de dimensionner des blocs en em. La solution est apparement séduisante, mais fragilise considérablement la CSS : le rendu dépend en effet très étroitement de la combinaison de la bonne police de caractères (celle que vous avez, mais pas forcément le visiteur) et de la bonne taille de caractère (idem).

Laissez plutôt la dimension s'établir en fonction du contenu (puisque ce bloc a de fortes chances d'être flottant, cela se fait tout seul).

Sinon, contrairement à une idée reçue, le dimensionnement en pixel ne pose pas nécessairement de problèmes d'accessibilité liés à l'agrandissement des caractères. Au contraire, même, parfois Smiley cligne
Modifié par Laurent Denis (16 Jul 2006 - 07:13)
a écrit :
Ce qui se fait avec des div anonymes se fera tout aussi bien sur des éléments <li> cligne

C'est bien la première options pour laquelle j'avais opté ... sans succés ! Je vais donc de ce pas replonger mon nez dans ce code problématique Smiley biggol

a écrit :
Sinon, contrairement à une idée reçue, le dimensionnement en pixel ne pose pas nécessairement de problèmes d'accessibilité liés à l'agrandissement des caractères. Au contraire, même, parfois cligne

Je saisi pas trop !? Niveau accessibilité je eux bien admettre que ca ne pose pas de soucis, mais si je dimmensionne un bloc en pixels est que l'utilisateur agrandit la taille des polices, il y a de fortes chances que ces dernière "sortent" du bloc et là niveau esthétisme pas glop ... Me trompe-je ?
barbe douce a écrit :

Sinon, contrairement à une idée reçue, le dimensionnement en pixel ne pose pas nécessairement de problèmes d'accessibilité liés à l'agrandissement des caractères. Au contraire, même, parfois cligne

Je saisi pas trop !? Niveau accessibilité je eux bien admettre que ca ne pose pas de soucis, mais si je dimmensionne un bloc en pixels est que l'utilisateur agrandit la taille des polices, il y a de fortes chances que ces dernière "sortent" du bloc et là niveau esthétisme pas glop ... Me trompe-je ?

non, ça n'est pas ça.

Les blocs totalement dimensionnés (height et width) sont évidement les plus exposés aux problèmes de débordement. Mais même eux peuvent être accessibles s'ils anticipent la place nécessaire au contenu pour s'agrandire. En se souvenant que seuls les deux premiers facteurs d'agrandissement sont à prendre en compte (ceux correspondant à IE6 Win).

En outre, le débordement lui-même n'est pas nécessairement un obstacle à l'accessibilité, même s'il fait hurler le graphiste : si la mise en page comporte le jeu nécessaire, il peut se faire (toujours avec les mêmes facteurs d'agrandissement) sans chevauchement de contenu et sans problèmes de couleurs de texte et d'arrière plan trop proches ou identiques. (J'avoue froidement ne pas du tout prêter attention aux hurlements du graphiste dans ce cas).

Enfin, en cas de dimensionnement en largeur, mais pas en hauteur, l'adaptation de la présentation peut se faire sur plus de lignes, sans dégradation problématique pour l'accessibilité.

Les principaux cas effectivement problématiques sont :
- dans des blocs trop ajustés, les mots trop longs (pas d'espace pour générer des retours à la ligne) compte-tenu du mauvais support de &shy; notamment par FF.
- la mauvaise gestion des agrandissements de textes alignés à droite en CSS

ça, c'est parfois très agaçant Smiley cligne
Modifié par Laurent Denis (16 Jul 2006 - 08:58)
Sujet clos
Aller à