CSS Imposer une Marge à gauche?

**jojo86** · 11/04/2009, 09h13

Bonjour,

Sur ma page web j'ai un objet sur la gauche, et un cadre au centre, je voudrais que le cadre du milieu ne passe pas en dessous de celui de gauche si on réduit la fenetre ou si la résolution n'est pas suffisament élevée...

Pour que vous puissez constater, voici un lien vers mon site :

Sachez que dans mon fichier css j'ai déjà ajouté ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
html,body {
background:url(Images/bg-top.jpg);
background-repeat:no-repeat;
background-color:#bcdeff;
padding-left: 10.5em;
overflow-x:hidden;
}

Hélàs le padding left n'a pas l'aire de fonctionner, pourriez vous m'aider???

http://ts.pilote-fsx.net

Merci beaucoup !

**Erwan31** · 11/04/2009, 14h49

Bonjour,
pour être honnête il faudrait que tu revois TOUT ton code, c'est catastrophique.
Il te manque des bases indispensables à la création d'un document (x)HTML bien formé. (présence d'un doctype, mauvaise imbrication de balises élémentaires, éléments enfants non admis dans certains éléments, etc etc.)

Pour répondre à ta question il te faut éviter le centrage par positionnement:absolue et marge négative > centre plutôt avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 width: x px/%;
margin: 0 auto;

**jojo86** · 11/04/2009, 14h51

Je ne suis pas développeur web hélàs et je n'ai pas le temps de faire tout sa dans les règles de l'art...

Un pote reprendra tout sa plus tard, il est spécialiste...

Je vais essayer ton code.

Merci.

**jojo86** · 14/04/2009, 10h04

Dur dur le css...

Avez vous des tutoriels qui expliquent comment créer une barre de navigation avec des images?

Et comment placer un lien hypertext sur une image?

Merci !

**Macmillenium** · 14/04/2009, 13h41

Bonjour,

Envoyé par jojo86

Dur dur le css...

Sans les bases, rien n'est facile :
http://xhtml.developpez.com
http://css.developpez.com

**jojo86** · 14/04/2009, 22h47

Envoyé par Erwan31

Bonjour,
pour être honnête il faudrait que tu revois TOUT ton code, c'est catastrophique.
Il te manque des bases indispensables à la création d'un document (x)HTML bien formé. (présence d'un doctype, mauvaise imbrication de balises élémentaires, éléments enfants non admis dans certains éléments, etc etc.)

Pour répondre à ta question il te faut éviter le centrage par positionnement:absolue et marge négative > centre plutôt avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 width: x px/%;
margin: 0 auto;

J'ai éssayé ton code, mais malheureusement, je n'arrive pas à ajuster la largeur du cadre à 650. Merci de m'aider !!!

**jojo86** · 15/04/2009, 01h32

Bon, après mainte et mainte manipulation, j'ai réussi à optimiser mon code.

Voyez donc :

http://ts.pilote-fsx.net/

Rassurez vous, j'ai mis des fonds vert pour bien visualiser les forms...
Ma question est :" Pourquoi le rectancle au bord arrondie ne se place pas au centre???"

Je l'ai pourtant placé dans un réctancle avec :" text-align:center;"

Je viens de voir un truque... Sous firefox c'est completement différent par rapport à ce qui est visible sur Internet Explorer...

Je dois avoir des soucis de css...

Merci de votre aide à tous !!!

(pour ce qui est de la partie du haut les boutons et logo je pense que c'est déjà un peut plus potable...)

**desert** · 15/04/2009, 11h11

Bonjour,

Envoyé par jojo86

Ma question est :" Pourquoi le rectancle au bord arrondie ne se place pas au centre???"

Quand tu parles du centre, cela signifie le centre de l'écran ou le centre du conteneur parent ?

**jojo86** · 15/04/2009, 11h40

J'aimerais que mon réctangle au bord arrondi soit au centre de l'écran MAIS si on réduit la largeur de la page je veux qu'il ne glisse pas sous le rectangle situé sur la gauche...

Me comprenez vous?

**Macmillenium** · 15/04/2009, 12h52

Bonjour,

- position:relative sur .main afin qu'il soit le référent des éléments positionnés en absolute.
- left:50%; et margin-left:-325px; sur dl (attention au choix de balise) pour le centrer horizontalement.

**jojo86** · 15/04/2009, 13h36

sa marche sous firefox...

Mais pas sou Internet explorer...

Une idée?

**Macmillenium** · 15/04/2009, 14h03

Tu es en mode de rendu Quirks.
Ajoute un doctype au tout début de ton code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
...
...

**jojo86** · 15/04/2009, 15h51

Merci pour ce code...
Sa à fonctionné (je crois) mais j'ai du faire une fausse manip résultat mon cadre est hors de la page...

Pourtant je suis sur que ce n'est pas grand chose si quelqu'un pouvait geter un coup d'oeil sur ma page et sur mon css.

http://ts.pilote-fsx.net

Et pour le css : http://ts.pilote-fsx.net/style.css

Merci beaucoup.

**Macmillenium** · 15/04/2009, 16h07

C'est parce que tu as enlevé le position:absolute; (tant mieux

)

Essaye donc les marges automatiques :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
#gauche {
 float:left
}

dl {
background:#999999 url(box_bottom.gif) no-repeat left bottom;
margin:50px auto 0; /* 50px mais c'est à toi d'ajuster */
/* margin-left:-325px; */
width:650px;

**jojo86** · 15/04/2009, 16h11

Ahhh c'est déjà mieu...

MAIS (bah oui sa serait trop simple sinon...)

Sous Internet Explorer, j'ai l'impression que le centrage ce fait par rapport au rectangle de gauche ce qui est très bien...

Par contre sous FireFox, le centrage ce fait par rapport à la page...

Je vais finir par m'aracher les cheveux...

Merci de ton soutien !

(J'ai réactualisé les fichier sur mon site)

**Macmillenium** · 15/04/2009, 16h20

Envoyé par jojo86

Par contre sous FireFox, le centrage ce fait par rapport à la page...

C'est le comportement correcte.

Englobes dl dans une div avec un margin-left:230px;

**jojo86** · 15/04/2009, 16h37

Ami, je te dois une fiere chandelle...

Merci beaucoup c'est exactement ce que je voulais faire...

J'ai donc ajouté une div encadrer mon dl.
Pour finir, comment puis-je remonter mon cadre vers le haut???

J'ai fai quelque chose qui fonctionne mais je ne sais pas si c'est fait dans les règles de l'art...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
position:relative;
top:-25px;

Qu'en pense tu???

**Macmillenium** · 15/04/2009, 16h46

Envoyé par jojo86

Pour finir, comment puis-je remonter mon cadre vers le haut???

J'ai fai quelque chose qui fonctionne mais je ne sais pas si c'est fait dans les règles de l'art...

Tu adore te compliquer la vie toi

Le margin-top:50px n'a pas d'utilité maintenant :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
dl {
background:#999999 url(box_bottom.gif) no-repeat left bottom;
margin:0 auto; /* plus besoin du 50px */
width:650px;
}

**jojo86** · 15/04/2009, 17h14

Ok mais du coup mon cadre remonte sur ma barre de navigation...

Si j'utilise : margin-top:12px

C'est bon???

Ou bien il existe encore une autre solution?

Pourquoi faire simple quand on peut faire compliqué???

Merci de ton aide !