Aller au contenu

CSSListe : taille verticale des lignes et décalage

cevichero

Par cevichero
dans (X)HTML et CSS

 Partager

Sujets conseillés

cevichero

cevichero

Posté
Posté (modifié)

Bonjour,

je fais appele à votre aide car j'ai eu beau chercher durant le we, mais pas de résultat positif..je sature! :blink:

sur une liste qui est en fait un menu fait d'images, je voudrais faire disparaitre l'espacement entre les lignes <li> et placer la liste au bon endroit. En fait, la liste doit être sur la gauche et au meme niveau que le texte de contenu.

Là, la liste est à droite et au dessus du contenu....que faire ?

ça marche super sur firefox mais pas sur IE encore une fois... :angry:

j'ai besoin d'un pti coup de main svp, voici le code CSS :

.menu {
position: relative;
float: left;
top: -4px;
left: 0;
padding: 0;
margin: 0 0 0 5px;
list-style-type: none;
height: 40px;
width: 140px;
}
.top_menu {
position: relative;
padding-left: 5px;
float: left;
top: -4px;
list-style-type: none;
height: 10px;
}

et le HTML:

<ul class="menu">
<li class="top_menu"><img src="images/top_menu.gif" width="140" height="10" hspace="0" vspace="0" border="0" alt=""></li>
<li class="menu"><a href="accueil.htm" target="_top" onmouseover="i01.src='images/btn_accueil_g.gif'" onmouseout="i01.src='images/btn_accueil_w.gif'"> <img src="images/btn_accueil_w.gif" border=0 name="i01" width="140" height="40" hspace=0 vspace=0 /></a></li>
</ul>

il y a toujours un espace entre les deux lignes (en fait il y en a plus) et le menu est décalé vers la droite alors que je le voudrais à gauche (des images viendront plus tard, pour 'instant pas possible...)

MERCI à vous pour vos réponses :)

Modifié par cevichero
cevichero

cevichero

Posté
  • Auteur
Posté

ben en fait là, je suis dans une entreprise qui filtre tout ce qui entre et sort "grace" à un firewall très restrictif...au pire des cas je pourrai vous envoyer un aperçu ce soir...

mais pour description déatillée :

<body>
<div id="page">
 <div id="header"><img src="images/title01.gif" width="550" height="90" alt="image title" border="0"></div>

 <div id="sheader"></div>

 <div id="ssheader">balblabla</div>

 <div class="hr2A353D"><hr /></div>

 <div id="img-page"><img src="images/big_phones.jpg" width="720" height="150" border="0" alt="image_index"></div>
 <div class="menu_top_left"><img src="images/bck-foot.gif" width="720" 
  
<!-- CE QUI POSE PROBLEME -->
 <div id="menuleft">
   <img src="images/top_menu.gif" width="140" height="10" hspace="0" vspace="0" border="0" alt=""><br>
   <ul class="menu">
     <li class="menu"><a href="accueil.htm" target="_top" onmouseover="i01.src='images/btn_accueil_g.gif'" onmouseout="i01.src='images/btn_accueil_w.gif'"> <img src="images/btn_accueil_w.gif" border=0 name="i01" width="140" height="40" hspace=0 vspace=0 /></a></li>
     <li class="menu"><a href="demarche.htm" target="_top" onmouseover="i02.src='images/btn_demarche_g.gif'" onmouseout="i02.src='images/btn_demarche_w.gif'"> <img src="images/btn_demarche_w.gif" border=0 name="i02" width="140" height="40" hspace=0 vspace=0 /></a></li>
     <li class="menu"><a href="prestations.htm" target="_top" onmouseover="i03.src='images/btn_prestations_g.gif'" onmouseout="i03.src='images/btn_prestations_w.gif'"> <img src="images/btn_prestations_w.gif" border=0 name="i03" width="140" height="40" hspace=0 vspace=0 /></a></li>
...........etc.
   </ul>  
 </div>
<!-- -->

<!-- ET LE CONTENU -->
 <div id="content">  
   <h2>Titre page</h2>  
  <h4>Paragraphe 01</h4>
  <div class="hr8CA0AD2"><hr></div>
  <p>Blablabal </p>

  <h4>Paragraphe 02</h4>
  <div class="hr8CA0AD2"><hr></div>
  <p>blablablabr> </p>

  <h4>Paragraphe 03</h4>
  <div class="hr8CA0AD2"><hr></div>
  <p>Blablabka</p>
 </div>
<!-- -->
  
 <div class="hr8CA0AD"><hr /></div>

 <div id="footer">   
   <span class="footer">Le footer : le copyright + les Mentions légales + je ne sais quoi</span>
 </div>

</div>
</body>

c'est tout ce que je meux envoyer pour l'instant....désolé :blush:

jeanpierre949

jeanpierre949

Posté
Posté

ton <div class="menuleft> a-t-il la propriete float:left; ?

<li class="menu"> je ne sais pas si c'est bien necessaire de leur attribuer une classe puisque tu l'as deja attribué a<ul class="men">

cevichero

cevichero

Posté
  • Auteur
Posté

autant pour moiJean Pierre, je me suis trompé de version, maintenant il n'y aplus le <div class="menuleft>, il ne servait à rien en fait.

au sujet des UL et LI, si j'enlève la "class="menu"" à l'un ou à l'autre, c'est le chaos total....

si tu as une idée, elle est la bienvenue, en atendant je continue et persévère..... :blink:

cevichero

cevichero

Posté
  • Auteur
Posté

j'ai eu la même idée que toi et le résultat est le même si ce n'est pire....

je pensais que cela résoudrait le probleme des espacements entre les lignes, mais je n'ai rien trouvé pour aligner le menu et le div du contenu. pourtant il est en float: right;.......

jeanpierre949

jeanpierre949

Posté
Posté (modifié)

pour la hauteur des lignes

line-height:valeurpx;

je viens de tester en mettant la liste a puce dans un div float: left; ca marche impec sur IE

Modifié par jeanpierre949
cevichero

cevichero

Posté
  • Auteur
Posté

je suis désolé mais c'est le même résultat, il faut dire aussi que chaque lign ene contient pas du texte mais une image chacune.

Je pense qu'il serait preferable qu'on attende ce soir, je pourrais mettre la page en ligne et consultable par tous... :)

si tu es toujours dans les parages tu es le bienvenu( les autres aussi!) B)

a++

Magicoyo

Magicoyo

Posté
Posté

Pour ton menu qui ce retrouve à gauche, tu as un problème de taille de boite. IE ajoute le padding à la taille du contenu pour définir la taille de la boîte. Ainsi, il n'y a pas la place pour tes deux éléments (menu & texte) dans ta page.

Va faire un tour sur http://forum.alsacreations.com/faq/

Le plus simple : cale tes taille de blocs sur IE.

Pour ton espace entre les lignes, je sais pas trop. Probablement encore un problèlme de boite.

Une bonne pratique, ajouter ceci au début de ta CSS

* {margin:0; padding:0; border:0}

Cela affecte tous tes éléments ;)

cevichero

cevichero

Posté
  • Auteur
Posté
Salut.

esaaie de supprimer le clear:both; ici div.hr2A353D dans ta css

<{POST_SNAPBACK}>

je les ai mis en commentaires et chez moi ça ne change rien, tu as constaté un changement de ton coté?

cevichero

cevichero

Posté
  • Auteur
Posté

merci de ta reponse Maginyoyo,

je connais deja alsa, mais n'ai pas trouvé excatement ce que je voulais.

j'ai toutefois "résolu" le probleme des espaces entre les lignes : j'ai tout simplement suprimé les lignes! :rolleyes:

elle ne sont pas indispensables et je pense quec'est mieux comme ça. Dommage qu'on n'ait pas trouvé la solution, ce n'est que partie remise.... :angry:

le menu est toujours décalé sur la droite et dessus du contenu. je retourne sur alsa, peut etre que j'y verrai plus clair cetet fois...

cevichero

cevichero

Posté
  • Auteur
Posté

probleme "presque" résolu,

code CSS:

.menu {
position: relative;
float: left;
top: -586px;
padding: 0;
margin: 0 0 0 5px;
height: 40px;
width: 140px;
}

HTML:

<div class="menu">
  <img src="images/top_menu.gif" width="140" height="10" hspace="0" vspace="0" border="0" alt=""><br>
   <a href="accueil.htm" target="_top" onmouseover="i01.src='images/btn_accueil_g.gif'" onmouseout="i01.src='images/btn_accueil_w.gif'"> <img src="images/btn_accueil_w.gif" border=0 name="i01" width="140" height="40" hspace=0 vspace=0 /></a><br>
   <a href="demarche.htm" target="_top" onmouseover="i02.src='images/btn_demarche_g.gif'" onmouseout="i02.src='images/btn_demarche_w.gif'"> <img src="images/btn_demarche_w.gif" border=0 name="i02" width="140" height="40" hspace=0 vspace=0 /></a><br>
   <a href="prestations.htm" target="_top" onmouseover="i03.src='images/btn_prestations_g.gif'" onmouseout="i03.src='images/btn_prestations_w.gif'"> <img src="images/btn_prestations_w.gif" border=0 name="i03" width="140" height="40" hspace=0 vspace=0 /></a>
etc...
 </div>

en l'occurrence, je pense que la liste n'apportait aucun interet là-dedans donc en la supprimant je m'évite des soucis avec les interlignes

par contre je ne sais pas pourquoi le DIV du menu est calée après (donc plus bas) que le content. ce qui fait que pour l'aligner au niveau du content il faut que lui donne une valeur negative par rapport au TOP

conséquence : sur IE (encore une fois!) la taille de la page prend une place plus grande, comme si le menu était toujours en bas en fait

euh...j'espere que c'est clair :P

jeanpierre949

jeanpierre949

Posté
Posté

ce n'est pas la peine de tout refaire je t'ai dit que la seule correction a apporter c'etait ton <div class="menu_top_left"> en mettant <div class="top_menu"> tout rentre dans l'ordre

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...