Sujet Précédent Sujet Suivant

Problème d'écran

Fermé
Darkaminx - 30 janv. 2015 à 09:55
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 30 janv. 2015 à 11:11
Bonjour,

J'ai un problème sur mon site internet, quand je passe sur un écran plus petit, les onglets de mon menu au lieu de rester aligner descende sur la ligne d'en dessous. Voici mon code html ( mon menu est une inclusion php ) et css : 

<!DOCTYPE html>
<html>
    <head>
		<meta charset="iso-8859-1" />
		<link rel="stylesheet" href="../css/Menu.css" />
	</head>
		<font face="Comic Sans ms">
			<nav>
				<ul>
					<a href="http://cinema-stsymphorien.esy.es/"><li class="accueil">Accueil</li></a>
					<a href="../onglet/Films.php"><li>Films</li></a>
					<a href="../onglet/Acces.php"><li>Accès</li></a>
					<a href="../onglet/Benevoles.php"><li>Bénévoles</li></a>
					<a href="../onglet/Galerie.php"><li>Galerie</li></a>
					<a href="../onglet/Autre.php"><li>Autre</li></a>
					<a href="../onglet/Contact.php"><li class="contact">Contact</li></a>
				</ul>
			</nav>
		</font>
</html>


body
{
	font-size: 200%;
}

nav li
{
	display: inline-block;
	padding-left: 2%;
	padding-top: 2%;
	padding-bottom: 2%;
	padding-right: 2%;
	border-right: 2px solid rgb(25,25,25);
	text-shadow: 1px 2px #000000;
	font-size: 89%;
}

nav a
{
	font-size: 150%;
	color: #0066CC;
	text-decoration: none;
}

nav li:hover
{
	background-color: #282828;
}

nav ul
{
	list-style-type: none;
	margin-left: -1%;
	border-bottom: 2px solid #0066CC;
	border-top: 2px solid #004C99;
	background-color: rgb(55,55,55);
}

.contact
{
	border-right: none;
}


pour avoir un aperçu du site, tapez l'adresse URL suivante : http://cinema-stsymphorien.esy.es/, merci de vos réponse.

A voir également:

1 réponse

Réponse 1 / 1
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
Modifié par Pitet le 30/01/2015 à 11:11
Salut,

Une solution possible est d'appliquer par exemple une largeur minimum à ton balise nav : 
nav { min-width: 1500px; }

Tu auras alors une scrollbar verticale en réduisant ta fenêtre sous cette largeur.

Tu as également une erreur de structure dans ton html : une balise <li> doit normalement être un enfant direct de la balise <ul>.
Ton menu devrait donc normalement être construit comme ceci : 
<nav>
    <ul>
        <li><a href="lien1">Menu1</a></li>
        <li><a href="lien2">Menu2</a></li>
        <!-- ... etc ... -->
    </ul>
</nav>


Bonne journée
0

Discussions similaires

Ligne horizontale sur écran TV
Jonh9205 -
REPTEl -

8 réponses