[CSS] Problem mit Abständen

**exception** · 27.04.2012, 15:24

Hallo,
ich bin gerade dabei ein Dropdown-Menü zu coden und steh vor einem
kleinen Problem. Ich bekomme es einfach nicht hin das die Links die beim
Dropdown erscheinen einen geringeren Abstand(oben, unten) zueinander haben.

Screen damit ihr versteht was ich meine:

BILD ANZEIGEN [Warum wird das Bild nicht angezeigt?]

Ich hab's mit -margin probiert aber das funktioniert auch nicht.
Weiß vielleicht wer wie ich das mache?

Code: OHYES

MfG

**3lit** · 27.04.2012, 15:38

Für so etwas nutzt man eigentlich CSS Styling Lists

**3lit** · 27.04.2012, 15:56

Ich hab es mal schnell mit listen umgesetzt sieht zwar noch nicht so gut aus aber den rest solltest du simple abändern können.

style.css

Code:

body {

    text-align: center;
}

#navbox {
    width: 200px;
    height: auto;
    background: #010101;
    border: 1px solid #555555;
    float: left;
}

.button {
    width: auto;
    height: auto;
    min-height: 38px;
    font-size: 16px;
    font-family: Tahoma;
    color: #949494;
    padding-left: 15px;
    line-height: 240%;
    border-bottom: #242424 1px solid;
}


.button img {
    width: 24px;
    height: 24px;
    float: left;
    margin-top: 6px;
}

.text {
    width: auto;
    height: 38px;
    float: left;
    margin-left: 6px;
}

#navbox ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

#navbox ul li ul li {
    display: block;
    width: 100%;
    height: auto;
    text-align: left;
    font-size: 12px;
    margin: 10px 10px 10px 10px;
}

#navbox ul li ul li a {
    position: relative;
    width: 150px;
    font-family: Tahoma;
    text-decoration: none;
    color: #FFFFFF;
    font-size: 12px;
    padding: 5px;
    padding-right: 125px;
    -moz-border-radius: 3px;
}
#navbox ul li ul li a:hover {
    background: #151515;
}

OHYES.html

Code:

<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>OHYES</title>
    <link rel="stylesheet" type="text/css" href="OHYES-Dateien/style.css">
    <script type="text/JavaScript" language="JavaScript" src="OHYES-Dateien/drop.js"></script>
    <script language="JavaScript" type="text/JavaScript" src="OHYES-Dateien/jquery.js"></script>
</head>
<body>

<div id="navbox">
    <ul>
        <li>
            <div class="button">
                <img src="OHYES-Dateien/home.png" alt="" />
                <div class="text">Home</div>
            </div>
            <ul>
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
                <li><a href="#">Link4</a></li>
            </ul>
        </li>
        <li>
            <div class="button">
                <img src="OHYES-Dateien/down.png" alt="" />
                <div class="text">Home</div>
            </div>
            <ul>
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
                <li><a href="#">Link4</a></li>
            </ul>
        </li>
        <li>
            <div class="button">
                <img src="OHYES-Dateien/gfx.png" alt="" />
                <div class="text">Home</div>
            </div>
        </li>
    </ul>
</div>
</body></html>

U-Labs

Account-Boerse

U-IMG

Thema: [CSS] Problem mit Abständen

[CSS] Problem mit Abständen

[CSS] Problem mit Abständen

[CSS] Problem mit Abständen

Ähnliche Themen

FF IV Problem

TAN Problem!!!

Problem mit CSS

Skype-Problem: Problem mit dem Wiedergabegerät

PS3 MW3 Problem