CSS Imposer une Marge à gauche?

Version imprimable

Voir 40 message(s) de cette discussion en une page

11/04/2009, 09h13
jojo86

CSS Imposer une Marge à gauche?
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:

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 !
11/04/2009, 14h49
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:

1 2 width: x px/%; margin: 0 auto;
11/04/2009, 14h51
jojo86

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.
14/04/2009, 10h04
jojo86

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 !
14/04/2009, 13h41
Macmillenium

Bonjour,

Citation:

Envoyé par jojo86

Dur dur le css...

Sans les bases, rien n'est facile :
http://xhtml.developpez.com
http://css.developpez.com
14/04/2009, 22h47
jojo86
Citation:
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:

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 !!!
15/04/2009, 01h32
jojo86

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...)
15/04/2009, 11h11
desert

Bonjour,

Citation:

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 ?
15/04/2009, 11h40
jojo86

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?
15/04/2009, 12h52
Macmillenium

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.
15/04/2009, 13h36
jojo86

sa marche sous firefox...

Mais pas sou Internet explorer...

Une idée?

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

Code:

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

15/04/2009, 15h51
jojo86

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.

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

Essaye donc les marges automatiques :
Code:

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;

15/04/2009, 16h11
jojo86

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)
15/04/2009, 16h20
Macmillenium

Citation:

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;
15/04/2009, 16h37
jojo86
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:

1 2 3 position:relative; top:-25px;
Qu'en pense tu???
15/04/2009, 16h46
Macmillenium
Citation:

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 :roll:

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

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; }
;)
15/04/2009, 17h14
jojo86

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é???:D

Merci de ton aide !
15/04/2009, 17h30
Macmillenium

Citation:

Envoyé par jojo86

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

Si j'utilise : margin-top:12px

C'est bon???

C'est toi qui voit ...

Citation:

Envoyé par jojo86

Ou bien il existe encore une autre solution?

C'est la solution la plus pratique/propre.

Voir 40 message(s) de cette discussion en une page