✔ Dropdownmenu nicht zu sehen, Layer-Order-Problem

[Thomas D]

Hallo!

Ich möchte meinem CSS-Layout ein Dropdownmenu hinzufügen. Dabei habe ich allerdings das Problem, dass dieses nicht zu sehen ist. Mein grundsätzliches Layout:

<div id="mainBackground">
    <div id="mainContainer">
        <div id="header">
            <div id="linkDiv">Hier steht das Dropdownmenu</div>
        </div>
        <div id="right"></div>
        <div id="content">Hier steht der Content, der das Dropdownmenu überlappt</div>
    </div>
</div>

Wie man anhand diesem Screenshot erkennen kann (Border rund um linkDiv gelegt; dort wo "Produkt" steht, befindet sich das Content-Div), wird das Menu vom Content-Div überlappt. Wenn ich allerdings z-index so vergebe, dass linkDiv vorne ist, kann ich unter Content nichts mehr markieren bzw. keine Links anklicken.

CSS:

#mainBackground
{
	position: absolute;
    text-align: left;
    height: 100%;
    margin: 0 auto;
    padding: 0;
	width: 100%;
    top: 0px;
	left: 0px;
	background-image: url("res/site/background.png");
	background-repeat: repeat;
	overflow: auto;
}

#mainContainer
{
    position: relative;
    left: 50%;
    width: 700px;
    height: 100%;
    margin-left: -350px;
}

#header
{
    position: relative;
    background-image: url("res/site/basicFrame.gif");
    background-repeat: no-repeat;
    overflow: hidden;
    width: 700px;    
    height: 794px;
}

#content
{
    position: absolute;
    top: 170px;
    width: 500px;
    min-height: 583px;
    background-color: white;
    padding-top: 25px;
    padding-bottom: 16px;
    padding-left: 23px;
}

#linkDiv
{
    position: relative;
    top: 153px;
    left: 30px;
    height: 19px;
    width: 670px;
    font-weight: bold;
    word-spacing: -2pt;
    white-space: nowrap;
}

#right
{
    position: relative;
    height: 510px;
    width: 165px;
    top: 245px;
    left: 532px;
}

Ich habe keine Ahnung wie ich das in den Griff bekommen soll und hoffe, dass ich alles einigermaßen verständlich erklären konnte. Wie löst man so ein Problem CSS-technisch?

 

[Maik]

Hi,

mit diesem Stylesheet kann ich keine der von dir genannten Probleme feststellen, wenn ich eines von Stu Nicholls' Dropdown-Menüs in deine Vorlage einsetze:

#mainBackground
{
        position: absolute;
    text-align: left;
    height: 100%;
    margin: 0 auto;
    padding: 0;
        width: 100%;
    top: 0px;
        left: 0px;
        background-image: url("res/site/background.png");
        background-repeat: repeat;
        overflow: auto;
}

#mainContainer
{
    position: relative;
    left: 50%;
    width: 700px;
    height: 100%;
    margin-left: -350px;
}

#header
{
    position: relative;
    background-image: url("res/site/basicFrame.gif");
    background-repeat: no-repeat;
    width: 700px;
    height: 170px;
}

#content
{
    width: 500px;
    min-height: 583px;
    background-color: white;
    padding-top: 25px;
    padding-bottom: 16px;
    padding-left: 23px;
    float:left;
}

#linkDiv
{
    position: relative;
    top: 153px;
    left: 30px;
    height: 19px;
    width: 670px;
    font-weight: bold;
    word-spacing: -2pt;
    white-space: nowrap;
}

#right
{
    height: 510px;
    width: 165px;
    float:right;
}

Falls das Hintergrundbild im DIV #header höher als die von mir gesetzte Blockhöhe von 170px sein sollte, empfehle ich, dieses im DIV #mainContainer einzusetzen.

 

[Thomas D]

Hallo!

Das hat leider immer noch nichts verändert : http://www.thomasd.info/temp/OverflowProblem2.jpg

Ich habe folgendes Menu von Stu Nicholls verwendet, aber es geht noch immer nicht. Poblem ist weiterhin, dass der Content-Background vor dem linkDiv-Header zu sehen ist.

Neue CSS-Struktur (mit den von dir empfohlenen Änderungen):

