Willkommen auf dem Portal für Mediengestalter
|
|
Autor |
Nachricht |
bieber
Threadersteller
Dabei seit: 13.09.2009
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 13.09.2009 21:28
Titel Probleme mit z-index |
|
|
Hallo zusammen,
bin gerade dabei eine Seite aufzusetzen und dabei ist folgendes Problem aufgetreten:
Ich habe mehrere DIVs mit Hilfe des z-index übereinander gelegt. Nun liegen 2 der DIVs aber über dem Navigationsbereich(sind pngs mit transparenten Teilen) und somit funktionieren die Links nicht, kann die navigaiton dadruch also nicht benutzen.
mir ist klar das der grund die darüber liegenden divs sind und habe versucht die navigation im z-index ganz nach oben zu heben. aber funktioniert leider nicht.
Kann mir evtl jemand nen tipp geben wie ich das prob beheben könnte?
Hier die Seite:
http://f-bieberstein.lima-city.de/fairynails/index.html
und hier der HTML Code
Zitat: | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!-- HEAD Beginn -->
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Fairy Nails & Beauty - Ihr Nagelstudio und Kosmetikstudio
</title>
<meta name="Description" content="Fairy Nails & Beauty -xyz">
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<meta name="Keywords" content="Nagelstudio, Naildesign, Kosmetik, Fingernägel, Beauty">
<meta name="ROBOTS" content="index,follow">
<META name="LANGUAGE" content="Deutsch, DE, AT, CH">
<meta name="DISTRIBUTION" content="global">
<meta name="copyright" content="Copyright by Fabian Bieberstein" >
<link rel="stylesheet" type="text/css" href="fn_style.css">
</head>
<!-- HEAD Ende -->
<body>
<div id="background">
<div id="fairy"><img src="fn_fairy.png" alt="türkise Fee"></div>
<div id="swirl"><img src="fn_swirl.png" alt="türkise Schnörkel"></div>
<div id="rahmen">
<div id="header"><img src="fn_header.png" alt="Header Fairy Nails & Beauty">
</div>
<div id="inhalte">
<!-- Navigation START -->
<div id="naviinhalt">
<ul>
<li><p><a href="fairynails/index.html">Home</a></p></li>
<li><a href="fairynails/aktuelles.html"><p>Aktuelles & Angebote</p></a></li>
<li><p><a href="beachten.html">Bitte beachten!</a></p></li>
<li><p><a href="uebermich.html">Über mich</a></p></li>
<li><p><a href="behandlungen.html">Behandlungen</a></p></li>
<li><p><a href="preise.html">Preise</a></p></li>
<ul id="unternavi">
<li><p><a href="preise_naildesign.html">Naildesign</a></p></li>
<li><p><a href="preise_kosmetik.html">Kosmetik</a></p></li>
</ul>
<li><p><a href="termine.html">Termine</a></p></li>
<li><p><a href="galerie.html">Galerie</a></p></li>
<li><p><a href="referenzen.html">Referenzen</a></p></li>
<li><p><a href="kontakt.php">Kontakt</a></p></li></ul>
</div>
<!-- Navigation ENDE -->
<!-- Content START -->
<div id="contentinhalt">
<h1>Herzlich Willkommen!</h1>
<p>text</p>
</div>
<!-- Content ENDE -->
<!-- Footer START -->
<div class="footerinhalt">
<table class="footerinhalt">
<tr><td>
<br><br><br><a href="impressum.html" id="impressum"><p>Impressum</p></a></td>
<td id="banner"><a href="#" target="_blank"><object height="90px" width="450px" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" class="videoObject"><param value="http://www.fairynails-beauty.de/mediapool/69/695296/videos/fairyshopanim3.swf" name="movie"><param value="high" name="quality"><param value="transparent" name="wmode"></object><embed height="90" width="450" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="transparent" type="application/x-shockwave-flash" quality="high" src="http://www.fairynails-beauty.de/mediapool/69/695296/videos/fairyshopanim3.swf"></embed>
</a></td></tr></table>
</div>
<!-- Footer ENDE -->
</div>
</div>
</div>
</body>
</html>
|
der CSS Code
Zitat: | * {
margin: 0;
}
body { text-align: center;
background-color: #404040;
}
#background {
position: relative;
width: 1024px;
height: 766px;
z-index: 1;
margin: auto;
text-align: left;
background-image: url(fn_background.jpg);
}
#rahmen {
position: absolute;
z-index: 2;
width: 803px;
height: 724px;
margin-left: 205px;
margin-top: 38px;
}
#header {
position: relative;
z-index: 3;
width: 803px;
height: 138px;
}
#inhalte {
position: relative;
z-index: 10;
width: 803px;
height: 586px;
margin-top: -4px;
background-image: url(fn_inhalte.png);
}
#naviinhalt {
position: relative;
z-index: 11;
width: 200px;
height: 400px;
text-align: left;
float: left;
margin: 50px 0px 0px 40px;
padding: 0px;
}
#unternavi {
margin-left: -30px;
color: #8456d2;
}
#contentinhalt {
position: relative;
z-index: 6;
width: 465px;
height: 400px;
text-align: left;
overflow: auto;
overflow-x: hidden;
overflow-y: scroll;
float: left;
margin: 20px 0px 0px 20px;
padding: 0px;
}
.footerinhalt {
position: relative;
z-index: 12;
width: 700px;
height: 90px;
text-align: left;
margin: -18px 0px 0px 40px;
clear: both;
}
#impressum {
text-align: left;
}
#banner { padding-left:123px;
}
#swirl {
position: absolute;
z-index: 8;
margin-left: 30px;
margin-top: 28px;
}
#fairy {
position: absolute;
z-index: 9;
margin-left: 133px;
margin-top: 4px;
}
p {
font-family:Helvetica,sans-serif;
font-size:12px;
color: #000000;
}
h1 {
font-family:Helvetica,sans-serif;
font-size:22px;
color: #616161;
}
ul { list-style-type: none;
list-style-position: outside;
}
a:link {
color:#000000;
text-decoration:none;
border: 0;
}
a:visited {
color:#000000;
text-decoration:none;
border: 0;
}
a:hover {
color:#33aaa0;
text-decoration:none;
border: 0;
}
a:active {
color:#33aaa0;
text-decoration:none;
border: 0;
}
a:focus {
color:#33aaa0;
text-decoration:none;
border: 0;
}
|
Vielen Dank schonmal!
Bieber
Zuletzt bearbeitet von bieber am So 13.09.2009 21:30, insgesamt 1-mal bearbeitet
|
|
|
|
|
keeka
Dabei seit: 22.09.2005
Ort: -
Alter: 45
Geschlecht:
|
Verfasst So 13.09.2009 21:41
Titel
|
|
|
Hallöchen,
ersten möchte ich dir sagen, dass "willkommen" klein geschrieben wird. Oder du schreibst "ein herzliches Willkommen". *Klugscheißende*
Und zweitens, wenn du die Navi doch eh über alle anderen divs drüber legst, kannst du doch die beiden transparenten Bilder ebenso mit in den Hintergrund legen, oder nicht? Ich glaube, damit hättest du eine Menge Arbeit gespart..
Edit: Deine Codierung ist schön übersichtlich geschrieben, jedoch ist es teilweise doppelt gemoppelt und durcheinander. Wenn du dich für eine Schriftart entschieden hast, leg die Definition dafür in die Body, dann musst du es nicht immer wieder wiederholen. Außerdem reicht es bei deinen ul bzw. li, wenn du da die Abstände definierst, dafür musst du nicht extra die p definieren.
Außerdem kannst du auf den z-index verzichten, wenn du die divs bereits in der Reihenfolge "oben-nach-unten" anlegst. Du hast mit 4 und 5 angefangen, dann springst du zu 11, dann wieder zurück, ist echt durcheinander..
(Ich weiß, danach hast du nicht gefragt, aber es fällt mir halt auf..)
---------
Zuletzt bearbeitet von keeka am So 13.09.2009 21:52, insgesamt 2-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst So 13.09.2009 21:51
Titel
|
|
|
Hintergrund ist das Stichwort @bieber, Deine Deko-Bilder gehören nicht als img ins Markup, sondern ins CSS (Trennung von Inhalt und Design).
Unabhängig davon: Wieso Du Alphatransparenz brauchst, erschließt sich mir nicht, keine der Grafiken verändert je ihre Position zum Hintergrund, also kann dieser immer Bestandteil der Grafik sein. Und wieso hast Du immer noch ein p in jedem Navi-li? Außerdem wichtig: validieren
|
|
|
|
|
bieber
Threadersteller
Dabei seit: 13.09.2009
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 13.09.2009 21:55
Titel
|
|
|
danke, das mit dem willkommen werde ich wenn es um inhaltliche dinge geht ändern. Mir ist zwar bewusst das man es eiglt klein schreibt, aber dieser fehler ist extrem weit verbreitet;)
aber bevor ich an so inhaltliche dinge rangehen muss das grundgerüst erstmal funzen;)
ja hatte es zuerst auch vor die schnörkel und die fee in die hintergrund grafiken einfach mitreinzunehmen.
das prob is aber, dass der IE andere abstände zw. Header und Content macht als z.b. der Firefox.
Also habe ich die abstände nach oben einfach die 3-4pixel die der IE es weiter runter hängt als minus-margin gemacht, im firefox überlappt es sich dann um diese pixel.aber das ist bei der unifarbenen fläche ja auch kein problem.
nur wenn ich jetzt die grafiken mit in den hintergrund nehm, dann wirds zu nem problem. im IE wäre alles klasse, nur der Firefox z.B. würde 3-4pixel schlucken und somit würds die grafiken unschön zerhacken.
darum möchte ich die beiden grafiken über den content-hintergrund legen.
|
|
|
|
|
bieber
Threadersteller
Dabei seit: 13.09.2009
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 13.09.2009 22:07
Titel
|
|
|
danke mh habs ausprobiert aber die links gehen trotzdem nicht.
ja stimmt das war unnötig wollte damit einfacher formatieren aber is ja wesentlich umständlicher als wenn ich li einfach die gleiceh formatierung zuweise wie p. hab das auch gleich geändert.
ja den valdiator hab ich drüber laufen lassen, aber den versteh ich null. er zeigt mir fehler an, die keine fehler sind.
so dinge wie: Attribute "HEIGHT" is not a valid attribute. Did you mean "height"? und dabei steht es im code kleingeschrieben. was läuftn da falsch?
hier der neuste code:
HTML
Zitat: | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!-- HEAD Beginn -->
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Fairy Nails & Beauty - Ihr Nagelstudio und Kosmetikstudio
</title>
<meta name="Description" content="Fairy Nails & Beauty - Ihr Nagelstudio und Kosmetikstudio in 41516 Grevenbroich">
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<meta name="Keywords" content="Nagelstudio, Naildesign, Kosmetik, Fingernägel, Beauty">
<meta name="ROBOTS" content="index,follow">
<META name="LANGUAGE" content="Deutsch, DE, AT, CH">
<meta name="DISTRIBUTION" content="global">
<meta name="copyright" content="Copyright by Fabian Bieberstein" >
<link rel="stylesheet" type="text/css" href="fn_style.css">
</head>
<!-- HEAD Ende -->
<body>
<div id="background">
<div id="fairy"></div>
<div id="swirl"></div>
<div id="rahmen">
<div id="header"><img src="fn_header.png" alt="Header Fairy Nails & Beauty">
</div>
<div id="inhalte">
<!-- Navigation START -->
<div id="naviinhalt">
<ul>
<li><a href="fairynails/index.html">Home</a></li>
<li><a href="fairynails/aktuelles.html">Aktuelles & Angebote</a></li>
<li><a href="beachten.html">Bitte beachten!</a></li>
<li><a href="uebermich.html">Über mich</a></li>
<li><a href="behandlungen.html">Behandlungen</a></li>
<li><a href="preise.html">Preise</a></li>
<ul id="unternavi">
<li><a href="preise_naildesign.html">Naildesign</a></li>
<li><a href="preise_kosmetik.html">Kosmetik</a></li>
</ul>
<li><a href="termine.html">Termine</a></li>
<li><a href="galerie.html">Galerie</a></li>
<li><a href="referenzen.html">Referenzen</a></li>
<li><a href="kontakt.php">Kontakt</a></li></ul>
</div>
<!-- Navigation ENDE -->
<!-- Content START -->
<div id="contentinhalt">
<h1>Herzlich Willkommen!</h1>
<p>text</p>
</div>
<!-- Content ENDE -->
<!-- Footer START -->
<div class="footerinhalt">
<table class="footerinhalt">
<tr><td>
<br><br><br><a href="impressum.html" id="impressum"><p>Impressum</p></a></td>
<td id="banner"><a href="http://www.fairyshop-beauty.de" target="_blank"><object height="90px" width="450px" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" class="videoObject"><param value="http://www.fairynails-beauty.de/mediapool/69/695296/videos/fairyshopanim3.swf" name="movie"><param value="high" name="quality"><param value="transparent"></object><embed height="90" width="450" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="transparent" type="application/x-shockwave-flash" quality="high" src="http://www.fairynails-beauty.de/mediapool/69/695296/videos/fairyshopanim3.swf"></embed>
</a></td></tr></table>
</div>
<!-- Footer ENDE -->
</div>
</div>
</div>
</body>
</html>
|
CSS
Zitat: | * {
margin: 0;
}
body { text-align: center;
background-color: #404040;
}
#background {
position: relative;
width: 1024px;
height: 766px;
z-index: 1;
margin: auto;
text-align: left;
background-image: url(fn_background.jpg);
}
#rahmen {
position: absolute;
z-index: 2;
width: 803px;
height: 724px;
margin-left: 205px;
margin-top: 38px;
}
#header {
position: relative;
z-index: 3;
width: 803px;
height: 138px;
}
#inhalte {
position: relative;
z-index: 10;
width: 803px;
height: 586px;
margin-top: -4px;
background-image: url(fn_inhalte.png);
}
#naviinhalt {
position: relative;
z-index: 11;
width: 200px;
height: 400px;
text-align: left;
float: left;
margin: 50px 0px 0px 40px;
padding: 0px;
}
#unternavi {
position: relative;
z-index: 12;
margin-left: -30px;
color: #8456d2;
}
#contentinhalt {
position: relative;
z-index: 13;
width: 465px;
height: 400px;
text-align: left;
overflow: auto;
overflow-x: hidden;
overflow-y: scroll;
float: left;
margin: 20px 0px 0px 20px;
padding: 0px;
}
.footerinhalt {
position: relative;
z-index: 14;
width: 700px;
height: 90px;
text-align: left;
margin: -18px 0px 0px 40px;
clear: both;
}
#impressum {
text-align: left;
}
#banner { padding-left:123px;
}
#swirl {
position: absolute;
z-index: 4;
margin-left: 30px;
margin-top: 28px;
width: 435px;
height: 764px;
background-image: url(fn_swirl.png);
}
#fairy {
position: absolute;
z-index: 5;
margin-left: 133px;
margin-top: 4px;
width: 394px;
height: 394px;
background-image: url(fn_fairy.png);
}
p {
font-family:Helvetica,sans-serif;
font-size:12px;
color: #000000;
}
h1 {
font-family:Helvetica,sans-serif;
font-size:22px;
color: #616161;
}
li {
font-family:Helvetica,sans-serif;
font-size:12px;
color: #000000;
}
ul { list-style-type: none;
list-style-position: outside;
}
a:link {
color:#000000;
text-decoration:none;
border: 0;
}
a:visited {
color:#000000;
text-decoration:none;
border: 0;
}
a:hover {
color:#33aaa0;
text-decoration:none;
border: 0;
}
a:active {
color:#33aaa0;
text-decoration:none;
border: 0;
}
a:focus {
color:#33aaa0;
text-decoration:none;
border: 0;
}
|
Zuletzt bearbeitet von bieber am So 13.09.2009 22:08, insgesamt 1-mal bearbeitet
|
|
|
|
|
willshedo
Dabei seit: 21.12.2005
Ort: Waldshut
Alter: 51
Geschlecht: -
|
Verfasst So 13.09.2009 22:16
Titel
|
|
|
Hi,
versuch mal, dein #naviinhalt , also die Navi, absolut dahin zu positionieren, wo sie hinsoll, dafür das float weglassen und dann z-index:500.
Ausserdem: wenn der IE irgendwas um ein paar Pixel anders anzeigt als der FF und Co, kann man dem entsprechenden Element ja andere Werte extra für den IE zuweisen (Stichwort: Browserweiche)
Grüsse,
|
|
|
|
|
bieber
Threadersteller
Dabei seit: 13.09.2009
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 13.09.2009 22:27
Titel
|
|
|
geht uach nich.
oh man dann werd ich wohl doch die andere variante nehmen. aber nur die schnörkel, die fee und den weißen bereich zusammen nehmen oder? sonst wird die datei ja viel zu riesig.
so hab das jetz so umgesetzt. funzt auch. nur die fehler im validator stören mich sehr. ha da jemand ne ahnung warum der das als fehler anzeigt?
Zuletzt bearbeitet von bieber am So 13.09.2009 23:49, insgesamt 1-mal bearbeitet
|
|
|
|
|
willshedo
Dabei seit: 21.12.2005
Ort: Waldshut
Alter: 51
Geschlecht: -
|
|
|
|
|
|
|
|
Ähnliche Themen |
z-index Probleme unter ie6, 7 und 8
[erledigt] Dropdown Menü, Probleme mit z-index im ie... :(
z-index:-1 im IE
CSS und zentrierung von z-index
Index.php abfragen
z-index Problem
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben. Du kannst auf Beiträge in diesem Forum nicht antworten. Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|