Explication méthode de création en html/css par Btintin - page 1

Bonjour,

Je débute en création de page web et j'aimerais avoir des explications sur les différentes méthode de création :

Mon code :

Html

<!DOCTYPE html>
<html>
    <head>
   		<meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" />
		<title>Brouillon d'entrainement</title>
	</head>

   <body>
		<header>
			<p>Je suis le header</p>
		</header>
	
		<aside class="left_aside"><p>Je suis un aside gauche</p></aside>
		
		<section>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan tempus arcu, vel gravida mi venenatis sit amet.
			Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed mollis nulla enim, vitae pharetra felis eleifend a.
			Pellentesque neque tortor, maximus vel ligula scelerisque, vulputate hendrerit erat. Nam lectus mauris, vestibulum nec velit eu, ullamcorper vulputate sem.
			Proin vitae purus quis mauris pharetra placerat. Quisque posuere sollicitudin arcu dictum blandit.
			Donec egestas condimentum lorem, ut tristique neque viverra et. Duis non est nec sem consectetur venenatis nec at tellus.
			Aliquam fermentum lectus sed ante placerat, a ullamcorper diam pellentesque. Nunc tincidunt convallis nisi in viverra.
			Nam a ligula id massa rhoncus finibus. Nulla nec nunc scelerisque, fringilla magna et, lobortis odio.
			Aliquam hendrerit eget metus in tincidunt. Vestibulum a libero sit amet lacus vestibulum ultricies eget quis nisl.
			Curabitur ex purus, tincidunt sollicitudin dignissim nec, feugiat in urna.</p>
		</section>
		
		<aside class="right_aside"><p>Je suis un aside droit</p></aside>
		
		<footer>
			<p>Je suis le footer</p>
		</footer>
	</body>
</html>

Css

html, body
{
	margin: 0px;
	padding: 0px;
}

body
{
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	background-color: pink;
	
}

header
{
	width: 100%;
	height: 60px;
	text-align: center;
	background-color: pink;
}

aside
{
	width: 15%;
	height: 200px;
	background-color: blue;
}

.left_aside
{
	margin-right: 20px;
}

.right_aside
{
	margin-left: 20px;
}

section
{
	width: 60%;
	height: 200px;
	background-color: red;
}

footer
{
	width: 100%;
	height: 60px;
	text-align: center;
	background-color: pink;	
}

et un code ressemblant que j'ai trouvé sur le forum de roohManu (https://openclassrooms.com/forum/sujet/height-en-pourcentage-ne-marche-pas)

Code de rhooManu :

Html

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
 
        <link rel="stylesheet" href="style.css">
        <!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    </head>
    <body role="document">
        <div id="page">
            <header id="header">
                <h1>Titre</h1>
                <nav id="nav" role="navigation">
                    <ul>
                        <li><a href="">Lien</a></li>
                        <li><a href="">Lien</a></li>
                        <li><a href="">Lien</a></li>
                        <li><a href="">Lien</a></li>
                    </ul>
                </nav>
            </header>
            <div id="content">
                <aside id="sidebar-left">
                    Contenu de colonne de gauche
                </aside>
                <aside id="sidebar-right">
                    Contenu de colonne de droite
                </aside>
                <div id="main" role="main">
                    Contenu principal du site
                </div>
            </div>
            <footer id="footer" role="contentinfo">
                ©2012 Mon site
            </footer>
        </div>
    </body>
</html>

Css

body {
    margin: 0;
    font: 400 77%/1.5em "Trebuchet MS", Arial, Helvetica, sans-serif;
}
 
#page {
    width: 960px;
    margin: auto;
}
 
/* HEADER */
#header {
    padding-top: 1px;
}
 
/* NAVIGATION */
 
#nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}
 
#nav li {
    display: inline-block;
}
 
#nav a {
    display: block;
    width: 150px;
    padding: 10px;
}
 
/* CONTENT */
#content {
    overflow: auto;
}
 
/* SIDEBARS*/
#sidebar-left {
    width: 200px;
    float: left;
    margin-right: 10px;
}
 
#sidebar-right {
    width: 200px;
    float: right;
    margin-left: 10px;
}

/* MAIN */
#main {
    overflow: auto;
    width: auto;
    padding: 0 10px;
}
 
/* FOOTER */
#footer {
    font-size: 16px;
}

Merci d'avance pour vos réponses, espérant en apprendre plus sur ce sujet.

Btintin

-
Edité par Btintin 8 janvier 2018 à 18:30:21

8 janvier 2018 à 18:28:01

Mewen_bzh

8 janvier 2018 à 20:02:29

Salut,

Je veux bien répondre mais je crois que tu as oublié d'écrire ta question... ;)

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

9 janvier 2018 à 11:23:03

Oui désolé ma question est sur la propriété display, dans le code de roohManu il y a des display: inline-block/block et des float contrairement à mon code où j'ai mis un diplay: flex.

J'aimerais savoir quelle est la meilleure façon d'écrire ma page html ? avec flexbox ou avec d'autre méthode ?

Merci d'avance.

9 janvier 2018 à 11:30:47

Le code de roohManu dans ton lien date de février 2013, soit environ un an avant l'arrivée du module flexbox et bien avant que ce dernier ne soit complètement pris en charge par tous les navigateurs.

Ta méthode serait donc la plus moderne et celle à privilégier. L'autre méthode est à présent dépassée même si elle fonctionne toujours.

Et bientôt (très bientôt même...) ta méthode sera aussi dépassée et remplacée par une méthode encore plus moderne qui utilisera le module CSS Grid...

-
Edité par Mewen_bzh 9 janvier 2018 à 11:31:57

15 janvier 2018 à 11:13:10

Merci pour cette réponse complète

je vais de ce pas me renseigner sur Css grid.

EmmanuelBeziat

15 janvier 2018 à 12:10:13

Exactement. Ce post date, et 5 ans en web représente une éternité. Voilà un exemple de code bien plus moderne : https://codepen.io/EmmanuelBeziat/pen/bgQgje

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

Explication méthode de création en html/css

Explication méthode de création en html/css

Supprimer

Modérer

Signaler le message aux modérateurs