Problem mit pseudo-Element

[burn4ever]

Hallo,
ich habe einen Liste zur paginierung welche ich links floate, damit alle "Zahlen" schön horizontal nebeneinander stehen.
Vor dieser List habe bzw. möchte ich Buttons in Form von Pfeilen (pngs) haben. Die überlichen vor und zurück Buttons.
Diese Bilder binde ich über pseudo-Elemente ein.

Mein Problem:
ich schaffe es nicht das rechte pseudoelement so zu positionieren das es sich mit der Listengröße (je nach Anzahl der li´s) auf der x-Achse mitbewegt.

html:

               <nav>
                    <button class="prev-search">&lt;</button>
                    <ul>
                        <li class="active">1</li>
                        <li><a href="">2</a></li>
                        <li><a href="">3</a></li>
                        <li><a href="">4</a></li>
                        <li><a href="">5</a></li>
                        <li><a href="">6</a></li>
                        <li><a href="">7</a></li>
                   
                    </ul> 
                    <button class="next-search">&gt;</button>
                </nav>

css/sass:

        nav {
            margin-bottom: 10px;
            position: relative;
            
            button {
                 float: left;
  
                width: 16px;
                height: 20px;
                
                &.prev-search {
                   
                    &:before {
                        @include pfeile(2px);
                        @include pfeile-sprite(arrow-left-search);
                    }
                }
                
                &.next-search { 
                  
                    &:after {
                        @include pfeile(2px, auto, auto);
                        @include pfeile-sprite(arrow-right-search);
                    }
                }
            }
        }

 

[threadi]

Dein CSS ist falsch. Dort kann man keine Elemente verschachteln, so wie Du es getan hast.

Wenn Du ein button-Element innerhalb von nav ansprechen willst, schreib:

nav button {
 float: left;
 width: 16px;
 height: 20px;
}

Ich würde btw. raten das floating wegzulassen und statt dessen alles auf "display: inline;" oder "display: inline-block;" zu setzen. Dann kannst Du mittels "vertical-align: middle;" alle auf einer Höhe halten.

 

[Banana_Jones]

Dein CSS ist falsch. Dort kann man keine Elemente verschachteln, so wie Du es getan hast.

Mit SASS geht das.

 

[Tronjer]

Mit LESS geht es auch. Aber für eine normale Seite das CSS über einen Präprozessor zu schicken, wäre wie mit Kanonen auf Spatzen zu schießen.

btw. warum nicht die .png als background-images auf die Listelemente? Damit erspart man sich das :before.

 

[Banana_Jones]

Mit LESS geht es auch. Aber für eine normale Seite das CSS über einen Präprozessor zu schicken, wäre wie mit Kanonen auf Spatzen zu schießen.

Naja, wenn man das einmal automatisiert hat, mit grunt beispielsweise, entsteht eigentlich kein Mehraufwand mehr. Und mit LESS/SASS zu arbeiten bringt etliche Vorteile mit sich. Gerade die Möglichkeit, Konstanten oder Includes zu definieren, möchte ich nicht mehr missen.