:last-child + IE

normdew · 08.09.2010

Ich habe entdeckt, das ich die Pseudoklasse :last-child für den IE nachbilden kann.

Hier:

Ich verstehe von Javascript jedoch nicht sehr viel. Für meine Bedürfnisse suche ich eine Lösung um nur dem letzten Listenelement einer ungeordneten Liste einen unteren Rahmen zu verpassen.

Kann mir da jemand zur Hand gehen?

MyBad · 08.09.2010

AW: :last-child + IE

Hi!

Verpass dem letzten "<li></li>" einfach eine Klasse. Zum Beispiel "<li class="last"></li>". Die Klasse musst du dann nur entsprechend formatieren.

fexx · 08.09.2010

AW: :last-child + IE

oder du gibst der liste (<ul>) einfach "border-bottom"

Landorien · 08.09.2010

AW: :last-child + IE

PER JS:

HTML:

<!DOCTYPE html>
<html><head>

<title>test</title>

<style type="text/css">
* { margin:0; padding:0; }
html { height:100.5%; font: 100.01%/1.4em arial, sans-serif; color: #000; background:#fff; }
body { font-size:1em; width:800px; height:auto; margin:0 auto; background:#fff; }
</style>
</head><body>

<ul id="nav">
    <li>punkt1</li>
    <li>punkt2</li>
    <li>punkt3</li>
    <li>punkt4</li>
</ul>

<script type="text/JavaScript">
var nav = document.getElementById("nav");
if(nav != null){
    var lastElem = nav.lastElementChild;
    lastElem.setAttribute("class", "last");
}
</script>
</body></html>

Allerdings nicht empfehlenswert, da bei abgeschalteten JS diese Lösung nicht funktioniert. Besser wäre eine Serverseitige Lösung, wenn du die Navigation dynamisch generierst, oder eben auf CSS zurückgreifst (was im IE nicht so wirklich funktioniert).

Gruß
Lando

normdew · 08.09.2010

AW: :last-child + IE

Ja ich wollte schon nur mit css klarkommen. JS sollte nur SPielerchen drumrum sein, wenns sein muss. Aber Danke!

okay, mein Problem scheint vielleicht woanders zu liegen.

Denn das habe ich schon probiert ... jedoch lässt sich meine ul nicht so stylen, wie ich denke.

Es handelt sich um ein Flyout-Menü:

HTML:

<div id="HAUPTMENUE">
                        <ul>
                            <li><a class="aktiv" href="index.html">Startseite</a></li>                    
                            <li><a class="hide" href="#">LINK A</a>
                                <ul>
                                    <li><a href="#">linkA1</a></li>
                                    <li><a href="#">linkA2</a></li>
                                    <li><a href="#">linkA3</a></li>
                                </ul>
                            </li>
...

Code:

#HAUPTMENUE {    height:300px;

Code:

  [FONT=Courier New]
                position:relative;
                margin-bottom:80px;
                z-index:1000; }
        
#HAUPTMENUE ul {        position:absolute;
                        bottom:20px;                    
                        padding:0;
                        margin:0;
                        list-style-type:none;
                        list-style-position:inside; }
#HAUPTMENUE ul ul{    display:none; background:#ffffff;}    
                    
#HAUPTMENUE ul li  {    float:left; margin-right:0px; position:relative; }
#HAUPTMENUE ul a {        padding-top:5px;}

#HAUPTMENUE li a { display:block; }[/FONT] [FONT=Courier New]
#HAUPTMENUE ul li a,
#HAUPTMENUE ul ul li a {     width:160px; padding-left:10px; padding-right:10px; }    
#HAUPTMENUE ul li a {         font-family:"Arial Narrow", "Helvetica Narrow", sans-serif; font-size:120%; background-position:bottom left; background-repeat:no-repeat; }
#HAUPTMENUE ul ul li a {    font-family:Tahoma, Verdana, Geneva, Arial, sans-serif; font-size:80%; text-transform:none; }        

#HAUPTMENUE ul ul li:first-child {    border-top:1px solid #d9d9d9; border-right:1px solid #d9d9d9; border-left:2px solid #931869;}[/FONT] [FONT=Courier New]
#HAUPTMENUE ul ul li {                border-right:1px solid #d9d9d9; border-left:2px solid #931869; }
#HAUPTMENUE ul ul li:last-child {    border-bottom:1px solid #d9d9d9; border-right:1px solid #d9d9d9; border-left:2px solid #931869; }    
#HAUPTMENUE ul ul li:last-child a {    padding-bottom:5px; }

#HAUPTMENUE ul li:hover ul {    -moz-box-shadow:8px 8px 8px #DDD;-webkit-box-shadow:8px 8px 8px #DDD;box-shadow:8px 8px 8px #DDD;}[/FONT] [FONT=Courier New]
#HAUPTMENUE ul li:hover ul {    display:block; border-bottom:1px solid #000;}

#HAUPTMENUE ul li a:link,[/FONT] [FONT=Courier New]
#HAUPTMENUE ul li a:visited {    display:block; text-decoration:none; width:160px; text-align:left;
                                background-image:url(../images/hauptmenue_button_gray.png);}    
#HAUPTMENUE ul li a:hover,
#HAUPTMENUE ul li a:active,
#HAUPTMENUE ul li a.aktiv {        display:block; background-image:url(../images/hauptmenue_button_farbig.png);}
#HAUPTMENUE ul li:hover ul {    display:block; position:absolute; top:0; left:180px; width:160px;}
#HAUPTMENUE ul li:hover ul li a {        display:block; background:#ffffff; width:160px;}
#HAUPTMENUE ul li:hover ul li a:hover {    display:block; background:#ffffff; color:#931869; text-decoration:underline; }[/FONT]

Mir ist bewusst, dass der Code noch ein bischen wurstig ist, den will ich bei gelegenheit aufräumen - ich kann grad einfach nichts dafür, dass der so ist - aber vielleicht sieht ja ein erfahrenes Auge den entscheidenden Punkt.