Dimensionnement d'une section en responsive par CharlesPellegrin - page 1

Bonjour bonjour;

Alors voila, sur ma page web, j'ai quelques lignes CSS pour adapter mes "sections" à la taille de la fenetre.

Ce que je voudrais c'est que la largeur de mes sections se restreigne à la taille du texte qui est à l'intérieur ( j'ai donc écrit "width:max-content;") mais aussi que les lignes sautes toute seules lorsque la largeur devient inférieur à la longueur initiale du texte ( ce qui se fait facilement avec "width: auto;" ). le Problème est que je ne peux pas combiner les deux valeurs de "width". j'ai essayé de mettre des wrap, des inline-block ... mais c'est pas vraiment une réussite !

voici les codes si cela peut vous aider ( en rouge la partie qui me pose problème)

body
{
	display: flex;
	flex-direction:row;
	color:white;
}

#ma_page
{
	background-image: url("background.jpg");
	border-radius:4px;
	flex:9;
}

#lisere
{
	background-color:rgb(10,10,25);
	margin-right:4px;
	min-width:80px;
	border-radius:5px;
	width:10%;
	height:500px;
	
}
header
{
	display:flex;
	vertical-align:middle;
}

header h1
{
	margin-top:10px;
	font-family: 'cac_champagneregular',Arial;
	font-size:xx-large;
}

header #bio
{
	margin:auto;
	text-align: center;
	background-color:rgba(100,100,100,0.8);
	padding: 0 10px;
	border-radius: 5px;
}

header #ma_photo
{
	margin-right:5px;
	border-radius:5px;
	box-shadow: 2px 2px 5px black;
}

#corps
{
	display:flex;
	
}

#corps section
{
	text-align:justify;
	margin:60px 5px;
	word-break:break-word;
	flex:1;
	background-color:rgba(100,100,100,0.8);
	border-radius: 5px;
	
	
}

#corps section ul
{
	padding-right:20px;
	width:auto;
	
}


#corps a
{
	text-decoration:none;
	color:rgb(25,25,25);
}
h2
{	
	text-align:center;
	background-color:rgba(20,20,20,0.8);
	color: #e67300;
	margin-top:0;
	border-radius:5px 5px 0 0;
}

/* Nouvelles règles si la fenêtre fait au plus 1024px de large */
@media screen and (max-width: 1024px)
{
    aside
	{
        display: none;
    }
	

	#corps
	{
		flex-direction: column;
		
	}
	
	#corps section h2
	{
		text-align: left;
		padding-left:7px;
	}
	
	#corps section 
	{
		width:max-content; display:inline-block;        /*width:auto;*/
		
	}
	
}

le html :

<html>
<head>
	<link rel="stylesheet" href="style.css" />
    <meta charset="utf-8" />
    <title>Mon CV</title>
</head>

<body>
	<aside id='lisere'>
	</aside>
	
	<div id='ma_page'>
		<header>
			<div id='bio'>
				<h1>Charles Pellegrin </h1>
				<p>Etudiant en master de mécanique à Prague </p>
			</div>
			<p><a href="photo.jpeg" title="Photo taille réelle"> <img src="mini_photo.jpeg" alt=" ma photo" id='ma_photo' /></a></p>

		</header>
		<div id='corps'>
			<section id='mon_experience'>
				<h2 id="exp">Mon Expérience</h2>
				<ul>
					<li><strong>2018 : </strong>Stage opérateur chez <a href="http://rd-technologies.fr">RD Technologie</a></li>
				</ul>
			</section>
			
			<section id='mes_competences'>
				<h2>Mes compétences</h2>
				<ul>
					<li>Bientôt HTML5 et CSS3</li>
					<li>Python</li>
					<li>MatLab</li>
					<li>SQL</li>
					<li>Catia</li>
				</ul>
			</section>
			
			<section id='mon_experience'>
				<h2>Ma formation</h2>
				<ul>
					<li><strong>2018/2019 : </strong>étudiant à CTU Prague en Master of automotive engineering</li>
					<li><strong>2017/2018 : </strong>étudiant à L'ENSTA Bretagne, école à caractère pluridisciplinaire</li>
					<li><strong>2015-2017 : </strong>Prépa CPGE PSI* lycée Champollion à Grenoble</li>
				</ul>
			</section>
		</div>
	</div>
</body>
</html>

merci pour votre aide !

CharlesPellegrin

15 novembre 2018 à 11:22:37

ox223252

15 novembre 2018 à 11:37:20

as tu essayé :

max-width: max-content;

ou :

width: max-content;
max-width: 100%;

la connaissance est une chose qui ne nous appauvrit pas quand on la partage.

Mon GitHub

Frogweb

15 novembre 2018 à 11:38:51

Salut,

tu ne peux pas avoir deux fois le même id (mon_experience).

Pour ton problème je ne pense pas que ce soit possible.
Si tu mets inline-block tes sections vont effectivement prendre la place disponible pour afficher leur contenu mais si il y beaucoup de contenu (des phrases longues), ce qui est ton cas, elles ne pourront pas se mettre les unes à côté des autres.

PS : il manque cette ligne dans ton code :

<meta name="viewport" content="width=device-width, user-scalable=yes">

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

15 novembre 2018 à 11:51:10

Merci pour vos réponses, j'ai obtenu ce que je voulais en mettant

max-width:max-content;
width:auto;

Et merci pour les corrections de mon code

Dimensionnement d'une section en responsive

Dimensionnement d'une section en responsive

Supprimer

Modérer

Signaler le message aux modérateurs