Espacement entre une image et un bouton de menu

**tom315** · 17/09/2014, 22h50

Bonjour a tous,
J'ai un petit soucis , j'ai créer mon menu et en haut a gauche j'y ai mis mon logo puis centrer au milieu j'ai mis 4 boutons or j'aimerais qu'une distance minimale de 20px se trouve entre mon logo et le premier bouton du menu ( le plus a gauche) pour chaque type d'écran et même quand l'on redimensionne la fenêtre a l'aide de la souris or je n'y arrive pas.
Voici mon code html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="header">
	<nav>
		<ul >
			<img src="logo1.png" alt="logo Thomas" id="logo">
			<li  id="Accueil"><a href="#firstPage" >Présentation</a></li>
			<li  id="Actualites"><a href="#secondPage" >Formation</a> </li>
			<li  id="Produits"><a href="#3rdPage" >Competences</a> </li>
			<li  id="Contact"><a href="#4thPage" >Contact </a></li>		
			<p>  </p>	
		</ul>
		<br/>
	</nav>		
</div>

Merci d'avance pour vos réponses

**s0h3ck** · 18/09/2014, 03h20

Bonjour,

J'espère que tu n'appelles pas ça un code bien indenter.

Voici un exemple à suivre :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="header">
    <nav>
      <ul>
        <li><img src="logo1.png" alt="logo Thomas" id="logo">
        <li id="Accueil"><a href="#firstPage">Présentation</a></li>
        <li id="Actualites"><a href="#secondPage">Formation</a></li>
        <li id="Produits"><a href="#3rdPage">Competences</a></li>
        <li id="Contact"><a href="#4thPage">Contact</a></li>
      </ul>
    </nav>        
  </div>
</body>
</html>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* Solution A
 
#Accueil {
  margin-top: 20px;
}
 
*/
 
/* Solution B
 
#logo {
  display: block;
  margin-bottom: 20px;
}
 
*/
 
/* Solution C
 
Comme img est un "inline" élément, tu pourrais le mettre à l'intérieur de l'élément p.
 
*/

Première remarque, votre code est invalide : « Element img not allowed as child of element ul in this context » dit W3C. Pour ce faire, vous pouvez par exemple mettre l'image dans une liste ou bien le sortir de la liste non ordonnée (voir plus haut). Voici le JS Bin.

Du coup, j'espère que ça répond à quelques ambiguités

Bonne journée,
s0h3ck.

**tom315** · 18/09/2014, 22h16

Merci pour ta réponse et pour tes conseils

mais mon problème n'est pas résolu
Voici un exemple pour illustrer mon problème:
J'aimerais que mon menu ai toujours cette tête la

Nom : logoexemple.png
Affichages : 330
Taille : 13,2 Ko

or quand je redimensionne la fenêtre avec ma souris sa donne sa

Nom : logoexemple2.png
Affichages : 324
Taille : 12,3 Ko

J'avais penser résoudre le problème avec un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
#logo{
  padding-right:20px;
}

Mais sa n'a pas marcher

**s0h3ck** · 19/09/2014, 13h03

@tom315,

Serait-il possible de nous envoyer le code de ta page et de préférence le lien de la page si possible?
J'ai l'impression que d'autres éléments sont mal configurés et viennent à l’encontre de ce que tu essayes d'obtenir comme résultat.

Merci de votre collaboration.

**tom315** · 20/09/2014, 13h21

Mon site n'est pas encore en ligne ducoup je vais poster tout le code ici

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" lang="fr" />
	<meta name="description" content="Portfolio ">
	<meta name="viewport" content="width=device-width ,  initial-scale=1 , , minimum-scale=0.25, maximum-scale=2.0"/>
	<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi"/>
	<link rel="shortcut icon" href="images/favicon.ico" />
	<title>Portfolio de Thomas</title>
	<link rel="stylesheet" type="text/css" href="../jquery.fullPage.css" />
	<link rel="stylesheet" type="text/css" href="accueil.css" />
	<!--[if IE]>
		<script type="text/javascript">
			 var console = { log: function() {} };
		</script>
	<![endif]-->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>	
	<script type="text/javascript" src="../jquery.slimscroll.min.js"></script>
	<script type="text/javascript" src="../jquery.fullPage.js"></script>
	<script type="text/javascript">
                $(document).ready(function() {
                        $('#fullpage').fullpage({
                                anchors: ['firstPage', 'secondPage', '3rdPage' , '4thPage'],
                                slidesColor: ['#3AD6D6', '#1BBC9B', '#7E8F7C', '#1BBC9B'],
                                css3: true                              
                        });
                });
        </script>
 
