teil einer hintergrundgrafik verlinken

monran · #1 (**permalink**) 04.11.2009, 00:04

hi,
ich hab im header bereich eine grafik circa 800x100 pixel als hintergrund drin. das logo ist in dieser grafik fest mit eingebettet (vom design her..)

ich möcht jetzt das logo verlinken. natürlich gäbe es die möglichkeit die grafik zu zerschnipseln und einzelen parts als bilder hinzuzufügen, aber das möchte ich nicht.

wäre es eine sauerei wenn ich einfach ein div mit unsichtbaren gif über dem logo positioniere und das verlinke?
oder wäre es anstatt dem besser das hintergrundbild zu zerschneiden?

danke für die hilfe!

mantiz · #2 (**permalink**) 04.11.2009, 09:29

Was willst Du mit einem unsichtbaren GIF?

In der Regel sieht ein Header so oder so ähnlich aus:

HTML-Code:

<!-- ... -->
<div id="header">
   <h1><a href="#">Willkommen bei XXX</a></h1>
</div>
<!-- ... -->

Naja, oder so ähnlich halt.

Jetzt kannst Du dem div #header das Hintergrundbild geben und die Schrift per "#header h1 { text-indent: -9999em; }" nach links aus dem Viewport schieben.

Weiterhin kannst/könntest Du nun das h1 bzw. a zur freien Positionierung auf dem Hintergrundbild verwenden, je nachdem, was anklickbar sein soll.

monran · #3 (**permalink**) 04.11.2009, 17:31

ach so einfach ist das?

dem a tag kann ich ja noch eine width und height zuweisen damit das exakt auf das logo passt.. oder?
na dann hab ich das "problem" schon gelöst.. danke!

mantiz · #4 (**permalink**) 04.11.2009, 17:36

Jo, so einfach ist das.

Je nachdem, wo das Logo platziert ist, müsstest Du das a-Element per "display:block" als Block-Element darstellen und evtl. noch positionieren.

Du könntest z.B. h1 "position:relative" geben und anschließend dem a-Element "position:absolute", wodurch Du das a-Element recht angenehm innerhalb von h1 "frei" positionieren kannst.

Dabei musst Du allerdings darauf achten, dass das a-Element durch die Positionierung aus dem Text-Fluss genommen wird, das h1 also in der Höhe "zusammenfällt", weil sich nichts mehr darin befindet. Hier müsstest Du dann also eine Höhe zuweisen.

Bei Problemen frag' einfach nochmal nach.

Dann am Besten mit dem Code, wie Du es probiert hast.

Viel Erfolg.

monran · #5 (**permalink**) 05.11.2009, 15:17

Zitat:

Dabei musst Du allerdings darauf achten, dass das a-Element durch die Positionierung aus dem Text-Fluss genommen wird, das h1 also in der Höhe "zusammenfällt", weil sich nichts mehr darin befindet. Hier müsstest Du dann also eine Höhe zuweisen.

was meinst du damit? ich soll h1 eine höhe zuweisen damit das nicht zusammenfällt?

habs im moment so gelöst

HTML-Code:

<h1><a href="/esk/" class="logo"></a></h1>
h1 {
color:#fff;
padding:2px 0 0 0;
font-size:0.8em;
text-align:left;
border:1px solid black;
}

a.logo {
display:block;
width:155px;
height:50px;
position:relative;
top:50px;
left:30px;
}

h1 ist jetzt halt ganz oben und das a unterhalb des h1 auf dem logo...

kann ich nicht einfach das h1 weglassen? oder wäre es zwecks suchmaschinenfreundlichkeit besser das h1 drinzulassen und außerdem noch einen link text einzufügen der dann nicht sichtbar ist?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Variable Breite -> Problem Hintergrundgrafik	Korasu	CSS	2	08.01.2010 00:26
Hintergrundgrafik und flexible Spaltenbreite	Teaser	CSS	1	27.11.2009 15:52
Bescheid: Little Boxes - Teil 0 (Null)	pmmueller	Ressourcen	29	28.12.2008 15:54
rechtsbündige Hintergrundgrafik	S21	CSS	2	29.12.2006 13:13
Teil der Hintergrundgrafik verlinken	sprecher01	CSS	3	20.05.2006 10:55