zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS3 Subnavigation

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.02.2013, 08:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.02.2013
Beiträge: 2
auryxx befindet sich auf einem aufstrebenden Ast
Standard CSS3 Subnavigation

Guten Morgen,
ich habe da ein kleines Problem. Ich bekomme es einfach nicht hin eine Subnavigation aus meiner "normalen" Navigation zu basteln. Evtl. kennt sich einer von euch da ein bisschen besser aus.

CSS:

Code:
.topnav { background: url(../images/topnavBg.png) repeat-x; display: block; color: #eeeeee; margin: 0 0 0 -2px; padding: 3px 0; position: fixed; width: 100%; z-index: 999; }
.userNav { border-left: 1px solid #39454f; border-right: 1px solid #39454f; margin-right: -2px; }

.welcome { float: left; margin-left: -4px; }
.welcome img { float: left; margin: 6px 8px 6px 0 }
.welcome span { padding: 4px 5px; display: block; white-space: nowrap; float: left; font-size: 11px; }

.userNav { float: right; z-index: 6000; position: relative; font-size: 11px; margin-right: 214px;}
.userNav ul { border-left: 1px solid #39454f; border-right: 1px solid #39454f; margin-right: -1px; }
.userNav ul li { display: inline; float: left; position: relative; cursor: pointer; border-left: 1px solid #1c262b; border-right: 1px solid #1c262b; margin-left: -1px; }
.userNav ul li a { color: #eeeeee; text-decoration: none; display: block; float: left; border-left: 1px solid #39454f; border-right: 1px solid #39454f;  -webkit-opacity: 0.30;
  -moz-opacity: 0.30;
  opacity: 0.30; 
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease; }
.userNav ul li a:hover { border-left: 1px solid #293138; border-right: 1px solid #293138; background-color: #293138; -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  }
.userNav ul li span {  display: block; padding: 4px 15px 4px 8px; float: left; }
.userNav ul li img { float: left; display: block; margin: 9px 2px 0px 14px; }
HTML:
HTML-Code:
<div class="topnav">
    <div class="wrapper">
        <div class="welcome"><a href="#" class="screenshot" rel="images/user_large.png"><img src="images/userPic.png" alt="" /></a><span>Welcome, Lars Aschmoneit</span></div>
        <div class="userNav">
            <ul>
                <li><a href="#" title=""><img src="images/icons/profile.png" alt="" /><span>My Profile</span></a></li>
                <li><a class="tooltip" href="#" title="Hey, im a Tooltip"><img src="images/icons/tasks.png" alt="" /><span>Tooltip</span></a></li>
                <li><a href="#" title=""><img src="images/icons/messages.png" alt="" /><span>Messages</span><span class="number">2</span></a></li>
                <li><a href="#" title=""><img src="images/icons/settings.png" alt="" /><span>Settings</span></a></li>
                <li><a href="login.html" title=""><img src="images/icons/logout.png" alt="" /><span>Logout</span></a></li>
            </ul>
        </div>
        <div class="clear"></div>
    </div>
</div>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.02.2013, 15:14
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Link zum Problem bitte! Wir können deine Grafiken nämlich nicht sehen!
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
HTML5 & CSS3 Quiz joocom Ressourcen 12 30.03.2012 13:43
CSS3 Adventskalender Webstandard Ressourcen 0 05.12.2011 09:57
Veranstaltungstipp - MMT 28 "Webtechnologien - HTML5, CSS3 & Co" - Köln MediaPark hemfrie Offtopic 2 20.10.2011 10:00
CSS3 auch bei alten IEs: "CSS3 PIE". Wie bewertet ihr das? AndreasB CSS 9 17.11.2010 17:52
CSS3: Multi-column layout | Safari ? ulle CSS 13 07.01.2006 13:07


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:01 Uhr.