Discussion :

[lv3895]

Salut à tous.

Je voudrais que dans mon header il y est (M c'est les marges pour que le site soit centré, lien a b et c sont des images qui link) :

<- M -><----------------logo de titre----------------><- M ->
<- M -><lien a><lien b><lien c><-Vous êtes bien Intel-><- M ->

Les images peuvent se coller entre elles parque je fais un vertical-align: bottom; ou il y avait toujours un espace supplémentaire. Maintenant les images peuvent se toucher mais si le texte disposez sur le même plan horizontal que les images de liens ne prend pas toute la place disponible, les images s'écarte, un peu comme du texte qui justifié. Ca donne a peu près :

<- M -><----------------logo de titre----------------><- M ->
<- M -><lien a> <lien b> <lien c> <-Vous êtes Intel-><- M ->

Mon code CSS :

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
body
{
color: #dcdcdc;
margin: auto;
width: 790px;
background-image: url("images/fond.jpg");
background-attachment: fixed;
background-repeat: repeat-x;
font-family: "Comic Sans MS", serif;
}
 
#header
{
margin-top: 15px;
font-size: 0.9em;
}
 
#header table
{
text-align: left;
border: none;
width: 790px;
border-collapse: collapse; 
background-color: #3d3d3d;
}
 
#header img
{
border-collapse: collapse;
border: none;
display: block;
border-collapse: collapse; 
vertical-align: bottom;
}

Et le code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="header">
	<a href="index.php"><img src="images/titre.png" alt="Kagemusha"/></a>
<table>
	<tr>
		<td></td><td></td>
		<td><a href="acceuil.php"><img src="images/acceuil.png" alt="Acceuil" /></a></td>
		<td><img src="images/salon.png" alt="Salon"/></td>
		<td><img src="images/chambres.png" alt="Chambres"/></td>
		<td>
//Le texte qui est obligé de faire une certaine taille :oops:
		</td>
	</tr>
</table>
</div>

Merci de votre aider et désoler du manque de clarté que je dois avoir.
PS : est-ce qu'il serait possible, donc, de coller ces images de lien a gauche du bloc et si possible vers le haut pour que quand mon texte prend trop de ligne ca ne fasse pas

<- M -><----------------logo de titre----------------><- M ->
<- M -><--Marge entre le logo et les liens-><-Ligne A-><- M ->
<- M -><lien a>----<lien b>----<lien c>----<-Ligne B-><- M ->
<- M -><----Marge avant la fin du bloc----><-Ligne C-><- M ->

Merci.

[ledisciple]

c'est ce que tu souhaites?

Code :

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

1
2
3
4
5
6
7
8
9
<div style="width:100%;border:1px solid red">
	<div style="margin:1%;">
		<div style="margin-bottom:1%;width:100%;text-align:center;">logo de titre</div>
		<div style="float:left;width:20%;">lien a</div>
		<div style="float:left;margin-left:1%;width:20%;">lien b</div>
		<div style="float:right;width:20%;">Vous êtes Intel</div>
		<div style="float:right;margin-right:1%;width:20%;">lien c</div>
	</div>
</div>

Par contre je te laisse le soin d'externalisé la feuille de style, car la je vais manger ...

[lv3895]

Salut. J'ai essayé d'appliquer des floats aux liens mais ca marche pas. J'ai fait des screens pour vous montrer. Je les link comme les images sont assez large :
Quand la longueur du texte est bonne
Quand le texte est trop court horizontalement, création d'une marge entre les liens que je souhaiterais enlevais.
Quand le texte est trop long verticalement, création d'une marge entre le logo et les liens que je souhaiterais enlevais.
En fait le fond est de la même couleur que le bord des images, mais dans le cas ou la disposition est telle que je le veux les images se touchent totalement, sans aucune marge. Merci de votre aide.

[lv3895]

Salut, j'ai essayé de mettre des margin: 0px et des padding:0px sur mes éléments du header mais ca ne change rien...

[Macmillenium]

Bonjour,

On peut voir ton nouveau code (X)HTML/CSS suite à la proposition de ledisciple ?

[lv3895]

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
107
108
109
110
111
body
{
color: #dcdcdc;
margin: auto;
width: 790px;
background-image: url("images/fond.jpg");
background-attachment: fixed;
background-repeat: repeat-x;
font-family: "Comic Sans MS", serif;
}
 
#header
{
margin: 0px;
padding: 0px;
margin-top: 15px;
font-size: 0.9em;
}
 
#header table
{
margin: 0px;
padding: 0px;
text-align: left;
border: none;
width: 790px;
border-collapse: collapse; 
background-color: #3d3d3d;
}
 
#header img
{
margin: 0px;
padding: 0px;
border-collapse: collapse;
border: none;
display: block;
border-collapse: collapse; 
vertical-align: bottom;
}
 
.headerlink
{
float: left;
height: 70px;
width: 158px;
}
 
.partie
{
font-size: 1.2em;
margin-top: 5px;
padding: 5px;
text-align: center;
background-color: #3d3d3d;
margin-bottom: 5px;
}
 
.partie a
{
font-size: 1.1em;
color: #003a99;
}
 
 
#footer
{
font-size: 0.9em;
text-align: center;
background-color: #3d3d3d;
padding: 3px;
padding-bottom: 90px;
margin-bottom: 25px;
background-image: url("images/footer.png");
background-repeat: no-repeat;
background-position: center bottom;
}
 
#footer a
{
font-size: 0.85em;
color: #7fe5e5;
}
 
#presentation
{
border: 2px black inset;
margin: auto;
color: #3d3d3d;
width: 90%;
background-color: #dcdcdc;
padding-bottom: 20px;
padding-top: 5px;
margin-bottom: 5px;
}
 
#presentation img
{
margin-top: 40px;
width: 200px; 
height: 200px;
border-collapse: collapse; 
border: none;
float: left;
}
 
#presentation a
{
color: #000000;
font-size: 1.05em;
}

J'ai essayé d'appliquer header link directement sur les images de liens

Code :

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

1
2
3
		<td><a href="acceuil.php"><img src="images/acceuil.png" class="headerlink" alt="Acceuil"/></a></td>
		<td><img src="images/salon.png" class="headerlink" alt="Salon"/></td>
		<td><img src="images/chambres.png" class="headerlink" alt="Chambres"/></td>

Ou en div ou en span autour des liens :

Code :

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

1
2
3
<div	class="headerlink"><td><a href="acceuil.php"><img src="images/acceuil.png"  alt="Acceuil"/></a></td>
		<td><img src="images/salon.png" alt="Salon"/></td>
		<td><img src="images/chambres.png" alt="Chambres"/></td></div>

J'ai aussi essayé de remplacer la class headerlink par

Code :

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

1
2
3
4
5
6
.header a img
{
float: left;
height: 70px;
width: 158px;
}

Aucun de mes essaient n'a fonctionnés "correctement", pas eu d'amélioration, soit sa ne changeait rien, soit ca créer des marges supplémentaires

Merci de votre aide.

[ledisciple]

excuse moi, mais je ne vois pas trop le rapport avec le code que je t'ai donné ...

[lv3895]

Salut. C'est que ca correspond pas vraiment a ce que j'ai besoin
Pour l'instant tous les rapports sont réfléchis pour un cadre de 790px de large. Sans bordure, donc

Code :

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

1
2
<div style="width:100%;border:1px solid red">
	<div style="margin:1%;">

N'irait pas. Ou alors c'est pour 100% des 790px?
Il faut aussi qu'il n'y ait aucune bordure entre les images du header. Donc ;

Code :

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

<div style="margin-bottom:1%;width:100%;text-align:center;">logo de titre</div>

Mais bon, c'est pas ca qui devrait poser problème. On arrive a la partie problématique :

Code :

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

1
2
3
4
		<div style="float:left;width:20%;">lien a</div>
		<div style="float:left;margin-left:1%;width:20%;">lien b</div>
		<div style="float:right;width:20%;">Vous êtes Intel</div>
		<div style="float:right;margin-right:1%;width:20%;">lien c</div>

Et bien, là, à part les floats, je vois pas la différence avec mon codes
Quand je mettais :

Code :

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

1
2
3
4
5
6
.header a img
{
float: left;
height: 70px;
width: 158px;
}

158 c'est même 20% de 790 :B
Voila. Merci de m'aidé et n'hésite pas à me dire si il y a un point sur lequel je me suis trompé.

[lv3895]

Problème toujours d'actualité. On dirait qu'il applique un margin: auto a tout les éléments du header...