2009-07-26 2 views
0

Ich versuche, einige einfache Menüverknüpfungen zu erstellen. Ich habe versucht, so etwas wie diese:CSS Erstellen einer Menü-Div-Box?

div.menulinkboxaround 
 
{ 
 
    height: 25px; 
 
} 
 

 
a.menulinkbox 
 
{ 
 
    font-family: Verdana, Helvetica; 
 
    padding-left: 50px; 
 
    padding-left: 50px; 
 
    padding-bottom: 5px; 
 
    padding-top: 5px; 
 
    background-color: Green; 
 

 
} 
 
a.menulinkbox:hover 
 
{ 
 
    background-color: Red; 
 
} 
 
a.menulinkbox:visited 
 
{ 
 
    background-color: Yellow; 
 
}
<div class="menulinkboxaround"><a href="asdf.gif" class="menulinkbox">Link 1</a></div> 
 
<div class="menulinkboxaround"><a href="asdf.gif" class="menulinkbox">Link 2</a></div> 
 
<div class="menulinkboxaround"><a href="asdf.gif" class="menulinkbox">Link 3</a></div> 
 
<div class="menulinkboxaround"><a href="asdf.gif" class="menulinkbox">Link 4</a></div>

Was ich versuche, Menüelement zu erreichen, ist zu schaffen, die einen Hauch von Stil zu em hat, so dass jeder Link sollte mit einem in einer div-Box sein Auf jeder Seite 50 px. Wenn ich das ausführen, werden sie übereinander gestapelt. Ich möchte keine Breite angeben, da der Text im Menü die Größe automatisch bestimmen sollte.

Ex. (50px + Textgröße + 50px)

50px space (just green area) | Sample Text | 50px space (just green area) 
+0

Wie lautet der HTML-Code für dieses Menü? Wenn man das sieht, wird es leichter zu sagen, was vor sich geht. – aem

Antwort

0

Vielleicht wird dies helfen (da divs sind Blockelemente standardmäßig angezeigt):

div.menulinkboxaround { height: 25px; float: left; } 
0

Versuchen Hinzufügen dieses:

a.menulinkbox 
{ 
    display: block; 
} 

Je nach ob dieses Menü vertikal oder horizontal sein soll, Sie können auch float: left; zu div.menulinkboxaround hinzufügen.

0

Wie die vorherigen Antworten vorschlagen, könnten Sie float:left auf die menulinkboxaround setzen.

Es ist schwer zu sagen, von Ihrer Beschreibung der gewünschte Effekt, ich nehme an, Sie wollen das Menü mit 50px beide Seite der Links horizontal sein.

Mit dem Code, den Sie derzeit haben, erstreckt sich der Hover-Status nur in eine Richtung, auch wenn Sie nur angeben: Hover ist nicht wirklich so Tastatur freundlich wie es wäre, wenn Sie angegeben: Fokus.

Auch weil Sie die Höhe in px einstellen, wenn Sie die Schriftgröße erhöhen, wird der Text unten abgeschnitten. Wenn Sie die Pseudo-Selektoren auf der Verknüpfung nicht angeben, können Sie später auch Probleme in Internet Explorer verursachen.

Sie könnten auch den Code ein wenig aufräumen, um unnötige Klassen zu reduzieren und die Semantik des Menüs zu verbessern.

Zum Beispiel:


<style type="text/css"> 

    ul.menu { 
    /* removing the browser defaults for margin padding and bullets */ 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    /* Now you have a sensible parent it is a good idea to put the font 
     family here, I have also added a fallback of sans-serif in the rare 
     case Helvetica and Verdana are not available on the users computer, 
     it might be best to set this on the body if you are using this font 
     site-wide 
    */ 
    font-family: Verdana, Helvetica, sans-serif; 
    /* To create symetry I am adding 25px to the right and left of the menu, 
     this will stay green even if the items inside are not 
    */ 
    padding: 0 25px; 
    background-color: green; 
    /* increacing the lineheight so the background color of the links does 
     not overflow the green of the menu behind it, for a simple menu like 
     this it is fine, a more complex or longer links that need to wrap I 
     suggest changing the method of implementation from display inline to 
     floating which is a bit more complex 
    */ 
    line-height:1.95; 
    } 

    /* because all the list items are inside this parent list you can use 
     the descendant selector to target them rather than adding a separate 
     class, you are saying all list items inside the unordered list that 
     has a class of menu 
    */ 
    ul.menu li { 
    /* telling the list items to behave like inline elements so they are 
     naturally on one line also removint the browser default margin and 
     padding 
    */ 
    display: inline; 
    margin: 0; 
    padding: 0; 
    } 

    ul.menu a:link, 
    ul.menu a:visited, 
    ul.menu a:hover, 
    ul.menu a:focus, 
    ul.menu a:active { 
    /* you can combine all your padding rules together in the order 
     Top Right Bottom Left, I remember this like it kinda spells TRouBLe :) 
    */ 
    padding: 5px 25px 5px 25px; 
    background-color: green; 
    /* setting the color to white because the default link color of blue 
     is not that visible against green 
    */ 
    color: white; 
    } 

    /* adding the :focus selector to make this more keyboard accessible */ 
    ul.menu a:hover, 
    ul.menu a:focus { 
    background-color: red; 
    color: black; 
    } 

    ul.menu a:visited { 
    background-color: yellow; 
    color: black; 
    } 

</style> 
</pre> 

<ul class="menu"> 
    <!-- Putting these all on one line because we are making 
     them display:inline so the spaces get counted and there will 
     be a gap otherwise --> 
    <li><a href="asdf.gif">Link 1</a></li><li><a href="asdf.gif">Link 2</a></li><li><a href="asdf.gif">Link 3</a></li> 
</ul> 

ich dies in den letzten Versionen von FF, Opera und Safari getestet haben, und IE6 IE7 und IE8


<style type="text/css"> 

    ul.menu { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    font-family: Verdana, Helvetica, sans-serif; 
    padding: 0 25px; 
    background-color: green; 
    /* overflow hidden clears the internal floated links and zoom 1 
     kicks IE into doing the same, I suggest you move the zoom: 1 
     into an IE stylesheet using conditional comments 
    */ 
    overflow: hidden; 
    zoom: 1; 
    } 

    ul.menu li { 
    display: inline; 
    margin: 0; 
    padding: 0; 
    } 

    ul.menu a:link, 
    ul.menu a:visited, 
    ul.menu a:hover, 
    ul.menu a:focus, 
    ul.menu a:active { 
    padding: 5px 25px 5px 25px; 
    background-color: green; 
    color: white; 
    /* setting the links to float left and giving them display block as 
     well explicitly, this is so that the vertical padding of 5px gets 
     applied, inline elements can only have horizontal margin and padding, 
     and since we are floating them they now take up 0 vertical height in 
     the document which is why we needed to clear the float on the 
     surrounding menu 
    */ 
    display: block; 
    float: left; 
    } 

    ul.menu a:hover, 
    ul.menu a:focus { 
    background-color: red; 
    color: black; 
    } 

    ul.menu a:visited { 
    background-color: yellow; 
    color: black; 
    } 

</style> 

<ul class="menu"> 
    <li><a href="asdf.gif">Link 1</a></li><li><a href="asdf.gif">Link 2</a></li><li><a href="asdf.gif">Link 3</a></li> 
</ul> 

Diese zweite Methode ist viel zuverlässiger, beschäftigt sich mit Das Wrapping von Links ist schöner und ist im Allgemeinen eine bessere Lösung, aber ein bisschen schwieriger zu erklären.

Wenn Sie das Menü nicht wollte einfach so lange die volle Breite des Bildschirms zu füllen, wie der Text nach oben nimmt, und zwar unabhängig davon, welche Methode Sie oben verwenden, schlage ich vor, Sie setzen float: left und clear: both auf der ul.menu die sollte schrumpfen

die Breite aufzunehmen es braucht ich hoffe, die

Code
0

Probe hilft unter (Kredit zu anderen Antworten)

div.menulinkboxaround 
 
{ 
 
    height: 25px; 
 
    float: left; 
 
} 
 

 
a.menulinkbox 
 
{ 
 
    font-family: Verdana, Helvetica; 
 
    padding-left: 50px; 
 
    padding-right: 50px; 
 
    padding-bottom: 5px; 
 
    padding-top: 5px; 
 
    background-color: Green; 
 

 
} 
 
a.menulinkbox:hover 
 
{ 
 
    background-color: Red; 
 
} 
 
a.menulinkbox:visited 
 
{ 
 
    background-color: Yellow; 
 
}
<div class="menulinkboxaround"><a href="asdf.gif" class="menulinkbox">Link 1</a></div> 
 
<div class="menulinkboxaround"><a href="asdf.gif" class="menulinkbox">Link 2</a></div> 
 
<div class="menulinkboxaround"><a href="asdf.gif" class="menulinkbox">Link 3</a></div> 
 
<div class="menulinkboxaround"><a href="asdf.gif" class="menulinkbox">Link 4</a></div>