Partage

Fusion de bloc texte

Est il possible de fusionner des blocs de texte?

Sujet résolu

GuillaumeGarnier11

15 mars 2018 à 16:11:20

Bonjour à tous,

Sur un site je veux lier des thumbnail qui n'ont pas la même taille, dans cette position:

Le contenue n'est pas encore le bon, donc ne vous souciez pas de cette partie.

Je ne trouve cependant aucune information sur internet qui me dit si oui ou non il est possible de lier ces deux vignettes de manières a ce qu'elles gardent cette forme. SI vous avez la réponse à cette question et si vous pouviez m'expliquer ca serait super.

Merci d'avance.

Bonne journée à tout le monde.

-
Edité par GuillaumeGarnier11 15 mars 2018 à 16:37:05

Les erreurs permettent de progresser, mais progresser n'empêche pas de faire des erreurs.

Mewen_bzh

15 mars 2018 à 16:19:31

Bonjour,

Quels thumbnails ? Quelle forme ? Que veux-tu dire exactement par "les lier" ?

Je ne réponds pas aux messages privés.

GuillaumeGarnier11

15 mars 2018 à 16:23:36

Je suis désolé,j'utilise ce terme parce que c'est comme ça que c'est marqué dans mon code. ^^'

Les deux partie blanches ou est marqué le texte, je veux les lier pour qu'elle ne fasse qu'une, et je voulais savoir avant tout si c'était possible, ou alors trouver une formule qui fait que un seul cadre puisse prendre cette forme.

Comment tu nommes ces parties? ^^'

Les erreurs permettent de progresser, mais progresser n'empêche pas de faire des erreurs.

Mewen_bzh

15 mars 2018 à 16:26:47

Ah ok... Parce qu'en anglais "thumbnail" c'est une miniature d'image... Tu parles donc de tes blocs de texte.

Pour le reste, impossible de répondre sans voir ton code...

-
Edité par Mewen_bzh 15 mars 2018 à 16:28:43

Je ne réponds pas aux messages privés.

GuillaumeGarnier11

15 mars 2018 à 16:31:10

Pour l'instant j'ai réussi à avoir cette forme en utilisant un col-md-6 sur la première ligne et un col-md-12 ensuite.

voila le code du corps de la page:

<head>
    <link rel="stylesheet" href="fond.css" type="text/css" media="screen"/>
</head>
<body style="background-image: url('/Test/webroot/img/ProjetChab.jpg'); background-repeat:no-repeat; background-attachment:fixed; background-position:center">
<html>
<div class="container">
            <div class="row">
                <div class="col-md-6">
					<div class="col-sm-6 col-md-12">
						<div class="thumbnail">
							<div class="caption">
								<h3 align="center">Les BTS</h3>
									<p>rud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
									<p align="center">
										<a href="/Test/formations/index/" class="btn btn-primary" role="button">Voir plus</a>
									</p>
									
							</div>
						</div>
					</div>
                </div>
				<div class="col-md-6">
					<img src="webroot/img/cuisine.jpg" alt="photoBTS">
				</div>
            </div>
</div>

<div class="container">
            <div class="row">
				<div class="col-md-12">
						<div class="thumbnail">
							<div class="caption">
								<h3 align="center">Filliére général</h3>
									<p>Lorem ipsum dolor sit ameniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
							</div>
						</div>
					</div>
                </div>
</div>

Si tu as une idée ou une piste, ça serait avec plaisir.

Pour l'instant je n'arrive à modifier que la forme des images. ^^'

-
Edité par GuillaumeGarnier11 15 mars 2018 à 16:38:34

Les erreurs permettent de progresser, mais progresser n'empêche pas de faire des erreurs.

Kaidan

15 mars 2018 à 20:29:12

Heu c'est vraiment nécessaire toute ces DIV ? :euh:

Et qu'es-ce que tu entends par lié ? Je ne suis pas sûr de ce que tu veux mais ce que je peux te conseiller c'est d'utiliser une Section et des Articles, Un petit coup de Flex et :magicien:

Exemple : HTML

<html>
	<head>
        <meta charset="utf-8">
		<link rel="stylesheet" href="new 2.css" />
		<title>Mon CV</title>
     </head>
	 
	<body>
		<section>
			<article id="info1">
				<p>Lorem ipsum dolor sit ameniam, quis nostrud exercitation 
					ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
					in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
					non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</p>
				
			</article>
			
			<article id="img1" >
					<img class="illustration" src="a.jpg" alt="image d'illustration" /> 
			</article>
			
			<article id="info2">
				<p>Lorem ipsum dolor sit ameniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
				commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 
				eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
				deserunt mollit anim id est laborum.</p>
			</article>
		</section>
	</body>
</html>

et le CSS

html, body{
	height : 100%;
	width : 100%;
}
section{
	height : 100%;
	width : 70%;
	margin-left : 15%;
	display : flex;
	flex-direction : row;
	flex-wrap : wrap;
	justify-content : space-between;
	align-items : stretch;
}
article{
	
	text-align : left;
	font-size : 1.3em;
}
#info1{
	width : 40%;
	min-width : 420px;
	flex-grow: 1;
	background-color : rgba(10, 10, 100, 0.75);
}
#info2{
	min-height : 120px;
	width : 100%;
	background-color : rgba(100, 10, 10, 0.75);
}
#img1{
	min-width : 420px;
	max-width : 640px;
	flex-grow: 1;
	background-color : rgba(10, 100, 10, 0.75);
}
.illustration{
	width : 100%;
}
p{
	padding : 50px;
}

