Centrer une page et mettre un arrière plan
Résolu/Fermé
A voir également:
- Centrer une page et mettre un arrière plan
- Supprimer une page word - Guide
- Arrière plan - Guide
- Traduire une page web - Guide
- Créer une page facebook - Guide
- Page d'accueil iphone - Guide
2 réponses
AssassinTourist
Messages postés
5709
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 310
21 mars 2012 à 09:48
21 mars 2012 à 09:48
Bonjour,
Comment fais-tu ton site ?
Comment fais-tu ton site ?
Je le fais en HTML , Je t'envoie Le code :
HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
<title>Les Videos De Drayle95</title>
<link rel="stylesheet" href="style/style(1).css" type="text/css" media="all" >
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
</head>
<body>
<h2><center><big>Bienvenue Dans La Page D'Accueil Des Videos De Drayle95 !</big></center></h2>
<br/>
<center><img src="enconstruction.gif" height="150" width="300" ></center>
<br />
<ul id="navigation">
<img src="barre de navigation/buttons/home.gif">
<li><a href="#">Home</a></li>
<img src="barre de navigation/buttons/.gif">
<li><a href="#">Vidéos</a></li>
<img src="barre de navigation/buttons/home.gif">
<li><a href="#">Home</a></li>
<img src="barre de navigation/buttons/home.gif">
<li><a href="#">Home</a></li>
</ul>
<br />
<br /><br /><br /><br />
<div class="imageflottante" alt="Image flottante">
<img src="drayle95logo.jpg" height="100" width="200" alt "Logo De Drayle95" >
<ul>
<b><li><a href="#1/Présentation" " class="type1 ">1/ Présentation</a></li></b><br />
<b><li><a href="#2/Matériel Utilisé" " class="type1 ">2/ Matériel Utilisé</a></li></b><br />
<b><li><a href="#3/Résaux Sociaux et Autres" " class="type1 ">3/ Résaux Sociaux Et Autres</a></li></b><br />
<b><li><a href="#4/ Les Visites" " class="type1 ">4/ Les Visites</a></li></b><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 /><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 />
<br />
<br />
<br />
<br />
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<center><h2 id="1/Présentation">1/Présentation</h2></center>
<b><h3> Ce site est consacré a mes videos qui d'ailleurs sont principalement avec des gormitis . J'ai aussi une page Youtube nommée Drayle95 . Mais de toute façon je vais mettre un paragraphe "Résaux sociaux et Autres" un peu plus tard qui vous proposera de partager le site dans les résaux sociaux tels que Twiter , Facebook , Google + etc... </h3></b>
<center><h2 id="2/Matériel Utilisé">2/Matériel Utilisé</h2></center>
<b><h3> Le Matériel utilisé pour la creation de mes videos niveau tournage de la video est :
<ul>
<li> - Un appareil Photo Finepix</li>
<li> - Les fameux SIX Gormitis</li>
<li> - La voiture de messieurs les gormitis</li>
<li> - Une sorte de "tapis" vert pour l'arrière-plan des videos</li>
</ul>
Le Matériel utilisé pour la creation de mes videos niveau montage de la video est :
-AVID Studio , un logiciel de montage video .
Voila la liste du matériel que j'utilise pour faire mes videos .</h3></b>
<center><h2 id="3/Résaux Sociaux et Autres">3/ Résaux Sociaux Et Autres</h2></center>
<b><h3> Merci de partager cette page sur les résaux sociaux pour la faire connaitre à d'autres personnes:
<ul>
<li> - Pour partager cette page sur Facebook , cliquez ici :</li>
<li> - Pour partager cette page sur Twitter , cliquez ici :</li>
<li> - Pour partager cette page sur LinkedIn , cliquez ici :</li>
<li> - Pour partager cette page sur Google + , cliquez ici :</li>
<li> - Pour partager cette page sur MySpace , cliquez ici :</li>
<br />
<br />
Merci beaucoup de partager la page .</h3></b>
<center><h2 id="4/ Les Visites">4/ Les Visites</h2></center>
<b><h3> Le nombre de personnes ayant deja visité le site est inscrit ci-dessous : </h3></b>
<center><script type="text/javascript" src="http://www.abcompteur.com/cpt/?code=6/31/12096/2/1&ID=655933"></script><noscript><a href="http://www.abcompteur.com/">ABCompteur : compteur gratuit</a></noscript></center>
<address>Site Créé le : 18 / 03 / 12
<br />
Site Mis En Ligne le :
<br />
Copyright Drayle95<br>
</address>
</body>
</html>
Et Le CSS :
body {
font-family: verdana ;
background-color: #125864;
}
#navigation {list-style: none; background-color: #000; width: 1616px; height: 70px; border: 1px solid #000;}
#navigation li {display: inline; margin-right: 40px}
#navigation li a{color: #FFF9FB; font-size:30px; text-decoration: none}
#navigation li a:hover{color: purple}
div {
width: 200px;
margin-left: 0px;
border: solid black 5px ;
background: black;
color: white;
}
a.type1 { color: white; }
a.type1:hover { color: purple;}
h2 {
text-shadow : #000 1px -1px 2px;
color : white ;
}
.imageflottante
{
float:left;
}
Voila merci de ton aide !
Drayle95
HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
<title>Les Videos De Drayle95</title>
<link rel="stylesheet" href="style/style(1).css" type="text/css" media="all" >
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
</head>
<body>
<h2><center><big>Bienvenue Dans La Page D'Accueil Des Videos De Drayle95 !</big></center></h2>
<br/>
<center><img src="enconstruction.gif" height="150" width="300" ></center>
<br />
<ul id="navigation">
<img src="barre de navigation/buttons/home.gif">
<li><a href="#">Home</a></li>
<img src="barre de navigation/buttons/.gif">
<li><a href="#">Vidéos</a></li>
<img src="barre de navigation/buttons/home.gif">
<li><a href="#">Home</a></li>
<img src="barre de navigation/buttons/home.gif">
<li><a href="#">Home</a></li>
</ul>
<br />
<br /><br /><br /><br />
<div class="imageflottante" alt="Image flottante">
<img src="drayle95logo.jpg" height="100" width="200" alt "Logo De Drayle95" >
<ul>
<b><li><a href="#1/Présentation" " class="type1 ">1/ Présentation</a></li></b><br />
<b><li><a href="#2/Matériel Utilisé" " class="type1 ">2/ Matériel Utilisé</a></li></b><br />
<b><li><a href="#3/Résaux Sociaux et Autres" " class="type1 ">3/ Résaux Sociaux Et Autres</a></li></b><br />
<b><li><a href="#4/ Les Visites" " class="type1 ">4/ Les Visites</a></li></b><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 /><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 />
<br />
<br />
<br />
<br />
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<center><h2 id="1/Présentation">1/Présentation</h2></center>
<b><h3> Ce site est consacré a mes videos qui d'ailleurs sont principalement avec des gormitis . J'ai aussi une page Youtube nommée Drayle95 . Mais de toute façon je vais mettre un paragraphe "Résaux sociaux et Autres" un peu plus tard qui vous proposera de partager le site dans les résaux sociaux tels que Twiter , Facebook , Google + etc... </h3></b>
<center><h2 id="2/Matériel Utilisé">2/Matériel Utilisé</h2></center>
<b><h3> Le Matériel utilisé pour la creation de mes videos niveau tournage de la video est :
<ul>
<li> - Un appareil Photo Finepix</li>
<li> - Les fameux SIX Gormitis</li>
<li> - La voiture de messieurs les gormitis</li>
<li> - Une sorte de "tapis" vert pour l'arrière-plan des videos</li>
</ul>
Le Matériel utilisé pour la creation de mes videos niveau montage de la video est :
-AVID Studio , un logiciel de montage video .
Voila la liste du matériel que j'utilise pour faire mes videos .</h3></b>
<center><h2 id="3/Résaux Sociaux et Autres">3/ Résaux Sociaux Et Autres</h2></center>
<b><h3> Merci de partager cette page sur les résaux sociaux pour la faire connaitre à d'autres personnes:
<ul>
<li> - Pour partager cette page sur Facebook , cliquez ici :</li>
<li> - Pour partager cette page sur Twitter , cliquez ici :</li>
<li> - Pour partager cette page sur LinkedIn , cliquez ici :</li>
<li> - Pour partager cette page sur Google + , cliquez ici :</li>
<li> - Pour partager cette page sur MySpace , cliquez ici :</li>
<br />
<br />
Merci beaucoup de partager la page .</h3></b>
<center><h2 id="4/ Les Visites">4/ Les Visites</h2></center>
<b><h3> Le nombre de personnes ayant deja visité le site est inscrit ci-dessous : </h3></b>
<center><script type="text/javascript" src="http://www.abcompteur.com/cpt/?code=6/31/12096/2/1&ID=655933"></script><noscript><a href="http://www.abcompteur.com/">ABCompteur : compteur gratuit</a></noscript></center>
<address>Site Créé le : 18 / 03 / 12
<br />
Site Mis En Ligne le :
<br />
Copyright Drayle95<br>
</address>
</body>
</html>
Et Le CSS :
body {
font-family: verdana ;
background-color: #125864;
}
#navigation {list-style: none; background-color: #000; width: 1616px; height: 70px; border: 1px solid #000;}
#navigation li {display: inline; margin-right: 40px}
#navigation li a{color: #FFF9FB; font-size:30px; text-decoration: none}
#navigation li a:hover{color: purple}
div {
width: 200px;
margin-left: 0px;
border: solid black 5px ;
background: black;
color: white;
}
a.type1 { color: white; }
a.type1:hover { color: purple;}
h2 {
text-shadow : #000 1px -1px 2px;
color : white ;
}
.imageflottante
{
float:left;
}
Voila merci de ton aide !
Drayle95
AssassinTourist
Messages postés
5709
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 310
21 mars 2012 à 13:51
21 mars 2012 à 13:51
Dans le html
Tu rajoutes un div qui vas intégrer ton ton site. Tu vas avoir :
Dans le css,
Tout est bien expliqué sur le Site du Zéro, si tu cherches à te former.
Tu rajoutes un div qui vas intégrer ton ton site. Tu vas avoir :
<body>
<div id="bloc_page">
<!-- Tout le contenu du site -->
</div>
</body>
Dans le css,
body{
background-image: url("ton image de fond.jpg"); /* Ton image de fond. Fais attention à où est-ce que tu mets cette image par rapport à cette page */
}
#bloc_page{
width: 2000px; /* On est obligé de rajouter une largeur */
margin: auto; /* C'est ça qui va centrer ce div principal */
}
Tout est bien expliqué sur le Site du Zéro, si tu cherches à te former.
AssassinTourist
Messages postés
5709
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 310
21 mars 2012 à 15:07
21 mars 2012 à 15:07
Cool =)
