Coller deux liens-images verticalement.

**Bachibouzooo** · 28/03/2015, 13h54

Bonjour !

ça fait un certain temps que j'ai commencé mon site web et j'essaie de coller deux images - liens verticalement, sans AUCUN espace entre les deux... Malheureusement j'ai beau dans mon CSS mettre :

Code :

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

1
2
3
4
5
6
7
8
9
10
img{
	margin: 0px;
	border: none;
	padding: 0px;
}
a{
	margin: 0px;
	padding: 0px;
	border: none;
}

Rien n'y fait, toujours deux millimètres entre les deux images... Et je ne sais pas si cet espace viens des images, des liens ou bien des deux.
Ces deux images sont dans un menu <nav>, peut-être devrais-je rajouter un <div> ?
Merci d'avance pour votrz aide

Invité · 28/03/2015, 16h00

Bonjour,
les <img /> sont de type display:inline-block;.
De fait, un espace se crée automatiquement si les 2 <img /> sont écrits sur 2 lignes :

Code html :

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

1
2
<img src="img1.jpg" />
<img src="img2.jpg" />

La solution = les écrire sur la même ligne :

Code html :

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

<img src="img1.jpg" /><img src="img2.jpg" />

Si ça ne correspond pas à ton problème :

poste aussi ton code HTML associé au CSS.
et une copie d'acran, éventuellement.

**Bachibouzooo** · 28/03/2015, 17h32

Merci d'avoir répondu !
Non, mes images sont sur la même ligne mais elles sont des liens. ça donne ça :

Code html :

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

<nav><a href="#"><img src = "../images/forum.jpg" /></a><a href = "#"><img src = "../images/actus.jpg" /></a> ... </nav>

Dans mon css je mets nav{width: 20%;} Ce qui aligne les images verticalement, peut-être y a-t-il un autre moyen de le faire...

En copie d'écran ça donne ça :
Nom : 1427480281-plop.png
Affichages : 1022
Taille : 77,6 Ko

Nom : 1427480281-plop.png
Affichages : 1022
Taille : 77,6 Ko

Merci d'avance.

Invité · 28/03/2015, 17h49

Il faudrait voir le code complet : CSS + HTML.

+ les vrais images !

**Bachibouzooo** · 28/03/2015, 18h39

Les images je les avais simplifiées pour que ce soit plus clair mais si vous voulez je les remets.
On a donc l'apparence du site avec le bel espace entre les images :
Nom : 1427564120-capturesite.png
Affichages : 1010
Taille : 326,3 Ko

Nom : 1427564120-capturesite.png
Affichages : 1010
Taille : 326,3 Ko

Voici le code CSS complet :

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
header{
	background-color: rgb(112,146,190);
}
h1{
	color: #ececec;
	text-shadow:1px 1px #000;
	font-size: 4em;
	margin: 0;
	text-align: center;
}
h2{
	color: yellow;
	text-align: center;
}
body{
	background-image: url(../images/superfond.png);
	margin: 0;
}
 #infomaintenance{
	font-size: 1.3em;
	text-decoration: underline;
	color: navy;
	text-align: center;
}
.infomaintenancep{
	text-align: center;
}
#ladate{
	position: absolute;
	top: 97px;
	left: 10px;
	color: white;
	border: 1px solid white;
}
p{
	margin-left: 30px;
}
footer{
	background-color: rgb(3,125,186);
	color: white;
	margin: 0;
	border-top: 5px solid rgb(0,45,145);
	width: 100%;
	position: fixed;
    bottom: 0px;
}
img{
	margin: 0px;
	border: none;
	padding: 0px;
}
a{
	margin: 0px;
	padding: 0px;
	border: none;
}
br{
	margin: 0px;
	padding: 0px;
	border: none;
}
nav{
	margin: 0px;
	padding: 0px;
	border: none;
	width: 20%;
}

Puis le code HTML (et PHP) complet :

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
<!DOCTYPE HTML>
<html>
	<head>
		<meta charset = "utf-8" />
		<link rel = "stylesheet" href = "../styles/style.css" />
		<title>ACTUALITES</title>
	</head>
	<body>
	<header>
<h1>ACTUALITES</h1>
<h2>Bienvenue sur mon site !</h2>
	</header>
		<?php 
                $jour = date("d");
                $mois = date("m");
                $annee = date("Y");
                $heure = date("H") + 1;
                $minute = date("i");
                ?>
		<nav><a href="#"><img src = "../images/forum.jpg" /></a><a href = "#"><img src = "../images/urnepol.jpg" /></a> <!-- D'autres rubriques à venir. !--></nav>
	<div id = "ladate"><?php echo "Nous sommes le $jour/$mois/$annee et il est $heure h $minute.";?></div>
 
	<div id = "infomaintenance">Information</div><br /><br />
	<p class = "infomaintenancep">Le site est en cours de construction. Il sera en ligne cet été.<br /></p>
 
	=== ZONE DE TEST === <br />
	<?php echo "LE PHP EST <strong>OPERATIONNEL</strong>!<br />";
                
                ?>
 
	<?php include ("footer.php"); ?> <!-- Un footer très simple !-->
	</body>
 
</html>

Voilà

Il y a certainement un truc que je n'ai pas fait dans les règles de l'art, je vous laisse me remonter les bretelles

**NoSmoking** · 28/03/2015, 21h29

Bonjour,

Pourquoi je ne peux pas enlever l'espacement sous mon image ?.

Invité · 29/03/2015, 06h37

NoSmoking

Comme quoi, il faut toujours s'interesser aux questions des autres !

Car ça répond à un problème que j'avais aussi sur un de mes sites depuis longtemps (et que j'avais zappé !)...
... et que je viens donc de corriger

**Bachibouzooo** · 29/03/2015, 12h51

Merci beaucoup !!! ça marche enfin

Coller deux liens-images verticalement.

CSS

Discussions similaires

Partager

Partager