Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1777 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Marges implicites indésirables (Edité)

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Marges implicites indésirables (Edité)

n°1414409
relisys500
It's never been like that.
Posté le 27-07-2006 à 12:08:13  profilanswer
 

Edit: cf dernier post pr le problèmes des marges
 
Bonjour, Je rencontre un pti problème avec mon site que j'e n'arrive pas a résoudre: l'affichage sous firefox correspond parfaitement a ce que je désire mais sous IE ca ne va pas du tout.Je suppose que la solution se trouve dans ma feuille de style mais je cherche depuis un ptiu bout de temps et ca commence a m'irriter :o  
Voici l'adresse http://raphanaud.jb.free.fr/ossature_bois.html (le problème concerne le menu en haut, je crois que c'est clair :whistle: )
Merci de vos conseils, Bonne soirée


Message édité par relisys500 le 01-08-2006 à 09:04:00
mood
Publicité
Posté le 27-07-2006 à 12:08:13  profilanswer
 

n°1414797
relisys500
It's never been like that.
Posté le 27-07-2006 à 17:04:34  profilanswer
 

EDIT :o

n°1414802
chani_t
From Dune
Posté le 27-07-2006 à 17:10:14  profilanswer
 

tu parle de cette différence entre les deux marges entre ton titre et le contenu de ta page ?

n°1414813
relisys500
It's never been like that.
Posté le 27-07-2006 à 17:20:10  profilanswer
 

oui deja mais c'st plu subtil que ca parce que j'ai des rollover sur les carrés en haut et les images "éloignées" associées s'affichent en vrac entre le titre et la barre sur IE


Message édité par relisys500 le 27-07-2006 à 17:20:26
n°1414830
chani_t
From Dune
Posté le 27-07-2006 à 17:41:36  profilanswer
 

A vi en effet. Alors il existe plusieurs méthodes pour éviter ces petits désagréments, la première, un peu brutale, est de repérer le navigateur client et de choisir le css en fonction... trés bien avec un serveur php, mais bon il faut se taper au moins 2 css..
 
sinon passer par des hacks.. comme le !important qui est en fait un argument, un vrai mais que IE ne prend pas en compte.
 
un lien sympa
 
ceci dit, pourrais tu mettre ton code css sur le forum, car sans, j'ais un peu de mal (déjà qu'avec j'en aurais :D)

n°1414848
mIRROR
Chevreuillobolchévik
Posté le 27-07-2006 à 18:05:06  profilanswer
 

euh le css est sur son site il a donné le lien :/
http://raphanaud.jb.free.fr/css.css (petit edit j avais mis un 127.0.0.1 :D)
sinon j ai reussi a le faire sans hack
 
le probleme c est que ton javascript marche pas chez moi en local
et il marche pas sur opera que ce soit chez moi en local ou sur ton site
donc les images sont bien alignées comme il faut mais apres je sais pas ce que ca donne
 

Code :
  1. /* Generated by CaScadeS, a stylesheet editor for Mozilla Composer */
  3.   #conteneur { border-top: medium solid rgb(0, 0, 102);
  4.     border-left: medium solid rgb(0, 0, 102);
  5.     border-right: medium solid rgb(0, 0, 102);
  6.     width: 780px;
  7.     margin-top: 15px;
  8.     margin-right: auto;
  9.     margin-left: auto;
  10.     height: auto;
  11.     }
  13.   #conteneur #menu { border-bottom: medium solid rgb(0, 0, 102);
  14.     margin: 3px 3px 0px;
  15.     background-color: rgb(255, 255, 255);
  16.     padding-bottom: 0pt;
  17.     height: 90px;
  18.     }
  20.   #conteneur #page { margin: 5px 3px 15px;
  21.     }
  23.   #conteneur #page #photos { font-family: "Trebuchet MS";
  24.     float: left;
  25.     margin-bottom: 0px;
  26.     margin-top: 10px;
  27.     }
  29.   #conteneur #pied { font-family: "Trebuchet MS";
  30.     font-size: 14px;
  31.     color: rgb(255, 255, 255);
  32.     background-color: rgb(0, 0, 102);
  33.     letter-spacing: 3px;
  34.     font-weight: bold;
  35.     margin-bottom: 0px;
  36.     clear: both;
  37.     }
  39.   h1 { background-color: rgb(255, 255, 255);
  40.     height: 70px;
  41.     float: left;
  42.     clear: none;
  43.     visibility: visible;
  44.     font-family: Trebuchet MS;
  45.     color: rgb(0, 0, 102);
  46.     font-weight: normal;
  47.     margin-top: 0px;
  48.     text-align: left;
  49.     line-height: 114px;
  50.     width: 330px;
  51.     margin-bottom: 2px;
  52.     }
  54.   h2 { border-right: medium solid rgb(0, 0, 102);
  55.     margin: 0px 5px 10px 0px;
  56.     font-family: "trebuchet ms";
  57.     color: rgb(0, 0, 102);
  58.     font-weight: bold;
  59.     font-style: normal;
  60.     font-size: 12px;
  61.     float: left;
  62.     clear: left;
  63.     width: 180px;
  64.     padding-top: 0px;
  65.     padding-left: 0px;
  66.     padding-right: 10px;
  67.     list-style-position: outside;
  68.     list-style-image: url(puce.png);
  69.     }
  71.   h3 { font-family: Trebuchet MS;
  72.     color: rgb(0, 0, 102);
  73.     float: right;
  74.     clear: right;
  75.     margin-top: 0px;
  76.     padding-top: 0px;
  77.     padding-bottom: 0px;
  78.     text-align: center;
  79.     width: 140px;
  80.     font-size: 10px;
  81.     font-style: normal;
  82.     text-transform: uppercase;
  83.     margin-bottom: 10px;
  84.     letter-spacing: 2px;
  85.     font-weight: normal;
  86.   }
  88.   #menu div {
  90.     padding:0;
  91.     margin:0;
  92.     float: left;
  93.     visibility: visible;
  94.     height: 15px;
  95.    
  96.   }
  97.  
  98.   #hll{position:relative;left:72px;}
  99.   #charpente{position:relative;left:-2px;}
  100.   #escaliers{position:relative;left:-24px;}


 
