Partage

aide mise en page plz ;..

21 avril 2017 à 13:01:58

bonjour voici mon site : https://image.noelshack.com/fichiers/2017/16/1492771959-sans-titre.png

j'aimerais que ce soit propre, que le header soit tout en haut etc.. un peu comme mon ancien site mais je sais pas trop comment faire :/ http://lwprogrammation-serveur.mtxserv.fr/

Merci.

mince j'ai oublier le code :

<!DOCTYPE html>
<html>
    <head>
    	<link rel="stylesheet" href="style.css" />
        <meta charset="utf-8" />
        <title>G_PROG</title>
    </head>
    <header>         
        	<a href="index.html"><img src="logo.png" id="logo"> </a>
        	<a href="silver.html"><img src="silver.png" id="silverr"> </a>
        	<a href="gold.html"><img src="gold.png" id="goldd"> </a>
        	<a href="platine.html"><img src="platine.png" id="platinee"> </a>
        	<a href="connexion.html"><img src="connexion.png" id="conn"> </a>
        	<a href="inscription.html"><img src="inscription.png" id="inscrr"> </a>
    </header>

    <body>
   		

    </body>


    <footer>
    	<a href="contacte.html"><img src="contacte.png" id="contact"/> </a>
	</footer>
</html>
header
{
    background-image: url("fond.jpg");       
    left: 0;
    right: 0;
    background-size: 120%;
}

#logo
{
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#logo:hover
{
	background:transparent;
    height: 100px;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#contact
{
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#contact:hover
{
	background:transparent;
    height: 100px;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

footer
{
	margin-left: 200px;
  padding: 600px;

}

#silverr:hover
{
	background:transparent;
    height: 100px;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#silverr
{
	margin-left: 75px;
	 -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#goldd
{
	margin-left: 75px;
	 -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#goldd:hover
{
	background:transparent;
    height: 100px;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#platinee
{
	
    margin-left: 75px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#platinee:hover
{
	background:transparent;
    height: 100px;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#conn
{
	margin-left: 75px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#conn:hover
{
	background:transparent;
    height: 100px;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#inscrr
{
	margin-left: 25px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#inscrr:hover
{
	background:transparent;
    height: 100px;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

body
{
	background-image: url("background.jpg");
    border-bottom: 1px solid #f1f2f7;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1002;
    background-position: top;
    position: relative;
}


-
Edité par jeromecoco 21 avril 2017 à 13:03:37

21 avril 2017 à 13:17:58

Bonjour,

Les balises header et footer doivent être situées à l'intérieur de body. Même si les navigateurs le font eux même (peut être pas tous).

Pour que le header soit collé en haut il faut retirer la marge de body et header si il en a une. Donc dans le css de body il faut ajouter margin : 0px;

Bonne continuation !

aide mise en page plz ;..

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown