Sujet Précédent Sujet Suivant

Mettre un fond/section sur mon site

Fermé
Azrod - 8 déc. 2016 à 11:30
 Azrod - 8 déc. 2016 à 18:29
Bonjour, j'aimerais mettre un fond pour chaque section, comme par exemple ceci http://optimalstrategies.co.uk/wp-content/uploads/2015/01/one-page-design.png

Mon code html : 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Accueil</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/png" href="favicon.png" />
<script type="text/javascript" src=""></script>

<div id="op-verticalnav">
<ul class="op-sectionlist">
<li class="op-v-item"><a class="op-v-link" href="#mysect1" rel="nofollow noopener noreferrer" target="_blank"><span class="v-marker"></span><span class="op-v-itemdesc"><span class="op-v-itembg">Accueil</span></span></a></li>
<li class="op-v-item"><a class="op-v-link" href="#mysect2" rel="nofollow noopener noreferrer" target="_blank"><span class="v-marker"></span><span class="op-v-itemdesc"><span class="op-v-itembg">Vidéos</span></span></a></li>
<li class="op-v-item"><a class="op-v-link" href="#mysect3" rel="nofollow noopener noreferrer" target="_blank"><span class="v-marker"></span><span class="op-v-itemdesc"><span class="op-v-itembg">Phrases-cultes</span></span></a></li>
<li class="op-v-item"><a class="op-v-link" href="#mysect4" rel="nofollow noopener noreferrer" target="_blank"><span class="v-marker"></span><span class="op-v-itemdesc"><span class="op-v-itembg">Dons</span></span></a></li>
<li class="op-v-item"><a class="op-v-link" href="#mysect5" rel="nofollow noopener noreferrer" target="_blank"><span class="v-marker"></span><span class="op-v-itemdesc"><span class="op-v-itembg">VFoires Aux Questions</span></span></a></li>
<li class="op-v-item"><a class="op-v-link" href="#mysect6" rel="nofollow noopener noreferrer" target="_blank"><span class="v-marker"></span><span class="op-v-itemdesc"><span class="op-v-itembg">Contact</span></span></a></li>
</ul>
</div>

<div class="content">
<section id="mysect1">
<h1>Accueil</h1>
<body>
	<h2 align="center">Bienvenu sur mon site !</h2>

	<h3>Je suis Kayrosse, un jeune youtubeur agé de 18 ans, qui s'amuse avec vous en parlant des pubs grâce à la série Wait what ?!</h3><br/>

	<div id="slider">
	<figure>
		<a href="https://twitter.com/KayrosseYT" rel="nofollow noopener noreferrer" target="_blank"><img src="" alt></a>
		<a href="https://www.instagram.com/kayrosseyt/" rel="nofollow noopener noreferrer" target="_blank"><img src="" alt></a>
		<a href="https://www.facebook.com/pages/Kayrosse/949115921793744" rel="nofollow noopener noreferrer" target="_blank"><img src="" alt></a>
		<a href="https://www.youtube.com/channel/UCiLNrBzXERSYVsjJ08eqB4w/feed" rel="nofollow noopener noreferrer" target="_blank"><img src="" alt></a>
	</figure>
	</div>
</body>
</section>
<section id="mysect2">
<h1>Vidéos</h1>
<body>

	<h2 align="center">Bienvenu sur la page Videos !</h2>
	<h3 align="center">Vous pouvez retrouver toutes mes videos ci-dessou.</h3><br/><br/>

	<h4 align="left">Vous suivez la serie Wait what ? Toutes les videos sont ci-dessou.</h4>

	<div id="serieww">
			<a href="wait-what1.html" rel="nofollow noopener noreferrer" target="_blank"><img src="" alt="" /></a><a href="wait-what2.html" rel="nofollow noopener noreferrer" target="_blank"><img src="" alt="" /></a><a href="wait-what3.html" rel="nofollow noopener noreferrer" target="_blank"><img src="" alt="" /></a>
	</div> 
