Menu CSS, probleme de soulignement

El-Cherubin · 16 Octobre 2008

Bonsoir,

Apres mes déboires sur comment centrer les titres à l'intérieur de cellules/cases pour mon menu, je galere maintenant à obtenir un soulignement complet du menu.

Il me semble pourtant avoir mis ce qu'il fallait niveau css pour mes listes...

-http://new.infocompub.fr

Quelle est mon erreur? C'est ce menu http://tutorials.alsacreations.com/modelesmenus/hd2.htm je pensais avoir récupéré ce qu'il me fallait, en enlevant le js...

Merci d'avance

El Cherubin

Modifié 16 Octobre 2008 par El-Cherubin

**iNCiTE Web** · 17 Octobre 2008

<div id="menu">
	<dl>
		<dt><a href="http://new.infocompub.fr">Accueil</a></dt>
	</dl>
<dl>
<dd>
<dt><li class="page_item page-item-2"><a href="http://new.infocompub.fr/?page_id=2" title="À propos">À propos</a></li>
<li class="page_item page-item-9"><a href="http://new.infocompub.fr/?page_id=9" title="New">New</a></li>
</dt>
<dd class="smenu">
	  </ul>
			</dd>
	</dl>
</div>

T'as vu où les <dt> dans les <dd> ? c'est plutôt l'inverse...

Et puis il manque les <ul> d'ouverture...

