28172 sujets

CSS et mise en forme, CSS3

Les puces personnalisées

Bonjour à tous,

J'ai besoin d'aide pour ces bouts de code CSS et HTML.
Ce que ce code doit faire :
- espaces à gauche et au dessus de la listes nuls
(la liste commence dans le coin gauche hjaut de bloc)
- puces à l'extrême gauche du bloc (sans en sortir)
- puces personnalisées,
- espace réduit entre la puce et le texte
- interligne entre les li (pas les lignes de textes)
et tout ceci en ne perdant pas de vue la compatibilité
avec à la fois IE8 et à la fois Google chrome.

Mon idée de base était de séparer
les puces (gauche) et le texte (droite) dans un bloc (bloc01)...
seulement très très très gros problèmes de compatibilité
avec IE et Chrome

Pouvez-vous m'aider ?
J'ai découvert grâce à mon ami fidèle google
qu'il y aurait une olution avec "background".
Mais je dois vous avouer que cela ne fonctionne pas chez moi,
et pire, je n'y comprends pas le fonctionnement...

Merci d'avance.


#bloc01 {
height: 510px;
width: 360px;
position: absolute;
z-index: 27;
left: 432px;
top: 25px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#bloc01 #gauche {
float: left;
clear: left;
height: 500px;
}
#bloc01 #gauche ul {
list-style-position: outside;
list-style-image: url(images/commun/puce2flechesjaunes.gif);
list-style-type: none;
float: left;
clear: left;
margin-left: 5px;
padding-left: 5px;
margin-top: 0px;
padding-top: 0px;
}
#bloc01 #gauche ul li {
margin-top: 3px;
padding-top: 3px;
}
#bloc01 #droite {
width: 300px;
height: 500px;
float: left;
position: relative;
left: 10px;
}
#bloc01 #droite ul {
list-style-position: outside;
list-style-image: url(images/commun/pucediscbleu4.gif);
list-style-type: none;
float: left;
clear: left;
margin-left: 0px;
padding-left: 0px;
list-style-position: inside;
list-style-image: none;
list-style-type: none;
margin-top: 0px;
padding-top: 0px;
}
#bloc01 #droite ul li {
margin-top: 3px;
padding-top: 3px;
}
.c10 {
font-size: 10px;
line-height: 9px;
}

<body>
<div id="site">
<div class="c10" id="bloc01">
<div id="gauche">
<ul>
<li><br></li>
<li><br></li>
<li><br><br></li>
<li><br></li>
<li><br><br></li>
<li><br><br></li>
<li><br></li>
<li><br></li>
<li><br></li>
<li><br></li>
<li><br><br></li>
<li></li>
<li><br></li>
<li><br><br></li>
<li><br><br></li>
</ul>
</div>
<div id="droite">
<ul>
<li>Aide humaine, aide matérielle, technologique</li>
<li>Aide administrative, aide psychologique.</li>
<li>Auxiliaires de vie diplômées, qualifiées,
<br>compétentes et chaleureuses</li>
<li>Délais d'intervention 24/48 heures</li>
<li>Pas de frais de dossier pas de formalitées
<br>administratives</li>
<li>Auxiliaire de vie dédiée et coordinateur
<br>qualité pour chaque prestation</li>
<li>Forfaits jour, nuit, week-end &amp; 24/24</li>
<li>Programme Alzheimer</li>
<li>Aide à distance &amp; Gérontechnologies</li>
<li>Travail en réseau associant plusieurs professionnels de santé </li>
<li>Analyse aide et suivi quotidien de l'activité de
<br>la personne</li>
<li>Intervention d'urgence</li>
<li>Bilan nutritionnel et Suivi diététique</li>
<li>Conseil en Prévention et aménagement
<br>du domicile</li>
<li>Détection baisse
<br>de la mobilité</li>
</ul>
</div>
</div>
</div>
</body>
Modérateur
Bonjour,

Serait-il possible de faire un montage sous Photoshop/Gimp et de nous montrer graphiquement le rendu final souhaité? Ce serait beaucoup plus simple pour te donner un coup de main.
j'ai découvert les background dans les li...
mais cela ne fonctionne pas ni en IE ni en Chrome


#site #bloc03 ul li {
background-image: url(images/commun/pucediscbleu4.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 5px center;
list-style-type: none;
list-style-position: outside;
padding-left: 13px;
}

Pourquoi ?

pièce jointe pour mes souhaits...
upload/32999-pageH272.jpg
Modérateur
Est-ce que tu veux quelque chose comme ça?

upload/281-liste.gif 


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Test</title>
<style type="text/css">
div.colonne {
float:left;
width:400px;
}

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

ul li {
	margin:0 0 10px 0;
	padding:0 0 0 20px;
	background:url(puce.gif) no-repeat 5px 5px;
	min-height:20px;
}

div.clear {
clear:both;
height:0;
line-height:0;
font-size:0;
margin:0;
padding:0;
visibility:hidden;
}
</style>
</head>

<body>
	<div class="colonne">
    	<ul>
        	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            <li>Quisque eu feugiat orci. Mauris in nibh tellus. Aenean at varius est. Sed varius ullamcorper diam, eu feugiat nulla viverra id. Suspendisse imperdiet, metus quis commodo ultrices, quam felis bibendum odio, at posuere ipsum felis vel turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            <li>Quisque eu feugiat orci. Mauris in nibh tellus. Aenean at varius est. Sed varius ullamcorper diam, eu feugiat nulla viverra id. Suspendisse imperdiet, metus quis commodo ultrices, quam felis bibendum odio, at posuere ipsum felis vel turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            <li>Quisque eu feugiat orci. Mauris in nibh tellus. Aenean at varius est. Sed varius ullamcorper diam, eu feugiat nulla viverra id. Suspendisse imperdiet, metus quis commodo ultrices, quam felis bibendum odio, at posuere ipsum felis vel turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
        </ul>
    </div>
    
    <div class="colonne">
    	<ul>
        	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            <li>Quisque eu feugiat orci. Mauris in nibh tellus. Aenean at varius est. Sed varius ullamcorper diam, eu feugiat nulla viverra id. Suspendisse imperdiet, metus quis commodo ultrices, quam felis bibendum odio, at posuere ipsum felis vel turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            <li>Quisque eu feugiat orci. Mauris in nibh tellus. Aenean at varius est. Sed varius ullamcorper diam, eu feugiat nulla viverra id. Suspendisse imperdiet, metus quis commodo ultrices, quam felis bibendum odio, at posuere ipsum felis vel turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            <li>Quisque eu feugiat orci. Mauris in nibh tellus. Aenean at varius est. Sed varius ullamcorper diam, eu feugiat nulla viverra id. Suspendisse imperdiet, metus quis commodo ultrices, quam felis bibendum odio, at posuere ipsum felis vel turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
        </ul>
    </div>
    
    <div class="clear">&nbsp;</div>
</body>
</html>


L'utilisation de deux listes séparées dans deux colonnes différentes dépend de ce que tu veux présenter et de quelle façon exactement. Techniquement, il serait aussi possible d'utiliser une seule liste et de créer les deux colonnes en définissant une largeur aux li et en les mettant en float:left. À voir selon le contexte.
Modifié par Tony Monast (29 Sep 2010 - 19:50)
C'est tout à fait cela...
Et en plus avec une rapidité et une efficacité jamais vues
sur d'autres sites.
Merci mille fois.

Jean-Yves
Modérateur
Comme le problème est résolu, merci de bien vouloir l'indiquer comme tel. Pour cela, tu dois éditer ton premier message et ajouter le mot [Résolu] au début du titre.

Merci
Sujet clos
Aller à