FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Zur Registrierung

Thema: [css]Text einrücken in einer navi vom 18.06.2007

	MGi Foren-Übersicht -> Allgemeines - Nonprint -> [css]Text einrücken in einer navi

Autor

Nachricht

Sunlifestyle
Threadersteller

Dabei seit: 20.12.2005
Ort: Hoyerswerda bei Dresden
Alter: -
Geschlecht: Männlich

Verfasst Mo 18.06.2007 15:08
Titel

[css]Text einrücken in einer navi

klingt leicht ist es aber nicht.....weil.....

ich habe mir ne navi per css gebaut die folgenden code besitzt:

Code:

#navigation {
margin-top:16px;
float:left;
width:200px;
padding:0;
background-color:#FFFFFF;
}
#navigation li {
float: left;
list-style: none;
background-color:#CCCCCC;
border-bottom-color:#ffffff;
border-bottom-style:solid;
border-bottom-width:3px;
}
#navigation a {
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
text-align:right;
line-height:25px;
color:#fff;
text-decoration: none;
height:25px;
width:200px;
float: left;
background-color: #ffffff;
background-image:url(../bilder/button.jpg);
background-repeat:no-repeat;
border-bottom-color:#ffffff;
border-bottom-style:solid;
border-bottom-width:3px;
}
#navigation a:hover {
height:25px;
width:200px;
background-color:#ffffff;
background-image:url(../bilder/buttonover.jpg);
background-repeat:no-repeat;
border-bottom-color:#ffffff;
border-bottom-style:solid;
border-bottom-width:3px;
}
#navigation a.active {
height:10px;
width:145px;
font-weight: bold;
}

nun habe ich folgendes problem...wenn ich den text mit margin oder padding versuche einzurücken wird der komplette button kleiner...und das sollte nicht passieren...hat jemand ne ahnung wie ich die sache noch lösen kann?

rob

Dabei seit: 11.12.2003
Ort: ~/
Alter: 46
Geschlecht: Männlich

Verfasst Mo 18.06.2007 15:29
Titel

Zitat:

wenn ich den text mit margin oder padding versuche einzurücken

Welcher Text?
Wie sieht denn der HTML-Code dazu aus?

Zitat:

wird der komplette button kleiner

Klingt merkwürdig.
Kannst du mal den kompletten Code posten oder besser, einen Link zu der Site?
Dann kann man da mal einen Blick drauf werfen.

Zitat:

hat jemand ne ahnung wie ich die sache noch lösen kann?

Für Einrückungen würde ich text-indent nehmen.

Sunlifestyle
Threadersteller

Dabei seit: 20.12.2005
Ort: Hoyerswerda bei Dresden
Alter: -
Geschlecht: Männlich

Verfasst Mo 18.06.2007 16:10
Titel

Zitat:

hat jemand ne ahnung wie ich die sache noch lösen kann?

Für Einrückungen würde ich text-indent nehmen.[/quote]

also bei dem befehl rührt sich rein garnix...

einen link kann ich leider nicht geben....aber hier der html teil:

Code:

.
.
.
<ul id="navigation">
<li><a href="#">hallo</a></li>
<li><a href="#">hallo</a></li>
<li><a href="#">hallo</a></li>
<li><a href="#">hallo</a></li>
<li><a href="#">hallo</a></li>
<li><a href="#">hallo</a></li>
<li><a href="#">hallo</a></li>
<li><a href="#">hallo</a></li>
<li><a href="#">hallo</a></li>
</ul>
</div>
.
.
.

m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich

Verfasst Mo 18.06.2007 16:49
Titel

Ich nehme mal an du willst in etwa das hier erreichen:

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" xml:lang="de" lang="de">
<head>
<title>...</title>
<style type="text/css">
   ul {
      padding: 0;
      width: 200px;
   }
   ul li {
      list-style: none;
      margin-bottom: 3px;
   }
   ul li a {
      background-color: #333;
      color: #fff;
      display: block;
      height: 25px;
      line-height: 25px;
      text-decoration: none;
      text-align: right;

      width: 190px;
      padding-right: 10px;

   }
</style>
</head>
<body>
<ul>
   <li><a href="#">test</a></li>
   <li><a href="#">test</a></li>
   <li><a href="#">test</a></li>
   <li><a href="#">test</a></li>
   <li><a href="#">test</a></li>
   <li><a href="#">test</a></li>
</ul>
</body>
</html>

Sunlifestyle
Threadersteller

Dabei seit: 20.12.2005
Ort: Hoyerswerda bei Dresden
Alter: -
Geschlecht: Männlich

Verfasst Mo 18.06.2007 18:41
Titel

m hat geschrieben:

Ich nehme mal an du willst in etwa das hier erreichen:

Code:

im groben und ganzen war das die lösung...musste zwar einiges abändern aber nun haut es hin...danke sehr!wie immer! *Thumbs up!*


	MGi Foren-Übersicht -> Allgemeines - Nonprint

Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.