Menu en css

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
Frédéric

Menu en css

Message par Frédéric »

Bonsoir,

Je suis entrain d'essayer de faire mon menu en css...

L'original avec des tables est :

Le code html "classique" est le suivant :

Code : Tout sélectionner

<table border="0" cellspacing="0" class="tablemenu">
  <tr  class="lignehaut">
    <td width="105" rowspan="2"><a class="logo" href="/accueil/accueil.php" title="retour ACCUEIL"></a></td>
    <td width="63" height="40"><a class="news" href="/actualite/actu.php" title="page NEWS"></a></td>
    <td width="77"><a class="bio" href="/biographie/bio.php" title="page BIOGRAPHIE"></a></td>
    <td width="86"><a class="disco" href="/discographie/discographie.php" title="page DISCOGRAPHIE"></a></td>
    <td width="88"><a class="technique" href="/techniques/technique.php" title="page TECHNIQUES"></a></td>
    <td width="88"><a class="biblio" href="/techniques/bibliographie.php" title="page BIBLIOGRAPHIE"></a></td>
    <td width="62"><a class="luthier" href="/Luthiers/Luthiers.php" title="page LUTHIERS"></a></td>
    <td width="79"><a class="partitions" href="/partitions/Partitions.php" title="page PARTITIONS"></a></td>
    <td width="68"><a class="goodies" href="/wallpaper/goodies.php" title="page GOODIES"></a></td>
    <td width="73"><a class="liens" href="/liens/liens.php" title="page LIENS"></a></td>
  </tr>
  <tr class="lignebas">
    <td height="48"><a class="videos" href="/news/videos/videos.php" title="page VIDEOS"></a></td>
    <td height="48"><a class="forum" href="/phorum/list.php" title="Forum de discussion"></a></td>
    <td width="88" height="48"><a class="contemporains" href="/contemporain/index.php" title="page CONTEMPORAINS"></a></td>
    <td height="48">&nbsp;</td>
    <td height="48">&nbsp;</td>
    <td height="48">&nbsp;</td>
    <td height="48">&nbsp;</td>
    <td width="68">&nbsp;</td>
    <td width="73">&nbsp;</td>
  </tr>
</table>
J'ai commencé à créer un

Code : Tout sélectionner

<div id="menuhaut"><a class="logo" href="/accueil/accueil.php" title="retour ACCUEIL"></a></div>
et j'ai indiqué en css

Code : Tout sélectionner

#menuhaut {
position: fixe;
        width: 100%;
        height: 88px;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
		background-image:url(/accueil/menupics/lignes.gif);
}
Mon problème est que je ne sais pas comment faire pour créer une "cellule après mon logo pour y insérer les autres images et je ne sais pas comment insérer des cellules en dessous pour intégrer le second background et les autres images.

Le resultat du début du menu en css est

Si quelqu'un peut m'expliquer ou bien me communiquer l'adresse d'un site je lui en saurais tres reconnaissant :)
fredroy
Salamandre
Messages : 40
Inscription : 07 janv. 2004, 03:12

Message par fredroy »

Bien :) j'ai réussis finalement...

J'ai une autre question... Comment faire pour que les blocs soient elastiques ?
C'est à dire qu'il s'étirent dans le sens de la largeur lorsque l'on redimensionne la fenêtre et non qu'ils soient fixes ?

Et comment faire pour que l'ensemble des blocs fassent 100% de la fenêtre ?

Merci d'avance pour votre aide :)
SIBELIUS
Lézard vert
Messages : 146
Inscription : 09 sept. 2003, 23:21

Message par SIBELIUS »

J'arrive un peu tard, mais voici :
- comment faire un menu propre : http://www.alsacreations.com/articles/menu/
- des modèles de mise en page dont certains occupent 100% de large : http://www.alsacreations.com/articles
Tutoriels et blog (X)HTML / CSS : css.alsacreations.com
Forum Standards / CSS : forum.alsacreations.com
Invité

Message par Invité »

Merci beaucoup, je m'en suis servi et j'ai tout modifié.

Mais je n'arrive pas à insérer la suite des images.

Code : Tout sélectionner

<div class="menu">
	<ul><li><a class="logo" href="/accueil/accueil.php"></a></li>
	<li><a class="news" href="/actualite/actu.php"></a></li>
	<li><a class="bio" href="/biographie/bio.php"></a></li>
	<li><a class="disco" href="/discographie/discographie.php"></a></li>
	<li><a class="technique" href="/techniques/technique.php"></a></li>
	<li><a class="biblio" href="/techniques/bibliographie.php"></a></li>
	<li><a class="luthier" href="/Luthiers/Luthiers.php"></a></li>
	<li><a class="partitions" href="/partitions/Partitions.php"></a></li>
	<li><a class="goodies" href="/wallpaper/goodies.php"></a></li>
	<li><a class="liens" href="/liens/liens.php"></a></li>
	</ul>
</div>
J'ai beau chercher , je ne trouve pas comment faire pour insérer les images dans le même bloque en dessous de "news".

Merci d'avance si tu sais comment procéder :)
gaerun
Salamandre
Messages : 28
Inscription : 02 nov. 2003, 00:05

Message par gaerun »

Bonsoir Frederic.

Je sais, ça n'a rien à voir avec le sujet de la discussion, mais quand on est à la racine de ton site, on a que l'animation flash pour accéder à la suite. Et tout le monde n'a pas de plugin flash.

Alors si tu pouvais mettre juste un petit lien vers la suite, ça améliorerait l'accessibilité de ton site (qui par ailleurs est super intéressant. Bravo).
fredroy
Salamandre
Messages : 40
Inscription : 07 janv. 2004, 03:12

Message par fredroy »

c'est chose faite :)
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité