mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Do 18.04.2024 15:23 Benutzername: Passwort: Auto-Login

Thema: padding für das link <a> Element? vom 12.08.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> padding für das link <a> Element?
Seite: 1, 2  Weiter
Autor Nachricht
Sunlifestyle
Threadersteller

Dabei seit: 20.12.2005
Ort: Hoyerswerda bei Dresden
Alter: -
Geschlecht: Männlich
Verfasst Mi 12.08.2009 15:35
Titel

padding für das link <a> Element?

 Antworten mit Zitat Zum Seitenanfang
Hallo.

Also heute ist bei mir einfach der Wurm drin.
Ich komme grade nicht drauf warum mein Menü keinen <a> elemente mit padding versehen will.

mein menü soll vertikal sein und ein padding von 10 px besitzen.
der hintergrund sollte schwarz sein.

per css sollte es so aussehen:

Code:
.menubox a{ padding:10px; background-color:#000; color:#fff; border:none; }


leider passiert nix.

mit display:block; macht er mir alle menü links auf eine länge. das wollte ich auch nicht.

kann mir grade mal jemand weiter helfen?

danke!

so sollte es dann aussehen




Zuletzt bearbeitet von Sunlifestyle am Mi 12.08.2009 16:02, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Icehawk

Dabei seit: 17.04.2002
Ort: gleich hinten links
Alter: 51
Geschlecht: Männlich
Verfasst Mi 12.08.2009 15:38
Titel

Antworten mit Zitat Zum Seitenanfang
Padding wirkt sich nur auf display:block aus.
Probiers einfach mal mit display: inline-block
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Sunlifestyle
Threadersteller

Dabei seit: 20.12.2005
Ort: Hoyerswerda bei Dresden
Alter: -
Geschlecht: Männlich
Verfasst Mi 12.08.2009 15:58
Titel

Antworten mit Zitat Zum Seitenanfang
hallo und danke für den tipp.

leider hat es nix gebracht.
habe alle display anweisungen probiert, leider geht nix.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 12.08.2009 16:22
Titel

Antworten mit Zitat Zum Seitenanfang
Code:
a {
   display: block;
   width: n px;
   padding: n px;
}
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Sunlifestyle
Threadersteller

Dabei seit: 20.12.2005
Ort: Hoyerswerda bei Dresden
Alter: -
Geschlecht: Männlich
Verfasst Mi 12.08.2009 16:32
Titel

Antworten mit Zitat Zum Seitenanfang
danke m.

aber leider geht das auch nicht.
vllt. hilft mein html markup weiter:

Code:

<div class="mainleft">
    <div class="menubox">
                 <ul>
          <li class="alt"><a href="#" title="#">News</a></li>
          <li><a href="#">Termine</a></li>
         <li><a href="#">Galerie</a></li>
         <li><a href="#">Kontakt</a></li>
       </ul>
    </div>
</div>


hier der css teil:
Code:

.menubox { float:left; width:300px;}
.menubox li{  font: 26px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif; letter-spacing:-1px; color:#fff; text-transform:uppercase; }
.menubox a{ padding:10px; background-color:#000000; color:#fff; padding:1px; border:none; display:block; width:auto;  }
.alt { background-image:url#); background-position:bottom center; background-repeat:repeat-x; }
.alt a{ color:#ea6f0f; }


leider kann ich die breite der einzelnen links bestimmen da es ein dynamisches menü für worpress wird.
deshalb habe ich bei der breite auto gewählt.

leider wird der link dann so breit wie die box.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 12.08.2009 16:35
Titel

Antworten mit Zitat Zum Seitenanfang
Ich sehe gerade erst dass die Links unterschiedliche width Eigenschaften besitzen sollen.

Entweder gibst du diese an, oder nutzt doch dispay: inline-block; (sollte in modernen
Browsern laufen) oder eine float Eigenschaft.

Code:
ul li a {
   float: left;
   padding-left: 100px;
}


Zuletzt bearbeitet von m am Mi 12.08.2009 16:37, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Sunlifestyle
Threadersteller

Dabei seit: 20.12.2005
Ort: Hoyerswerda bei Dresden
Alter: -
Geschlecht: Männlich
Verfasst Mi 12.08.2009 16:48
Titel

Antworten mit Zitat Zum Seitenanfang
dank dir...habe es hin bekommen!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Krisslinger

Dabei seit: 21.04.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 12.08.2009 16:52
Titel

Antworten mit Zitat Zum Seitenanfang
Code:

<style>

ul {
   background: #993300;
   float: left;
   list-style: none;
   padding-right: 10px;
}

ul li a {
   background: #CCCCCC;
   display: inline-block;
   margin-top: 4px;
   padding: 2px 4px 2px 30px;
   text-decoration: none;
}

ul li a:hover {
   background: #FF6633;
}

</style>


<body>

<ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">Termine</a></li>
   <li><a href="#">Galerie</a></li>
   <li><a href="#">Kontakt</a></li>
</ul>

</body>


Kacke, zu langsam. Aber so sollte es gehen, zumindest in modernen Browsern * Ja, ja, ja... *

Zuletzt bearbeitet von Krisslinger am Mi 12.08.2009 16:53, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen Element > link (href) per JS erweitern/abändern
Kampf mit :after wenn auf einen Link ein bestimmtes Element
per css anderes list element zuweisen wenn im li ein link is
Padding von Listenpunkten setzt sich über allg. Padding
PDF Seiten-"link" Element mit Acrobat ?
über css ein Element nach definiertem Element ansprechen
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
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.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB