Ankündigung

Einklappen
Keine Ankündigung bisher.

Abstände nach Textformatierung

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • GSJLink
    hat ein Thema erstellt Abstände nach Textformatierung.

    Abstände nach Textformatierung

    Hallo,
    ich habe folgendes gebaut:

    Code:
    <head>
    <link rel="stylesheet" type="text/css" media="screen" href="./inc/style.css" />
    </head>
    <body bgcolor="#000000">
    <div id="nav">
    <ul>
    <li id="nav_top"><div id="menuheadtext">Main</div>[/list]
    <ul>[*]<div id="menutext">Punkt 1</div>[*]<div id="menutext">Punkt 2</div>[*]<div id="menutext">Punkt 3</div>[*]<div id="menutext">Punkt 4</div>[*]<div id="menutext">Punkt 5</div>
    <li id="nav_bottom">[/list]
    </div>
    </body>
    Style:

    Code:
    #nav {
    font-family: Arial, Helvetica, sans-serif;
    margin:0;
    padding:0;
    margin-bottom:0px;
    }
    #menuheadtext {
    margin-bottom:0px;
    margin-top:3px;
    margin-left:5px;
    font-size:16px;
    }
    #menutext {
    margin-bottom:0px;
    margin-top:1px;
    margin-left:10px;
    }
    #nav ul {
    padding:0;
    margin:0;
    list-style-type:none;
    }
    #nav li {
    margin-top:0px;
    margin-bottom:0px;
    background-image:url(../images/menulist.gif);
    width:223px;
    height:20px;
    }
    li#nav_top {
    width:223px;
    height:25px;
    margin:0;
    background-image:url(../images/menuheader3.gif);
    }
    li#nav_topopen {
    width:223px;
    height:25px;
    margin:0;
    background-image:url(../images/menuheader4.gif);
    }
    li#nav_bottom {
    width:223px;
    height:9px;
    margin:0;
    background-image:url(../images/menulistdown.gif);
    background-repeat:no-repeat;
    }
    oder hier

    Wenn ich die Textformatierung (Arial) rausnehme, sind die Abstände im IE weg, im Firefox sind sie sowieso da. Könnt ihr mir sagen, wie ich die komplett wegbekomme?

    Gruß GSJLink

  • Basti
    antwortet
    Hi.

    Deine Auszeichnung an sich ist ziemlich merkwürdig.

    Für meinen Geschmack wäre eher sowas hier korrekt:
    Code:
    <div id="nav">
        <h2>Main</h2>
        <ul>[*]Punkt 1[*]<span class="current">Punkt 2</span>[*]Punkt 3[*]Punkt 4[*]Punkt 5[/list]
    </div>
    Dann kannst du mit
    #nav h2 die Überschrift definieren, mit
    #nav ul die Liste, mit
    #nav ul li die Punkte, mit
    #nav ul li a die Links (display: block; width: ...em bzw. mit
    #nav ul li span.current den "Nicht-Link" in der Navigation
    Den Abstand nach unten bekommst du mit einem padding-top in #nav hin.

    Guck mal z.B. hier:
    http://css.maxdesign.com.au/listamatic
    Der Muster-Quellcode dort hat für meinen Geschmack einige class-Angaben zuviel, da man ja eben die Elemente über deen Vorhandensein in #nav direkt ansprechen kann. Dort hast du auch eine Tabelle, für welche Browser welche Codes geeignet sind.

    Basti

    Einen Kommentar schreiben:


  • DER_Brain
    antwortet
    ändere bitte mal
    [*]<div id="menutext">Punkt 1</div>[*]<div id="menutext">Punkt 2</div>[*]<div id="menutext">Punkt 3</div>[*]<div id="menutext">Punkt 4</div>[*]<div id="menutext">Punkt 5</div>

    in class="menutext" und mach in der css nen punkt ( . )statt der #

    eine id soll nur einmal pro dokument vorkommen..

    mfg
    Andi

    Einen Kommentar schreiben:

Lädt...
X