18041 sujets

Questions générales et questions de débutants

[Résolu] Mettre une barre de navigation et une image sur même ligne

Bonjour à tous,

J'ai un petit souci au niveau du codage HTML et CSS pour avoir une barre de navigation et une image côte à côte sur une ligne horizontale. J'ai essayé de trouver sur le net des explications, mais soit c'était mal expliqué, soit je n'ai rien compris. Bref, je suis dans l'impasse.
J'ai failli abandonner et ne pas mettre l'image, mais ça n'a pas le même rendu sur la page.

Je vous donne donc mes codes HTML et CSS du Header

<header>
		<div class="titre_principal">
				<h1>Chambres d'hôtes "fshdf"</h1><h2>Hautes Pyrénées <img src="image/cercle.png" alt="icone"> La Barthe de Neste <img src="image/cercle.png" alt="icone"> Saint Arroman  </h2>
		</div>

		<p class="flotte2"><img src="image/croix.png" class="croix1" alt="croix1" title="croix-occitane"/></p>	
			<nav>
			<ul id="nav"><!--liste non ordonnée-->
					<li id="en-cours"><a href="index.html">accueil</a></li> 
					<li><a href="maison.html"> maison</a></li>
					<li><a href="tourisme.html">tourisme</a></li>
					<li><a href="contact.html">contact &amp; tarifs</a></li>
					<li><a href="acces.html">accès</a></li>
					<li><a href="livredor.php">livre d'or</a></li>
			</ul>
			</nav>
</header>





nav{
position:relative;}
nav ul {
    margin-top:0px;
	float:right;
	margin-right:50px;
	}
nav li
{
display:inline-block;
padding:1px;
	}
nav li:hover{
	box-shadow:0 2px 5px #1c1a19;
	}
nav a{
	font-weight:400;
	text-transform:uppercase;
	font-size:14px;
	color:#FFFFFF;
	padding:5px;
	text-decoration:none;
	margin:2px;
	}
#nav #en-cours a {
box-shadow:0 2px 5px #1c1a19; 
   }
.croix
{float: left;}



En plus, je n'arrive pas à coloriser la syntaxe, je ne sais pas si ça va être lisible: j'ai pourtant mis le code entre les deux balises, mais ça ne doit pas être comme ça qu'il faut faire; Vous voyez déjà que ça va être difficile avec moi... je n'ai pas mis le code css de la div principale pour ne pas surcharger le post.
Merci à vous pour vos éventuelles suggestions

Marie
Bonjour et bienvenue sur le forum,