(sinon je savais pas que le code de nvu etait aussi laid :/ mais bon c est deja tres bien pour un ouiziouigue tout de meme [:aloy] )


Message édité par mIRROR le 27-07-2006 à 18:06:01
n°1414859
relisys500
It's never been like that.
Posté le 27-07-2006 à 18:15:53  profilanswer
 

un ?
je t'avouerais que moi aussi j'ai du mal a le lire et j'ai eu la flemme de tout reprendre pour le rendre plus lisible deja qu'il me refuse les attributs alpha (propriété MS si j'ai bien compris) donc je dois les rajouter apres.

n°1414862
relisys500
It's never been like that.
Posté le 27-07-2006 à 18:24:57  profilanswer
 

c'est déja beaucoup mieux ! Merci! J'ai corrigé. Mais il reste la marge entre le titre et la barre qui commence a ...
Tant que j'y suis vous en dite quoi de l'aspect du site (l'index + 4 pages qui auront la même architecture que celle donnée) ? Ca fait pro ? ca colle avec le produit présenté (maisons bois) ? Merci


Message édité par relisys500 le 27-07-2006 à 18:26:34
n°1414863
mIRROR
Chevreuillobolchévik
Posté le 27-07-2006 à 18:25:28  profilanswer
 

un 127.0.0.1 donc l adresse de ta css sur mon pc :D
si tu sais "reprendre" laisse tomber nvu c est un ouiziouigue pas un editeur de texte  
il vaut rien comme editeur
a moins qu il ait fait des progres je crois qu il a meme pas l'autocompletion :/
 
mais bon je suis etonné quand meme entourer une image d un div pour mettre des definitions de police dedans ca me troue le cul :D

n°1414866
relisys500
It's never been like that.
Posté le 27-07-2006 à 18:27:25  profilanswer
 

ahhh.. wysiwyg.. long a la detente.

Citation :

mais bon je suis etonné quand meme entourer une image d un div pour mettre des definitions de police dedans ca me troue le cul :D


Ca par contre c'est pas normal... Ou ? entre le css et la source html ? pk il y'a aucune police donnée dans la source.. (faut dire que j'ai pas mal bidouillé alors y'a ptetre des trucs qui m'ont échappé..)
Mais Nvu est quand mme bcp mieux que dw...


Message édité par relisys500 le 27-07-2006 à 18:30:27
mood
Publicité
Posté le 27-07-2006 à 18:27:25  profilanswer
 

n°1414873
mIRROR
Chevreuillobolchévik
Posté le 27-07-2006 à 18:49:47  profilanswer
 

en html
 

Code :
  1. <div id="hll"><img style="height: 15px; width: 149px; opacity: 0; filter:alpha(opacity=0);"
  2. alt="Habitat de Loisirs" src="menu_hll_txt.gif" name="hll" />


 
et en css
 

Code :
  1. #conteneur #menu #hll { font-family: Trebuchet MS;


 
sans parler de l absurdité d aligner des id vu qu ils sont unique par definition
en ce qui concerne le fameux espace ca va etre plus compliqué : selon chaque navigateur les blocs ont des marges et paddings differents  
donc il faut commencer par ajouter au debut de ta feuille de style un truc comme ca
 

Code :
  1. * { margin:0; padding:0; }


 
ca va casser ta mise en page et t auras les nerfs mais tu partiras sur de bonnes bases (et tu eviteras les hacks peu recommandables :whistle: )
ensuite dans ton h1 t as un line-height  
je sais meme pas pourquoi il est la mais c est lui qui fout tout en l air  
 
voila :)

Message cité 1 fois
n°1414884
relisys500
It's never been like that.
Posté le 27-07-2006 à 19:22:33  profilanswer
 

le line height c'est pour aligner le texte en bas... pas trouvé le moyen de faire autrement...pr les polices effectivement.. mais pas plus tard que ce midi c'était encore du texte a la place des images.. c'est resté..
Et pr les div j'ai appris a m'en servir a peu près convenablement il y'a 5 jours laors hein.. c'st mon premier site... dsl.
Edit: c'est bien le line height qui m'ennuie.. reste a voir comment le remplacer pr aligner mon texte en bas..

Message cité 1 fois
Message édité par relisys500 le 27-07-2006 à 19:27:17
n°1414891
mIRROR
Chevreuillobolchévik
Posté le 27-07-2006 à 19:41:56  profilanswer
 

relisys500 a écrit :

le line height c'est pour aligner le texte en bas... reste a voir comment le remplacer pr aligner mon texte en bas..


 
margin-top est ton ami ;)
 
sinon quelques conseils pour avancer
pas de style dans ton html  
tout en css
 
pareil pour hspace/vspace c est du style donc ca n a rien a faire dans ton html
 
tu verras c est le top de laisser les css s occuper du style ca sera plus agreable meme a la relecture du code
la ca fait un peu mal aux yeux
 
en gros
 
AVANT
 

Code :
  1. <div id="hll"><img style="height: 15px; width: 149px; opacity: 0; filter:alpha(opacity=0);" alt="Habitat de Loisirs" src="menu_hll_txt.gif" name="hll" />


 
APRES

Code :
  1. <img id="hll" alt="Habitat de Loisirs" src="menu_hll_txt.gif" />

 
 
enfin je pensais que c etait nvu qui rajoutait les divs et les fontfamily :D
 
en tout cas c est beaucoup plus fonctionnel/mieux/beau/lisible[...rajouter ici d autres options au choix...] que ce que tu avais fait en flash :P
 
bon courage pour la suite ;)
 
 

