Placez un bouton à gauche d'un cadre

romain444444 Messages postés 14 Statut Membre -
Romain444444 - 19 avr. 2018 à 20:07

Bonjour à tous,

Je souhaiterez placer le bouton (bouton-facebook) a gauche mais impossible, il reste au milieux, pourriez vous m'éclairer ?

html

<blockquote>
<div id="moncadre3">
<p>
	<div id="title-me-contacter-si"><a>N'hésitez pas à me contacter si:</a></div>
	<div id="text-contact"> <br>- vous souhaitez plus d'information.</br>
							<br>- vous souhaitez reserver.</br>
							<br>- vous souhaitez personnaliser une formule</br></div>
							

	<div id="bouton-facebook"><a target=blank href="https://www.facebook.com/romain.lavabre"><img src="logo-facebook.jpg" alt="Me rejoindre sur facebook"/></a></div></td>
								
</p>
</div>
</blockquote>

css

/*CADRE 3--------------------------------------------------------------------------------------*/
div#moncadre3 {
	margin-left: 50%;
	margin-bottom: %;
	border:2px solid black;
	width:500px;
	height:500px;
	background-color: white;
	padding-bottom: 5%;	
}

div#title-me-contacter-si {
	text-align: center;
	font-size: x-large;
}

div#text-contact {
	font-size: x-large;
	text-align: left;
	margin-left: 5%;
	margin-top: 10%;
}

/*BOUTON FACEBOOK--------------------------------------------------------------------------------------------------*/
div#bouton-facebook {
	text-align: left;
}

Merci d'avance !

Afficher la suite

3 réponses

jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832

Bonjour,

Le code que tu nous montres place correctement le bouton à gauche.
Pense à vider le cache de ton navigateur.

NB: au passage....Tu as laissé une balise </td> en trop dans ton code.

romain444444 Messages postés 14 Statut Membre

Merci de ta reponse ! pourquoi faut il vider son cache ?
0

romain444444 Messages postés 14 Statut Membre

après avoir vidé mon cache ça ne fonctionne toujours pas..., au cas ou voici l'entièreté de ma page:

html

<!DOCTYPE html>

<head>

<meta charset="utf-8"/>
<link rel="stylsheet" href="styles.css" type="text/css"/> 
	<title>Contact</title>
	
<style>
div#logo-header {
    text-align: center;
}
ul {
	text-align: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
	display:inline-block;
	vertical-align:top;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

body {
    background-color : #32CD32;
}

/*CADRE 1-----------------------------------------------------------------------------------------------*/
div#moncadre1 {
	margin-left: 5%;
	border:2px solid black;
	width:500px;
	height:200px;
	background-color: white;
	padding-bottom: 5%;
	float: left;
}

div#title-contact-tel {
	text-align: center;
	font-size: x-large;
}

div#image-contact-tel {
	margin-left: 5%;
	margin-top: 10%;
	float: left;
}

div#tel {
	margin-top: 18%;
	margin-left: 30%;
	font-size: x-large;
}

/*CADRE 2-------------------------------------------------------------------------------------------*/
div#moncadre2 {
	margin-right: 25%;
	margin-left: 5%;
	margin-top: 2.5%;
	border:2px solid black;
	width:500px;
	height:200px;
	background-color: white;
	padding-bottom: 5%;
	float: left;
}

div#title-contact-mail {
	text-align: center;
	font-size: x-large;
}

div#image-contact-mail {
	margin-top: 10%;
	margin-left: 5%;
	float: left;
}

div#mail {
	font-size: x-large;
	margin-left: 30%;
	margin-top: 18%;
}

/*CADRE 3--------------------------------------------------------------------------------------*/
div#moncadre3 {
	margin-left: 50%;
	margin-bottom: %;
	border:2px solid black;
	width:500px;
	height:500px;
	background-color: white;
	padding-bottom: 5%;	
}

div#title-me-contacter-si {
	text-align: center;
	font-size: x-large;
}

div#text-contact {
	font-size: x-large;
	text-align: left;
	margin-left: 5%;
	margin-top: 10%;
}

/*BOUTON FACEBOOK--------------------------------------------------------------------------------------------------*/
div#bouton-facebook {
	margin-right: 60%;
	text-align: left;
}

</style>
</head>
<body>

<div id="logo-header">
	<img src="https://4.bp.blogspot.com/-1gCZ_dWlZWY/VPxO0w1eygI/AAAAAAAACqE/fYakcxRkf1U/s1250/cooltext115245995745692.jpg" alt="Logo escalade aventure"/>
</div>


<ul>
  <li><a href=Accueil.html>Accueil</a></li>
  <li><a href=Activités.html>Activités</a></li>
  <li><a href=Contact.html>Contact</a></li>
</ul>

<blockquote>
<div id="moncadre1">
<p>
	<div id="title-contact-tel"><a>Contact par téléphone</a></div>
	<div id="image-contact-tel"><img src="image-contact-tel.jpg" alt="image telephone"></div>
	<div id="tel"><a>06.</a></div>
</p>
</div>
</blockquote>

<blockquote>
<div id="moncadre2">
<p>
	<div id="title-contact-mail"><a>Contact par mail</a></div>
	<div id="image-contact-mail"><img src="me-contacter-mail.jpg" alt="image mail"/></div>
	<div id="mail"><a>@gmail.com</a></div>
</p>
</div>
</blockquote>
	
<blockquote>
<div id="moncadre3">
<p>
	<div id="title-me-contacter-si"><a>N'hésitez pas à me contacter si:</a></div>
	<div id="text-contact"> <br>- vous souhaitez plus d'information.</br>
							<br>- vous souhaitez reserver.</br>
							<br>- vous souhaitez personnaliser une formule</br></div>
</p>							
	<div id="bouton-facebook"><a target=blank href="https://www.facebook.com/"><img src="logo-facebook.jpg" alt="Me rejoindre sur facebook"/></a></div>
</div>
</blockquote>


</body>

romain444444 Messages postés 14 Statut Membre

Du coup ça ne fonctionne toujours pas
0

Réponse 2 / 3
Volpe_Lupo Messages postés 617 Statut Membre 210

Bonjour,
As-tu essayé de voir dans un navigateur avec l'inspecteur s'il te donne le même sélecteur CSS que ton div#bouton-facebook ou bien si ta div n’occupe pas la largueur totale de la page ?

Au pire, tu peux tenter de déplacer ton bouton avec des marges gauche négatives ou voir en modifiant le display pour ta div dans ton css si il veut bouger
0
Réponse 3 / 3
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention 738

Bonjour
- #moncadre3 a un margin-left à 50 %
- #bouton-facebook est a l'interieur de #moncadre3

donc ton bouton facebook sera toujours au centre de ta page car le moncadre3 commence au centre de la page

tu a des erreurs ici
margin-bottom: %; (pas de valeur renseignée)
un margin-right ne sert a rien quand le text-align est en left

donc pour que le bouton FB soit a gauche il faut le sortir de la div moncadre3 (html) car celle ci commence au centre de la page

Dernier conseil : pense que la ton design n'est pas responsive (affichage dans les mobiles, tablettes etc) utilise plutot des width en % combinés avec du min-width ainsi que des @media screen
0
1. Romain444444
  
  Salut merci beaucoup pour vos réponse !
  En effet j'ai déserté le forum mais pas dans le but de vous ignorer !
  
  Merci pour vos réponse je testerai tout ça !
  
  0

Placez un bouton à gauche d'un cadre

3 réponses

Discussions similaires

Newsletters