[HTML]probleme de marge avec ma liste

probleme de marge avec ma liste [HTML] - HTML/CSS - Programmation

Marsh Posté le 01-03-2005 à 13:27:34    

Salut,
 
voilà j'ai un petit probleme avec ma liste.
en gros, j'ai fais une liste dans une frameset à gauche de ma page.
Seulement il y a une trop grande marge entre le bord de l'écran et mes puces.
Ce qui fait que mes titres ne tiennent pas sur une ligne dans ma frame.
je dois agrandir la taille de ma frame pour pouvoir les faire passer.
éxiste-t-il un moyen de réduire l'espace entre le bord et les puces ?
 
merci de votre aide

Reply

Marsh Posté le 01-03-2005 à 13:27:34   

Reply

Marsh Posté le 01-03-2005 à 13:49:29    

PAS DE FRAMESET MALHEUREUX !!!!!!!! ENLEVE CA TOUT DE SUITE §§§§

Reply

Marsh Posté le 01-03-2005 à 14:21:49    

c'est ce que j'ai entendu seulement j'ai pas trop le choix puisque c'est un projet qui m'est demandé.
et je dois utiliser les frameset obligatoirement.
Mais je crois avoir trouvé la solution. je ne savais pas qu'on pouvais indiquer des valeurs négatives.Mais maintenant, j'ai juste utilisé un "margin-left=-15px" dans ma CSS et le miracle est venu :P .
 
Pour en revenir aux frameset, je ne sais pas utiliser d'autres méthodes que les framset pour séparer ma page étant donné que je suis pas un expert en HTML.
il y a un tuto quelquepart sur le net qui expliquerait une méthode différente que les frameset ? (sachant que je ne connais que le HTML)
 
merci d'avance

Reply

Marsh Posté le 01-03-2005 à 14:23:37    

Ouais mais nan pour la marge négative......
 
C'est parce qu'il y a une margin (ou padding) par défaut sur le <body> et sur les listes, donc met dans ton CSS :

Code :
  1. * {
  2.   margin: 0px;
  3.   padding: 0px;
  4. }


Avec ça t'es sûr de ne plus avoir de margin ou de padding sur tous les éléments...

Reply

Marsh Posté le 01-03-2005 à 14:24:00    

fyi la "marge" des listes est due à un margin-left par défaut sur "li" dans certains navigateurs et à un padding-left par défaut sur le "ul" dans d'autres.
 
Mets les deux à 0
 
Edit: florent, il est inutile de préciser l'unité pour les valeurs nulles :o
 
Ephagor > http://www.alsacreations.com/articles/frames/


Message édité par masklinn le 01-03-2005 à 14:25:47

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 01-03-2005 à 14:24:29    

Pour les <frame>, il n'y a rien qui ne permettent de découper une page en plusieurs pages et de ne recharger qu'une page. Mais en pratique ça sert à que dalle, le poids des éléments non-rechargés étant le plus souvent négligeables...

Reply

Marsh Posté le 01-03-2005 à 14:52:00    

ok merci pour votre aide.Firefox m'affiche la liste a gauche en ayant changé le padding du <ul> mais pas IE. Il faut apparemment changer le padding de la balise <li> pour que IE le prenne en compte.
Par contre , je n'ai pas de <li> dans ma liste, les ayant remplacé par un gif (donc la balise <img src=...> )

Code :
  1. <ul class="marge"> <!la class="marge" contient le maring-left=0;>
  2.   <img src=".\Images\toto.gif"> <! mon .gif servant à remplacer les puces>
  3.   <SPAN CLASS="finalPolice">blablabla</SPAN> <!le SPAN sert pour modifier la                                                  police du texte "blabla">
  4.   <img src=".........">
  5.   ...         
  6. </ul>


 
Donc je dois mettre quoi dans ma CSS pour que IE prenne en compte ma nouvelle marge ?
un padding-left=0 pour ma balise <img> ?
en tout cas merci pour ton lien Masklinn. ça m'a l'air assez complet et explicite. Bon, par contre je ne connais pas le PHP mais le petit code ne m'a pas l'air torp difficile à comprendre donc je m'éxercerai.


Message édité par ephagor le 01-03-2005 à 14:53:28
Reply

Marsh Posté le 01-03-2005 à 14:52:21    

-> Pour les <frame>, il n'y a rien qui ne permettent de découper une page en plusieurs pages et de ne recharger qu'une page. Mais en pratique ça sert à que dalle, le poids des éléments non-rechargés étant le plus souvent négligeables...
 
 
Mais dans le cas où la page ne DOIT pas être rechargée (genre un explorateur de dossiers en javascript), les frames sont le seul moyen.


Message édité par j_lecruel le 01-03-2005 à 14:53:08
Reply

Marsh Posté le 01-03-2005 à 14:52:51    

.......... LE MEC IL MET UN <UL> SANS <LI> :eek: :eek: :eek:

Reply

Marsh Posté le 01-03-2005 à 14:54:02    

Allez je corrige tout ça, 2 sec

Reply

Marsh Posté le 01-03-2005 à 14:54:02   

Reply

Marsh Posté le 01-03-2005 à 14:54:55    

ba le truc c'est que j'ai vu ça sur je sais plus quel site qu'on pouvait remplacer les <li> par des <img>.  
Alors, ou j'ai mal lu, ou laors le site est foireux.
A la base je cherche à remplacer les puces de bases par un .gif

Reply

Marsh Posté le 01-03-2005 à 14:55:20    

ephagor a écrit :

ok merci pour votre aide.Firefox m'affiche la liste a gauche en ayant changé le padding du <ul> mais pas IE. Il faut apparemment changer le padding de la balise <li> pour que IE le prenne en compte.
Par contre , je n'ai pas de <li> dans ma liste, les ayant remplacé par un gif (donc la balise <img src=...> )

Code :
  1. <ul class="marge"> <!la class="marge" contient le maring-left=0;>
  2.   <img src=".\Images\toto.gif"> <! mon .gif servant à remplacer les puces>
  3.   <SPAN CLASS="finalPolice">blablabla</SPAN> <!le SPAN sert pour modifier la                                                  police du texte "blabla">
  4.   <img src=".........">
  5.   ...         
  6. </ul>



En voyant ce code, je crois qu'il te manque beaucoup de connaissances en HTML et en CSS...
Il aurait fallu faire ça comme ça :

Code :
  1. <ul>
  2.   <li>blablabla</li>
  3.   <li>blablabla</li>
  4.   <li>blablabla</li>
  5. </ul>


Puis changer les marges, padding et surtout l'image des puces dans le CSS ;)

Reply

Marsh Posté le 01-03-2005 à 14:56:27    

ephagor a écrit :

ba le truc c'est que j'ai vu ça sur je sais plus quel site qu'on pouvait remplacer les <li> par des <img>.  
Alors, ou j'ai mal lu, ou laors le site est foireux.
A la base je cherche à remplacer les puces de bases par un .gif


Ultra-foireux, ouais... Donne-le nous histoire qu'on aille taper dessus :D
 
Pour les listes, il y a une propriété list-style-image qui permet de faire ça :)

Reply

Marsh Posté le 01-03-2005 à 14:59:02    

faut que je retrouve l'adresse :P .
il est vrai quand meme que j'ai toruvé ça super bizarre,  mais le résultat me paraissait bon sur ma page donc j'ai laissé.
oui je connais la propriété list-style-image, seulement je n'ai pas reussi à la faire marcher avec ma CSS. je sais pas trop comment l'utiliser en fait  :sweat: .  
j'avai fait un truc du genre  

Code :
  1. li.puces
  2. {
  3.   list-style-image:.\titi\toto.gif
  4. }


Message édité par ephagor le 01-03-2005 à 15:01:01
Reply

Marsh Posté le 01-03-2005 à 15:01:57    

list-style-image: url("titi\toto.gif" );

Reply

Marsh Posté le 01-03-2005 à 15:19:49    

j'ai testé mais ça marche que sous IE et ça déconne avec firefox. normal ?
en plus, avec un margin et padding à 0 sur mon <body>, me colle pas ma marge. il reste encore un peu d'espace.
 
edit: quand je dis que ça décone avec firefox , c'est juste mon .gif qui ne s'affiche pas. j'ai le spuces de bases mais pas remplacées par mon .gif, alors que ça marche sous IE.
dans la CSS

Code :
  1. li.puce
  2. {
  3.   list-style-image: url("titi\toto.gif" );
  4. }


dans le HTML

Code :
  1. <ul>
  2.   <li class="puce"> 
  3.   <SPAN CLASS="finalPolice">BLABLABLA</SPAN>
  4.   </li><br><br>
  5.   ...
  6. </ul>


Message édité par ephagor le 01-03-2005 à 15:28:20
Reply

Marsh Posté le 01-03-2005 à 15:38:36    

Pourquoi tu met un <span> dans ton <li> ?
 
Pourquoi tu met des <br> entre les <li> ? Dans un <ul>, on a seulement le droit de mettre des <li>. Si tu veux mettre de l'espace entre les <li>, utilise un margin-bottom

Reply

Marsh Posté le 01-03-2005 à 15:46:00    

pour le span, il sert juste a utiliser une police pour le titre "blabla" de mon <li>.
En ce qui concerne le <br>, je ne savias pas qu'on ne pouvait pas en mettre.... :(  j'ai encore du boulot devant moi avant de tout maitriser.
en tout cas, tu as répondu snas le vouloir a une autre question qui me turlupinait  :jap:  
avec cette histoire de <br>, je n'avais pas les meme espaces avec firefox et IE. je comprend pourquoi maintenant. c'est niquel maintenant avec le margin-bottom.  
merci encore une fois.
reste encore ce probleme de puce qui ne s'affiche pas avec firefox.

Reply

Marsh Posté le 01-03-2005 à 15:53:49    

Ben met la police sur le <li>, inutile de rajouter un span ;)

Reply

Marsh Posté le 01-03-2005 à 16:06:45    

oui j'y ai pensé juste apres avoir envoyé le message ;-)

Reply

Marsh Posté le 01-03-2005 à 16:24:24    


1°/ les slash c'est mieux que les antislash dans tes chemins, t'es pas chez microsoft...
 
2°/ Pour les balises qui n'ont pas de fermeture, on met un slash a la fermeture, c'est mieux...
<IMG src="..." /> et pas <IMG src="...">
 
3°/ le commentaire c'est <!-- --> pas <! >

Reply

Marsh Posté le 01-03-2005 à 16:36:21    

ok merci. je manquerai pas de rectifier tout ça

Reply

Marsh Posté le 01-03-2005 à 18:06:04    

rompi a écrit :

1°/ les slash c'est mieux que les antislash dans tes chemins, t'es pas chez microsoft...
 
2°/ Pour les balises qui n'ont pas de fermeture, on met un slash a la fermeture, c'est mieux...
<IMG src="..." /> et pas <IMG src="...">
 
3°/ le commentaire c'est <!-- --> pas <! >


 
Mais on ne met pas <IMG />, mais <img /> ;)

Reply

Marsh Posté le 01-03-2005 à 19:12:50    

oui c'est une mauviase habitude que je viens de rectifier.
tout est en minuscule maintenant

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed