Menu

Placez un bouton à gauche d'un cadre

romain444444 11 Messages postés mercredi 11 avril 2018Date d'inscription 15 avril 2018 Dernière intervention - 14 avril 2018 à 22:50 - Dernière réponse :  Romain444444
- 19 avril 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 

7 réponses

Répondre au sujet
jordane45 20564 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 20 avril 2018 Dernière intervention - 15 avril 2018 à 00:07
0
Utile
3
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 11 Messages postés mercredi 11 avril 2018Date d'inscription 15 avril 2018 Dernière intervention - 15 avril 2018 à 00:21
Merci de ta reponse ! pourquoi faut il vider son cache ?
romain444444 11 Messages postés mercredi 11 avril 2018Date d'inscription 15 avril 2018 Dernière intervention - 15 avril 2018 à 00:39
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 11 Messages postés mercredi 11 avril 2018Date d'inscription 15 avril 2018 Dernière intervention - 15 avril 2018 à 01:34
Du coup ça ne fonctionne toujours pas
Commenter la réponse de jordane45
Volpe_Lupo 454 Messages postés vendredi 29 janvier 2016Date d'inscription 20 avril 2018 Dernière intervention - Modifié par Volpe_Lupo le 18/04/2018 à 14:20
0
Utile
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
Commenter la réponse de Volpe_Lupo
animostab 2841 Messages postés jeudi 10 mars 2005Date d'inscription 20 avril 2018 Dernière intervention - Modifié par animostab le 19/04/2018 à 15:17
0
Utile
1
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

Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
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 !
Commenter la réponse de animostab