salut à tous ! je souhaite placer le bouton facebook à gauche de mon cadre en vain, pourriez vous m'aider ?

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:"><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

-
Edité par Romain44478965 14 avril 2018 à 22:53:58

T'entends quoi par "à gauche de mon cadre" ?

Dedans ou dehors ?
En haut ou en bas ?

https://jsfiddle.net/x8p1tbwx/8/

-
Edité par Syltaen 14 avril 2018 à 23:59:48

ah pardon ! à l’intérieur

Merci beaucoup pour tes propositions ! 

Quand je les mets dans script, seul la 2 apparaît au bon endroit (mais pas la ou je le souhaite), la 3 disparaît...

-
Edité par Romain44478965 15 avril 2018 à 0:57:42

J'ai trouvé la cause ! c'est le margin-right du cadre 2 (situé a gauche du cadre 3) qui influençait le contenue du cadre de droite, pourriez vous m'aidez à modifier cela ? si je l'enlève le cadre part à droite...

hmtl

<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>

css

/*CADRE 2-------------------------------------------------------------------------------------------*/
div#moncadre2 {
	margin-right: 10%;
	margin-left: 5%;
	margin-top: 1.5%;
	border: 2px solid black;
	width: 500px;
	height: 100px;
	background-color: white;
	padding-bottom: 5%;
	float: left;
	text-align: left;
}

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

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

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

Merci d'avance !

-
Edité par Romain44478965 16 avril 2018 à 2:34:13

J'ai trouvé la cause ! c'est le margin-right du cadre 2 (situé a gauche du cadre 3) qui influençait le contenue du cadre de droite, pourriez vous m'aidez à modifier cela ? si je l'enlève le cadre part à droite...

hmtl

<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>

css

/*CADRE 2-------------------------------------------------------------------------------------------*/
div#moncadre2 {
	margin-right: 10%;
	margin-left: 5%;
	margin-top: 1.5%;
	border: 2px solid black;
	width: 500px;
	height: 100px;
	background-color: white;
	padding-bottom: 5%;
	float: left;
	text-align: left;
}

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

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

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

Merci d'avance !

-
Edité par RomainLavabre il y a environ 6 heures

Désolé mais je ne comprend pas vraiment ce que tu veux.

En plus, tu nous parle d'un cadre 3 or dans le code que tu nous donne, il n'y est fait référence qu'à un seul cadre donc si tu veux de l'aide, ben donne tout ton code complet, on est pas devin pour le reste.

Je ne sais pas si tu l'a fait exprès pour tester mais tes balise A sont vraiment réduite au max et je dirais même qu'elles ne servent à rien.

Tu n'es pas obligé de mettre div pour tes sélecteur css, surtout que tu les sélectionne via leur ID.

Je ne veux pas dire de bêtise mais il me semble que mettre des balises div dans une balise P est une grosse erreur.

La balise BLOCKQUOTE sert normalement à spécifié une section qui cite une source extérieur donc elle n'est pas approprié pour l'usage dont tu as besoin. En plus, il semblerait que les navigateurs lui donne des propriété par défaut. Je te laisse voir ce qu'ils disent en suivant le lien suivant

https://www.w3schools.com/tags/tag_blockquote.asp

Salut, 

bootstrap peux être pas mal pour gérer ça

Inclure Bootstrap dans ton projet : https://getbootstrap.com/docs/4.1/getting-started/download/

<div class="row">

    <div class="col-4"> 
        CADRE 2
    </div>

    <div class="col-4">
        FACEBOOK
    </div>

    <div class="col-4">
        CADRE 3
    </div>  
</div> 

Une row a une taille de 12
ainsi tu fait en 3 blocs de 4/12 ta page (4+4+4=12) : tu sépare ta page en 3

tu peux aussi faire 3/6/3 par exemple

Comme tu peux le voir bootstrap offre pas mal de possibilités : https://getbootstrap.com/docs/4.1/getting-started/introduction/