Webmaster Hub > Header Non collé

Version complète: sur le forum Webmaster Hub : Header Non collé

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

bolo

mercredi 29 mars 2006 à 16:43

Salut

mon header n'est pas collé a ma page il y a un décallage.

http://www.independza.com/client/expay/index.html. Voila mon code

CODE

#header {

background-image: url(../images/background_header);

background-repeat: repeat;

width: 100%;

min-width: 800px;

margin:0;

padding:0;

height:199px;

}

vous pouvez m'expliquer mon erreur
merci

Julien L.

mercredi 29 mars 2006 à 17:06

CODE

html, body {
margin:0;
padding:0;
border:0;
font-family: 'Lucida Grande', Arial, Geneva, Lucida, Helvetica, Verdana, sans-serif;
}

bolo

mercredi 29 mars 2006 à 18:09

salut julien
alors j'ai fais la correction mais malheuresement ca ne change pas

j'ai remarqué que lorsque que j'enlève le h1 dans le div header celui ci est bien collé

captain_torche

mercredi 29 mars 2006 à 18:20

Et si tu enlevais le margin: 20px de ton H1 ?

bolo

mercredi 29 mars 2006 à 18:48

oui c'est bien collé: ) Donc je dois faire comment pour positionner mon h1 ?

Ifmy

mercredi 29 mars 2006 à 20:57

CODE

position: absolute;
right: ...;
left: ...;

par exemple

bolo

jeudi 30 mars 2006 à 00:27

je mets un position absolute pour le h1 ?
Car quand je le mets pour le header les divs se superposent

Dudu

jeudi 30 mars 2006 à 04:46

Salut

Le positionnement absolu fait en sorte que l'élement auquel il est appliqué sorte du flux. C'est comme si il flottait par-dessus la page et qu'on décide de le superposer à "x pixels à partir de la gauche" et "y pixels à partir du haut".

Donc, dans ton cas, tout ce qui suit le header prend sa place dans le flux normal et vient se coller en haut de la page. Donc le header positionné en absolu vient se superposer

Il faut donc, si tu pars dans l'optique de positionner ton header en absolu, que tu décales le reste de ta page. Si ton header fait 70 pixels de haut (par exemple) tu décales de 70 pixels .. ou un peu plus pour laisser une marge.

bolo

jeudi 30 mars 2006 à 11:58

donc j'ai modifé le header

CODE

#header {
    background-image: url(../images/background_header);
    background-repeat: repeat;
    width: 100%;
    margin:0 0 199px 0;
    padding:0;
    height:199px;
    position:absolute;

}

ca se décalle pas c byzarre
http://www.independza.com/client/expay/index.html

et si je mets le margin pour le div milieu tout se décalle (header +milieu) de 199px

Ifmy

jeudi 30 mars 2006 à 13:04

Non non, pas pour le header

mais le h1.

bolo

vendredi 31 mars 2006 à 20:19

Super ca marche

Mais j'ai une autre question. Lorsque on agrandis la fenetre du navigateur la liste et l'image s'écarte et reste toujour collé coté droit de la page.

peut on faire en sorte que ce block reste pres de H1 ?

Ifmy

vendredi 31 mars 2006 à 22:32

j'ai pas bien compris mais peut etre position: fixed;

bolo

lundi 3 avril 2006 à 16:19

Alors j'ai essayé avec position: fixed; rien ne vas plus

Je n'arrive plus déplacer le menu afin qu'il soit apres le logo. J'essaye de jouer sur les marge ou le padding j'arrive pas a le déplacer sur la gauche.

Deuxième question dans le div milieuGauche.

j'ai des liste non ordonnées. J'aimerais faire en sorte que l'écarte entre les photos ne soit pas fixes.
Plus j'aggrandis ma fenetre plus l'ecart des listes est grand a l'inverse plus je réduis ma fenêtre plus celui ci est petit

Quand je mets des pixes l'ecart est fixe

j'espère que tout le monde me comprends

bolo

mardi 4 avril 2006 à 12:40

Je vais essayer de faire étape par étapes.
Donc je suis sur le header. J'essaye d'appliquer un position:fixed.
Puis je apres lui appliquer une marge ?

bolo

mardi 4 avril 2006 à 13:36

J'ai reussi a placé mon menu

Donc deuxième étape placé mon div contenu. J'essaye de lui mettre un taille par exemple 100 px et de le centré

#contenu {
widht:100px;
position: relative; /* on positionne le conteneur */
margin-left: auto;
margin-right: auto;
text-align: left;
border: medium solid #000066;
}

mais ca ne fonctionne pas il ne prends pas de lageur , il reste toujouts a 100%

Julien L.

mardi 4 avril 2006 à 14:22

Bonjour,

Tu as fais une faute de frappe :
widTH:100px; ?

J'ignore si ca a déja été remonté mais le bloc rouge "expay" cache le premier menu "Accueil" (Gentoo / X11 / Opera).

bolo

mardi 4 avril 2006 à 15:54

J'ai tout corrigé. Maintenant ca l'air de fonctionner
Il me reste a centrer les listes de définitions, J'ai essayé de rajouté

CODE

#milieuGauche {
margin-right: 210px;
text-align:center;
}

ou encore <center> mais ca ne bouge pas

>Julien L.
As tu toujours le même problème ?

Julien L.

mardi 4 avril 2006 à 16:09

CITATION(bolo @ mardi 04 avril 2006, 16h54)

>Julien L.
As tu toujours le même problème ?

Oui.

Essaye "margin:auto;" pour centrer un bloc DIV.

bolo

mardi 4 avril 2006 à 16:23

et la tu as toujours le bins sur opera ?

Julien L.

mardi 4 avril 2006 à 16:33

Oui, j'aimerais pouvoir faire un screenshot mais c'est impossible.

bolo

mardi 4 avril 2006 à 16:41

Moi j'ai tester sur Mac

Camino 1.0
FireFox 1.5
Safari
Shiira 1.2.2

Sur Pc
FireFox 1.5
ok pourt tous

Sur IE Le header pars a gauche

J'ai pas Opéra je vais le téléchargé

Sinon tu sais comment faire pour centrer les listes ?

bolo

mardi 4 avril 2006 à 16:45

Sous Opéra Pc. J'ai le mot acceuil qui touche le logo

C'est le problème que tu as ?

Julien L.

mardi 4 avril 2006 à 16:45

Les listes ? L'<ul> du menu ou les <dl class='gallery'> ?

CODE

div#header ul {
#abc
margin:auto;
#xyz
}

OU

div#milieuGauche dl {
#abc
margin:auto;
#xyz
}

captain_torche

mardi 4 avril 2006 à 16:45

J'imagine qu'un

CODE

ul {
text-align: center;
}

devrait fonctionner.
Edit : j'ai peut-être mal compris la question.

Julien L.

mardi 4 avril 2006 à 16:47

CITATION(bolo @ mardi 04 avril 2006, 17h45)

Sous Opéra Pc. J'ai le mot acceuil qui touche le logo

C'est le problème que tu as ?

Oui, et je n'ai pas ce problème avec Firefox (toujours sous Gentoo).

bolo

mardi 4 avril 2006 à 16:49

cette liste de définitions

CODE

dl.gallery{
float: left;
display: -moz-inline-box; /* Moz */
display: inline-block; /* Op, Saf, IE \*/
margin:auto;
width:160px;
text-align: justify;
}

.gallery dt { font-size:10px; }

.gallery dd{
margin: 0;
padding: 0;
}

Ca ne ce centre pas de mon coté

bolo

mardi 4 avril 2006 à 16:53

CITATION(Julien L. @ mardi 04 avril 2006, 12h47)

Oui, et je n'ai pas ce problème avec Firefox (toujours sous Gentoo).

De mon coté c'est réglé sous Opéra et toi ?

Julien L.

mardi 4 avril 2006 à 16:53

et si tu créais un bloc div regroupant les trois <dl>, ou mieu une liste <ul> ?

Puis dans les propriétés de ce groupe ( ou liste ) ajouter : "text-align:center;"

EDIT : Je n'ai rien dit, apparement c'était déja fait !

CITATION(bolo @ mardi 04 avril 2006, 17h53)

De mon coté c'est réglé sous Opéra et toi ?

C'est bon !

bolo

mardi 4 avril 2006 à 17:01

CITATION

et si tu créais un bloc div regroupant les trois <dl>, ou mieu une liste <ul> ?

Puis dans les propriétés de ce groupe ( ou liste ) ajouter : "text-align:center;"

J'ai suvi le tuto de Pompage. C'etait plus judicieux le choix des dl et non des ul
http://pompage.net/pompe/listesdefinitions/

Julien L.

mardi 4 avril 2006 à 17:04

Vire juste le "float:left;" de dl.gallery

Ca fonctionne de mon côté.

bolo

mardi 4 avril 2006 à 17:09

j'ai rajouté un div
mais ca ne centre pas

CODE

<div style="text-align:center">
<dl class="gallery">
<dt><img src="images/vignette_user.jpg" alt="vous êtes un utilisateurs" /></dt>
<dd>Les utilisateurs</dd>
<dt>Acheter, trouver ou encore comment utiliser ...Acheter, trouver ou encore comment utiliser ...</dt>
</dl>
<dl class="gallery">
<dt><img src="images/vignette_distributeur.jpg" alt="vous êtes un utilisateurs" width="159" height="111" /></dt>
<dd>Les distributeurs</dd>
<dt>Acheter, trouver ou encore comment utiliser ...</dt>
</dl>
<dl class="gallery"> <dt><img src="images/vignette_marchands.jpg" alt="vous êtes un utilisateurs" width="159" height="123" /></dt>
<dd>Les distributeurs</dd>
<dt>Acheter, trouver ou encore comment utiliser ...</dt>
</dl>
</div>

Julien L.

mardi 4 avril 2006 à 17:15

Retire le & retire également le "float:left;" de dl.gallery, je ne peux pas essayer avec un autre navigateur mais ca fonctionne bien sous Opera.

bolo

mardi 4 avril 2006 à 17:19

CITATION(Julien L. @ mardi 04 avril 2006, 13h04)

Vire juste le "float:left;" de dl.gallery

Ca fonctionne de mon côté.

mais lorsque tu enlèves float: left; les listes ne sont plus alignées correctement en haut

Deplus ca ne passe plus sur Firefox

Mon idée de centrer n'est pas la bonne. Il faut je trouve un solution afin que l'écart soir proportionnel a la taille du div.

Je ne sais pas si c'est possible

Julien L.

mardi 4 avril 2006 à 17:34

Dernière proposition, puis je donne ma langue au chat :x

_Retire le float:left; de dl.gallery.
_Modifie ta page pour que le premier <dl class='gallery'> devienne :
<dl class='gallery' style='float:left'>
_Modifie ta page pour que le dernier <dl class='gallery'> devienne :
<dl class='gallery' style='float:right'>

bolo

mardi 4 avril 2006 à 17:54

celui du milieu ne se replace pas

http://www.independza.com/client/expay/index.html

J'ai fais comme ceci

CODE

<dl class='gallery' style='float:left'>
<dt><img src="images/vignette_user.jpg" alt="vous êtes un utilisateurs" /></dt>
<dd>Les utilisateurs</dd>
<dt>Acheter, trouver ou encore comment utiliser ...Acheter, trouver ou encore comment utiliser ...</dt>
</dl>
<dl class='gallery' style='float:right' >
<dt><img src="images/vignette_distributeur.jpg" alt="vous êtes un utilisateurs" width="159" height="111" /></dt>
<dd>Les distributeurs</dd>
<dt>Acheter, trouver ou encore comment utiliser ...</dt>
</dl>
<dl class="gallery" >
<dl > <dt><img src="images/vignette_marchands.jpg" alt="vous êtes un utilisateurs" width="159" height="123" /></dt>
<dd>Les distributeurs</dd>
<dt>Acheter, trouver ou encore comment utiliser ...</dt>
</dl>

ca l'air de presque marché. Car en fait toutes les listes ne sont pas bien alignés en haut
Pour ce dernier problème ca ne touche que SAfari

Sinon sur IE j'ai remarqué que le bandeau et ben il est totalement a gauche.
IE ne supporte pas la position:absolute ?

bolo

mardi 4 avril 2006 à 18:22

J'ai corrigé sur Safari + Camino.

Bon maintenant le dernier point mais pas le plus simple corrigé le problème sur IE.

Julien L.

mardi 4 avril 2006 à 18:28

Bonne continuation.

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.