[CSS] Problème d'alignement de division

Résolu/Fermé
Orodrake Messages postés 22 Date d'inscription jeudi 8 novembre 2012 Statut Membre Dernière intervention 12 janvier 2016 - Modifié par Orodrake le 6/01/2015 à 17:08
Orodrake Messages postés 22 Date d'inscription jeudi 8 novembre 2012 Statut Membre Dernière intervention 12 janvier 2016 - 9 janv. 2015 à 14:09
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 ? :/

4 réponses

NICORIGOLO-tonvoisindeclasse
7 janv. 2015 à 12:17
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>
4
Orodrake Messages postés 22 Date d'inscription jeudi 8 novembre 2012 Statut Membre Dernière intervention 12 janvier 2016 15
9 janv. 2015 à 14:09
Merci !
Ça fonctionne :)
0
inspiring Messages postés 1813 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 31 décembre 2018 265
6 janv. 2015 à 17:27
Bonjour,

C'est classique quand on joue avec des marge.
Ajoute un
body {
overflow-x:hidden
} 


au code CSS

Pourquoi des valeur de 9999rem ?
1
Orodrake Messages postés 22 Date d'inscription jeudi 8 novembre 2012 Statut Membre Dernière intervention 12 janvier 2016 15
7 janv. 2015 à 09:23
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 !
0
inspiring Messages postés 1813 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 31 décembre 2018 265
Modifié par inspiring le 7/01/2015 à 10:46
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
0