Comment faire pour un design "Liquid"

Sujet résolu

13 novembre 2017 à 17:54:00

Bonsoir,

Je suis en première année d'informatique et je dois réaliser un "mini site web" pour mes cours.

Je suis malheureusement bloqué depuis ce matin car j'aimerai que ce "mini-site" est une largeur bien défini et lorsqu'on agrandit la fenêtre en largeur, tout le contenu se déplace sur le centre (sauf les "bandeaux horizontaux (header et footer)" qui eux occupe toute la largeur). Pour m'expliquer un peu mieux je vous mets le lien d'un site qui répond à ce que j'essaie d'expliquer : http://www.cubeent.co.kr/

Je vois à peu près l'idée, je pense qu'il faut englober tout le contenu de mon petit site dans une balise <DIV> puis par le biais du CSS faire en sorte que cette balise <DIV> ai une taille bien défini et qui ce centre a chaque fois par rapport à la largeur de la fenêtre.

J'ai essayer de pleins de manière différente avec l'aide des cours et tuto du site mais rien n'y fait, rien ne bouge, je ne sais plus comment faire..

Quelqu'un peut il m'aider je suis vraiment à court de solution..

Cordialement

noopy360

13 novembre 2017 à 18:08:54

Salut, il n'y a rien de bien compliquer a faire ce style de design, par contre ici nous ne donnons pas de code tout fait, cela dit on peut tout à fait te guider afin que tu puisse faire ce que tu veut...

pour cela il serait bien de nous montrer ce que tu as déjà fait HTML & CSS pense à utiliser le bouton </> pour mettre ton code...

https://validator.w3.org/ / https://jigsaw.w3.org/css-validator/ / https://codepen.io/pen

Bloodys29

13 novembre 2017 à 18:15:17

Salut, merci beaucoup de m'avoir répondu, oui c'est idiot de ne pas mettre le code je corrige ça !

Mon HTML :

<!DOCTYPE Html>
	<HTML lang="fr">
		<HEAD>
			<META charset="utf-8"/>
			<META name="MUNARO_DYLAN" content="Accueil1"/>
			<LINK rel="stylesheet" href="Accueil1_MUNARO.css"/>
			<TITLE>DYM Entertainment</TITLE>
		</HEAD>

		<BODY>
			
				<DIV class="main">
					<DIV class="bandeau1">
					
						<MAP name="retouraccueil">
							<AREA shape="rect" coords="0,0,177,106" href="Accueil1_MUNARO.html" alt="logo"/>
							<IMG class="logo" src="LogoDYM3.png" height="106" width="177" usemap="#retouraccueil" alt="logo"/>
						</MAP>
					
						<A class="label">LABEL</A>
						<A class="artistes">ARTISTES</A>
						<A class="multimedia">MULTIMEDIA</A>
						<A class="ceo">CEO</A>
						<A class="seoul">SEOUL</A>
						<A class="avis">AVIS</A>

						<MAP name="facebook">
							<AREA shape="rect" coords="0,0,177,106" href="Accueil1_MUNARO.html" alt="FB"/>
							<IMG class="FB" src="iconeFB1.png" height="60" width="60" usemap="#facebook" alt="logo"/>
						</MAP>

						<MAP name="twitter">
							<AREA shape="rect" coords="0,0,177,106" href="Accueil1_MUNARO.html" alt="TW"/>
							<IMG class="TW" src="iconeTW1.png" height="60" width="60" usemap="#twitter" alt="logo"/>
						</MAP>

						<MAP name="youtube">
							<AREA shape="rect" coords="0,0,177,106" href="Accueil1_MUNARO.html" alt="YT"/>
							<IMG class="YT" src="iconeYT1.png" height="60" width="60" usemap="#youtube" alt="logo"/>
						</MAP>

					</DIV>
				</DIV>
		</BODY>
	</HTML>

Mon CSS :

