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:
<div id="windowbox">
<a href="eineseite.html" class="window-link">Eine Seite</a>
<a href="zweiteseite.html" class="window-link">Zweite Seite</a>
</div>
oder so
Code:
<ul id="windowbox">
<li><a href="eineseite.html" class="window-link">Eine Seite</a></li>
<li><a href="zweiteseite.html" class="window-link">Zweite Seite</a></li>
</ul>
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:
#windowbox {
width: 200px; /* abhängig von der hintergrundgrafik */
height: 350px; /* ... ebenfalls */
background-image: url(pfad/zum/bild.jpg);
background-repeat: no-repeat;
background-position: top left;
}
.window-link:link, .window-link:visited {
display: block;
padding: 5px; /* oder wie hoch du sie halt haben willst */
color: #000000; /* schriftfarbe in hex */
}
.window-link:hover, .window-link:focus, .window-link:active{
/* angaben bei hover oder focus */
}
und im zweiten Fall sowas:
Code:
#windowbox {
width: 200px; /* abhängig von der hintergrundgrafik */
height: 350px; /* ... ebenfalls */
background-image: url(pfad/zum/bild.jpg);
background-repeat: no-repeat;
background-position: top left;
list-style: none;
}
.window-link:link, .window-link:visited {
display: block;
padding: 5px; /* oder wie hoch du sie halt haben willst */
color: #000000; /* schriftfarbe in hex */
}
.window-link:hover, .window-link:focus, .window-link:active{
/* angaben bei hover oder focus */
}
Damit sind die Einträge untereinander innerhalb des Fensters. Willst du sie nebeneinander, musst du floaten.
Hoffe dass das hilft