Je dirais que pour faire ce que tu souhaites (et si j'ai bien compris le problème), il te suffit juste d'utiliser deux float:left, un sur ton p.flotte2 (ou sur ton img.croix1 si tu vires ton p) et un sur ta nav.

Voir EXEMPLE
Bonsoir,

et merci beaucoup pour ta réponse rapide. Je n'ai pas le temps de regarder ça ce soir, donc je ne la marque pas encore comme résolue, mais j'essaye ça demain et j'espère pouvoir le faire...

Bonne soirée

Marie
Re bonsoir,

Je viens de jeter un oeil au code (ça m'a démangé car ça fait un moment que je bute dessus et je pensais avoir tout essayé) ... Tu as très bien compris ce que je voulais faire, c'est exactement ça;

Après, je vais le mettre en pratique et essayer de voir et comprendre ce qui me posait problème.

Merci encore, je te tiens au courant..
Re re bonsoir,

En fait, je viens d'essayer ton code tout seul sur une page car sur la mienne, il ne marchait pas et que je pensais que j'avais fait une erreur ailleurs qui me bloquait tout;

Malheureusement, en copiant exactement le code css et modifiant un peu le code html pour que les icones, couleurs et marges correspondent à ce que je voulais, la croix est toujours en dessous de ma barre de navigation.

Je te donne les code tel que je les ai mis sur cette nouvelle page pour voir si tu trouves ce qui cloche... ta copie d'écran était parfaite mais je n'arrive pas au même résultat...

Merci encore de regarder tout ça

Marie
<body> 	
		<div id="bloc_page">	
			<header>
				<div class="titre_principal">
				<h1>Chambres d'hôtes "fshdf"</h1>
				<h2>Hautes Pyrénées <img src="image/cercle.png" alt="icone"> La Barthe de Neste <img src="image/cercle.png" alt="icone"> Saint Arroman</h2>
				</div>

				<p class="flotte2"><img src="image/croix.png" class="croix1" alt="croix1"/></p>	
				<nav>
					<ul id="nav"><!--liste non ordonnée-->
						<li id="en-cours"><a href="index.html">accueil</a></li> 
						<li><a href="maison.html"> maison</a></li>
						<li><a href="tourisme.html">tourisme</a></li>
						<li><a href="contact.html">contact &amp; tarifs</a></li>
						<li><a href="acces.html">accès</a></li>
						<li><a href="livredor.php">livre d'or</a></li>
					</ul>
				</nav>
			</header>
		</div>
	</body>	



h1{
	font-size:25px;
	color:#FFFFFF;
	margin-right:50px;
	display:inline;
	line-height:100px;
}

h2{
	font-size:17px;
	color:#FFFFFF;
	padding-left:45px;
	display:inline;
}
body{
 background-color:#848484; }

.titre_principal{ 
 margin-bottom: 20px; }

.titre_principal img{ 
 width: 15px; }

.flotte2{ 
float: left;}

.flotte2 img {
 height: 25px; }

nav{
  position:relative;
}
nav ul {
  margin-top:0px;
  float:left;
  margin-right:50px;
}
nav li{
  display:inline-block;
  padding:1px;
}
nav li:hover{
  box-shadow:0 2px 5px #1c1a19;
}
nav a {
  font-weight:400;
  text-transform:uppercase;
  font-size:14px;
  color:#FFFFFF;
  padding:5px;
  text-decoration:none;
  margin:2px;
}
#nav #en-cours a {
  box-shadow:0 2px 5px #1c1a19; 
}
Bonjour,

Ton code est pas mal du tout, mais (parce qu'il y a un mais forcément), il te faut savoir que les éléments HTML ont par défaut déjà des propriétés CSS que les navigateurs ajoutent.
Tu peux regarder ces propriétés en faisant un clic-droit sur l'élément sur ta page, puis Inspecter l'élément (en fonction du navigateur, le terme peut varier).
Tu verras par exemple que les balises <p>, ou <hn> ont des marges hautes et basses par défaut, et c'est ce qui provoque ton décalage.

La solution toute bête que j'utilise pour remédier à ça, c'est le "Reset CSS" :
* { margin:0; padding:0; }


Comme je l'ai déjà dit, certains n'apprécient pas ce reset un peu radical, il en existe d'autres... Tu peux également juste le faire sur un élément comme le <p>...

EDIT : évite de surcharger un sélécteur avec un id, comme :
#nav #en-cours a {
  box-shadow:0 2px 5px #1c1a19; 
}

L'id devant être unique, il te suffira simplement d'utiliser :
#en-cours a {
  box-shadow:0 2px 5px #1c1a19; 
}

Et pour tout te dire, on essaie d'éviter l'utilisation des id en CSS, le sélecteur étant un peu trop "lourd" en terme de ressources (mais ça n'est que de l'optimisation ça)
Modifié par SolidSnake (04 Nov 2015 - 07:59)
Bonsoir,

et merci beaucoup pour ton explication claire: je ne comprenais pas ce "reset css", je vais aller voir un peu tout ça de près et te donne des nouvelles dès que j'arrive enfin à mettre cette croix à sa place...
Ensuite, je ne suis pas forcément au top sur le html et css, mais je reverrai tous mes codes quand la page sera telle que je la veux en essayant de corriger tout ça..
Merci encore

Marie
Encore moi,

J'ai mis en fait le { margin:0; padding:0; } sur p et ça marche super!

J'ai appris quelque chose aujourd'hui et te remercie de ta réponse. Je marque le sujet en résolu.

Maintenant, je vais continuer et m'attaquer au css, et peut être que j'aurai besoin de tes lumières une autre fois.

Merci encore

Marie
Sujet clos
Aller à