<div id="mainBackground">
        <div id="mainContainer">
            <div id="header">
                <div id="linkDiv"></div>
            </div>
       <div id="right"></div>
        <div id="content"></div>
</div>

Änderungen im Stylesheet:

#mainContainer
{
    position: relative;
    left: 50%;
    width: 700px;
    height: 100%;
    margin-left: -350px;
    background-image: url("res/site/basicFrame.gif");
    background-repeat: no-repeat;
}

#header
{
    position: relative;
    border: solid 1pt black;
    overflow: hidden;
    width: 700px;    
    height: 170px;
}

#right
{
    position: relative;
    height: 510px;
    width: 165px;
    top: 95px;
    left: 532px;
}

 

[Maik]

Hi,

das ist der vollständige Quellcode (incl. http://www.cssplay.co.uk/menus/dd_valid.html) meines gestrigen Versuches:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title></title>

<style type="text/css">
<!--
#mainBackground
{
        position: absolute;
    text-align: left;
    height: 100%;
    margin: 0 auto;
    padding: 0;
        width: 100%;
    top: 0px;
        left: 0px;
        background-image: url("res/site/background.png");
        background-repeat: repeat;
        overflow: auto;
}

#mainContainer
{
    position: relative;
    left: 50%;
    width: 700px;
    height: 100%;
    margin-left: -350px;
    background: red url("res/site/basicFrame.gif") no-repeat;
}

#header
{
    position: relative;
    width: 700px;
    height: 170px;
}

#content
{
    width: 500px;
    min-height: 583px;
    background-color: white;
    padding-top: 25px;
    padding-bottom: 16px;
    padding-left: 23px;
    float:left;
}

#linkDiv
{
    position: relative;
    top: 150px;
    left: 30px;
    height: 19px;
    width: 670px;
    font-weight: bold;
    word-spacing: -2pt;
    white-space: nowrap;
}

#right
{
    height: 510px;
    width: 165px;
    float:right;
}

/* ================================================================ 

This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/dd_valid.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

/* common styling */
.menu {font-family: arial, sans-serif; width:750px; position:relative; font-size:11px; z-index:100;}

.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}

.menu ul {padding:0; margin:0; list-style: none;}

.menu ul li {float:left; position:relative;}

.menu ul li ul {display: none;}



/* specific to non IE browsers */

.menu ul li:hover a {color:#fff; background:#36f;}

.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}

.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}

.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}

.menu ul li:hover ul li ul {display: none;}

.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}

.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}

.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}

.menu ul li:hover ul li:hover ul.left {left:-105px;}
-->
</style>
<!--[if lte IE 6]>
<style type="text/css">
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}

