28172 sujets

CSS et mise en forme, CSS3

Premier site en Css

Bonjour,
Je viens d'essayer de réaliser mon premier site en Css.
Je ne sais pas trop ce que vaut mon code, mais je pense qu'il doit y avoir une facon plus propre de faire les choses.
Pour ce qui est du résultat, cela semble convenir mais les navigateurs réagissent differement.
Avec explorer et chrome cela apparait comme je le souhaite.
Pour firefox ca ne va plus.

Je vous transmet le code si quelqu'un peut y regarder de plus pres pour me donner des indications afin que les navigateurs réagissent de la meme facon.
Je vous remercie

Daniel

L'html est visible sur les pages de www.labal.fr

*-*-*-*-*-*-*-*-*-*-*-*

#container{width:800px; height: 620px; background-image: url("fond.jpg"); margin: 0 auto; margin-top:80px;  }
a#logo{width:171px; height:201px; margin-bottom:200px; margin-left:20px; margin-top:20px; float:left; display:block; background-image: url('images/logo.jpg'); text-decoration: none;}

a#carre_studio{width:87px; height:88px; margin-left:-180px; margin-top:325px; float:left; display:block; background-image: url('images/carre_studio.jpg'); text-decoration: none; }
a#carre_studio:hover{ background-image: url('images/carre_studio_2.jpg') }

a#carre_materiel{width:87px; height:88px; margin-left:-83px; margin-top:325px;  float:left; display:block; background-image: url('images/carre_materiel.jpg'); text-decoration: none; }
a#carre_materiel:hover{ background-image: url('images/carre_materiel_2.jpg') }

a#carre_loc{width:87px; height:88px; margin-left:-184px; margin-top:422px; float:left; display:block; background-image: url('images/carre_loc.jpg'); text-decoration: none;}
a#carre_loc:hover{ background-image: url('images/carre_loc_2.jpg') }

a#carre_client{width:87px; height:88px;  margin-left:-87px; margin-top:422px;  float:left; display:block; background-image: url('images/carre_client.jpg'); text-decoration: none; }
a#carre_client:hover{ background-image: url('images/carre_client_2.jpg') }

#main{width:556px; height:500px; margin-top:-495px; margin-left:230px; float:left;}
#footer{width:auto; display:block; height:24px;}

Modifié par artdecour (19 Jul 2011 - 15:52)
Salutation artdecour »

Il est dommage que ton fichier style.css sois vide de toutes instructions sur l'élément BODY. L'élément BODY est sans contre dit à la base des présentations multi-navigateurs.

J'ai charger ton fichier style.css dans mon éditeur pour m'assurer davantage que les instructions CSS sur BODY sois manquantes. Et c'est le cas.

N'écrit jamais de fichier CSS sans instruire l'élément BODY. C'est le coeur du document et les instructions CSS sur BODY entretiennent de bonnes relations multi-navigateurs. Le reste du fichier CSS est aussi très important. Les instructions se définissent au fur et à mesure du développement.

Lorsque bien fait » Smiley smile ça marche merveilleusement.

PS : C'est la raison pour laquelle tu as placer bgcolor comme attribut HTML de la balise <body>, alors que tu pourrais le faire en CSS.

L'autre point faible est révélé par une utilisation trop fréquente des nombres négatifs, et comme exemple seulement » margin-left:-85px.

Seul le positionnement en CSS pourra t'aider à résoudre cette faiblesse.

Si tu utilise des instructions CSS qui favorise la présentation multi-navigateurs, tu devras recommencer tout ou partie de ton fichier. Mais comme ton fichier n'est pas très volumineux, c'est la moindre des choses. Il y a des instructions contradictoires et/ou superflues.

..
Modifié par zardoz (19 Jul 2011 - 09:48)
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
zardoz a écrit :

N'écrit jamais de fichier CSS sans instruire l'élément BODY.


Ne dit jamais jamais à un débutant quand il s'agit d'un simple conseil Smiley smile
(même si ce conseil est fondamentale.)

Surtout quand ton explication derrière suffit à lui faire comprendre pourquoi il faut éviter de faire autrement.
Merci pour vos conseils, j'ai retabli le body sur le style mais les navigateurs réagissent de façon différente. Je pense qu'il s'agit des balises de marges qui doivent être contradictoires, car j'ai tout disposé à taton et parfois certaines modifications entraînaient un changement radical qui m'incitait a refaire d'autre modifications de positionnement à taton. Ce qui n'est pas tres catholique. Smiley smile
Je suis en train de relire les fondamentaux du postionnement.
Je reviendrai vers vous quand j'aurai un peu plus avancé! Smiley smile
Juste une petite suggestion ici si tu le désir.

Donc on instruit en premier lieu l'élément BODY. Très important.
En deuxième lieu on instruit la ou les structures globales, visible ou invisible.

Moi perso mes structures globales sont toujours invisibles, c'est à dire qu'ils ne sont pas renseigner pour un visuelle. Mais uniquement sur la largeur hauteur et la position.

Je suivrai ton topic, mais prend le temps nécessaire aux études et expérimentations. Via Alsa évidemment mais aussi openweb.

PS: N'oubli pas que les structures globales peuvent être multiples, mais pas trop quand même. Juste là où c'est nécessaire. Comme par exemple tes quatre carré pourront bénificier d'une structure globale comme un conteneur qui les contiens. Juste ça suffira à éliminer les nombres négatifs en positionnement.

Reviens nous Smiley smile

..
Sujet clos
Aller à