</body>
</section>
<section id="mysect3">
<h1>Phrases-cultes</h1>
<body>

<h2 align="center">Bienvenu sur la page Phrases cultes !</h2>
<h3 align="center">Vous pouvez retrouver toutes mes phrases cultes, que je répète dans quasiment chaque vidéos.</h3>

</body>
</section>
<section id="mysect4">
<h1>Dons</h1>
<body>

	<h2 align="center">Bienvenu sur la page Foire Aux Questions !</h2>
	<h3 align="center">Comme vous le voyait ci-dessous, vous pouvez voir toutes les questions auxquelles j'ai deja repondu.</h3><br/><br/>

	<h4 align="center">Pourquoi Kayrosse ?</h4>
	<p align="center">Et bhe je sais pas du tout. Je me suis inspiré de mon prenom "Kevin" et voila.</p><br/>
	<h4 align="center">Qu'est ce que j'utilise ?</h4>
	<p align="center">Au niveau du materiel, j'ai une camera Nikon et au niveau logiciel j'utilise Sony Vegas Pro.</p></br/>
	<h4 align="center">Pourquoi un moulin en fond ?</h4>
	<p align="center">Parce-que je suis un paysan.</p></br/>

</body>
</section>
<section id="mysect5">
<h1>Foires Aux Questions</h1>
<body>

	<h2 align="center">Bienvenu sur la page Contact !</h2>
	<h3 align="center">Si vous avez des questions, n'hesitez pas à me les envoyer, j'y repondrais dès que je pourrais.</h3>

</body>
</section>
<section id="mysect6">
<h1>Contact</h1>
<section id="contact">
		<form method="post" action="traitement.php">
		<p class="titre">Coordonnées</p>
		<fieldset id="coordonnees">
		<p id="civilite"><label>Civilité : </label>
			<input type="radio" name="civilite" value="M." />M.
			<input type="radio" name="civilite" value="Mlle" />Mlle
			<input type="radio" name="civilite" value="Mme" />Mme
		</p>
		<label>Nom : </label>
			<input type="text" name="nom" size="30" /><br />
		<label>Adresse : </label>
			<input type="text" name="adresse" size="30" /><br />
		<label>Code postal : </label>
			<input type="text" name="codepostal" size="30" /><br />
		<label>Ville : </label>
			<input type="text" name="ville" size="30" /><br />
		<label>Pays : </label>
			<select name="pays">
			<option value="france">France</option>
			<option value="belgique">Belgique</option>
			<option value="suisse">Suisse</option>
			</select>
		<p id="interets"><label>Centres intérêts : </label>
			<input type="checkbox" name="interets[]" value="sport" />Sport
			<input type="checkbox" name="interets[]" value="cinema" />Cinéma<br />
			<input type="checkbox" name="interets[]" value="internet" />Internet
			<input type="checkbox" name="interets[]" value="voyages" />Voyages
			<input type="checkbox" name="interets[]" value="jeuxvideos" />Jeux Vidéos
			<input type="checkbox" name="interets[]" value="nourritures" />Nourritures
			<input type="checkbox" name="interets[]" value="anime" />Anime
			<input type="checkbox" name="interets[]" value="musique" />Musique
			<input type="checkbox" name="interets[]" value="collection" />Collection
		</p>
		</fieldset>
		<p class="titre">Message</p>
		<fieldset id="message">
		<textarea name="comments" rows="5" cols="40"></textarea>
		</fieldset>
		<p id="buttons">
		<input type="submit" value="Envoyer" />
		<input type="reset" value="Recommencer" />
		</p>
		</form>
	</section>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><p> Nous y répondrons le plus vite possible, si vous n'avez pas de réponse après une semaine pensez à vérifier dans vos spams et si vous ne trouvez rien, n'hésitez pas à nous contactez depuis les réseaux sociaux. </p><br/>