.menu ul li a:hover {color:#fff; background:#36f;}
.menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
.menu ul li a:hover ul li a:hover ul.left {left:-105px;}
</style>
<![endif]-->

</head>
<body>

<div id="mainBackground">
    <div id="mainContainer">
        <div id="header">
            <div id="linkDiv"><div class="menu">

<ul>
<li><a class="hide" href="menu/index.html">DEMOS</a>

<!--[if lte IE 6]>
<a href="menu/index.html">DEMOS
<table><tr><td>
<![endif]-->

        <ul>
        <li><a href="menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
        <li><a href="menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
        <li><a href="menu/form.html" title="Styling forms">styled form</a></li>

        <li><a href="menu/nodots.html" title="Removing active/focus borders">active focus</a></li>

        <li><a class="hide" href="menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;</a>

    <!--[if lte IE 6]>
    <a class="sub" href="menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;
    <table><tr><td>
    <![endif]-->

                <ul>
                        <li><a href="menu/form.html" title="Styling forms">styled form</a></li>
                        <li><a href="menu/nodots.html" title="Removing active/focus borders">active focus</a></li>

                        <li><a href="menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
                </ul>

        <!--[if lte IE 6]>
        </td></tr></table>
    </a>
    <![endif]-->

        </li>

        <li><a href="menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
        <li><a href="menu/old_master.html" title="Image Map for detailed information">image map</a></li>

        <li><a href="menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
        <li><a href="menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
        <li><a href="menu/em_images.html" title="em size images compared">em sized images</a></li>
        </ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="index.html">MENUS</a>

<!--[if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif]-->

        <ul>
        <li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
        <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
        <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
        <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>

        <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
        <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
        <li><a href="circles.html" title="circular links">circular links</a></li>
        </ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="layouts/index.html">LAYOUTS</a>

<!--[if lte IE 6]>
<a href="layouts/index.html">LAYOUTS
<table><tr><td>
<![endif]-->

        <ul>
        <li><a href="layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
        <li><a href="layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
        <li><a href="layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
        <li><a href="layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>

        <li><a href="layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
        </ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="boxes/index.html">BOXES</a>

<!--[if lte IE 6]>
<a href="boxes/index.html">BOXES
<table><tr><td>
<![endif]-->

        <ul>

        <li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
        <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
        <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
        <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
        <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
        <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>

        <li><a href="circles.html" title="circular links">circular links</a></li>
        </ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="mozilla/index.html">MOZILLA</a>

<!--[if lte IE 6]>
<a href="mozilla/index.html">MOZILLA
<table><tr><td>
<![endif]-->

        <ul>

        <li><a href="mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
        <li><a href="mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
        <li><a href="mozilla/content.html" title="Using content:">content:</a></li>
        <li><a href="mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
        <li><a href="mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
        <li><a href="mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>

        <li><a href="mozilla/target.html" title="Target Practise">target practise</a></li>
        <li><a href="mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
        <li><a href="mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
        </ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="index.html">EXPLORER</a>

<!--[if lte IE 6]>
<a href="index.html">EXPLORER
<table><tr><td>
<![endif]-->

        <ul>
        <li><a href="exampleone.html" title="Example one">example one</a></li>
        <li><a href="weft.html" title="Weft fonts">weft fonts</a></li>
        <li><a href="exampletwo.html" title="Vertical align">vertical align</a></li>
        </ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="opacity/index.html">OPACITY</a>

<!--[if lte IE 6]>
<a href="opacity/index.html">OPACITY
<table><tr><td>
<![endif]-->

        <ul>
        <li><a href="opacity/colours.html" title="colour wheel">opaque colours</a></li>
        <li><a href="opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>

        <li><a href="opacity/png.html" title="partial opacity">partial opacity</a></li>
        <li><a href="opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
        <li><a class="hide" href="menu/hover_click.html" title="Hover/click with no active/focus borders">&lt; HOVER/CLICK</a>

    <!--[if lte IE 6]>
    <a class="sub" href="menu/hover_click.html" title="Hover/click with no active/focus borders">&lt; HOVER/CLICK
    <table><tr><td>
    <![endif]-->

                <ul class="left">
                        <li><a href="menu/form.html" title="Styling forms">styled form</a></li>

                        <li><a href="menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
                        <li><a href="menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
                </ul>

        <!--[if lte IE 6]>
        </td></tr></table>
    </a>
    <![endif]-->

        </li>
        </ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>
</ul>

</div></div>

        </div>
        <div id="right">right</div>

        <div id="content"><p>Hier steht der Content, der das Dropdownmenu überlappt</p><p>Hier steht der Content, der das Dropdownmenu überlappt</p><p>Hier steht der Content, der das Dropdownmenu überlappt</p><p>Hier steht der Content, der das Dropdownmenu überlappt</p></div>
    </div>
</div>

</body>
</html>

Wenn ich darin nun deine verwendete Version einsetze, und in der ersten Submenüebene den transparenten beispielsweise gegen einen weißen Hintergrund austausche:

.pro_linedrop .sub li {background:transparent;}

.pro_linedrop .select :hover .sub {
height:25px;
display:block;
position:absolute;
float:left;
width:740px;
top:28px;
left:0;
text-align:center;
background:transparent url(line/transparent.gif);
border:1px solid #aaa;
}

.pro_linedrop .select :hover .rt li {float:right;}

.pro_linedrop .select :hover .sub li a
{display:block; height:25px; line-height:22px; float:left; background:transparent url(line/transparent.gif); padding:0 16px; margin:0; white-space:nowrap; color:#888;font-size:10px;}

kann ich da keine Darstellungsprobleme mit den Hintergründen entdecken.

 

[Thomas D]

Das Problem lag am content-DIV: Hier durfte ich das Attribut 'position' nicht verwenden (ganz gleich, ob relative oder absolute). Sobald ich dieses entfernte, gab es das Problem nicht mehr.

Vielen Dank auf jeden Fall für deine Hilfe ! Es hat zwar ein wenig gedauert, bis ich es geschafft habe, aber letzten Endes habe ich den Fehler nur dank deiner Hilfestellung gefunden!

 

[Maik]

Das Problem lag am content-DIV: Hier durfte ich das Attribut 'position' nicht verwenden (ganz gleich, ob relative oder absolute). Sobald ich dieses entfernte, gab es das Problem nicht mehr.

Die Positionierung des Elements hatte ich aber schon wissentlich in meinem ersten Lösungsvorschlag entfernt

 

[Thomas D]

Problem bei height:100% und minimiertem Browserfenster

Hallo!

Ich bin jetzt auf ein erneutes Problem meines CSS-Layouts draufgekommen. Wenn ich ein Browserfenster nicht maximal geöffnet habe, dann wirkt die 100%-Angabe der height im Main-DIV nicht, dass die Seite wirklich bis zum Browserfensterende zu sehen ist: http://www.thomasd.info/temp/heightproblem.jpg

Das ganze kann auch unter http://www.city-print.at ausprobiert werden. Weiß hier jemand einen Workaround? Ich brauche ja die Height-Angabe, sonst wird die Graphik ja nicht korrekt gesetzt ...

body
{
	font-family: 'Arial', 'Verdana', sans-serif;
	font-size: 8pt;
	color: black;
	padding: 0;
	margin: 0;
    text-align: center;

	/*
		wichtig, da height vom mainBackground-DIV auf 100 % gestellt ist und dies sich auf das Parentelement bezieht; im IE6 gab es deshalb beispielsweise Probleme bei der Darstellung der Page
	*/
	height: 100%;
}

#mainBackground
{
	position: absolute;
	text-align: left;
	height: 100%;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	top: 0px;
	left: 0px;
	background-image: url("res/site/background.png");
	background-repeat: repeat;
	overflow: auto;
    z-index: 0;
}

#mainContainer
{
    position: relative;
    left: 50%;
    width: 700px;
    height: 100%;
	min-height: 583px;
    margin-left: -350px;
    background-image: url("res/site/basicFrame.gif");
    background-repeat: no-repeat;
    z-index: 1;
}

...

 

[Maik]

Hi,

zum einen besitzt das Hintergrundbild für #mainContainer eine feste Dimension (699*794px), und zum anderen hast du die CSS-Regeln zum Strecken eines Elements auf eine 100%-Höhe falsch angewendet - siehe zum Vergleich mein CSS-Tutorial CSS-Layout mit 100%-Höhe.

mfg Maik

 

[Thomas D]

Hallo!

zum einen besitzt das Hintergrundbild für #mainContainer eine feste Dimension (699*794px)

Na ja, eine Graphik hat ja immer eine feste Dimension oder wie kann/soll ich das umgehen

und zum anderen hast du die CSS-Regeln zum Strecken eines Elements auf eine 100%-Höhe falsch angewendet - siehe zum Vergleich mein CSS-Tutorial CSS-Layout mit 100%-Höhe.

Habe ich gemacht und im IE7 funktioniert auch alles wunderbar. Nur leider zerhaut mir die Option height: auto !important; das Layout in Firefox und Opera - s. http://www.thomasd.info/CityPrint

body {height: 100%;}

#mainBackground
{
	position: absolute;
	text-align: left;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	top: 0px;
	left: 0px;
	background-image: url("res/site/background.png");
	background-repeat: repeat;
	overflow: auto;
    z-index: 0;
}

#mainContainer
{
    position: relative;
    left: 50%;
    width: 700px;
	height: auto !important; /*auch wenn ich's hier weg lasse, kommt es zur fehlerhaften Darstellung in Firefox/Opera*/
	height: 100%;
	min-height: 583px;
    margin-left: -350px;
    background-image: url("res/site/basicFrame.gif");
    background-repeat: no-repeat;
    z-index: 1;
}

 

[Maik]

Was ich mit der Grafikgröße zum Ausdruck bringen will: "Wie soll sie denn mit einer vordefinierten Höhe bis zum unteren Fensterrand reichen, wenn sie zudem in der Vertikalen nicht wiederholt wird?"

Und mit min-height:583px richtest du lediglich eine Mindesthöhe von 583px ein, die ebenfalls nicht bis zum unteren Fensterrand reicht.

Denk mal darüber nach.

mfg Maik