Positionnement (float) et centrage menu

Bonjour,

Je suis entrain de créer un site test pour m'exercer en programmation et je suis confronter à trois problèmes :


1 - Je ne parviens pas à mettre le texte dans la barre verte de la manière suivante : La date à gauche alignée avec le reste du site, et le nombre de place aligner à droite lui aussi avec le reste du site.

2 - Pour le menu, j'ai mis un margin-right mais le souci c'est que quand on met la souris sur CONTACT, le menu (bouton vert) n'est pas aligner à droite avec le reste du site. Et petite question annexe, comment faire en sorte que le bouton vert quand on est sur la barre de menu, reste lorsqu'on est sur la page d'accueil ?

3 - Et enfin, comment faire pour que le site est la même police d'écriture sur Chrome sachant que pour le moment il s'affiche très bien uniquement sous Firefox ?

Lien du site : http://www.aurelienhamel.com/sites/jsj/index.php

Merci !

DKProject a écrit :

1 - Je ne parviens pas à mettre le texte dans la barre verte de la manière suivante : La date à gauche alignée avec le reste du site, et le nombre de place aligner à droite lui aussi avec le reste du site.

Dans ta div barre_verte, il faut que tu rajoute une autre div que tu centre comme le reste de ton site.

DKProject a écrit :

2 - Pour le menu, j'ai mis un margin-right mais le souci c'est que quand on met la souris sur CONTACT, le menu (bouton vert) n'est pas aligner à droite avec le reste du site.

Rien ne t'empêche pour ton dernier bouton contact d'enlever cette marge.
Sinon, une autre piste, tu peux faire ton menu avec une mise en page tableau. Je parle bien sur de display: table.

DKProject a écrit :
Et petite question annexe, comment faire en sorte que le bouton vert quand on est sur la barre de menu, reste lorsqu'on est sur la page d'accueil ?

Dans ton code html, tu rajoute une class sur l'onglet dont c'est la page.

DKProject a écrit :

3 - Et enfin, comment faire pour que le site est la même police d'écriture sur Chrome sachant que pour le moment il s'affiche très bien uniquement sous Firefox ?

Pas de problème sur Chrome pour moi.
Modifié par benj (09 May 2013 - 03:25)

Alors pour la div dans "barre_verte", j'ai déjà créer deux div à l'intérieur pour le contenu à gauche et à droite :

	<div id="barre_verte">
    
    	<div id="date">
    
    		<p>Nous sommes le <? setlocale (LC_TIME, 'fr_FR.utf8','fra'); echo (strftime("%A %d %B")); ?> 2013 </p>
        
        </div>
        
        <div id="place_dispo">
        
        	<p>Il y a actuellement <span class="color2">6 places</span> disponibles dans notre résidence</p>
        
        </div>
    
    </div>

#date					{display:inline-block; font-size:10px; font-weight:lighter; letter-spacing:0.05em; padding-top:8px; margin-left:auto; margin-right:auto; float:left}
#date p					{color:#FFF;}

#place_dispo			{display:inline-block; color:#2bbc48; font-size:10px; font-weight:lighter; letter-spacing:0.05em; padding-top:8px; margin-left:auto; margin-right:auto; float:right;}

Pour le menu avec la marge, c'est bon, j'ai réussi. Mais pour ce qui concerne le bouton qui reste allumé, j'ai un petit problème avec la couleur du texte car j'ai créé une class "ici" avec une couleur blanche sur ".ici a" mais il n'en tiens pas compte car de base il reprend la couleur gris foncé du menu non sélectionné.

D'ailleurs, petite question à part, comment mettre l'année dans la date au format PHP ?

<? setlocale (LC_TIME, 'fr_FR.utf8','fra'); echo (strftime("%A %d %B")); ?>

Modifié par DKProject (09 May 2013 - 14:10)

DKProject a écrit :
Alors pour la div dans "barre_verte", j'ai déjà créer deux div à l'intérieur pour le contenu à gauche et à droite

Rien ne t'empêche d'en rajouter une autre qui englobera la date et la place dispo.

DKProject a écrit :
Mais pour ce qui concerne le bouton qui reste allumé, j'ai un petit problème avec la couleur du texte car j'ai créé une class "ici" avec une couleur blanche sur ".ici a" mais il n'en tiens pas compte car de base il reprend la couleur gris foncé du menu non sélectionné.

Ton sélecteur css doit être (voir la priorité des sélecteurs http://openweb.eu.org/articles/cascade_css) :

#menu .ici { ... }

au lieu de

 .ici { ... }

Modifié par benj (10 May 2013 - 16:49)

Ok, c'est bon ça marche.

Par contre pour la class "ici", petit problème. J'ai mon header qui est dans un include et donc je sais pas comment je vais pouvoir faire pour dire que le menu doit être sélectionné en fonction de la page consultée.

Puisque mon menu se trouve dans l'include header.php, comment je peux faire ?

	<ul id="menu">

		<li><a class="ici" href="index.php">Accueil</a></li>
		<li><a class="bouton" href="presentation.php">Présentation</a></li>
		<li><a class="bouton" href="services.php">Services</a></li>
		<li><a class="bouton" href="tarifs.php">Tarifs</a></li>
		<li><a class="bouton" href="photos.php">Photos</a></li>
		<li><a class="bouton" href="animationst.php">Animations</a></li>
		<li><a class="bouton" href="personnel.php">Personnel</a></li>
		<li><a class="bouton_c" href="contact.php">Contact</a></li>
            
	</ul>

Un truc comme ça :

<li><a <?php if (isset($rubrique) and $rubrique=='accueil') echo 'class="ici"'; ?> href="index.php">Accueil</a></li>

La variable php $rubrique devra être défini dans chacune de tes pages. Pour la page d'accueil, avant d'inclure ton header tu auras :

$rubrique = 'accueil';

Je viens d'essayer mais il doit y avoir un conflit avec la class "bouton".

<li><a <?php if (isset($rubrique) and $rubrique=='accueil') echo 'class="ici"'; ?> class="bouton" href="index.php">Accueil</a></li>
<li><a <?php if (isset($rubrique) and $rubrique=='presentation') echo 'class="ici"'; ?> class="bouton" href="presentation.php">Présentation</a></li>
<li><a <?php if (isset($rubrique) and $rubrique=='services') echo 'class="ici"'; ?> class="bouton" href="services.php">Services</a></li>
<li><a <?php if (isset($rubrique) and $rubrique=='tarifs') echo 'class="ici"'; ?> class="bouton" href="tarifs.php">Tarifs</a></li>
<li><a <?php if (isset($rubrique) and $rubrique=='photos') echo 'class="ici"'; ?> class="bouton" href="photos.php">Photos</a></li>
<li><a <?php if (isset($rubrique) and $rubrique=='animations') echo 'class="ici"'; ?> class="bouton" href="animationst.php">Animations</a></li>
<li><a <?php if (isset($rubrique) and $rubrique=='personnel') echo 'class="ici"'; ?> class="bouton" href="personnel.php">Personnel</a></li>
<li><a <?php if (isset($rubrique) and $rubrique=='contact') echo 'class="ici"'; ?> class="bouton" href="contact.php">Contact</a></li>

#menu .ici				{display:block; width:107px; height:34px; margin-right:1.67em; color:#FFF; background:url(../images/menu_hover.jpg) no-repeat; text-decoration:none;}
#menu .ici a			{color:#FFF;}

Modifié par DKProject (10 May 2013 - 20:39)

Bonjour,

Tu ne peux pas avoir deux attributs class pour le même élément, mais ton attribut class peut avoir plus d'une valeur, par exemple : class="bouton ici".

Il faut modifier le code en conséquence.

Comment faire pour les réunir puisqu'on veut en activer un si il y a une condition mais l'autre doit toujours être activé ?

<li><a <?php if (isset($rubrique) and $rubrique=='accueil') echo 'class="ici"'; ?> class="bouton" href="index.php">Accueil</a></li>

DKProject a écrit :
Comment faire pour les réunir puisqu'on veut en activer un si il y a une condition mais l'autre doit toujours être activé ?

Allez, un peu de réflexion ! Ce n'est pourtant pas trop compliqué :

<li><a class="<?php if (isset($rubrique) and $rubrique=='accueil') echo 'ici '; ?>bouton" href="index.php">Accueil</a></li>

Effectivement, merci !

Je pense avoir à peu près réussi à mettre tout ça en place.
Modifié par DKProject (11 May 2013 - 14:37)