Bref revois déjà tout l'imbrication des balises pour qu'on y voit plus clair (déjà qu'avec le fond noir ça pique les yeux)

El-Cherubin · 17 Octobre 2008

je vais revoir le code, j'ai pas tout compris en fait la

J'ai simplement "essayé" d'adapté ce que j'ai trouvé et qui me plaisait chez alsacreation!

**iNCiTE Web** · 17 Octobre 2008

Oui c'est l'inconvénient de copier/coller sans trop regarder : si ça fonctionne c'est bien sinon bonjour les galères... idem quand il s'agit de faire une modif 6 mois après

El-Cherubin · 17 Octobre 2008

<div id="header">
<div id="headerads">
morgan ads


</div>
<div id="headertitle">
	<?php if ( is_home() ) { /* use an h1 on the homepage */ ?>
	<h1 id="blogname"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
	<?php } else { /* and a p tag everywhere else */ ?>
	<p id="blogname"><strong><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></strong></p>
	<?php } ?>
	<p id="tagline"><em><?php bloginfo('description'); ?></em></p>

</div>


<div id="menu">

	<dl>

		<dt><a href="<?php bloginfo('home');?>">Accueil</a></dt>

	</dl>

<dl>

<dt><?php wp_list_pages('title_li=&sort_column=menu_order&depth=1');?></dt>
			<dd class="smenu">
      <?php

      if ( is_page() ) {


        global $post;

        if ( $post->post_parent != 0 ) 
{
?>
<ul>
<?php
          wp_list_pages('title_li=&sort_column=menu_order&child_of='.$post->post_parent);

        } else {
          wp_list_pages('title_li=&sort_column=menu_order&child_of='.$post->ID);
        }
}

      ?>
</ul>

			</dd>
	</dl>




</div>



</div> <!-- end header -->

Voici le code de mon header et menu... il me semble avoir enlevé ce qu'il n'allait pas... Mais pour souligner completement...

**iNCiTE Web** · 17 Octobre 2008

Ton soulignement est généré par

<dd class="smenu">  </dd>

Je suis pas sur que ce soit comme ça à l'origine.

Et pour moi c'est toujours le binz dans le code, pas de <ul>, et les menus ne sont pas construits pareil.

A la rigueur un border-bottom sur les <dt> pourrait souligner, mais il y a encore des problèmes de construction... je l'ai fait en live avec webdevelopper et ça assez vite hein...

Bon courage

El-Cherubin · 17 Octobre 2008

Merci de ton aide, j'utilise pourtant <ul>, cependant pas partout d'une part parce que je me suis inspiré du code d'alsacreation mais aussi parce que je ne sais pas si on peut imbriquer plusieurs <ul> entre eux...

J'ai du adapter le menu de base car il était gérer avec du javascript et que je n'utilisai pas toutes les propriétés...

Penses tu que mon menu peut se construire uniquement avec des <ul> (et li ) ?

baulet · 18 Octobre 2008

tu peux imbriquer des ul et des li, pour peu que tu les fermes correctement :

<ul>

</ul>

imbriqué:

<ul>

<li>

<ul>

</ul>

</li>

</ul>

...et ainsi de suite

bon courage

**iNCiTE Web** · 18 Octobre 2008

Je regarde ton code et ça va toujours pas :

<dd class="smenu">
</ul>
</dd>

Ca c'est pas bon déjà...

Je pense que tu as juste un problème de balises et d'imbrication.

Pourquoi tu fais pas ça :

<div id="menu">
<ul>
 <li><a href="http://new.infocompub.fr">Accueil</a></li>
 <li class="page_item page-item-2"><a href="http://new.infocompub.fr/?page_id=2" title="À propos">À propos</a></li>
 <li class="page_item page-item-9"><a href="http://new.infocompub.fr/?page_id=9" title="New">New</a></li>
</ul>

Regardes le code source de mon menu sur ce site

C'est aussi celui de Alsacréations, sans le Javascript...

El-Cherubin · 18 Octobre 2008

Je ne comprends pas ou tu trouves ces morceaux de code... moi j'ai :

<div id="menu">

	<dl>

		<dt><a href="<?php bloginfo('home');?>">Accueil</a></dt>

	</dl>

<dl>

		<dt><?php wp_list_pages('title_li=&sort_column=menu_order&depth=1');?></dt>

			<dd class="smenu">

				<?php

					if ( is_page() ) {

					global $post;

					if ( $post->post_parent != 0 ) 
					{
					?>

			<ul>
				<?php
					wp_list_pages('title_li=&sort_column=menu_order&child_of='.$post->post_parent);

					} else {
					wp_list_pages('title_li=&sort_column=menu_order&child_of='.$post->ID);
					}
					}

				?>
			</ul>

			</dd>

</dl>

</div>

Je vais essayer avec que des <ul> et <li> peut etre ce sera plus simple...

Ah oui, petite question aussi, pourquoi lorsqu'on utilise ce menu ça "saute" c'est pas fluide...?

Edit: j'ai transformé le menu avec que des <ul et <li> comme vous me l'avez conseillé tous les 2, ça fonctionne et c'est souligné, cependant j'ai un léger souci d'écart entre le lien "accueil" et le reste du menu, je cherche dans le css d'ou cela peut venir mais pour le moment... aucune idée.

Modifié 18 Octobre 2008 par El-Cherubin

PotatoesJunky · 18 Octobre 2008

Il faut que tu nettoies ton code et que tu fasses attention... tu as plein de balises en trop et des trucs pas très logique.

Voilà ton code actuel :

<div id="menu">
<ul>

		<li><a href="http://new.infocompub.fr">Accueil</a></li>

		<li><li class="page_item page-item-2"><a href="http://new.infocompub.fr/?page_id=2" title="À propos">À propos</a></li>
<li class="page_item page-item-9"><a href="http://new.infocompub.fr/?page_id=9" title="New">New</a></li>
<li class="page_item page-item-13"><a href="http://new.infocompub.fr/?page_id=13" title="blop">blop</a></li>

</li>

		<li>	
			<ul class="smenu">

							</ul>
		</li>		

</ul>

</div>

Et voilà le code que tu devrais avoir :

<div id="menu">
  <ul>
	<li><a href="http://new.infocompub.fr" title="Accueil">Accueil</a></li>
	<li><a href="http://new.infocompub.fr/?page_id=2" title="À propos">À propos</a></li>
	<li><a href="http://new.infocompub.fr/?page_id=9" title="New">New</a></li>
	<li><a href="http://new.infocompub.fr/?page_id=13" title="blop">blop</a></li>
  </ul>
</div>

**iNCiTE Web** · 18 Octobre 2008

Depuis le départ on te signale qu'il y a un problème de balises :ohmy:

Et je vois encore ça :

<li><li class="page_item page-item-2">

Ton 2ème groupe d'onglets est imbriqué dans un autre <li>, et comme ceux-ci via ta propriété #menu ul {margin: 0 10px 0 0 } ont une marge à droite et bien la marge est appliquée 2 fois, d'où l'espace...

Tu as pas le plugin webdevelopper de Firefox ? les erreurs sautent aux yeux presque sans chercher :blush:

El-Cherubin · 18 Octobre 2008

Je suis pas tres doué avec wordpress en fait... c'est lui qui me génere tout seul ces listes...

Vous connaissez bien ce CMS juste histoire de m'orienter ou gérer ce genre de chose...?

Mon code actuel est

<div id="menu">
<ul>

		<li><a href="<?php bloginfo('home');?>">Accueil</a></li>

		<li><?php wp_list_pages('title_li=&sort_column=menu_order&depth=1');?></li>
</ul>			


		<div id="submenu">	
			<ul class="smenu">

				<?php

					if ( is_page() ) {

					global $post;

					if ( $post->post_parent != 0 ) 
					{
					?>


				<?php
					wp_list_pages('title_li=&sort_column=menu_order&child_of='.$post->post_parent);

					} else {
					wp_list_pages('title_li=&sort_column=menu_order&child_of='.$post->ID);
					}
					}

				?>
			</ul>
		</div>		


</div>

Il ne me semble pas faire d'erreur de balises ou alors je suis aveugle. Si je ne me trompe pas, c'est donc dans une fonction WP qu'il faut que je cherche... ou adapter mon menu.

Edit: J'ai bien webdevelopper comme extension, mais peux tu m'expliquer comment l'utiliser pour voir ces erreurs...? Merci

Ah oui, pour comprendre ce que j'essaye de faire au cas ou ce n'est ps assez explicite, je suis pas un génie, c'est reproduire le systeme de menu de ce site http://www.fredcavazza.net/ Je le trouve tres bien conçu, tout du moins il répondrait pleinement à mes besoins

Modifié 18 Octobre 2008 par El-Cherubin

**iNCiTE Web** · 19 Octobre 2008

Oui visiblement ce sont les fonctions is_page() et wp_list_pages() qui ne renvoient rien... et tu te retrouves avec un <ul class="smenu"> vide, mais là on peut rien pour toi...

Là ça devient compliqué car c'est un mélange de WP, Alsacréations plus les modifs...

Pour

 <li><?php wp_list_pages('title_li=&sort_column=menu_order&depth=1');?></li>

il faut je pense supprimer les <li></li> car ils sont déjà renvoyés par la fonction de listage des pages...

Et pour le sous menu ben je ne peux pas te dire pourquoi aucune page n'est retournée, sans doute une histoire de catégorie.

Avec Webdevelopper j'ai surtout utilisé le bouton "Inspecter" qui permet de voir tous les objets et leurd propriétés.

El-Cherubin · 19 Octobre 2008

ok, je vais essayer de voir si je peux adapter quelque chose dans ce cas... Je te remercie de ton aide, si j'arrive à debloquer la situation et ai une autre question je reviendrai faire un coucou sur ce topic ou tout simplement pour dire que c'est résolu

Deja le probleme d'écartement est résolu en supprimant un jeu de balise <li>

Reste a trouver les autres souci (inspecter c'est avec dom inspector? )

Modifié 19 Octobre 2008 par El-Cherubin

**iNCiTE Web** · 19 Octobre 2008

Non, c'est avec le bouton "Inspecter"

A gauche, après le cafard...

El-Cherubin · 19 Octobre 2008

Doit pas exister sur la derniere version anglaise, je vois pas de cafard ni de inspector...

**iNCiTE Web** · 19 Octobre 2008

Normal que tu ne trouves pas car en fait je parle de Firebug, que je trouve mieux... :blush:

El-Cherubin · 19 Octobre 2008

lol, je viens de découvrir l'option! En fait je l'avais mais il se place tout en bas, donc j'avais raté le cafard... Vais tester si je trouve grace à lui quelques solutions.

Je crois que je suis pas loin d'avoir réglé mes soucis, enfin j'espere.

Est ce que chez toi ça "saute" aussi lorsque l'on navigue sur les pages du menu en etant sous FF et pas sous IE 7? (-http://new.infocompub.fr)

Modifié 19 Octobre 2008 par El-Cherubin

Connexion

Menu CSS, probleme de soulignement

Sujets conseillés

El-Cherubin

iNCiTE Web

El-Cherubin

iNCiTE Web

El-Cherubin

iNCiTE Web

El-Cherubin

baulet

iNCiTE Web

El-Cherubin

PotatoesJunky

iNCiTE Web

El-Cherubin

iNCiTE Web

El-Cherubin

iNCiTE Web

El-Cherubin

iNCiTE Web

El-Cherubin

Veuillez vous connecter pour commenter

Parcourir

Activité