• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Abstand list-style-image zum Text

C

Corraggiouno

Mitglied
Hi,

kann mir jemand einen Tipp geben wie ich den Abstand vom list-style-image (rotes Rechteck) zum Text(z.B. Home) verringern und besser ausrichten kann?
hier mein html-code:
Code: 
<!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-1" />
<title>Christian r</title>
<link href="css/cm.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<h1>Praxis für ganzheitliche Heilkunde</h1>
<div id="nav">
 <ul>
  <li><a href="home.php"><span>Home</span></a></li>
  <li><a href="praxis.php"><span>Praxis</span></a></li>
  <li><a href="therapie.php"><span>Therapie</span></a></li>
   <ul>
    <li><a href="peet.php"><span>Physio emotionelle energetische Therapie</span></a></li>
    <li><a href="enmt.php"><span>Ernährungsberatung nach Metabolic Typing</span></a></li>
    <li><a href="tcm.php"><span>Traditionelle chinesische Medizin</span></a></li>
    <li><a href="ap.php"><span>Akupunktur</span></a></li>
   </ul>
  <li><a href="kontakt.php"><span>Kontakt</span></a></li>
 </ul>
</div>
<div id="footer">
Impressum
</div>
</div>
</body>
</html>

css-code:
Code: 
html {
height: 100.3%;
}

body{
font-family: Verdana, sans-serif;
font-size:0.8em;
color: #000000;
}

* {
margin: 0;
padding: 0;
}

div#wrapper {
width: 900px;
margin:20px auto;
/*
border-style:solid;
border-color:#0000000;
border-width:1px;
*/
}


h1 {
background: url(../images/logo.gif) no-repeat center;
height:206px;
text-indent: -999em;
}




div#nav {
background:url(../images/nav.gif) repeat-y;
width:225px;
margin-left:10px;
height: 400px;
color:#ae262c;
}

ul {
list-style-image:url(../images/dash.gif);
padding-left:30px;
list-style-type:none;

}

ul ul {
font-size:0.7em;
padding-left:15px;
}

li {

padding:10px;

}

div#nav a {
text-decoration: none;
color:#ae262c;
}


div#footer{
background: url(../images/footer.gif) no-repeat;
width:225px;
height:60px;
margin-left:10px;
padding-left:25px;
font-family: Verdana, sans-serif;
text-align:left;
}

div#maintext {
width: 400px;
}
hier das ergebnis: Christian r
 
super, danke für den Tipp, hat funktioniert!
weis jemand auch, wie ich mein list-style-image (rote Rechtecke) mit der Bezeichnung (z.B. Home) als Link in CSS definieren kann. Also die Bezeichnung ist ja schon ein Link, nur das list-style-image nicht. Des weitern hätte ich gerne das die roten Rechtecke wenn ich mit der Maus drüber fahre (hover) gelb werden. Kann mir da jemand einen Tipp geben?
mein aktueller Code:
Code: 
<!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-1" />
<title>Christian r</title>
<link href="css/cm.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<h1>Praxis für ganzheitliche Heilkunde</h1>
<div id="nav">
 <ul>
  <li><a href="home.php"><span>Home</span></a></li>
  <li><a href="praxis.php"><span>Praxis</span></a></li>
  <li><a href="therapie.php"><span>Therapie</span></a></li>
   <ul>
    <li><a href="peet.php"><span>Physio emotionelle energetische Therapie</span></a></li>
    <li><a href="enmt.php"><span>Ernährungsberatung nach Metabolic Typing</span></a></li>
    <li><a href="tcm.php"><span>Traditionelle chinesische Medizin</span></a></li>
    <li><a href="ap.php"><span>Akupunktur</span></a></li>
   </ul>
  <li><a href="kontakt.php"><span>Kontakt</span></a></li>
 </ul>
</div>
<div id="footer">
Impressum
</div>
</div>
</body>
</html>
css-code
Code: 
html {
height: 100.3%;
}

body{
font-family: Verdana, sans-serif;
font-size:0.8em;
color: #000000;
}

* {
margin: 0;
padding: 0;
}

div#wrapper {
width: 900px;
margin:20px auto;
/*
border-style:solid;
border-color:#0000000;
border-width:1px;
*/
}


h1 {
background: url(../images/logo.gif) no-repeat center;
height:206px;
text-indent: -999em;
}


div#nav {
background:url(../images/nav.gif) repeat-y;
width:225px;
margin-left:10px;
height: 400px;
color:#ae262c;
}

ul {
list-style-image:url(../images/dash.gif);
padding-left:50px;
list-style-type:none;

}

ul ul {
list-style-image:url(../images/dashs.gif);
font-size:0.7em;
padding-left:15px;
}

li {
padding-top:20px;
}

div#nav a {
text-decoration: none;
color:#ae262c;
}


div#footer{
background: url(../images/footer.gif) no-repeat;
width:225px;
height:60px;
margin-left:10px;
padding-left:25px;
font-family: Verdana, sans-serif;
text-align:left;
}

div#maintext {
width: 400px;
}
Christian r
 
hi,
danke für den link. Hat mich schon etwas weitergebracht. Leider werden die backgrounds (rote bzw. gelbe rechteck) über die Bezeichnung gelegt, was natürlich unschön aussieht. Kannst du mir sagen wie ich die Bezeichnung neben das Rechteck platzieren kann?
-background-position - brachte leider keinen Erfolg!
code:
Code: 
div#nav a {
text-decoration: none;
color:#ae262c;
}

div#nav a:link {
background:url(../images/dashs_yellow.gif) no-repeat;	

color:#ae262c;
}
div#nav a:visited {
background:url(../images/dashs_yellow.gif) no-repeat;	
color:#ae262c;
}

div#nav a:hover {
background:url(../images/dashs_red.gif) no-repeat;	
color:#ae262c;
}


alktuelles ergebnis:
Christian r
 
Versuch's mal so:

div#nav a {
text-decoration: none;
color:#ae262c;
display: block;
padding-left: 12px;

}

div#nav a:link {
background:url(../images/dashs_yellow.gif) no-repeat;
background-position: 0 4px;
color:#ae262c;
}
div#nav a:visited {
background:url(../images/dashs_yellow.gif) no-repeat;
background-position: 0 4px;
color:#ae262c;
}

div#nav a:hover {
background:url(../images/dashs_red.gif) no-repeat;
background-position: 0 4px;
color:#ae262c;
}
Zum Vergrößern anklicken....
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben