[CSS] Problème d'alignement de division
Résolu
Bonjour !
Je commence à développer en html/css/php et pour réaliser mon site fictif j'aimerais faire une entête, c'est-à-dire un bandeau d'une certaine couleur en haut de mon site (pour y mettre plus tard le nom du site, et cætera.
A force de chercher sur le net j'ai réussi à le coller à droite mais il été trèèès (trop) long à droite, mais je n'ai pas encore trouvé la bonne configuration.
Voici mon style css pour ladite entête :
(en image - http://image.noelshack.com/fichiers/2015/02/1420560510-ccm1.png)
#entete1
{
background-color: #051401;
float: top;
color: #FFFFFF;
text-align: center;
height: 140px;
margin: 0 -9999rem;
padding: 0.25rem 9999rem;
position: relative;
}
Et voilà ce que rend ma page html :
http://image.noelshack.com/fichiers/2015/02/1420560324-ccm2.png
(Vous noterez avec la barre de défilement en bas que la div va très loin à droite)
Des idées ? :/
Je commence à développer en html/css/php et pour réaliser mon site fictif j'aimerais faire une entête, c'est-à-dire un bandeau d'une certaine couleur en haut de mon site (pour y mettre plus tard le nom du site, et cætera.
A force de chercher sur le net j'ai réussi à le coller à droite mais il été trèèès (trop) long à droite, mais je n'ai pas encore trouvé la bonne configuration.
Voici mon style css pour ladite entête :
(en image - http://image.noelshack.com/fichiers/2015/02/1420560510-ccm1.png)
#entete1
{
background-color: #051401;
float: top;
color: #FFFFFF;
text-align: center;
height: 140px;
margin: 0 -9999rem;
padding: 0.25rem 9999rem;
position: relative;
}
Et voilà ce que rend ma page html :
http://image.noelshack.com/fichiers/2015/02/1420560324-ccm2.png
(Vous noterez avec la barre de défilement en bas que la div va très loin à droite)
Des idées ? :/
4 réponses
-
Salut je t'ai fait un petit truc ça marche bien ! ;) Teste le !
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
top: 0;
}
.entete1 {
padding: 0;
top: 0;
background:orange;
height:200px;
width:100%;
}
.corps {
background:darkgrey;
height:600px;
width:100%;
}
</style>
</head>
<body>
<div class="entete1">MON ENTETE</div>
<div class="corps">MON CORPS (html hein)</div>
</body>
</html> -
Bonjour,
C'est classique quand on joue avec des marge.
Ajoute unbody { overflow-x:hidden }
au code CSS
Pourquoi des valeur de 9999rem ? -
J'ai ajouté le overflow-x hidden dans mon body mais ça n'a rien changé, cela a juste caché ma barre défilement en bas.
Et je ne sais pas vraiment pourquoi j'ai mis 9999rem, je l'ai juste copié-collé sur un site qui expliquait comment coller une div sur les côtés ! -
je l'ai juste copié-collé sur un site
Ben si il y a bien un truc à ne pas faire, c'est copier/coller un code que l'on à pas compris :)
en gros, un padding de 9999rem ajoute des marge de 16000 pixels à l'élément.
A moins que tu cibles des visiteurs ayant un écran de plus de 33000 pixels de large :o , ca ne sert à rien
si tu veux faire un bandeau en haut, tu fais :
HTML<body> <div class="wrap"> <div class="bandeau"><h4>mon bandeau</h4></div> </div> ...
CSS.wrap {position:relative; height:50px} .bandeau {position:absolute; right:0; left:0; background:#ddd; text-align:center;height:50px}
Ecrit et assumé par Inspiring - copyright 2009-2014
