XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   navigation mit runden ecken (http://xhtmlforum.de/showthread.php?t=60120)

probot 07.02.2010 16:27

navigation mit runden ecken
 
moin,

ich bin gerade am überlegen wie ich die angehängte grafik
am besten umsetze.

das design sollte genau so umgesetzt werden.
http://www.imagebanana.com/img/xew1fzt7/navi.jpg

die problemkinder sind die rundungen.
soll ich da mit grafiken arbeiten, den links eine klasse zuweisen und
dann die individuelle "abgerundete grafik" reinladen? klappt das überhaupt?

bin für jede hilfe dankbar: ^^

Cocoon 07.02.2010 20:42

Poste mal das HTML und CSS deiner Navigation. Dann kann dir gezeigt werden, wo anzuknüpfen ist.

FrankW. 07.02.2010 20:54

Mein Tipp wenn dein Hintergrund hinter der Navi nicht unregelmäßig ist:

Gestalte dir 4 "Ecken" (4 einzelne Grafiken, Empfehlung hat so seine Gründe im Bezug zum IE), gebe deinem Navi-Block (vermutlich ein ul?) ein "position: relative;" und erstelle 4 Klassen die jeweils eine deiner 4 Eckgrafiken verwenden, gebe diesen ein "position: absolute;" und weise ihnen top / bottom / left / right zu.
Dann haust du diese 4 Divs (oder was auch immer) in deinen Navi-Block -> und siehe da -> die 4 Ecken platzieren sich absolute von der relativen Navi.

Die Ecken solltest du so designen: Außenrum ist die Hintergrundfarbe und das Innere bleibt transparent.


Beispiel:
Code:

<div id="navi">
    <div class="topleft corner"></div>
    <div class="topright corner"></div>
    <div class="bottomleft corner"></div>
    <div class="bottomright corner"></div>
    <!-- restlicher Inhalt -->
</div>

Dann könnte die CSS dazu so aussehen:
Code:

div#navi
{
      width: 120px;
      background-color: #FFFFFF;
      position: relative;
}

div.corner
{
      height: 6px;
      width: 6px;
      position: absolute;
}

div.topleft
{
    top: 0px;
    left: 0px;
    background-image: url(../images/topleft.png);
}

div.topright
{
      top: 0px;
      right: 0px;
      background-image: url(../images/topright.png);
}

div.bottomleft
{
      bottom: 0px;
      left: 0px;
      background-image: url(../images/bottomleft.png);
}

div.bottomright
{
      bottom: 0px;
      right: 0px;
      background-image: url(../images/bottomright.png);
}

Vorteil: Du könntest diese Ecken auch auf anderen Elementen nutzen die den selben Hintergrund haben :)
Hab das da jetzt nur schnell hingeschrieben, hoffe es haben sich dabei keine Fehler eingeschlichen - sonst einfach nachfragen.

probot 07.02.2010 23:50

schonmal ty für die antworten.

es geht um das hover.
für den ersten hover-effekt benötige ich ja kein rechteck sondern eben diese
angepasste variante mit den rundungen bei link "sadf".

die darauffolgenden funktionieren mit dem rechteck, bis dann der
letzte link folgt.

dieser sollte dann auch so wie der erste link bei hover mit einer abgerundeten,
angepassten grafik daherkommen.

FrankW. 08.02.2010 13:14

Ob hover oder nicht, solange der z-index von den Ecken höher ist als das der Elemente in der Navi und der Navi selbst wird es darüber gelegt - somit egal ob ein hover oder nicht berührter Link an den Ecken hängt -> in beiden Fällen wird die Grafik darüber gelegt.

Probiers einfach mal aus :)

probot 08.02.2010 13:48

hey,

kk,
ich setz mich jetzt mal hin und teste das aus.

heiko_rs 08.02.2010 14:06

Ein Menü gehört in eine ul. Leere Elemente werden nicht benötigt.

Für den oberen & unteren Abschluss gibst Du dem ersten & letzten li jeweils eine ID, dadurch hast Du alle Optionen für die Zuweisung Deiner Grafik mit den Rundungen, auch beim Hovern. Bei Menü-Breite in px reicht jeweils eine Grafik für oben & unten.

probot 08.02.2010 15:28

@frankw.:
danke, hat jetzt geklappt! \o/

@heiko_rs:
würde gerne noch deine variante durchtesten.
bei hover verschluckt er mir aber die background-grafik
für die li#corner_top.

mmhh. z-index ist ja für mehrere divs ausgelegt. was für
möglichkeiten gibt es noch, oder wo liegt der fehler?

Code:

<div id="navi">
    <ul id="navigation">
        <li id="corner_top"><a href="#">Link 01</a></li>
        <li><a href="#">Link 02</a></li>
        <li><a href="#">Link 03</a></li>
        <li><a href="#">Link 04</a></li>
        <li id="corner_bottom"><a href="#">Link 05</a></li>
    </ul>

Code:

* {
        padding: 0px;
        margin: 0px;
}

ul#navigation{
        width: 150px;
        padding: 0;
        list-style: none;
        border: 1px solid black;
}                       

ul#navigation li {
        margin: 0;
        padding-left: 0px;
        text-align: left;
}

ul#navigation li a {
        display: block;
        height: 22px;
        width: 150px;
        padding-top: 4px;
        padding-left: 0px;
        text-decoration: none;
        color: #000000;
}

ul#navigation li a:hover {
        background-color: #CC0000;
        color: #FFFFFF;
}

div#navi
{
      width: 150px;
      background-color: #FFFFFF;
      position: relative;
}

li#corner_top {
        background-image: url(pix/layout/corner_top.png);
        background-position: top center;
        background-repeat: no-repeat;
}


heiko_rs 08.02.2010 16:08

Die Grafiken immer a zuweisen, und beim Hovern austauschen. Und nie height für Elemente mit Text!

probot 08.02.2010 16:32

@heiko_rs
klappt nun auch mit deiner variante!

vielen vielen dank für die antworten. :mrgreen:


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:51 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023