.bandeau1
{
	background-color: #242222;
	position: absolute;
	top : 0px; 
	left: 0px;
	width: 100%;
	height: 106px;	
	margin: auto;
}
@font-face
{
	font-family: "Roboto-Regular";
	src: url('Roboto-Regular.ttf');
}
.logo
{
	position: absolute;
	left: 6px;
}
.label
{
	font-family: Roboto-Regular;
	color: #9F9F9F;
	position: absolute;
	font-size: 20px;
	top: 45px;
	left: 220px;
}
.artistes
{
	font-family: Roboto-Regular;
	color: #9F9F9F;
	position: absolute;
	font-size: 20px;
	top: 45px;
	left: 310px;
}
.multimedia
{
	font-family: Roboto-Regular;
	color: #9F9F9F;
	position: absolute;
	font-size: 20px;
	top: 45px;
	left: 430px;
}
.ceo
{
	font-family: Roboto-Regular;
	color: #9F9F9F;
	position: absolute;
	font-size: 20px;
	top: 45px;
	left: 575px;
}
.seoul
{
	font-family: Roboto-Regular;
	color: #9F9F9F;
	position: absolute;
	font-size: 20px;
	top: 45px;
	left: 645px;
}
.avis
{
	font-family: Roboto-Regular;
	color: #9F9F9F;
	position: absolute;
	font-size: 20px;
	top: 45px;
	left: 740px;
}
.FB
{
	position: absolute;
	top: 25px;
	left: 800px;
}
.TW
{
	position: absolute;
	top: 25px;
	left: 850px;
}
.YT
{
	position: absolute;
	top: 25px;
	left: 900px;
}

Du coup j'ai enlevé tout les essais divers mais en gros j'ai essayer d'englober tout mon code par une balise <DIV> (<DIV class="main">)

noopy360

13 novembre 2017 à 18:30:09

alors regarde ce que je t'ai fait après j'ai fait un code volontairement très simple, le rouge c'est pour que tu vois bien l'emplacement des blocks

HTML

<!DOCTYPE HTML>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="style.css"/>
	</head>
	<body>
		<header>
			<div>
				<!-- Contenu du pied de page qui sera toujours centrer -->
			</div>
		</header>
		<section> <!-- corp de ton site -->
			<article>
				<p>
					Soleo saepe ante oculos ponere, idque libenter crebris usurpare sermonibus, omnis nostrorum imperatorum, omnis exterarum gentium potentissimorumque populorum, omnis clarissimorum regum res gestas, cum tuis nec contentionum magnitudine nec numero proeliorum nec varietate regionum nec celeritate conficiendi nec dissimilitudine bellorum posse conferri; nec vero disiunctissimas terras citius passibus cuiusquam potuisse peragrari, quam tuis non dicam cursibus, sed victoriis lustratae sunt.
				</p>
				<p>
					Soleo saepe ante oculos ponere, idque libenter crebris usurpare sermonibus, omnis nostrorum imperatorum, omnis exterarum gentium potentissimorumque populorum, omnis clarissimorum regum res gestas, cum tuis nec contentionum magnitudine nec numero proeliorum nec varietate regionum nec celeritate conficiendi nec dissimilitudine bellorum posse conferri; nec vero disiunctissimas terras citius passibus cuiusquam potuisse peragrari, quam tuis non dicam cursibus, sed victoriis lustratae sunt.
				</p>
				<p>
					Soleo saepe ante oculos ponere, idque libenter crebris usurpare sermonibus, omnis nostrorum imperatorum, omnis exterarum gentium potentissimorumque populorum, omnis clarissimorum regum res gestas, cum tuis nec contentionum magnitudine nec numero proeliorum nec varietate regionum nec celeritate conficiendi nec dissimilitudine bellorum posse conferri; nec vero disiunctissimas terras citius passibus cuiusquam potuisse peragrari, quam tuis non dicam cursibus, sed victoriis lustratae sunt.
				</p>
				<p>
					Soleo saepe ante oculos ponere, idque libenter crebris usurpare sermonibus, omnis nostrorum imperatorum, omnis exterarum gentium potentissimorumque populorum, omnis clarissimorum regum res gestas, cum tuis nec contentionum magnitudine nec numero proeliorum nec varietate regionum nec celeritate conficiendi nec dissimilitudine bellorum posse conferri; nec vero disiunctissimas terras citius passibus cuiusquam potuisse peragrari, quam tuis non dicam cursibus, sed victoriis lustratae sunt.
				</p>
				<p>
					Soleo saepe ante oculos ponere, idque libenter crebris usurpare sermonibus, omnis nostrorum imperatorum, omnis exterarum gentium potentissimorumque populorum, omnis clarissimorum regum res gestas, cum tuis nec contentionum magnitudine nec numero proeliorum nec varietate regionum nec celeritate conficiendi nec dissimilitudine bellorum posse conferri; nec vero disiunctissimas terras citius passibus cuiusquam potuisse peragrari, quam tuis non dicam cursibus, sed victoriis lustratae sunt.
				</p>
				<p>
					Soleo saepe ante oculos ponere, idque libenter crebris usurpare sermonibus, omnis nostrorum imperatorum, omnis exterarum gentium potentissimorumque populorum, omnis clarissimorum regum res gestas, cum tuis nec contentionum magnitudine nec numero proeliorum nec varietate regionum nec celeritate conficiendi nec dissimilitudine bellorum posse conferri; nec vero disiunctissimas terras citius passibus cuiusquam potuisse peragrari, quam tuis non dicam cursibus, sed victoriis lustratae sunt.
				</p>
				<p>
					Soleo saepe ante oculos ponere, idque libenter crebris usurpare sermonibus, omnis nostrorum imperatorum, omnis exterarum gentium potentissimorumque populorum, omnis clarissimorum regum res gestas, cum tuis nec contentionum magnitudine nec numero proeliorum nec varietate regionum nec celeritate conficiendi nec dissimilitudine bellorum posse conferri; nec vero disiunctissimas terras citius passibus cuiusquam potuisse peragrari, quam tuis non dicam cursibus, sed victoriis lustratae sunt.
				</p>
				<p>
					Soleo saepe ante oculos ponere, idque libenter crebris usurpare sermonibus, omnis nostrorum imperatorum, omnis exterarum gentium potentissimorumque populorum, omnis clarissimorum regum res gestas, cum tuis nec contentionum magnitudine nec numero proeliorum nec varietate regionum nec celeritate conficiendi nec dissimilitudine bellorum posse conferri; nec vero disiunctissimas terras citius passibus cuiusquam potuisse peragrari, quam tuis non dicam cursibus, sed victoriis lustratae sunt.
				</p>
				<p>
					Soleo saepe ante oculos ponere, idque libenter crebris usurpare sermonibus, omnis nostrorum imperatorum, omnis exterarum gentium potentissimorumque populorum, omnis clarissimorum regum res gestas, cum tuis nec contentionum magnitudine nec numero proeliorum nec varietate regionum nec celeritate conficiendi nec dissimilitudine bellorum posse conferri; nec vero disiunctissimas terras citius passibus cuiusquam potuisse peragrari, quam tuis non dicam cursibus, sed victoriis lustratae sunt.
				</p>
			</article>
		</section> <!-- Fin du corp -->
		<footer>
			<div>
				<!-- Contenu du pied de page qui sera toujours centrer -->
			</div>
		</footer>
	</body>
