Sujet Précédent Sujet Suivant

Fond en CSS sur plusieurs couleurs

Résolu/Fermé
Xxlena Messages postés 146 Date d'inscription samedi 20 avril 2013 Statut Membre Dernière intervention 10 janvier 2020 - 16 mars 2015 à 19:27
Xxlena Messages postés 146 Date d'inscription samedi 20 avril 2013 Statut Membre Dernière intervention 10 janvier 2020 - 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.

2 réponses

Réponse 1 / 2
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 18/03/2015 à 16:39
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
Xxlena Messages postés 146 Date d'inscription samedi 20 avril 2013 Statut Membre Dernière intervention 10 janvier 2020
18 mars 2015 à 17:50
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
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
18 mars 2015 à 18:07
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
Xxlena Messages postés 146 Date d'inscription samedi 20 avril 2013 Statut Membre Dernière intervention 10 janvier 2020
18 mars 2015 à 19:21
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
Réponse 2 / 2
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 18/03/2015 à 20:54
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
Xxlena Messages postés 146 Date d'inscription samedi 20 avril 2013 Statut Membre Dernière intervention 10 janvier 2020
19 mars 2015 à 21:57
J'essaierai demain :) Merci beaucoup !
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
19 mars 2015 à 22:03
ok je pense que tu peux mettre le sujet en résolu
0
Xxlena Messages postés 146 Date d'inscription samedi 20 avril 2013 Statut Membre Dernière intervention 10 janvier 2020
22 mars 2015 à 18:21
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

trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
CSS/Comment enlever couleur liens ?
alexou1984 -
Tonio -

6 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
Transparence en tete et bas de page
Sabrina -
sabrina -

8 réponses
Fond d'écran rogné et zoomé
DeeJay-TheBot -
DeeJay-TheBot -

2 réponses