GuillaumeGarnier11

16 mars 2018 à 8:33:08

Ce que je veux obtenir c'est que mes deux blocs de texte aient cette forme en angle droit en un bloc, et je sais pas si ça marche comme pour le format des images. Je veux garder la taille au niveau de la page en revanche, laisser des marges. Si en plus je pouvais garder mon image en haut à droite ça serait top. Mais pour l'instant j'ai rien trouvé, j'ai trouvé comment faire pour des images mais pas les blocs de texte.

Pour les divs fait comme si t'avait rien vu, ça fait un peu plus clair dans ma tête et je m'y retrouve mieux(je suis un peu spécial ).

-
Edité par GuillaumeGarnier11 16 mars 2018 à 8:33:49

Les erreurs permettent de progresser, mais progresser n'empêche pas de faire des erreurs.

nossibe

16 mars 2018 à 8:46:36

Tes blocs ont des propriétés CSS "margin" qui laissent ces espaces vides entre les blocs blancs. C'est Bootstrap qui intègre ces espaces.

Avec l'outil de navigation de Chrome tu peux trouver quel(s) élément(s) a le margin qui provoque l'espace. Une fois que tu as repéré sur quelle div il faut supprimer le margin, appliques lui un id dans ton html.

Grace à cet id tu pourras modifier la propriété CSS margin de l'élément voulu, sans modifier le positionnement général de Bootstrap.

GuillaumeGarnier11

16 mars 2018 à 8:54:50

D'accord je vais regarder de ce coté, mais après je vais avoir le souci des bords des blocs qui vont ressortir, c'est pour ça que j'en voulait qu'un seul qui fasse cette forme et je c'est pas si c'est possible. Et il faut que en plus j’intègre une image en haut a droite. Cela dit, j'ai peur que même si on y arrive pour la forme, le navigateur considère que la partie vide appartient quand même au bloc et qu'il me mette l'image au dessus et que ça me décale le bloc en dessous.

Les erreurs permettent de progresser, mais progresser n'empêche pas de faire des erreurs.

nossibe

16 mars 2018 à 9:03:42

Bootstrap te permet de définir l'espace que tu veux laisser à ton cadre texte supérieur, à ton image, ainsi qu'à ton cadre texte inférieur.

Car, même si l'espace entre les deux blocs texte va disparaitre, tu vas conserver trois espaces distincts, deux qui feront la moitié de la largeur de la page et un qui fera toute la largeur.

Tu devrais relire la doc de Bootsrap, ça pourrait te faire gagner beaucoup de temps.

GuillaumeGarnier11

16 mars 2018 à 9:07:44

Oui, en effet, je vais m'y mettre alors, je connais pas tout les détails de bootstrap.

Je vais me pencher plus attentivement sur la doc de bootstrap alors, je pensais pas que ça pouvais marcher comme ça.

Merci beaucoup de ton aide et pour m'avoir accordé un peu de ton temps.

Les erreurs permettent de progresser, mais progresser n'empêche pas de faire des erreurs.

nossibe

16 mars 2018 à 9:09:20

Je t'en prie

GuillaumeGarnier11

16 mars 2018 à 10:49:13

Je n'ai pas trouvé le moyen d'enlever ces traits, j'ai ajouté le margin:0 mes blocs sont collés mais je ne peux pas changer ces traits. Sur le site bootstrap je n'ai pas trouvé comment faire..

Si tu peux me filer un autre coup de main ca serait super. ^^'

Les erreurs permettent de progresser, mais progresser n'empêche pas de faire des erreurs.

nossibe

16 mars 2018 à 15:38:49

https://www.w3schools.com/css/css_border.asp

un "border:none;" sur l'élément qui possède un border et tout devrait rentrer dans l'ordre

GuillaumeGarnier11

16 mars 2018 à 15:53:04

J'ai déjà vu ce site, le problème est que si j’enlève la bordure du haut, je vais avoir un souci au niveau des angles arrondis que je veux garder. Le rendu ne sera donc pas celui souhaité, mais merci quand même, je n'avez pas spécifié ce détail.

C'est pour ça que je veux les fusionner, pour que les deux se rejoignent parfaitement sur une ligne droite, mais si je vais comme ça, je vais avoir u creux au milieu du segment.

En tout cas merci beaucoup d'avoir pris le temps de chercher, je vais essayer durant le week end et si je n'y arrive pas, je trouverai une autre mise en page.

Les erreurs permettent de progresser, mais progresser n'empêche pas de faire des erreurs.

nossibe

16 mars 2018 à 17:11:24

Dans ce cas c'est la couleur de la bordure que tu dois modifier pour qu'elle se fonde avec le background

GuillaumeGarnier11

19 mars 2018 à 9:34:40

D'accord, je vais changer la bordure alors.

Les erreurs permettent de progresser, mais progresser n'empêche pas de faire des erreurs.