Anzeige

Rahmen als Hintergrundgrafik mit Links

Rahmen als Hintergrundgrafik mit Links | PSD-Tutorials.de

Erstellt von Tavros, 25.06.2011.

  1. Tavros

    Tavros Noch nicht viel geschrieben

    Dabei seit:
    20.10.2009
    Beiträge:
    33
    Geschlecht:
    männlich
    Ort:
    Stuttgart
    Software:
    Adobe Photoshop
    Rahmen als Hintergrundgrafik mit Links
    Hallo zusammen,

    möchte gerne mein navigationsmenü auf der Homepage mit einem Rahmen (Fenster) versehen.Das ganz sollte als Hintergrundbild sein.Im fenster dann die einzelnen Rubiken mit verlinkung.
    Hat jemand einen Vorschalg zwecks Programmierung ???
    Habe mich schon daran versucht,doch leider erscheint der Text mit Verlinkung unter dem Fenster und nicht im Fenster ;0)

    Danke im Vorraus
     
    #1      
  2. mindraper

    mindraper me[code].Java(Script)

    Dabei seit:
    12.08.2007
    Beiträge:
    213
    Geschlecht:
    männlich
    Ort:
    Zuhause
    Software:
    Adobe CS5 (PS/I/ID/Bridge/FL), Sublime Text 2, NetBeans, Blender, Pencil
    Rahmen als Hintergrundgrafik mit Links
    AW: Rahmen als Hintergrundgrafik mit Links

    Hi Tavros,

    sofern ich Dich richtig verstehe, sollen die Links auf bzw. in einem Fenster stehen, das als Grafik eingebunden wird, korrekt? Also so, als ob jemand - um mal bildlich zu sprechen - etwas mit einem Stift oder ähnlichem bei einem realen Fenster auf das Glas geschrieben hätte?

    Falls ja, würde ich das HTML-seitig so machen:
    Code (Text):
    1.  
    2. <div id="windowbox">
    3.    <a href="eineseite.html" class="window-link">Eine Seite</a>
    4.    <a href="zweiteseite.html" class="window-link">Zweite Seite</a>
    5. </div>
    6.  
    oder so

    Code (Text):
    1.  
    2. <ul id="windowbox">
    3.    <li><a href="eineseite.html" class="window-link">Eine Seite</a></li>
    4.    <li><a href="zweiteseite.html" class="window-link">Zweite Seite</a></li>
    5. </ul>
    6.  
    Wobei ersteres die Methode mit weniger Code, die zweite die gebräuchliche aber mit mehr Code ist. Ist sich vollkommen schnuppe :)

    CSS-Seitig würde ich sowas im ersten Fall schreiben:

    Code (Text):
    1.  
    2.  
    3. #windowbox {
    4.    width: 200px; /* abhängig von der hintergrundgrafik */
    5.    height: 350px; /* ... ebenfalls */
    6.    background-image: url(pfad/zum/bild.jpg);
    7.    background-repeat: no-repeat;
    8.    background-position: top left;
    9. }
    10.  
    11. .window-link:link, .window-link:visited {
    12.    display: block;
    13.    padding: 5px; /* oder wie hoch du sie halt haben willst */
    14.    color: #000000; /* schriftfarbe in hex */
    15. }
    16.  
    17. .window-link:hover, .window-link:focus, .window-link:active{
    18.   /* angaben bei hover oder focus */
    19. }
    20.  
    21.  
    und im zweiten Fall sowas:

    Code (Text):
    1.  
    2.  
    3. #windowbox {
    4.    width: 200px; /* abhängig von der hintergrundgrafik */
    5.    height: 350px; /* ... ebenfalls */
    6.    background-image: url(pfad/zum/bild.jpg);
    7.    background-repeat: no-repeat;
    8.    background-position: top left;
    9.    list-style: none;
    10. }
    11.  
    12. .window-link:link, .window-link:visited {
    13.    display: block;
    14.    padding: 5px; /* oder wie hoch du sie halt haben willst */
    15.    color: #000000; /* schriftfarbe in hex */
    16. }
    17.  
    18. .window-link:hover, .window-link:focus, .window-link:active{
    19.    /* angaben bei hover oder focus */
    20.  }
    21.  
    22.  
    Damit sind die Einträge untereinander innerhalb des Fensters. Willst du sie nebeneinander, musst du floaten.

    Hoffe dass das hilft :)
     
    #2      
  3. hubspe

    hubspe display:schwarzgelb;

    Dabei seit:
    09.08.2007
    Beiträge:
    209
    Geschlecht:
    männlich
    Ort:
    Passau
    Software:
    PS CS5
    Kameratyp:
    Linhof Technika 4
    Rahmen als Hintergrundgrafik mit Links
    AW: Rahmen als Hintergrundgrafik mit Links

    nein ist es nicht!
    Eine Reihe von Links ist eine Aufzählung und die gehört semantisch in eine ul.
    Deshalb ist ersteres nicht schnuppe sondern schlicht falsch.

    @Tavros Was hast du bisher versucht? Gib doch mal einen Link zum Problem, damit man sich das anschauen und es sich vorstellen kann.
     
    #3      
  4. Tavros

    Tavros Noch nicht viel geschrieben

    Dabei seit:
    20.10.2009
    Beiträge:
    33
    Geschlecht:
    männlich
    Ort:
    Stuttgart
    Software:
    Adobe Photoshop
    Rahmen als Hintergrundgrafik mit Links
    AW: Rahmen als Hintergrundgrafik mit Links

    danke...werds mal ausprobieren
     
    #4      
Seobility SEO Tool
x
×
×