28220 sujets

CSS et mise en forme, CSS3

Alignement extensible sur un menu horizontal ???

bonjour,

j'ai un gros soucis avec mon menu en onglets.

voici les onglets en position normale:

(cliquez pour agrandir)
http://nemohp.dyndns.org/tmp/o1_2.PNG

voici les onglets si la largueur de la fenetre est réduite :

http://nemohp.dyndns.org/tmp/o2.PNG


comme vous pouvez le constater, un des onglet reveins à la ligne Smiley ohwell
d'ou ça devient moche et en plus la fait un décalage du block de lien qui étéait en dessous des onglets ...

alors je me demandais si il était possible d'empecher ce retour à la ligne des onglets quand on réduit la taille de la fenetre ???

la seule alternative que j'ai trouvé, c'est un <table> pour les onglets au lieu de faire en " foat: left "

lien pour tester ma page web en directe : http://nemohp.dyndns.org/stage/financement.php?asso=pres

code du menu :
      <ul id="tabnav">
        <li class="active"><a href="financement.php?asso=pres">PRES</a></li>

        <li><a href="financement.php?asso=ri">RI</a></li>
        <li><a href="financement.php?asso=bdi">BDI</a></li>
        <li><a href="financement.php?asso=cigales">CIGALES</a></li>
        <li><a href="financement.php?asso=adie">ADIE</a></li>
        <li><a href="financement.php?asso=bcs">BCS</a></li>
      </ul>


son css associé:
ul#tabnav {
    font: bold 14px verdana, arial, sans-serif;
    list-style-type: none;
    padding-bottom: 30px;
    border-bottom: 1px solid #6c6;
    margin: 0;
}
ul#tabnav li {
	float: left;
	height: 27px;
	background-color: #cfc;
	margin: 2px 7px 0 2px;
	border: 1px solid #6c6;
}
ul#tabnav li.active {
    border-bottom: 1px solid #fff;
    background-color: #fff;
}
#tabnav a { /* cadre etiquette */
	display: block;
/*	text-decoration: none; */
	float: left; 
	color: Red;
	padding: 5px 30px 5px 30px;

}
#tabnav a:hover {
    background: #fff;
}



Je précise que j'ai regardé pas mal de tutos sur les menus en horizontale et tous souffraient de ce problème d'element revenant à la ligne Smiley bawling
Modifié par nemohp (25 Mar 2005 - 09:49)
Si tu spécifies une largeur pour ton menu (ul#tabnav) avec width, cela devrait empécher le retour à la ligne mais obliger un scroll horizontal si la déinition d'écran est trop faible.

Sinon tu peux aussi définir en pourcentage la largeur de chaque élément de menu (ul#tabnav li) comme ça si la page n'est pas assez large un retour à la ligne se fera au sien de chaque lien et augmentant juste la taille en hauteur de ton menu.

En espérant t'avoir aidé
FoW
je ne veux pas de taille fixe, c'est un principe de design : tout doit être fluide, pas d'optimisation pour une taille précise.

des largeurs en % j'ai tenté, mais ça fais quand même le retour à la ligne des <li>

(% + float = mega grosse catastrophe Smiley biggol )
si ni une taille fixe , ni les pourcents ne sont applicables, alors il est normal que ton menu revienne à la ligne.
C'est vrais que vu le décalage, c'est pas très beau.

Maintenant ci c'est en taille réel d'ecran, c'est largement au dessous des 800 d'ecran qui sont la taille standard minimum actuel.

Il faut pas rêver non plus, il est impossible de faire un menu qui s'affiche correctement en 100 / 75 Smiley sweatdrop

Tu peux essayer de donner une taille à chaque élément de ton menu, diminuer la taille de la police, mais si tu ne te détermines pas sur ce que t'as dit FoW, tu n'y arriveras pas.
Modifié par Lorr Hyde (24 Mar 2005 - 22:03)
Administrateur
Salut nemohp, pourrais-tu créer des vignettes lorsque tu envoies une image sur le forum?
Chez moi, tout est décalé Smiley decu
Il s'en faut d'un milipoil pour que ça passe en 800*600 donc si tu réduit légérement la largeur de chaque onglet, c'est ok non ?
Raphael a écrit :
Salut nemohp, pourrais-tu créer des vignettes lorsque tu envoies une image sur le forum?
Chez moi, tout est décalé Smiley decu


oui désolé pour la grande image mais c'était pour expliquer mon probleme
Smiley lol
TriadPtale a écrit :
Il s'en faut d'un milipoil pour que ça passe en 800*600 donc si tu réduit légérement la largeur de chaque onglet, c'est ok non ?



le probleme c'est que le "float : left" sous firefox ne fais pas ce que je veux (dans ce cas uniquemet) , alors que IE fais quelque chose de logique (pour une fois que IE gere bien le css).

essayé de réduire la page avec IE et firefox et vous comprendrer mieux
Smiley cligne


MAJ : voila un screener sous IE qui lui gere bien le retour à la ligne du menu, il n'y pas de délage bizarre comme sous firefox

http://nemohp.dyndns.org/tmp/o3.PNG
Modifié par nemohp (25 Mar 2005 - 00:45)
Lorr Hyde a écrit :
si ni une taille fixe , ni les pourcents ne sont applicables, alors il est normal que ton menu revienne à la ligne.
C'est vrais que vu le décalage, c'est pas très beau.

Maintenant ci c'est en taille réel d'ecran, c'est largement au dessous des 800 d'ecran qui sont la taille standard minimum actuel.

Il faut pas rêver non plus, il est impossible de faire un menu qui s'affiche correctement en 100 / 75 Smiley sweatdrop

Tu peux essayer de donner une taille à chaque élément de ton menu, diminuer la taille de la police, mais si tu ne te détermines pas sur ce que t'as dit FoW, tu n'y arriveras pas.


je surf sur palm de temps en temps et j'aime avoir un site qui gere à peu pres mon ecran (pas de largeur 600 forcé minimum par exemple), deplus j'ai un ecran 19 pouces et je supporte pas un site bloquer a 600 de largeur (zen garden par exemple).

avec les <table> j'arrivais assez facilement à respecter ce principe de largeur variable , totu en gardant un site jolie, avec les div & co c'est un cauchemar

d'ou ma filosophie du tout extensible (enfin tant que c'est possible)


MAJ : il ne faut pas non plus oublier les nouveau ecran plat type 16/9 sur les pc portables, c'est de la place gachée les site 800*600 pour eux
Modifié par nemohp (25 Mar 2005 - 00:42)
Vero a écrit :
En utilisant la propriété white-space:nowrap, on peut éviter le retour à la ligne ...


je viens de faires des tests , mais ça ne change rien

Mais sur le net pourtant j'ai trouver un tuto qui correspont un peu a mon menu (ici)
mais il utilisait "display: inline;" au lieu des "float : left;" donc je vais tenter de cette methode peut etre Smiley ohwell
Oui, et tout en bas, il t'en parle

a écrit :
La déclaration white-space:nowrap conserve la liste sur une ligne horizontale, même si la fenêtre du navigateur n'est pas assez large pour afficher la ligne entière.


Deux autres :

ultra-fluide
marcaera
j'y arrive tjrs pas j'essaye plein de truc pourtant, allé encore 1 heure

sinon en faisait juste

    <table width="100%" border="1">
      <tr>
        <td>menu1</td>
        <td>menu2</td>
        <td>menu3</td>
        <td>menu4</td>
      </tr>
    </table>


ça marche fais exactement ce que je veux en moins de code et moins galère Smiley confus

"fais des div qu'il disais !!! faites des div ..." Smiley bawling

allez courage les div sont nos amis, j'y retourne

MAJ : je craque là !!! le tout div c'est q'une utopie ...
Modifié par nemohp (25 Mar 2005 - 02:31)
bon alors sur cette image j'ai les deux versions TABLE (1) et liste UL (2)

en (1) les 6 cases <td></t> (futures onglets) ont tous la même taille, et l'ensemble s'adapte à la taille de l'écran

en (2) les 6 cases <li></li> n'ont pas la même (je n'arrive pas a faire des marge automatique ici), et ne s'adapte pas à la taille de l'ecran.