</section>
</div>


<footer>
  <p>© Kayrosse - Tout droit réservé par Stephane Lotto</p>
  <p>Un problème avec le site ? <a href="mailto:***@***" rel="nofollow noopener noreferrer" target="_blank">
  ***@***</a>.</p>

	<section id="logotwitter">
		<a href="https://twitter.com/KayrosseYT" rel="nofollow noopener noreferrer" target="_blank"><figure>
                <img src="" alt="" width="50" height="50" />
            </figure></a>
	</section>
	<section id="logoinstagram">
		<a href="https://www.instagram.com/kayrosseyt/" rel="nofollow noopener noreferrer" target="_blank"><figure>
                <img src="" alt="" width="50" height="50" />
            </figure></a>
	</section>
	<section id="logofacebook">
		<a href="https://www.facebook.com/pages/Kayrosse/949115921793744" rel="nofollow noopener noreferrer" target="_blank"><figure>
                <img src="" alt="" width="50" height="50" />
            </figure></a>
	</section>
	<section id="logoyoutube">
		<a href="https://www.youtube.com/channel/UCiLNrBzXERSYVsjJ08eqB4w/feed" rel="nofollow noopener noreferrer" target="_blank"><figure>
                <img src="" alt="" width="50" height="50" />
	</section>
</footer> 

</html>


Mon code css : 
/* Menu */
#op-verticalnav {position:fixed; top:0; right:0; left: auto;height: 100%;display:table}
#op-verticalnav .op-sectionlist {height:100%; text-align:center; display:table-cell; vertical-align:middle}
#op-verticalnav .op-v-item {display:block}
#op-verticalnav .justify-height {}
#op-verticalnav .op-v-link {display:block; margin:12px 0}
#op-verticalnav .v-marker {width:15px; height:15px; border-radius:50%; background-color:white; display:inline-block; vertical-align:middle; margin-bottom:-2px; margin-right:10px;border: 1px solid #ff001b;}
#op-verticalnav .op-v-link:hover .v-marker, #op-verticalnav .op-v-item .op-v-link.active .v-marker {background-color:rgba(255,0,27,1); }
#op-verticalnav .op-v-itemdesc {display:inline-block; font-size:14px; position:absolute; white-space:nowrap; line-height:normal; padding:0 34px 0 0;vertical-align:middle}
#op-verticalnav .op-v-itemdesc .op-v-itembg{display:inline-block; background-color:rgba(0,0,0,.5); color:#fff; padding:4px 10px 6px 10px; border:1px solid rgba(160,160,160,.2); border-radius:4px; }
#op-verticalnav .op-v-link:hover .op-v-itemdesc {right:0px; }

section h1 {padding:30px; text-align:center; color:white; background:#ff001b; border-top:1px solid white; margin:0}
section:nth-child(even) h1 {background:#ff001b;}
/* Fin menu */

/* Fond */

/* Fin fond */

/* Texte */ 
h2
{
    color: white;
}
h3
{
    color: white;
}
h4
{
    color: white;
}
h5
{
    color: white;
}
p
{
    color: white;
}
/* Fin texte */

/* Images série */
#waitwhat1, #waitwhat2, #waitwhat3 {
   float:left;
   margin:0; padding:0;
   width: 130px;
   height: 120px;
}
#waitwhat1 img, #waitwhat2 img , #waitwhat3 img {
   border:0; text-decoration:none;
   width: 130px;
   height: 120px;
}
/* Fin images série */

/* Slider */
div#slider { width: 80%; max-width: 1000px; }
div#slider figure {
  position: relative; 
  width: 500%;
  margin: 0;
  padding: 0;
  font-size: 0;
  text-align: left;
}
div#slider figure img { width: 20%; height: auto; float: left; }
div#slider { width: 80%; max-width: 1000px; overflow: hidden }
@keyframes slidy {
  0% { left: 0%; }
  20% { left: 0%; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  95% { left: -300%; }
  100% { left: -400%; }
}
div#slider figure {
  position: relative;
  width: 500%;
  margin: 0;
  padding: 0;
  font-size: 0;
  left: 0;
  text-align: left;
  animation: 30s slidy infinite;
}
#slider {
	margin-left: auto;
	margin-right: auto;
}

