Webmaster Hub > CSSListe : taille verticale des lignes et décalage

Version complète: sur le forum Webmaster Hub : CSSListe : taille verticale des lignes et décalage

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

cevichero

lundi 26 septembre 2005 à 08:58

Bonjour,

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

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

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

CODE

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

CODE

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

jeanpierre949

lundi 26 septembre 2005 à 09:08

Bonjour.
On pourrait avoir apercu de la page stp?

cevichero

lundi 26 septembre 2005 à 09:24

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 :

CODE

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


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



<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é

jeanpierre949

lundi 26 septembre 2005 à 10:13

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

lundi 26 septembre 2005 à 10:30

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

jeanpierre949

lundi 26 septembre 2005 à 11:01

esssaie plutot de faire le contraire maintenant mets
<div class="menu"> <ul><li></li></ul></div>

cevichero

lundi 26 septembre 2005 à 11:16

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

lundi 26 septembre 2005 à 11:27

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

cevichero

lundi 26 septembre 2005 à 12:52

je ne comprends pas jean pierre, je fais ce que tu m'as conseillé et ça ne focntionne pas trop chez moi.

jeanpierre949

lundi 26 septembre 2005 à 13:53

moi c'est nickel si tu veux je mets la page en ligne

cevichero

lundi 26 septembre 2005 à 14:06

oui je veux bien stp :-)

jeanpierre949

lundi 26 septembre 2005 à 14:29

vas-y

cevichero

lundi 26 septembre 2005 à 15:18

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++

jeanpierre949

lundi 26 septembre 2005 à 15:35

cevichero

lundi 26 septembre 2005 à 21:44

Me revoici

, voici ce que ça donne avec le dernier code envoyé
avec IE (ça ne marche pas):

avec Firefox (fonctionne à merveille!) :

jeanpierre949

mardi 27 septembre 2005 à 03:38

mets ta page en ligne si tu peux que je puisse regarder css et html

cevichero

mardi 27 septembre 2005 à 08:40

oui excuse, pour info, j'ai remis la liste sans un div, ça avait l'air de mieux marcher comme ça (avec moi du moins).
la voici : My Webpage

jeanpierre949

mardi 27 septembre 2005 à 09:52

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

Magicoyo

mardi 27 septembre 2005 à 10:01

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

CODE

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

Cela affecte tous tes éléments

cevichero

mardi 27 septembre 2005 à 10:34

CITATION(jeanpierre949 @ mardi 27 septembre 2005, 09h52)

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

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

cevichero

mardi 27 septembre 2005 à 10:53

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!

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

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

jeanpierre949

mardi 27 septembre 2005 à 13:24

c'est le <div class="menu_top_left"> qui fiche tout en l'air mets
<div class="top_menu">

cevichero

mardi 27 septembre 2005 à 13:59

probleme "presque" résolu,
code CSS:

CODE

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

HTML:

CODE

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

jeanpierre949

mardi 27 septembre 2005 à 14:14

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

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.