</html>

CSS

body{margin:0; padding:0;}
header, footer{height:200px; background:grey;}
header div, footer div, section{width:1080px; margin:auto; background:red;}
header div, footer div{height:100%;}
p{text-align:justify;}

https://validator.w3.org/ / https://jigsaw.w3.org/css-validator/ / https://codepen.io/pen

Bloodys29

13 novembre 2017 à 18:58:31

Alors, voilà ce que j'ai :

Pour l'HTML : j'ai rajouté la balise <HEADER> ainsi qu'une balise DIV qui englobe le tout (et j'ai mis en commentaire ma balise <DIV class="bandeau">) vu que c'est le rôle de <HEADER> si j'ai bien compris.

Pour le CSS, j'ai repris tout ton code pour tester et bien voir avec le rouge sur mon site et j'ai mis en commentaire mon ".bandeau1" aussi comme dans l'HTML.

Du coup, je visualise parfaitement sur mon site comme prévu, après c'est juste une histoire de taille et de couleurs rien de bien méchant, cepandant, lorsque que je joue avec la taille de ma fenetre, seul le cadre rouge (la balise DIV si j'ai bien compris) se déplace mais tout ce qu'elle contient reste figé à l'interieur.

ai-je raté un détail important ? je vais essayer de changer quelques lignes pour voir si çela change quelque chose.

En tout cas ça avance grâce à toi !! Merci

-
Edité par Bloodys29 13 novembre 2017 à 19:21:07

Bloodys29

15 novembre 2017 à 1:07:09

Pardon pour le report, juste pour dire que j'ai trouvé, j'avais laissé mes positions en "absolute" comme un idiot, tout est OK pour moi merci beaucoup !