Mettre à la ligne + horizontal blocs "article"

Sujet résolu

12 mars 2018 à 15:01:51

Bonjour !

Après avoir écrit une première fois mon post, je suis malheureusement contrainte à le re-écrire car « Votre message a été détecté comme étant du spam. Il ne sera malheureusement pas publié. » …… Donc j’espère qu’il sera aussi complet que le premier ahah

J’ai donc commencé mon site grâce au cours d’Openclassroom, ayant (encore) du mal avec les propriétés Flexbox, display, j’ai dû reprendre entièrement le code HTML et CSS de mon site car tout était bancal

Mais maintenant, après cette correction me voila à face à un problème sur lequel je bloque depuis hier (les forums et les sites ne m’ont pas aidés) : mes articles sont bien centrés et prennent bien tout l’espace grâce à flex: 2; mais je n’arrive pas à mettre à la ligne ni horizontalement :

article vertic

Comment régler ce problème ?

Deuxième question : grâce à flex: 2; comme dit plus haut le bloc "article" prend bien toute la place, mais est-ce qu’il serait possible de supprimer automatique l’espace en trop, par exemple pour la page ressources :

suppr espace

Voici mon CSS (sans la partie décoration) :

.container
 { 
 	display: flex; 
 }

header 
{ 
	display: flex; 
    justify-content: space-around;
    align-items: center;
	color: white;
	background-color: #E24E42;
	margin: 50px 120px 50px 120px; 
}

		/*corps*/

article 
{ 	width:300px;
	background-color: #008F95;
	margin: 20px;
	padding: 20px;
	flex : 2; 
}

nav
{ 	
	width: 15em;
	color: white;
	background-color: #E24E42;
	margin: 20px;
	padding: 20px;
}

footer, section
{
	background-color: #E9B000;
	margin: 0px 70px 0px 70px;
}

et mon HTML de la page avec plusieurs articles :

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

    	<div id="bloc_page">

	    	<header>

	            	<h1>Lisa </h1>

	            <h2>Site web test</h2>
	        	
				<span3>
	           	 	<ul>
<img src="images/home.png" width="12" height="12" alt="home"/><a href="Index.html">	CV</a></br>
<img src="images/camera.png" width="12" height="12" alt="camera"/><a href="page2.html">	Photographies</a><br>
<img src="images/book.png" width="12" height="12" alt="book"/><a href="page3.html">	Ressources</a></br>
	          	  	</ul>
	          	</span3>

			</header>

		<section>

 <div class="container">

						<nav>
					<div class="photodescription"><img src="Images/sd.jpg" width="200" height="200"alt="phooto"/></div>
				<p>
		<img src="images/user.png" width="12" height="12" alt="user"/>	LISA </br>
		<img src="images/calendar.png" width="12" height="12" alt="calendar"/>	bla bla bla</br>
		<img src="images/navigation.png" width="12" height="12" alt="navigation"/>	bla bla bla</br>
		<img src="images/mail.png" width="12" height="12" alt="mail"/> bla bla bla</br>
		<img src="images/phone.png" width="12" height="12" alt="phone"/> bla bla bla
				</p>
						</nav>

<article>
				<h3>Formation</h3>

<p>
	<span>2016</span> bla bla bla</br>
	<span2>bla bla bla</span2></br>
	<span>2013 à 2016</span> bla bla bla</br>
	bla bla bla, <span2>bla bla bla</span2>
</p>
</article>

<article>
						<h3>Expériences</h3>

<p>
	<span>2015</span> bla bla bla </br>
	bla bla bla</br>
	<span>2013</span> bla bla bla</br>
	bla bla bla <span2>bla bla bla</span2></br>
	<span>2012</span> bla bla bla</br>
	bla bla bla, <span2>bla bla bla</span2></br>
	— bla bla bla</br>
	bla bla bla</br>
</p>
</article>

<article>	
				<h3>Compétences complémentaires</h3>
<li>Langues étrangères</li>
<p>
	bla bla bla(correct)</br>
	bla bla bla (débutante)</br>
	bla bla bla</br> dbla bla bla </br>
	bla bla bla</br>
</p>
<li>Connaissances en informatique</li>
<p>
	bla bla bla</br>
	bla bla bla</br>
	bla bla bla</br>
	bla bla bla</br>
	bla bla bla</br>
	 
</p>
</article>

<article>
				<h3>Centre d'intérêt</h3>
<p>
<a href="page2.html">Photographie</a> en passe-temps : retouches photos, collages, photomontages</br>
</p>
</article>

		</section>

</div><!--container-->

					<footer>
		Copyright © Lisa 
					</footer>
			
    </body>
</html>

Et si certains ont du temps, j’aimerai bien avoir vos conseils et commentaires sur le reste (comme personne peut me corriger autour de moi j’en profite ici…..)

Merci d'avance !

mootookoi

12 mars 2018 à 19:14:42

