Ebenen verlinken

html.de-Forum HTML, XHTML & CSS
1

Also ich bin seit heute hier im Forum, hab auch schon geguckt ob ich nen Doppelpost mache, aber leider kein ähnliches Theman finden können.
So zur Problemschilderung: Ich möchte eine Navigation erstellen. Diese hat sieben Buttons, einer davon ist ein Logo. All diese Buttons sind PNG Datein weil sie besondere Schnitte haben. Somit habe ich die Ebenen die ich im css erstellt habe mit diesen Buttons hinterlegt. Nun wollte ich diese Ebenen dann im HTML doc verlinken, nicht möglich. Zumindest nicht unter FF oder IE. Der Phase 5 Browser kann es -_-. Folglich habe ich aus den Ebenen die Hintergrundbuttons rausgenommen und sie im HTML doc als img declariert, hätte auch funktioniert wenn der HTML teil anerkennen würde das es PNG datein sind, die ja besonders geschnitten sind und durchsichtig sein müssen an manchen stellen, nun sind sie allerdings weiß.

Ich bin relativ Ratlos und bitte daher um schnelle Hilfe.

2

Klingt für mich als suchst Du nach einem ImageMap:

Mit HTML:
SELFHTML: HTML/XHTML / Grafiken / Verweis-sensitive Grafiken (Image Maps)

Mit CSS:
Webstandards-Projekt - CSS Imagemap

3

Das mit der Imagemap habe ich gemacht, das das g an allen png datein fehlt weiß ich, war zum probieren und einfügen von img src in die bereiche. Wie gesagt ich kann die Div ebenen dann im html teil nicht verlinken…

[HTML]
.head
{

position:absolute;
left:0px;
top:0px;
height:587px;
width:955px;
background-image:url(images/image6.pn);

z-index:1;
}

.logo
{
position:absolute;
top:15px;
left:15px;
height:189px;
width:191px;
background-image:url(images/klogo.png);
z-index:2;
}

.biografie
{
position:absolute;
margin-top:6px;
right:766px;
top:225px;
height:155px;
width:179px;
background-image:url(buttons/b6os.pn);
text-align:center;
z-index:1;
}

.team
{
position:absolute;
margin-top:6px;
left:0px;
top:155px;
height:188px;
width:148px;
background-image:url(buttons/b7os.pn);

z-index:1;
}

.konzept
{
position:absolute;
top:-17px;
left:223px;
height:174px;
width:177px;
text-align:center;
z-index:1;
}

.bilder
{
position:absolute;
margin-left:6px;
left:177px;
top:0px;
height:146px;
width:167px;
background-image:url(buttons/b3os.pn);

z-index:1;
}

.referenzen
{
position:absolute;
margin-left:6px;
left:167px;
top:0px;
height:146px;
width:163px;
background-image:url(buttons/b2os.pn);

z-index:1;
}

.piano
{
position:absolute;
margin-left:6px;
left:163px;
top:0px;
height:147px;
width:182px;
background-image:url(buttons/b1os.pn);

z-index:1;
}

.iframe
{
position:absolute;
left:222px;
top:00px;
width:700px;
bottom:50px;

z-index:1;
}
[/HTML]

4

Dann solltest du uns diesen HTML Teil mal zeigen.

Gruss
Elroy

5

[html]

Lichtenberg & Bilke Design

Konzept

Bilder

Referenzen

Piano

Biografie

[/html]

wie gesagt im Phase 5.6 Browser geht alles wie es gedacht ist, aber der IE und FF machen einfach nichts mit den links…

6

Links dürfen keine Blockelemente enthalten. Bei dir enthalten sie

's. Entferne diese oder ersetze sie durch , besser noch: nimm die darin stehende ID in den Link rein.

<a href="htmls/team.html" target="iframe" id="team"><span class="team">..
7

Danke!

sehr gut, damit hats funktioniert :slight_smile: also auf FF aufm IE gehts einfach garnicht… verdammter IE -_-.

8

Was heißt „geht nicht“? Ich tippe mal drauf, dass man für den auch noch sagen muss, dass die betreffenden Links Blockelemente sind (display: block).

9

Läuft jetzt :wink: danke nochmal :slight_smile: