27771 sujets

CSS et mise en forme, CSS3

Bonsoir à tous,
Désolé pour cette question idiote mais je n'ai pas trouvé comment rapprocher/resserrer 2 textes, un h1 et un h2.
Je profite de cette question pour vous demander quelles sont les média Queries idéales, on trouve de tout sur le net, et elles sont très nombreuses.
Le B-A-BA quoi Smiley confused
Merci à vous et bonne soirée,
ED
Bonjour kerlutinoes,
Voici les CSS :
.hsContent h1  {
	color: #000000;
	font-size: 10vw;
}
.hsContent h2  {
	color: #000000;
	font-size: 3vw;
	line-height: 3,5vw;
	margin-bottom: 150px;
}

et le html :
 	  <section id="top">

	        <section id="slide-1" class="homeSlide">
	        	<div class="bcg" 
	        		data-center="background-position: 50% 0px;" 
	        		data-top-bottom="background-position: 50% -100px;" 
	        		data-anchor-target="#slide-1"
	        	>
		        	<div class="hsContainer">
			    		<div class="hsContent">
				    		<h1>Simple</h1>
                            <h2>great for story telling websites.<br>
bo lboblboblbo</h2>
			    		</div>
		        	</div>
	        	</div>
		    </section>

Merci beaucoup, bonne journée,
ED
Bonjour,
je crois que tu pourrais déjà simplifier de la façon suivante :
<h1 class="hsContent">Simple</h1>

idem pour <h2>
Par ce qu'en principe, on ne stylise pas les balises h1....hn. On y colle une class à qui l'on applique ce que l'on veut.
Pour ce qui est de resserrer/rapprocher deux textes, je suppose que ce sont les deux titres dont tu parles ? Il faut mettre sur les class des titres des margin top ou bottom pour réduire l'écart entre elles.
Le BA-BA sur les @media se trouve et s'étudie très facilement, deux exemples parmi des centaines :
https://www.alsacreations.com/article/lire/930-css3-media-queries.html
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1607616-utilisez-le-responsive-design-avec-les-media-queries
On ne trouve pas "de tout" sur le net, il faut utiliser celles qui vont. Il faut d'abord étudier un peu leur fonctionnement et ensuite partir sur un projet.

N'hésites pas à préciser ce que tu veux.
Modifié par Bongota (23 Dec 2021 - 13:49)
Merci beaucoup Bongota pour tes conseils!
J'ai tenté avec les marges mais elles ne prennent pas en compte les valeurs négatives (de mémoire, je ne peux pas tester actuellement).
Je reste donc bloqué Smiley decu Soyons fous : admettons que je veuille que le h2 passe au dessus du h1. Comment faire ? Deux div ?
Pour ce qui est des Média Queries, merci pour ton lien (mis à jour très récemment). L'article est riche Smiley smile
Bon après-midi,
ED
Pourtant, sans marges négatives, voici ce que j'ai obtenu :
upload/1640265537-67790-screenshot2021-12-23screensho.png
Avec ce css :
.hsContent  {
	color: #000000;
	font-size: 10vw;
	margin-bottom:0em;}
.hsContent2  {
	color: #000000;
	font-size: 3vw;
	line-height: 3,5vw;
	margin-top:1em;
	margin-bottom: 150px;

C'est du vite fait, mais l'idée est là.
Modifié par Bongota (23 Dec 2021 - 14:21)
el_debutanti a écrit :
Soyons fous : admettons que je veuille que le h2 passe au dessus du h1. Comment faire ?

.hsContent {
  display: flex;
  flex-direction: column;
}
.hsContent h2  {
  order: -1;
}
Bonjour bonjour,
PARFAIT Olivier C Smiley biggrin
.hsContent {
  display: flex;
  flex-direction: column;
}
.hsContent h2  {
  order: -1;
}

Je ne connaissais pas.
Passez un bon réveillon et encore MERCI !
ED
Meilleure solution