Ergebnis 1 bis 8 von 8

Thema: Margin-top bei Links

  1. #1
    HTML Newbie
    Registriert seit
    05.02.2008
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Margin-top bei Links

    Hi,

    ich habe vor eine Navigation zu erstellen.

    CSS:
    Code:
    #navigation {
    	background-image: url(images/bg_menue.jpg);
    	background-repeat: no-repeat;
    	text-align: center;
    	margin: 0 auto;
    	width: 950px;
    	height: 44px;
    }
    
    #navigation a{
    	[b][color=red]margin-top: 20px;[/color][/b]
    	position: relative;
    	text-decoration: none;
    	color: #FFFFFF;
    	line-height: 40px;
    	padding: 15px;
    
    }
    HTML:
    Leider wird das margin-top nicht umgesetzt, habe auch alles mögliche mit "postion: absolute;" und "position: relative;" versucht, Unterschied kamen nicht heraus.

    Kann mir bitte jemand den Fehler erklären?
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Verwende zunächst eine Listen-Navi:
    und als CSS:
    Code:
    #navigation {
       background-image: url(images/bg_menue.jpg);
       background-repeat: no-repeat;
       text-align: center;
       margin: 0 auto;
       width: 950px;
       height: 44px;
       border: 1px solid blue;
    }
    
    #navigation a{
       text-decoration: none;
       color: #FFFFFF;
       padding: 15px;
    }
    
    #navigation ul li
    {
    list-style-type: none;
    display: inline;
    margin-top: 20px;
    }
    Wie groß sind denn die Grafiken?
    Dein Navidiv ist lediglich 44px hoch.
    Abzüglich 20px verbleiben nur 24px. Evtl. gibt es dann noch einen Konflikt mit der Line-height und dem padding.
    kannst du einen Link reinstellen?

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    05.02.2008
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Link: http://bluebrightness.bl.funpic.de/test/
    Habe den Code so verbessert, wie du gesagt hast.

    (P.S. ich weiß, dass Doctype etc. fehlt, die richtige HP ist aber valide.)

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    So sollte es hinkommen (wobei ich mir nicht erklären kann, weshalb margin-top nicht unmittelbar funktioniert):

    Lösche #navigation ul li

    Füge dafür ein:
    Code:
    #navigation ul
    {
    	list-style-type: none;
    	margin: 0 auto;
    width: 700px;
    }
    
    #navigation li
    {
    float: left;
    margin-top: 20px;
    }

  5. #5
    Meister(in)
    Registriert seit
    10.01.2008
    Ort
    Passau/Ösiland
    Beiträge
    267
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hi,

    Zitat von sejuma:
    So sollte es hinkommen (wobei ich mir nicht erklären kann, weshalb margin-top nicht unmittelbar funktioniert):
    weil a ein Inline-Element ist, da funktionieren vertikale margins nicht.

    Deshalb sollte man eine navi immer in eine ul packen.
    li ist nämlich kein Inlineelement, da geht dann was mit vertikalen Margins.


    koslowski

  6. #6
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    @koslowski:
    Deine erste Aussage ist korrekt.
    Die zweite stimmt leider nicht: li ist auch ein Inline-Element:
    http://de.selfhtml.org/html/referenz/elemente.htm#li

    Ich habe es durch die Float-Angabe allerdings zum Blockelement umfunktioniert, damit es klappt

  7. #7
    Meister(in)
    Registriert seit
    10.01.2008
    Ort
    Passau/Ösiland
    Beiträge
    267
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Moin,

    Zitat Zitat von sejuma
    @koslowski:
    Deine erste Aussage ist korrekt.
    Die zweite stimmt leider nicht: li ist auch ein Inline-Element:
    http://de.selfhtml.org/html/referenz/elemente.htm#li

    Ich habe es durch die Float-Angabe allerdings zum Blockelement umfunktioniert, damit es klappt
    *räusper*, äh..., aus dem von dir geposteten Link geht eindeutig hervor das li
    kein Inline-Element ist.
    Die alphabetische Aufzählung enthalt auch Blockelemente.
    Ganz oben auf der Seite sind Block,- und Inline-Elemente explizit zusammengefaßt aufgeführt. Da steht li nicht bei den Inline-Elementen.

    Listenelemente erzeugen von Hause aus Block-Boxen und die stehen untereinander.
    Gibt man li float stehen sie nebeneinander, weil jedes li float bekommt.
    Wenn man mehreren <div<-Containern float gibt stehen sie ja auch nebeneinander.

    D.h. wenn Elemente eh schon ein Blockelemente sind bewirkt floaten nur das die dann nebeneinander stehen.

    Wenn du z.B. a, eine klassische Inline-Box floatest, erzeugst du eine Block-Box.
    Aber wenn das Element (li) eh schon von Hause aus eine Block-Box ist, änderst du durch das floaten nur die Darstellung nicht aber die Box.

    Alles klaro damit?


    koslowski

  8. #8
    HTML Newbie
    Themenstarter

    Registriert seit
    05.02.2008
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Auf jeden Fall danke für die Hilfe, sejuma's Lösung hat funktioniert.

Ähnliche Themen

  1. margin: 0 auto
    Von haillo im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 22.07.2008, 20:25
  2. margin-top
    Von nastron im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 04.06.2007, 16:46
  3. Style- margin-top problem
    Von dani_227 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 29.05.2006, 17:30
  4. css margin färben
    Von im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 28.08.2005, 15:03
  5. Css Problem mit Margin
    Von Phaeilo im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 30.05.2005, 21:50

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •