Juergens-Workshops.de Forum › HTML und Co › CSS und Javascript
Aufzählungszeichen im CSS Stylsheet

Ansichts-Optionen
Aufzählungszeichen im CSS Stylsheet
Moni
Gast
 
#1
13.02.2006, 12:25
Guten Tag zusammen,
trotz probieren komme ich nicht weiter mit meinen Kenntnissen und möchte bei den Experten nach fragen für folgendes:
ich habe eine freie CSS Vorlage nach meinen Vorstellungen geändert. Als Aufzählungszeichen soll statt eines Punktes eine kleine Katzenpfote gezeigt werden.
In PhotoImpact wurde in der gleichen Pixelgrösse wie der Aufzählungspunkt eine Katzenpfote erstellt mit weißem Hintergrund. Nun wird die Pfote zwar angezeigt im IE, aber zu dicht an der nachfolgenden Schrift bzw. des Menuepunktes. Wie bekomme ich zwischen Aufzählungspunkt und Menuepunkt mehr Abstand.
Ich hoffe es versteht mich jemand was ich meine. Vielen Dank für eine Antworten im Voraus.
Gruss Moni

Code:
#rechts ul li{
background:url(../../Webseiten/Mohnblume/include/liste_28x22.jpg) no-repeat;
display:block;
  margin:0 0px 0 0;
padding:0 0 0 16px
Zitieren
Hulot Offline
Gesperrt
Beiträge: 1.027
Themen: 27
Danke erhalten: 0 in 0 Posts
Danke gesagt: 0
Registriert seit: 12.11.2003
#2
13.02.2006, 13:18
Hallo,

erstelle die Katzenpfotengrafik nochmals, aber lasse dabei rechts - ganz nach Belieben - ein paar Pixel Luft und setze den Hintergrund auf transparent. Das dürfte so gehen.

Gruß Hulot
Zitieren
Helmut Offline
Profi Member
Beiträge: 3.252
Themen: 228
Danke erhalten: 1 in 1 Posts
Danke gesagt: 0
Registriert seit: 12.11.2003
#3
13.02.2006, 15:13
Hi,

meinste so...
[Bild: listebg.gif]

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<title>Liste</title>

<style type="text/css">
body {
background-color: #f7f7f7;
font-family: Verdana, Arial;
font-size: 12px;
color: #000000;
}


ul {
list-style-type: none;
}

li {
background-image: url(klee.gif);
background-repeat:no-repeat;
padding: 3px 2px 3px 25px;
width: 200px;
margin: 3px;
}
</style>

</head>
<body>


<ul>
[*]Listenpunkt 1
[*]Listenpunkt 2
[*]Listenpunkt 3
[/list]

</body>
</html>

Cu Helmut
Zitieren
Moni
Gast
 
#4
14.02.2006, 17:28
Hallo vielen Dank für die rasche Antwort.
Das sieht ja prima aus! Genau so stelle ich mir das vor.
Ich werde es versuchen, ob ich das schaffe und einbauen kann.
Vielen Dank für den Tip.
Gruss Moni
Zitieren
Moni
Gast
 
#5
14.02.2006, 19:07
Hi,
bin nun doch etwas confused und melde mich wieder, da ich meinen Fehler bei dem Code nicht finde. Habe ein neues *.gif transparent und mit größerem Abstand recht erstellt.
Arbeite mit Dreamweaver; im Dreamweaver Entwurf sieht das Aufzählungs *.gif gut aus, im IE sitzt der Menuepunkt wie vorher zu dicht auf dem Aufzählunsgpunkt *.gif.
Würde bitte jemand noch einmal darauf schauen, wo sich mein Fehler eingeschlichen hat. Vielen Dank im Voraus!

Das CSS Sheet für Formatierungen Navigation (Rechte Spalte) habe ich so geändert:

Code:
/* Allgemeine Formatierungen */
*{
margin:0;
padding:0;
}

body{
background:#eee;
font:.8em "trebuchet ms", arial, sans-serif;
text-align:center;
}


/* Formatierungen Layout (grob) */
#seite{
background:#fff url(hintergrund.jpg) repeat-y;
margin:0 auto;
padding:10px 10px 5px 13px;
text-align:left;
width:715px
}

#oben{
background:#fff url(include/banner.jpg);
clear:both;
height:100px;
width:713px;
}

#links{
float:left;
margin:0 0 20px 0;
width:458px;
}

#rechts{
float:left;
margin:0 0 20px 20px;
width:235px
}

#unten{
background:#666;
clear:both;
width:713px
}

/* Formatierungen Navigationsleiste */
#navigation{
background:#fff;
float:left;
width:500px;
padding:0 0 4px 0
}

#navigation ul{
}

#navigation ul li{
display:inline;
margin:0 10px 0 0
}

#navigation ul li a{
text-decoration:none;
border-bottom:4px solid #fff;
color:#666;
font-size:.9em;
font-weight:bold;
}

#navigation ul li a:hover{
text-decoration:none;
border-bottom:4px solid #666
}



/* Sonstige Formatierungen */
.titel{
float:right;
width:90px;
padding:0 10px 0 0
}

.titel img{
border:0
}



/* Schrift-Formatierungen */
h1,h2,h3,h4,h5,h6{
border-bottom:1px solid #ccc;
color:#666;
font-size:1.5em;
letter-spacing:0.01em;
margin:25px 0 0 0
}

#links p{
text-align:justify
}

#unten p{
color:#eee;
font:.85em "trebuchet ms", verdana, sans-serif;
padding:5px;
}

/* Formatierungen Navigation (Rechte Spalte) */
#rechts ul{
list-style:none;
}

#rechts ul li{
background:url(include/liste_28x22.gif);
background-repeat:no-repeat;
padding:3px 2px 3px 25px;
width:200px;
display:block;
margin:3px;
}

#rechts ul li a{
text-decoration:none;
  color:#666;
}

#rechts ul li a:hover{
  color:#000;
}



/* Link-Formatierungen */
a:link,a:visited,a:active{
color:#000;
text-decoration:underline
}

a:hover{
text-decoration:none
}


#unten a{
color:#fff;
text-decoration:underline
}

#unten a:hover{
text-decoration:none
}
Zitieren
Jürgen Offline
Profi Member
Beiträge: 7.627
Themen: 203
Danke erhalten: 0 in 0 Posts
Danke gesagt: 0
Registriert seit: 12.11.2003
#6
18.02.2006, 13:32
Hallo Moni,
erst jetzt sehe ich, dass Deine Frage nicht beantwortet wurde. Hat sich das in den letzten Tagen erledigt?
Ansonsten kannst Du ja den Hintergrund des GIF-Bildes etwas nach rechts größer erstellen, dann hast Du mehr Abstand, OK?

Wenig Abstand:
[Bild: tatze.gif]

Mehr Abstand:
[Bild: tatze1.gif]

Bis dann
Jürgen
Zitieren