28173 sujets

CSS et mise en forme, CSS3

Puces de grande taille tronquées

Bonjour à tous,

J'ai un petit problème avec la mise en page du site que je fais pour une assoc'.
L'idée est d'avoir un menu latéral avec des puces de grandes tailles.
De plus, il faut qu'il y ait un décalage entre les lignes.
Grâce à alsacréations j'y suis presque.
Je les ai définies en background que j'associe aux liens. background-position et padding-left me permettent alors d'aligner les images au texte à ma convenance. C'est la seule solution que j'ai trouvé pour qu'elle collent au lien et non au bloc "menu".

Seul problème: mes puces sont tronquées...
Ce sont des png de 50x50 pixels.
Voici les puces...

J'ai épluché la FAQ et fait des recherches sur le forum, sans succès...

Les habitués de ce site reconnaitront un des modéles CSS donnés ici Smiley cligne

Merci d'avance pour votre aide Smiley smile

Voici l'image de ce que j'obtiens

le html
<html>
<head><TITLE>Freaky-Arts</TITLE>
<style type="text/css" media="all">
			@import "./css/freakyarts.css";
		</style>
<META HTTP-EQUIV="Content-Language" CONTENT="fr-FX">
<META NAME="robots" CONTENT="index, follow">

<META NAME="rating" CONTENT="General">
<META NAME="distribution" CONTENT="Global">
<META NAME="Date-Creation-yyyymmdd" CONTENT="20001015">
<META NAME="revisit-after" CONTENT="15 days">
<META NAME="author" CONTENT="Vincent BENOIT">
<META NAME="reply-to" CONTENT="webmaster@freaky-arts.com">
<META NAME="owner" CONTENT="freaky-arts team">
<META NAME="copyright" CONTENT="2006">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META NAME="description" CONTENT="Freaky-Arts : organisation d'évènements culturels">
<META NAME="keywords" CONTENT="">
</head>

<body>
<div id="conteneur">

	  <div id="header">
	  <img  src="./img/banniere_FreakyArts.png"></img>

</div>
[b]
	  <div id="gauche"><p>menu</p>
	  	<p>largeur fixe : 150px</p>
	  	
			<ul class="menugauche">	
			<li><div id="itemMenu"><td ><a class="gauche" href="">Identité Freaky Arts</a></div></li>
			<li><a class="droite" href="">Agenda</a></li>
			<li><a class="gauche" href="">Archives</a></li>
			<li><a class="droite" href="">Pages d'artistes</a></li>
			<li><a class="gauche" href="">Partenaires</a></li>
			<li><a class="droite" href="">Nous contacter</a></li>
			<li><a class="gauche" href="">Plan du site</a></li>
			</ul>
			
	  </div>
[/b]  
	  <div id="centre">
  

	  <br />
  	  <br />
  	  <br />
  	  <br />
  	  <br />
  	  <br />
  	  <br />
  	  <br />
  	  <br />
  	  <br />
  	  <br />
  	  <br />
  	  <br />
  	  <br />
  	  <br />
  	  <br />
  	  <br />
  	  <br />	 
	  <br />
  	  <br />
  	  <br />
  	  <br />
  	  <br />
  	  <br />
 
  	</div>

	  
	  <div id="pied">pied de page</div>
</div>
	  
</body>
</html>


Et le CSS

#body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;

}

div#conteneur {
position: absolute;
width: 990;
background-color:#000000;

}

#header {
height: 130px;
margin-top: 4px;
margin-right: 4px;
margin-left: 4px;

}

div#centre {

margin-left: 150px;
}
div#gauche {
position: absolute;
left:0;
width: 300px;

}
div#pied {
height: 30px;

}


.menugauche {

margin: 0;
padding:0;
}

.menugauche li {
margin-bottom: 40px;
list-style-type: none;
}

.menugauche a {
text-decoration: none;
color: #ffffff;
}


[b]
.menugauche a.gauche{
	
  margin: 0 10px;
   background-image: url(../img/puce.png);
background-repeat: no-repeat;
background-position: 0% 50%;
padding-left: 50px;
}


.menugauche a.droite{
margin: 0 40px;
background-image: url(../img/puce.png);
background-repeat: no-repeat;
background-position: 0% 50%;
padding-left: 50px;
}


[/b]
.menugauche a:hover {
text-decoration: none;
}
p {margin: 0 0 10px 0;}

Modifié par le_ptit_vinz (24 Oct 2006 - 14:26)
Bloqué toujours je suis...

Si le problème est insolvable car on est tributaire de la hauteur de la police comment auriez vous codé ce genre de menu?

Je suis certain qu'il y a une solution bien plus simple que ce que j'ai fait mais là j'ai la tête dans le guidon et je ne vois pas.

Un float tout simple?


edit: j'ai modifié mon post précedent pour que ce soit plus clair.
Modifié par le_ptit_vinz (24 Oct 2006 - 13:33)
Sujet clos
Aller à