Fond en CSS sur plusieurs couleurs

Résolu

Xxlena Messages postés 146 Date d'inscription Statut Membre Dernière intervention -
Xxlena Messages postés 146 Date d'inscription Statut Membre Dernière intervention - 22 mars 2015 à 18:21

Bonjour / bonsoir à vous !

Je viens à vous car cela fait plusieurs heures que j'essai de monter le fond de page pour mon site web afin de pouvoir enfin mettre en place mon portfolio en ligne et tout ce qui s'en suit, et j'ai réellement besoin de votre aide..

En fait c'est tout bête, j'aimerai créer un fond qui ressemblerai à ça :

http://hpics.li/a5ecf08

J'arrive pas à trouver de solutions, je fais des div partout, rempli le background...
Je vous montre mon code actuel (C'est un peu le bordel je vous l'avoue...), si quelqu'un peut me conseiller, m'aider ou a une solution à me donner je serai complètement preneuse !

Mon code HTML :


<!DOCTYPE html>


<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="style.css">
		<title> Bienvenu sur mon site </title>
	</head>

	<header>
		Test
	</header>

	<body>
		<div id="BandeMenu">
			<p> Menu </p>
		</div>

		<div id="BandeCentrale">
			<p> CENTRE DU SITE </p>
		</div>
	</body>

<footer>
	Pied de page
</footer>

</html>

Et mon CSS :


body
{
	background-color : white ;
	margin : 0px;
}
	
header
{
margin-top : 0px;
background-color : #BBBBBB;
height : 110px;
}

#BandeMenu
{
	background-color : #656565 ;
	height: 60px;
	margin-top: -20px;
}

#BandeCentrale
{
	background-color : red ;
	margin-top : -20px;
	height : 20px;
}


footer
{
	background-color : blue ;
	height : 80px;
	/*margin-top : 100%;*/
	/*margin-bottom : -100px;*/

}

Merci beaucoup :)

Lena.

Afficher la suite

A voir également:

Fond en CSS sur plusieurs couleurs
Comment mettre une vidéo en fond d'écran - Guide
Comment mettre un fond de couleur sur libreoffice writer - Guide
Comment mettre un fond de couleur sur word - Guide
La boite à couleurs - Télécharger - Divers Photo & Graphisme
Fond de page word - Guide

2 réponses

Réponse 1 / 2

animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention 738

salut
voici le code en html5

css

#contener {
border:8px solid black;
margin:50px auto;
width:96%;
max-width:1200px;}

header {
height:100px;
background-color:#9f9e9e;
}
nav {
height:auto;
min-height:50px;
background-color:#777676;
}
section {
height:auto;
min-height:400px; /**pour que tu vois**/
background-color:white;
}
footer {
height:100px;
background-color:#777676;
}

html

<!doctype html>
<html>
<head>
<title>ccmtest</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="contener">
<header></header>
<nav></nav>
<section></section>
<footer></footer>
</div>

</body>
</html>

après tu ajuste les valeur mais ca correspond a peu près a ta maquette
voila

pour editer le code brackets est vraiment bien brackets.io

Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.

Xxlena Messages postés 146 Date d'inscription Statut Membre Dernière intervention

Super, j'ai plus qu'à gérer les marges pour qu'il n'y en ai plus et que les bandes soient collées au bord de l'écran :) Merci beaucoup !

animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention 738

en fait ce ne sont pas que les marges a modifier
pour l'horizontal
dans #contener
max-width:1200px; (qui limite la largeur maximale) et width:96%; (qui donne la largeur)
pour le vertical
margin:50px auto;

Xxlena Messages postés 146 Date d'inscription Statut Membre Dernière intervention

Ah impeccable, du coup j'ai juste modifié le max-width en 100% pour que ça s'affiche comme je le voulais :) Je vais essayer de mettre mon texte tout ça à l'interieur, j'espère que ça va mieux fonctionner qu'avec mon truc ! Merci beaucoup en tout cas :)

Si tu sais répondre à ma dernière petite question :
J'aurai aimé que la barre du bas (la grise) soit fixée en bas de l'écran, tu saurais quoi rajouter pour que ça le fasse ?
Merci :)

Réponse 2 / 2

animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention 738

ok comme ca fait changer css et html de fixer le footer revoici le code
css

body, html{
height:100%;
margin:0;
padding:0;
}
#contener {
position:relative;
border:8px solid black;
margin:0;
height:100%;
height: calc(100% - 16px);

}

header {
height:100px;
background-color:#9f9e9e;
}
nav {
height:auto;
min-height:50px;
background-color:#5d5c5c;
}
section {
height:auto;
min-height: calc(100% - 150px); /**pour que tu vois**/
background-color:white;
}
footer {
position:fixed;
height:100px;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color:#5d5c5c;
bottom:0;
border:8px solid black;
border-top:none;
}

html dans <body>

<div id="contener">
<header></header>
<nav></nav>
<section></section>
</div>
<footer></footer>
</body>

Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.

Xxlena Messages postés 146 Date d'inscription Statut Membre Dernière intervention

J'essaierai demain :) Merci beaucoup !

animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention 738

ok je pense que tu peux mettre le sujet en résolu

Xxlena Messages postés 146 Date d'inscription Statut Membre Dernière intervention

Je viens de regarder, c'est parfaitement ce que je recherchais ! Merci énormément pour ton aide, je vais mettre le sujet en résolu :)

Discussions similaires

"Couleur de page" pour une seule page

Retrouver réglages couleurs d'origine de mon écran W10

rétablir les couleurs d'origine

Intégrer une couleur de page à une seule page

Changer la couleur de certaines pages dans un fichier word 07

Votre réponse

Discussions similaires