Fond en CSS sur plusieurs couleurs

Résolu
Xxlena Messages postés 160 Statut Membre -  
Xxlena Messages postés 160 Statut Membre -
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.

2 réponses

  1.
    animostab Messages postés 3003 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.
    0
    1. Xxlena Messages postés 160 Statut Membre
       
      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 !
      0
    2. animostab Messages postés 3003 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;
      0
    3. Xxlena Messages postés 160 Statut Membre
       
      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 :)
      0
  2. animostab Messages postés 3003 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.
    0
    1. Xxlena Messages postés 160 Statut Membre
       
      J'essaierai demain :) Merci beaucoup !
      0
    2. animostab Messages postés 3003 Date d'inscription   Statut Membre Dernière intervention   738
       
      ok je pense que tu peux mettre le sujet en résolu
      0
    3. Xxlena Messages postés 160 Statut Membre
       
      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 :)
      0

Discussions similaires

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

8 réponses
Fond d'écran carousel xiaomi
Thomasg -
Albator -

3 réponses
Code source couleur de fond
Mehdi-Amg -
Techno01 -

9 réponses
Impossible de changer mon fond d'écran Redmi Note 9
Slooping -
Do -

27 réponses
Enlever les fond d'ecran carousel auto du tel XIAMI 14
Joo2795 -
MPMP10 -

1 réponse