• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Ebenen verlinken

Sethrone

Neues Mitglied
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.
 
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:
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Lichtenberg & Bilke Design</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Sethrone">
<link rel="stylesheet" href="style.css">
</head>
<body background="images/image1.png">




<div class="head">
<div id="head"><img src="images/image6.png"></div>



<a href="index.html"><div class="logo">
<div id="logo"></div></a>

<a href="htmls/konzept.html" target="iframe"><div class="konzept">
<div id="konzept">Konzept
</div></a>

<a href="htmls/galerie.html" target="iframe">  <div class="bilder">
<div id="bilder">
Bilder</div></a>



<a href="htmls/referenzen.html" target="iframe"><div class="referenzen">
<div id="referenzen">
Referenzen</div></a>

<a href="htmls/xx.html" target="iframe"> <div class="piano">
<div id="piano">
Piano</div></a>

<a href="htmls/biografie.html" target="iframe"><div class="biografie">
<div id="biografie">
Biografie</div></a>


<a href="htmls/team.html" target="iframe"><div id="team"><div class="team">
Team</div></a>


<div class="iframe">
<div id="iframe">
<iframe allowtransparency="true" scrolling="no" src="htmls/home.html"  height="700"width="100%" name="iframe" frameborder="no">
</iframe>
</div>
</body>
</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...
 
Links dürfen keine Blockelemente enthalten. Bei dir enthalten sie <div>'s. Entferne diese oder ersetze sie durch <span>, besser noch: nimm die darin stehende ID in den Link rein.

Code:
<a href="htmls/team.html" target="iframe" id="team"><span class="team">..
 
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).
 
Zurück
Oben