n°1414893
relisys500
It's never been like that.
Posté le 27-07-2006 à 19:46:59  profilanswer
 

Ahhhhhhh je trouvais bizarre qu'on puisse pas donner des attributs css a des images (je savais pas comment my prendre, c'est tout :o) ca me frustrais de devoir mettre des images ds mes div ... je trouvais ca lourd [:matleflou]
Je m'y mets et vous montre tout ca.


Message édité par relisys500 le 27-07-2006 à 19:48:57
n°1414905
mIRROR
Chevreuillobolchévik
Posté le 27-07-2006 à 20:12:24  profilanswer
 

tu peux styler n importe quel element de ta page css
1 - soit en nommant explicitement la balise (et ca marche meme pour <html> ou <body> )
div {ici des propriétés pour tous les divs}
 
2 - soit en ajoutant class ou id
<br class="vraiment_tres_grand_espace avec_un_fond_rouge_parce_que_je_trouve_ca_beau_comme_ca" />
 
avec ca mon br utilise deux classes
.vraiment_tres_grand_espace { margin: 2000px 0; }
.avec_un_fond_rouge_parce_que_je_trouve_ca_beau_comme_ca {background-color: red;}
 
bref y a pas vraiment de limites a part l imagination ;)

n°1414909
relisys500
It's never been like that.
Posté le 27-07-2006 à 20:29:07  profilanswer
 

va vraiment falloir que j'approfondisse le css...:o

n°1414913
mIRROR
Chevreuillobolchévik
Posté le 27-07-2006 à 20:35:01  profilanswer
 

y a interet :o

n°1415066
relisys500
It's never been like that.
Posté le 28-07-2006 à 11:01:13  profilanswer
 

Comment je fais pour faire mes rollover sur images "eloignées" avec hover ? (et virer le javascript au passage)

Message cité 1 fois
n°1415160
mIRROR
Chevreuillobolchévik
Posté le 28-07-2006 à 12:44:13  profilanswer
 

pour ca tu vas etre obligé de garder ton js a cause d'ie qui ne comprend :hover que sur <a>
par contre je peux pas t aider pour rendre ton script crossbrowser :D

n°1415174
relisys500
It's never been like that.
Posté le 28-07-2006 à 12:49:25  profilanswer
 

ok .. merci quand même.. mais jme suis débrouillé.. et la source html est déja .. beaucoup plus claire (et courte) !!(c'est pas en ligne)Reste a néttoyer la feuille de style ..

n°1415321
relisys500
It's never been like that.
Posté le 28-07-2006 à 15:22:40  profilanswer
 

En améliorant tout ca, j'ai rencontré un pti problème d'alignement.. tout était ok jusqu'a ce que je rajoute le margin top a h1 mais je doute que ca vienne de ca.. je pense qu'il faudrait que je rajoute un truc aux attributs de mes titres (ceux qui apparaissent avec le rollover) mais c'est la pagaille pr moi .. je sais pas quoi toucher.. (cette fois c'est en ligne: pas de grosse aberrations ?)
 


Message édité par relisys500 le 28-07-2006 à 15:37:39
n°1415363
mIRROR
Chevreuillobolchévik
Posté le 28-07-2006 à 15:50:14  profilanswer
 

mIRROR a écrit :

Code :
  1. * { margin:0; padding:0; }



 
si tu ne mets pas ca des le debut de ta css tu continueras a ne pas avoir le meme affichage selon les navigateurs
ensuite ton petit probleme sera assez facile a régler
 
sinon pour ton probleme de js je te file le screen de la console d erreur d opera9 (super bien foutue d ailleurs j en reviens pas)
 
http://membres.lycos.fr/metaltrade//Sans-titre-3.png

n°1415364
Pitsy
Posté le 28-07-2006 à 15:51:15  profilanswer
 

relisys500 a écrit :

Comment je fais pour faire mes rollover sur images "eloignées" avec hover ? (et virer le javascript au passage)


 
Je t'ai fait un petit exemple sur cette page
 
Maintenant pour tes images éloignées, j'ai fait tel que tu l'avais fait, sans imagette, et donc avec 2-3 trucs pour contrer IE (on vient placer des liens par-dessus les images).
ça serait plus simple et moins "bidouille" juste avec des liens avec une imagette comme fond (comme pour le top).

n°1415383
relisys500
It's never been like that.
Posté le 28-07-2006 à 16:12:20  profilanswer
 

Merci a tous les 2!! Pr le hover jv ptetre pas l'utiliser dans l'immediat en fait pour pouvoir finir le site rapidement mais des que j'aurai 5 mn je le mettrai en place. Ca me supprimera les erreurs dues au javascript bidouillé.


Message édité par relisys500 le 28-07-2006 à 16:12:55
n°1415420
relisys500
It's never been like that.
Posté le 28-07-2006 à 16:42:37  profilanswer
 

rhaaa j'ai rajouté margin/padding 0 mais alors que je n'avais que peu de surprises avant suivant le navigateur, c'est la catastrophe !! je crois que le problème vient de l'interpretation des puces ..

n°1415457
relisys500
It's never been like that.
Posté le 28-07-2006 à 17:08:39  profilanswer
 

Voila ca marche!! Mais ca m'a l'air un peu bancal... c'est en ligne. Des remarques ? Et je repete ma question: Le site fait il professionnel et colle-t-il bien au sujet ?
@ mIRROR et Pitsy: Encore Merci de vous être penchés sur mes problèmes de débutant !!
 
EDIT: EN fait ya encore un truc qui me chagrine :D  c'est lees écart inexpliqués en haut et en bas de me titres "cachés"..je vois pas d'ou il viennent.. ils persistent.


Message édité par relisys500 le 28-07-2006 à 17:14:50
n°1416846
relisys500
It's never been like that.
Posté le 31-07-2006 à 18:26:48  profilanswer
 

Bonsoir, je reviens après quelques modifications et le fait qu'un petit problème persiste. En effet, j'ai des espaces entre images indésirables: d'abord sur la page d'accueil ou c'est le plus clair..http://raphanaud.jb.free.fr. Les images sont un petit peu espacées alors que mes marges sont a zéro. Je veux ce petit espacement mais je préfererait pouvoir le choisir !
Ensuit sur le menu (http://raphanaud.jb.free.fr/ossature_bois.html), les images "titres" (celles qui s'affichent quand on passe sur le menu) ont de marge top et bottom que je ne désire pas!...
Merci de votre aide.
Bonne soirée
Jb

mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Marges implicites indésirables (Edité)

 

Sujets relatifs
CSS et IE: Marges sous les images // Firefox: chargement en 2 tempsConnaitre les marges et orientation d'une page web
faire un tableau de correspondance: marges/pourcentage[Css Html] Problème avec les marges internes "padding
Définir des marges pour l'impressionExcel VBA configuration des marges
caracteres indesirablesMarges d'un formulaire
HTML : comment modifier les marges d'impressionEnlever les marges d'une fenetre popup ?
Plus de sujets relatifs à : Marges implicites indésirables (Edité)

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.087 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR