alignement de puces

tout est dit.

3 janvier 2006 à 21:09:44

bonsoir tout le monde
donc voila un problème se pose à moi,
j'aimerai aligner des menu contenu dans des balise <ul>
mon probleme etant que par defaut ca donne ceci
MENU
menu
menu
menu

et je voudrais que ca donne ceci:
MENU
menu
menu
menu

jai essayé le text-align: left;
mais ceci ne change rien.
auriez-vous une solution?
merci d'avance

mistike

3 janvier 2006 à 21:10:53

Euh... je vois pas la différence ?

xgameur

3 janvier 2006 à 21:16:40

oups erf erf erf ca m'a suprimé les espaces.

bonsoir tout le monde
donc voila un problème se pose à moi,
j'aimerai aligner des menu contenu dans des balise <ul>
mon probleme etant que par defaut ca donne ceci
_MENU
__menu
__menu
__menu

(ps: les "_" ce sont des espaces en fait, mais sinon ils sont supprimé auto sur le forum)
et je voudrais que ca donne ceci:
_MENU
menu
menu
menu

jai essayé le text-align: left;
mais ceci ne change rien.
auriez-vous une solution?
merci d'avance

Tonypeter

3 janvier 2006 à 21:19:22

Ok figure toi que j'ai eu le même problème mais je n'ai pas réussi à le résoudre. Désolé pour toi :-°

J'ai essayé plein de choses mais aucune n'a marché... :euh:

En espérant que tu y arrivera!

xgameur

3 janvier 2006 à 21:23:08

Citation : Touatouane

Oui effectivement aucune différence... peut-être que tu t'es trompé, en tout cas j'espère

Si si regarde bien celui-ci (regarde surtout les endroit marqué de <=====)

oups erf erf erf ca m'a suprimé les espaces.

bonsoir tout le monde
donc voila un problème se pose à moi,
j'aimerai aligner des menu contenu dans des balise <ul>
mon probleme etant que par defaut ca donne ceci
_MENU
__menu <=============
__menu <============
__menu <===========

(ps: les "_" ce sont des espaces en fait, mais sinon ils sont supprimé auto sur le forum) <==========
et je voudrais que ca donne ceci:
_MENU
menu <==========
menu <===========
menu <===========

jai essayé le text-align: left;
mais ceci ne change rien.
auriez-vous une solution?
merci d'avance

mistike

3 janvier 2006 à 21:28:01

Tu veux le faire avec ou sans affichage des puces ?

C'est pas text-align, mais il faut jouer sur les margin et padding des <li>.

xgameur

3 janvier 2006 à 21:42:50

erf mon problème viens d'autre part surement mais je ne vois pas d'ou car quand je change mon padding-left pour les balises <li>
le menu reste a sa place.
erf je ne vois pas d'ou ca peut venir... :s
voici en premier tps un screen de mon site...'ne faite pas attention au design :), je m'exerce, 3jours :s)
[URL]http://img267.imageshack.us/img267/9946/aide2hz.jpg[/URL]

bon je vous fait voir un peu la gueule de mon code...

fichier html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site2 !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="style par défaut" href="styles/style.css" />
</head>
<body>
<div id="body">
<div id="en_tete">
</div>

<div id="menu">
<div class="element_menu">
<h3 class="titre_menu">Menu</h3>
<ul class="ul">
<li><a href="page1.html" class="lien_menu">Lien111111i</a></li>
<li><a href="page2.html" class="lien_menu">Lien</a></li>
<li><a href="page3.html" class="lien_menu">Lien</a></li>
</ul>
</div>

<div class="element_menu">
<h3 class="titre_menu">Menu</h3>
<ul class="ul">
<li><a href="page4.html" class="lien_menu">Lien</a></li>
<li><a href="page5.html" class="lien_menu">Lien</a></li>
<li><a href="page6.html" class="lien_menu">Lien</a></li>
</ul>
</div>
</div>

<div id="corps">
<h1>Mon super site</h1>

<p>
Bienvenue sur mon super site !<br />
Vous allez adorer ici, c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :-D
</p>

<h2>A qui s'adresse ce site ?</h2>
<p>
A tout le monde ! Si je commence à privilégier certaines personnes, on va m'accuser de discrimination ;o)<br />
Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
</p>

<h2>L'auteur</h2>
<p>
L'auteur du site ? Bah, c'est moi, quelle question :-p<br />
Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs, de les rendre accros à mon site, puis de les mettre en mon pouvoir.<br />
Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait, j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
</p>

</div>

<div id="pied">
<p class="copy">Copyright "Xgameur" tous droits réservés</p>
</div>
</div>

</body>
</html>

mon CSS

body
{
background-color: rgb(153,167,202);
}
#body
{
width : 780px;
margin : auto;
margin-top : 20px;
margin-bottom : 20px;
background-color : rgb(44,61,115);
border-right: 6px solid rgb(111, 129, 172);
border-bottom: 6px solid rgb(111, 129, 172);
}
#en_tete
{
width : 780px;
height : 219px;
background-image : url("../images/banniere.PNG");
background-repeat : no-repeat;
margin-bottom : 10px;
margin : auto;
}

#menu
{
float: left;
width: 150px;
height: 100%;
margin-right: 20px;
background-image : url("../images/new_menu.PNG");
background-repeat : no-repeat;
background-color: rgb(44,61,115);
}

.element_menu
{
margin-left: 10px;
}

.titre_menu
{
border-bottom: 6px dotted rgb(111, 129, 172);
margin-left: 0px;
}

.ul
{
border-right: 6px dotted rgb(111, 129, 172);
border-left: 6px dotted rgb(111, 129, 172);
}

.element_menu h3
{
font-family: "Lucida Calligraphy", "Comic Sans MS", Arial, Verdana, serif;
text-align: left;
color: rgb(153,167,202);
}

.titre_menu:before
{
content: url("../images/menu_logo.PNG");
}

ul a
{
text-decoration: none;
color: rgb(153,167,202);
font-family: "Lucida Calligraphy", "Comic Sans MS", Arial, Verdana, serif;
}

ul
{
list-style-type: none;
}

li
{
padding-left: 10px;
}

.lien_menu:before
{
content: url("../images/menu_logo_petit.PNG");
font-family: "Comic Sans MS", Arial, Verdana, serif;
}
#corps
{
margin-left: 170px;
margin-right: 20px;
margin-bottom: 20px;
}

#pied
{
background-image : url("../images/header.PNG");
margin-bottom: 0px;
}

.copy
{
text-align: center;
font-weight: bold;
}

mistike

3 janvier 2006 à 21:53:29

Utilises les balises <code></code> du forum, ce sera plus clair.

Sinon, ajoutes aussi margin-left: 0; pour tes <li>.

xgameur

3 janvier 2006 à 21:57:05

Citation : mistike

Utilises les balises <code></code> du forum, ce sera plus clair.

Sinon, ajoutes aussi margin-left: 0; pour tes <li>.

oups désolé...
sinon j'ai mis le margin-left a zéro pour les li ms ceci ne change rien...
quelqu'un a-t-il une solution .
désolé je sais c'est chiant de lire mon sujet.
mais quand un truc ne me vs pas j'avance plus.

mistike

3 janvier 2006 à 22:10:22

ok j'ai compris... (pour info tu peux éditer ton post pour ajouter les balises (code) ;-))

Modifies ça :

ul
{
list-style-type: none;
}

Par :

ul
{
list-style-type: none;
padding: 0;
}

xgameur

3 janvier 2006 à 22:15:04

hé bien chapeau le monsieur...
ca a marché , vraiment merci à toi, et aux autres aussi quand meme.

marty

3 janvier 2006 à 22:16:29

un petit "réglé" cela fait pas de mal !!! ;-)

mistike

3 janvier 2006 à 22:22:35

Citation : xgameur

hé bien chapeau le monsieur...

Mam'zelle

Citation : xgameur

ca a marché , vraiment merci à toi, et aux autres aussi quand meme.

De rien

yalcin

3 janvier 2006 à 22:58:42

bonsoir j'ai a peux prés le meme soucis moi j'ai un gros espace entre ma fleche (dessin qui represente un alignement) et mon lien
je sais pas comment coller les deux?
merci

mistike

3 janvier 2006 à 23:06:18

Yalcin, tu devrais faire un post séparé, en expliquant mieux ton problème que ça, et en nous donnant un exemple et ton code ;-)