aide mise en page plz ;.. par jeromecoco - page 1

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

jeromecoco

21 avril 2017 à 13:01:58

Evury

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 ;..

aide mise en page plz ;..

Supprimer

Modérer

Signaler le message aux modérateurs