http://nemohp.dyndns.org/tmp/o4.PNG

je veux faire comme dans l'exemple (1) (methode table), mais avec la méthode ul/li , c'est à dire dans (2).

Est-ce-que c'est possible ????

j'espère que je suis claire (je fais de mon mieux avec ma numerotation)

le code de (1) :
    version TABLE :<br/>
    <!-- affichage volontairement hors css car test -->
    <table width="100%" border="0" bgcolor="red">
      <tr>
        <td width="10%" bgcolor="yellow"><a href="financement.php?asso=pres">PRES</a></td>
        <td width="10%" bgcolor="yellow"><a href="financement.php?asso=ri">RI</a></td>
        <td width="10%" bgcolor="yellow"><a href="financement.php?asso=bdi">BDI</a></li>
        <td width="10%" bgcolor="yellow"><a href="financement.php?asso=cigales">CIGALES</a></li>
        <td width="10%" bgcolor="yellow"><a href="financement.php?asso=adie">ADIE</a></td>
        <td width="10%" bgcolor="yellow"><a href="financement.php?asso=bcs">BCS</a></td>
      </tr>
    </table>


le code de (2) :

    version div/ul/li (galère ...) :<br/>

    <div id="navbar2">
      <ul>
        <li class="active"><a href="financement.php?asso=pres">PRES</a></li>
        <li><a href="financement.php?asso=ri">RI</a></li>
        <li><a href="financement.php?asso=bdi">BDI</a></li>
        <li><a href="financement.php?asso=cigales">CIGALES</a></li>
        <li><a href="financement.php?asso=adie">ADIE</a></li>
        <li><a href="financement.php?asso=bcs">BCS</a></li>
      </ul>
    </div>



div#navbar2 {
    height: 100%;
    width: 100%;
    background-color: red;
}
div#navbar2 ul {
    white-space: nowrap;
}
div#navbar2 li {
    list-style-type: none;
    display: inline;
    background-color: yellow; 
}


ps: le code est différent par rapport au début du poste car ça doit etre la 10ème version différentes au moins ...
Modifié par nemohp (25 Mar 2005 - 11:07)
Tu as manifestement une solution simple, efficace, accessible, que tu maîtrises et qui ne te feras pas perdre de temps : le tableau.

En l'absence d'implémentation suffisante de display: inline-block par les navigateurs graphiques actuels, il n'y a pas de réponse CSS efficiente à cette question.

Donc, tableau.
Sujet clos
Aller à