Pour mettre les articles les uns sous les autres, tu dois les mettres dans un conteneur pour les séparer du <nav>.

Ensuite tu appliques un

.conteneur_article {
    display: flex;
    flex-direction: column;
}

Et je te laisse le soin de faire le reste des réglages.

Une petite cheatsheet pour voir, en gros, comment fonctionne flexbox.

http://apps.workflower.fi/css-cheats/?name=flexbox

Dev Web Full Stack ( si si c'est possible )

Kaidan

15 mars 2018 à 10:39:25

Je ne sais pas si c'est encore d'actu (si c'est pas le cas met le sujet comme résolu =)...

Tu manques d'organisation et l'indentation n'est pas lisible... pas facile de si retrouver dans le code... c'est pas étonnant que tu pêches.

Utilise une image pour t'orienter dans l'ordre de création des conteneurs, savoir qui contient quoi est important... Je t'ai fais une image en exemple : (Après tu arrange comme tu le veux)

dimitri_b

3 mai 2018 à 15:04:56

Salut.

Je crois en effet que tu dois retravailler ton HTML, Kaidan a un super conseil !

J'ai indenté ton code HTML sans le corriger et des erreurs apparaissent beaucoup plus facilement :

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

    <body>
        <div id="bloc_page">
            <header>
                    <h1>Lisa </h1>
                    <h2>Site web test</h2>
                    <span3>
                        <ul>
                            <img src="images/home.png" width="12" height="12" alt="home"/><a href="Index.html"> CV</a></br>
                            <img src="images/camera.png" width="12" height="12" alt="camera"/><a href="page2.html"> Photographies</a><br>
                            <img src="images/book.png" width="12" height="12" alt="book"/><a href="page3.html"> Ressources</a></br>
                        </ul>
                    </span3>
            </header>
            <section>
                <div class="container">
                    <nav>
                        <div class="photodescription"><img src="Images/sd.jpg" width="200" height="200"alt="phooto"/></div>
                        <p>
                            <img src="images/user.png" width="12" height="12" alt="user"/>    LISA </br>
                            <img src="images/calendar.png" width="12" height="12" alt="calendar"/>    bla bla bla</br>
                            <img src="images/navigation.png" width="12" height="12" alt="navigation"/>    bla bla bla</br>
                            <img src="images/mail.png" width="12" height="12" alt="mail"/> bla bla bla</br>
                            <img src="images/phone.png" width="12" height="12" alt="phone"/> bla bla bla
                        </p>
                    </nav>
                 <article>
                    <h3>Formation</h3>
                    <p>
                        <span>2016</span> bla bla bla</br>
                        <span2>bla bla bla</span2></br>
                        <span>2013 à 2016</span> bla bla bla</br>
                        bla bla bla, <span2>bla bla bla</span2>
                    </p>
                </article>
                <article>
                    <h3>Expériences</h3>
                    <p>
                        <span>2015</span> bla bla bla </br>
                        bla bla bla</br>
                        <span>2013</span> bla bla bla</br>
                        bla bla bla <span2>bla bla bla</span2></br>
                        <span>2012</span> bla bla bla</br>
                        bla bla bla, <span2>bla bla bla</span2></br>
                        — bla bla bla</br>
                        bla bla bla</br>
                    </p>
                </article>
                <article>
                    <h3>Compétences complémentaires</h3>
                    <li>Langues étrangères</li>
                    <p>
                        bla bla bla(correct)</br>
                        bla bla bla (débutante)</br>
                        bla bla bla</br> dbla bla bla </br>
                        bla bla bla</br>
                    </p>
                    <li>Connaissances en informatique</li>
                    <p>
                        bla bla bla</br>
                        bla bla bla</br>
                        bla bla bla</br>
                        bla bla bla</br>
                        bla bla bla</br>
                    </p>
                </article>
                <article>
                    <h3>Centre d'intérêt</h3>
                    <p>
                        <a href="page2.html">Photographie</a> en passe-temps : retouches photos, collages, photomontages</br>
                    </p>
                </article>
            </section>
        </div><!--container-->
 
    <footer>
        Copyright © Lisa
    </footer>
             
    </body>
</html>

Je ne suis que débutant, on me corrigera s'il le faut mais :

Tu utilises des <p> comme s'ils étaient des blocs en les gavant de <br>. J'utiliserais plutôt un <p> par paragraphe (<p>Et...</p><p>comme ça ça saute à la ligne proprement.</p>).
Tu as commencé par <section><div> pour finir par </section></div>. L'indentation a relevé l'erreur (<section><div></div></section>).

Si tu suis Kaidan et que tu indentes bien ton code, tu devrais te surprendre toi-même en voyant que sans grands efforts ça marche beaucoup plus facilement !

Milwou

13 juin 2018 à 16:23:21

Merci beaucoup de vos conseils !!!!!!! (excusez-moi du retard)