/* Fin slider */

/*  Formulaire */
p.titre {
  background:#ff001b;
  color:#345071;
  padding:.2em .3em;
  font-size:1.2em;
  border:2px outset #ff001b;
  position:relative;
  margin-bottom:-1em;
  width:10em;
  margin-left:1em;
  margin-top:1em;
}
.center-div {
     margin: 0 auto;
     width: 100px; 
}

fieldset {
  border:none;
  margin-bottom:1em;
  width:24em;
  padding-top:1.5em;
}
select {
  margin-left:9em;
  margin-bottom:0;
}
fieldset#coordonnees {
  background: white;
  border:outset #ff001b;
}
#coordonnees label {
  position:absolute;
  font-size:90%;
  padding-top:.2em;
  left:20px;
}
#coordonnees input {
  margin-left:9em;
  line-height:1.4em;
  margin-bottom:.2em;
}
fieldset#message {
  background: white;
  border:outset #ff001b;
}
#civilite {
  font-size:90%;
  color: black;
}
#civilite input {
  margin-left:9em;
}
#civilite input + input {
  margin-left:1em;
}
#interets {
   font-size:90%;
   color: black;
}
#interets input {
   margin-left:9em;
}
#interets input +input {
   margin-left:1em;
}
#interets br+input {
  margin-left:9em;
}
textarea {
  font:.8em "Trebuchet MS", Verdana, sans-serif;
  width:29em;
  padding:.2em;
}
  background:#DED983;
  font:1.2em "Trebuchet MS", Verdana, sans-serif;
  color:#345071;
}
p#buttons {
  text-align:center;
}

#contact {
  position: absolute;
  left: 50%;
  width: 400px;
  margin-left: -200px;
}
/* Fin formulaire */

/* Footer */
  • {margin:0;padding:0;} body, html{height:100%;}body{text-align:center;} #main{max-width:1280px;min-height:100%;margin:0 auto;position:relative;} footer{background:#ff001b;position:fixed;bottom:0;width:100%;padding-top:50px;height:50px;}#seriewaitwhat { position: relative; left: 50%; width: 400px; margin-left: -200px;}#logotwitter { left:10%; position:absolute; bottom:0; z-index:1000;}#logoinstagram { left:20%; position:absolute; bottom:0; z-index:1000;}#logofacebook { right:20%; position:absolute; bottom:0; z-index:1000;}#logoyoutube { right:10%; position:absolute; bottom:0; z-index:1000;}/* FIn footer */
A voir également:

1 réponse

Réponse 1 / 1
SKYMWebDev Messages postés 162 Date d'inscription jeudi 10 novembre 2016 Statut Membre Dernière intervention 14 février 2018 176
8 déc. 2016 à 18:27
il suffit de rajouter une classe a chaque div ou vous vouez changer le fond puis dans le css si vous avez une div avec la class "rouge" il suffit de faire 
.rouge {background-color:red;}
0
Azrod
8 déc. 2016 à 18:29
D'accord merci beaucoup
0

Discussions similaires

Nouveau coco tchat ?
LoupiotteDesTenebres -
brucine -

9 réponses
[SUJET GROUPÉ] Le site COCO.GG est définitivement fermé.
Utilisateur anonyme -
Panth33ra -

20 réponses
Chemin Logo du site de la Cité de l'espace
Keiios -
blux -

11 réponses
'Votre colis est dans le site de livraison qui dessert votre adresse' que faire
relakztek82 -
Unemeuf -

25 réponses
C'est quoi le site qui remplace coco chat
TP3 -
bazfile -

2 réponses