Placez un bouton à gauche d'un cadre

Fermé

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

A voir également:

3 réponses

Réponse 1 / 3

jordane45 Messages postés 38263 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 octobre 2024 4 694
15 avril 2018 à 00:07

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 11 Date d'inscription mercredi 11 avril 2018 Statut Membre Dernière intervention 15 avril 2018
Modifié le 15 avril 2018 à 00:22

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

romain444444 Messages postés 11 Date d'inscription mercredi 11 avril 2018 Statut Membre Dernière intervention 15 avril 2018
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 Messages postés 11 Date d'inscription mercredi 11 avril 2018 Statut Membre Dernière intervention 15 avril 2018
15 avril 2018 à 01:34

Du coup ça ne fonctionne toujours pas

Réponse 2 / 3

Volpe_Lupo Messages postés 530 Date d'inscription vendredi 29 janvier 2016 Statut Membre Dernière intervention 20 septembre 2020 210
Modifié le 18 avril 2018 à 14:20

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

Réponse 3 / 3

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié le 19 avril 2018 à 15:17

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

Romain444444
19 avril 2018 à 20:07

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 !

Discussions similaires

Où est la touche SHIFT sur mon clavier d'ordi ?

Aligner 2 photos côte à côte...

Bouton ON OFF, O ou I ?

problème de pixel

Quel est la touche shift sur le clavier