</head>
<body>
 <div id="header">
    <nav>
      <ul>
        <li><img src="logo1.png" alt="logo Thomas" id="logo">
        <li id="Accueil"><a href="#firstPage">Présentation</a></li>
        <li id="Actualites"><a href="#secondPage">Formation</a></li>
        <li id="Produits"><a href="#3rdPage">Competences</a></li>
        <li id="Contact"><a href="#4thPage">Contact</a></li>
      </ul>
    </nav>        
  </div>
<div id="fullpage">
	<div class="section " id="section0">
		<div class="intro">
			<h1>Présentation</h1>
			<div id="bloc_droit">
				<p>Je suis actuellement étudiant à l'ISEN de Brest, en deuxième année du Cycle Informatique et Réseaux (CIR).</p>
				<p>Je cherche, pour compléter ma troisième année à l'ISEN de Brest, une alternance de type " contrat de professionnalisation " dans le domaine de l'Informatique.</p>
				<p>Je souhaiterai particulièrement une alternance dans une entreprise où je pourrai travailler sur un ou plusieurs projets qui me permettront d'enrichir mon CV pour la suite de ma carrière.</p>
			</div>
		</div>
	</div>
	<div class="section" id="section1">
	    <div class="slide" id="slide1">
			<div class="intro">
				<h1>Ma Formation</h1>
			</div>
		</div>
	    <div class="slide" id="slide2">
			<h1>bloup</h1>
		</div>
	</div>
	<div class="section" id="section2">
		<div class="intro">
			<h1>bloup</h1>
		</div>
	</div>
	<div class="section" id="section3">
		<div class="intro">
			<h1>Contact</h1>
		</div>
	</div>
</div>
</body>
</html>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
@font-face { 
    font-family: "roboto";
    src: url('roboto.ttf');
  }
 
	/* Style for our header texts 
	* --------------------------------------- */
	h1{
		font-size: 5em;	
		font-family: arial,helvetica;
		color: #fff;
		margin:0;
		padding:0;
	}
	.intro p{
		color: #fff;
	}
 
	/* Centered texts in each section 
	* --------------------------------------- */
	.section{
		text-align:center;
	}
 
	/* Fixed header and footer.
	* --------------------------------------- */
	#header, #footer{
		font-family: roboto;
		font-size: 1em;
		position:fixed;
		height: 50px;
		display:block;
		width: 100%;
		background: #000000;
		z-index:9;
		text-align:center;
		color: #000000;
		padding: 20px 0 0 0;
	}
 
	#header{
		top:0px;
	}
	#footer{
		bottom:0px;
	}
 
 
	/* Bottom menu
	* --------------------------------------- */
	#infoMenu {
		bottom: 80px;
	}
	#infoMenu li a {
		color: #fff;
		z-index: 999;
	}
 
nav {
  width: 100%;
  height: 60px; 
  position: fixed; 
  top: 0;
  background: #000000;
}
 
nav ul {
  padding: 20px;
  margin: 0 auto;
  list-style: none;
  text-align: center;
}
nav ul li {
  display: inline-block;
  margin: 0 10px;
}
nav ul li a {
  padding: 10px 0;
  color: #6F7878;
  font-size: 1.3em;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.2s ease;
}
nav ul li a:hover {
  color: #FFFFFF;
}
a.active {
  border-bottom: 2px solid #ecf0f1;
}
 
#bloc_droit {
	position: right;
}
 
#logo{
	z-index: 9;
	position: absolute;
	top: 1.5%;
	left: 0%;
	width: 90px;
	display: inline;
	margin-right:60px; 
 
 
}

Ou sinon je peut t'envoyer par mp le dossier de mon site si tu préfère ?

Invité · 28/09/2014, 09h39

Envoyé par s0h3ck

Voici un exemple à suivre :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
[.....]
      <ul>
        <li><img src="logo1.png" alt="logo Thomas" id="logo">
[.....]

Bonjour s0h3ck,
tant qu'à donner un "exemple à suivre", fait en sorte que le code soit correct :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
[ ......]
      <ul>
        <li><img src="logo1.png" alt="logo Thomas" id="logo" /></li>
        <li>[.....]</li>
        <li>[.....]</li>
      </ul>
[.....]

<li> n'est pas une balise auto-fermante. Elle a besoin de </li>
<img.... /> si.

J'ajoute qu'en les balises <ul>...</ul>, on ne mets QUE des balises <li>...</li>.
Pas de <p>...</p>, donc.

Enfin, tu peux ajouter sur l'image le CSS :
width:100%; min-width:...px; max-width:...px; afin qu'elle s'adapte à son conteneur, lors du redimensionnement de la fenêtre.

Espacement entre une image et un bouton de menu

CSS

Discussions similaires

Partager

Partager