Discussion :

[SlimEmShady]

Bonjour à tous !

Je sollicite votre aide aujourd'hui, car je suis en train de construire un site pour une association.
Je dispose d'une page d'accueil, sur laquelle on retrouve tous les modules du site qu'on peut visiter.
Sur chaque module, je ne souhaite pas avoir de lien qui permettre d'accéder aux autres, mais simplement une flèche vers la gauche qui permette de retourner à l'accueil.

J'ai déjà une image de cette flèche, et ma page est construite, avec un titre en haut de la page.
J'aimerais que cette flèche soit à gauche de la page, tout en haut, alignée avec mon titre.
Cependant, dès que je mets l'image, mon titre descend sous l'image et ce n'est vraiment pas esthétique..

Mon 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
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<div class="badminton">
	<a href="index.php?uc=accueil"><img src="vue/img/precedent.png" alt="precedent" class"precedent"></img></a>
	<div class="headerBad">
		<div class="avantTitre"></div>
		<h1>BADMINTON</h1>
		<div class="apresTitre"></div>
	</div>
 
	<div class="container">
		<p>Tous les mercredis, de <b>20h30 à 22h30</b>, venez jouer au Badminton Détente à la Salle Polyvalente du Puy Saint Bonnet.
		<br/>Sans professeur, dans une ambiance conviviale, le partage de savoirs à travers de matchs est au rendez-vous.
		<br/>Renseignements et inscriptions le <b>Mercredi 9 Septembre 2015</b> pour les plus de 14 ans.
		<br/>Vous avez la possibilité de participer à un cours d'essai en Septembre.
		<br /><br />(Tarif 35€ (dont 10€ de carte d'adhérent)</p>
	</div>
 
	<div class="bad1">
		<img src="vue/img/bad.png">
	</div>
 
	<div class="filet">
		<img src="vue/img/filet.png">
	</div>
 
	<div class="bad2">
		<img src="vue/img/bad2.png">
	</div>
</div>

[NoSmoking]

Bonjour,
pas bien compris la construction mais je dirais pourquoi ne pas mettre ton <a href="index.php? dans la <div class="avantTitre"></div> ?

Quoiqu'il arrive sans le CSS il va être difficile de t'en dire plus.

[SlimEmShady]

Bonjour,

Merci pour ta réponse, ça m'a pas mal aidé !
Du coup j'ai mis mon lien/image dans ma <div class="avantTitre">, puis dans une <div> à qui j'ai attribué une position relative pour pouvoir déplacer mon image sans bouger mon titre !

Donc là tout est bien centré, mon image est bien à gauche etc...

Merci beaucoup, je passe le sujet en Résolu, et je mets mon code !

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<div class="headerBad">
		<div class="avantTitre">
			<div class="precedent">
				<br /><a href="index.php?uc=accueil"><img src="vue/img/precedent.png" alt="precedent" class"precedent"></img></a>
			</div>
		</div>
		<h1>BADMINTON</h1>
		<div class="apresTitre"></div>
</div>

Code :

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

1
2
3
4
5
 
.precedent {
    position: relative;
    margin-left: -200px;
}

[NoSmoking]

dans cette ligne

Code html :

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

<br /><a href="index.php?uc=accueil"><img src="vue/img/precedent.png" alt="precedent" class"precedent"></img></a>

• Le <br> peut être avantageusement remplacé par un margin ou padding qui sont fait pour cela

• Une balise <image> est auto-fermante donc ne nécessite pas de </img>.
• Mettre une image pour représenter < cela reste moyen quand même.

• Pourquoi répéter la class="precedent" qui est déjà sur le conteneur, à quoi sert-il d'ailleurs ?

[SlimEmShady]

• J'avais essayé un margin, malheureusement mon image ne bougeait pas. Je connais pas bien le fonctionnement du padding, c'est comme un margin ?
• Je m'en doutais pour la balise <img>, je ne me souvenais plus, merci ^^
• Comment peut-on faire autrement ? Je suis preneur, ça me permettrait de mettre une animation sur cette flèche :p
• Sans le conteneur mon image ne bougeait pas, par contre c'est vrai que mettre la class="precedent" sur l'image était inutile, vu qu'elle était déjà sur le conteneur

Merci pour l'aide

EDIT : Avec le padding ça marche comme je veux, cool