Anzeige

Navigationsbalken mit 3D Effekt

Navigationsbalken mit 3D Effekt | PSD-Tutorials.de

Erstellt von marixx101, 28.07.2011.

  1. marixx101

    marixx101 Noch nicht viel geschrieben

    Dabei seit:
    06.03.2011
    Beiträge:
    19
    Geschlecht:
    weiblich
    Software:
    CS4
    Kameratyp:
    Nikon D40
    Navigationsbalken mit 3D Effekt
    Hallo,

    ich versuche zur Zeit ein Template zu basteln und habe vor, der Navigationsleiste unter meinem Header einen 3D Effekt zu verleihen, sodass es aussieht, als ob die Leiste links und rechts geknickt wird und hinter dem Container weiter verläuft.

    Ich habe mir dazu dieses Tutorial angesehen.

    Meine Navi besteht allerdings aus GIFs, weil ich in erster Linie Holz als Hintergrund wollte und zudem noch einen nicht-Webfont. So. Die Navileiste geht links und rechts jeweils 20px über den Rand des Containers hinaus, weil ich ja diesen kleinen 3D-Effekt erzielen will und dort Platz für die kleinen Dreiecke an der linken und rechten unteren Ecke meines Navibalkens sein muss.

    Ich habe mein Dropdown-Navi folgendermaßen aufgebaut:

    HTML:
    1. <div id="menu">
    2. <ul>
    3.     <li><a href="#"><img src="http://www.psd-tutorials.de/forum/images/Menu_01.gif" /></a></li>
    4. </ul>
    5. <ul>
    6.     <li><a href="#"> <img src="http://www.psd-tutorials.de/forum/images/Menu_02.gif" /></a></li>
    7. </ul>
    8. <ul>
    9.     <li><a href="#"><img src="http://www.psd-tutorials.de/forum/images/Menu_03.gif" /></a>
    10.         <ul>
    11.             <li><a href="#">Räumlichkeiten</a></li>
    12.             <li><a href="#">Geschichte</a></li>
    13.             <li><a href="#">Team</a></li></ul></li>
    14. </ul>
    15. </div>
    16. <div style="clear: both;"> </div>
    Hier noch ein Auszug aus meiner CSS Datei:

    Code (Text):
    1. #menu {
    2.     padding: 0;
    3.     margin-left: -20px;
    4.     margin-right: -20px;
    5.     float: left;
    6. }
    7. #menu img {
    8.     width: 111px;
    9.     margin: 0;
    10.     padding: 0;
    11. }
    Wie bekomme ich jetzt diese kleinen Dreiecke an die unteren Ecken am Anfang und am Ende meines Navibalkens? Sie sollen schlicht dunkelbraun sein... Ich bekomme es leider nicht hin und bin für jede Hilfe und jeden Tipp dankbar :)
     
    #1      
  2. cefuroX

    cefuroX Noch nicht viel geschrieben

    Dabei seit:
    28.07.2011
    Beiträge:
    19
    Geschlecht:
    männlich
    Ort:
    Düsseldorf
    Software:
    Photoshop CS5, zu Umsetzung von Websiten NetBeans 7.1 Developer
    Kameratyp:
    Olympus X-15, also nichts besonderes xD mach eh wenig Bilder
    Navigationsbalken mit 3D Effekt
    AW: Navigationsbalken mit 3D Effekt

    Das du Gifs benutzt ist nich das Problem, lade dir für den Firefox mal ds AddOn "FireBug" runter, damit kannst du dir anschauen welche CSS Eigenschaften auf den Elementen liegen.

    Du wirst festellen: Die haben dort in dem H1 - Tag (der position:relative ist und der das Graue Hintergrundbild besitzt) eine SPAN-Tag eingebaut.
    Hier ein Beispiel:

    HTML:
    1.  
    2. <div class="page_wrap">
    3.     <div id="menu">
    4.         <ul>
    5.             <li class="li_rel">
    6.                 <a href="#">Husel Pusel</a>
    7.                 <span class="arrows">&nbsp;</span>
    8.             </li>
    9.         </ul>
    10.     </div>
    11. </div>
    12.  
    "Husel Pusel Entspricht später deinem GIF

    Und heir das CSS dazu :), habs getestet und funktioniert
    HTML:
    1.  
    2. #menu {
    3.     padding: 0;
    4.     float: left;
    5.     width: 25%;
    6. }
    7. #menu img {
    8.     width: 400px;
    9.    
    10.     margin: 0;
    11.     padding: 0;
    12. }
    13. ul {
    14.     margin: 15px 0;
    15.     padding: 0;
    16.    
    17. }
    18.  
    19. ul li.li_rel {
    20.     position: relative;
    21.     background: #999;
    22.     list-style-type: none;
    23.     padding: 0 10px 0 0;
    24.     margin: 0;    
    25.     display: inline-block;
    26.     margin-left:-20px;
    27. }
    28.  
    29. .arrows {
    30.     border-left: 20px solid transparent;
    31.     border-top: 10px solid red;
    32.     height: 0;
    33.     left: 0;
    34.     line-height: 0;
    35.     position: absolute;
    36.     top: 104%;
    37.     width: 0;
    38. }
    39.  
    40. .page_wrap {
    41.     margin: 0 auto;
    42.     background-color: grey;
    43.     height: 700px;
    44.     width: 800px;
    45. }
    46.  
    Hoffe ich konnte dir helfen ;) wenn noch was ist frage einfach
     
    #2      
  3. marixx101

    marixx101 Noch nicht viel geschrieben

    Dabei seit:
    06.03.2011
    Beiträge:
    19
    Geschlecht:
    weiblich
    Software:
    CS4
    Kameratyp:
    Nikon D40
    Navigationsbalken mit 3D Effekt
    AW: Navigationsbalken mit 3D Effekt

    Jau, super!

    Das mit dem SPAN habe ich auch versucht, bevor ich diesen Thread aufgemacht habe. Habe den leeren SPAN wohl falsch platziert oder was, jedenfalls kam bei mir nicht das gewünschte Ergebnis raus.

    Mit deiner Lösung hat es aber geklappt! Habe jetzt das page_wrap DIV weggelassen und meine Liste so gelassen, wie sie war - echt toll!

    Vielen Dank, die Frage wäre damit geklärt ;) Daumen hoch.
     
    #3      
x
×
×