CSS Horizontal Menu - Aufgeklappte Menues verschwinden hinter Content

Für Fragen und Diskussionen zum Layout und Design, Templates und Stylesheets sowie Themes
Post Reply
ottyscom
Forum Members
Forum Members
Posts: 154
Joined: Tue Nov 13, 2007 12:01 am

CSS Horizontal Menu - Aufgeklappte Menues verschwinden hinter Content

Post by ottyscom »

Hallo allerseits,

Ich habe folgdendes Problem. Komme einfach nicht dahinter.

Habe auf einer CMS Seite oben eine CSS Menu Leiste Horizontal mit aufklapbaren Menues. Nur wenn man diese aufklappt verschwinden die hinter dem Content Kasten.

Ich weis nicht ob ihr wisst was ich meine aber wenn jemand mir helfen will sende ich im gerne die Adresse der entsprechenden Seite. Danke schonmal
Last edited by ottyscom on Tue Jun 02, 2009 12:51 am, edited 1 time in total.
antibart
Power Poster
Power Poster
Posts: 1162
Joined: Sun Aug 17, 2008 9:29 am

Re: CSS Horizontal Menu - Aufgeklappte Menues verschwinden hinter Content

Post by antibart »

Vermutung:

1. Falls Du mit Layern arbeitest: Wenn ein Layer hinter einem andern verschwindet, könnte es daran liegen, dass die Reihenfolge der Layer falsch ist. Untersuch mal die Werte des Attributes z-index iin deinen css. Der hinterste Layer muss den niedrigsten Wert haben.

Beispiel

#hintergund {z-index:0;}
#menu {z-index:1;}

2. Falls es das nicht ist: es gab in letzter Zeit mehrere Threads über Probleme mit dem "Aufklapp-Menü" ... schau doch mal, ob einer davon dir weiterhilft.
Last edited by antibart on Tue Jun 02, 2009 7:27 am, edited 1 time in total.
User avatar
sommersprosse
Forum Members
Forum Members
Posts: 70
Joined: Tue Sep 23, 2008 9:33 am

Re: CSS Horizontal Menu - Aufgeklappte Menues verschwinden hinter Content

Post by sommersprosse »

ottyscom wrote: Habe auf einer CMS Seite oben eine CSS Menu Leiste Horizontal mit aufklapbaren Menues. Nur wenn man diese aufklappt verschwinden die hinter dem Content Kasten.
Leider gibst du etwas wenig Info, es könnte auch von Bedeutung sein was für ein Element bzw. welcher Teil des Contents dein Menü überlappt.
Wenn du uns einem Link mit Beispiel gibst können wir dir bestimmt mehr Tipps geben.
excalibur77
Forum Members
Forum Members
Posts: 65
Joined: Mon Jan 14, 2008 8:09 pm

Re: CSS Horizontal Menu - Aufgeklappte Menues verschwinden hinter Content

Post by excalibur77 »

In der Regl lassen sich solche Probleme mit einem hohen z-inex wie 999999 für das Menü-Div beheben, ggf. mit einem position:relative; - letzteres natürlich mit Vorsicht, kenne Dein CSS nicht.

Hast Du evtl. ein Flash im Content? Dann wmode auf transparent setzen.

Übrigens mal kurz ein freundliches Hallo an alle die mich noch kennen, hatte in den letzten Monaten sauwenig Zeit für's Forum und freue mich über viele neue Infos.

Edit: wie in PN geschrieben, die ul's des Menüs auch auf hohen z-index!
Last edited by excalibur77 on Wed Jun 03, 2009 4:26 pm, edited 1 time in total.
NaN

Re: CSS Horizontal Menu - Aufgeklappte Menues verschwinden hinter Content

Post by NaN »

Vielleicht wäre es besser, wenn Du mal den Ausschnitt aus Deinem Template / CSS postest.
Sonst kann man hier wirklich nur Vermutungen anstellen.
ottyscom
Forum Members
Forum Members
Posts: 154
Joined: Tue Nov 13, 2007 12:01 am

Re: CSS Horizontal Menu - Aufgeklappte Menues verschwinden hinter Content

Post by ottyscom »

Hier ist der CSS Code. Muss ihn in 3 Teile Posten da sonst die maximale lánge erreicht wird:

TEIL1:

Code: Select all

body
{
  margin: 0 auto;
  padding: 0;
  background-color: #FCFCFD;
  background-image: url('images/Page-BgTexture.jpg');
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-position: bottom left;
}

.Main
{
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}





.cleared
{
  float: none;
  clear: both;
  margin: 0;
  padding: 0;
  border: none;
  font-size:1px;
}


/* end Page */

/* begin Box, Sheet */
.Sheet
{
  overflow: hidden;
  min-width:51px;
  min-height:51px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  width: 900px;
}


.Sheet-body
{
  position: relative;
  z-index: 0;
  margin: 5px;
}

.Sheet-tl
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  left: 0;
  width: 35px;
  height: 35px;
  background-image: url('images/Sheet-s.png');
}

.Sheet-tr
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  right: 0;
  width: 35px;
  height: 35px;
}

.Sheet-tr div
{
  position: absolute;
  z-index: -1;
  top: 0px;
  left: -35px;
  width: 70px;
  height: 70px;
  background-image: url('images/Sheet-s.png');
}

.Sheet-bl
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 35px;
  height: 35px;
}

.Sheet-bl div
{
  position: absolute;
  z-index: -1;
  top: -35px;
  left: 0;
  width: 70px;
  height: 70px;
  background-image: url('images/Sheet-s.png');
}

.Sheet-br
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  bottom: 0;
  right: 0;
  width: 35px;
  height: 35px;
}

.Sheet-br div
{
  position: absolute;
  z-index: -1;
  top: -35px;
  left: -35px;
  width: 70px;
  height: 70px;
  background-image: url('images/Sheet-s.png');
}

.Sheet-tc
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  top: 0;
  left: 35px;
  right: 35px;
  height: 35px;
}

.Sheet-tc div
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-image: url('images/Sheet-h.png');
}

.Sheet-bc
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  bottom: 0;
  left: 35px;
  right: 35px;
  height: 35px;
}

.Sheet-bc div
{
  position: absolute;
  z-index: -1;
  top: -35px;
  left: 0;
  width: 100%;
  height: 70px;
  background-image: url('images/Sheet-h.png');
}

.Sheet-cl
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  top: 35px;
  left: 0;
  width: 35px;
  bottom: 35px;
}

.Sheet-cl div
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 70px;
  height: 100%;
  background-image: url('images/Sheet-v.png');
}

.Sheet-cr
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  top: 35px;
  right: 0;
  width: 35px;
  bottom: 35px;
}

.Sheet-cr div
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: -35px;
  width: 70px;
  height: 100%;
  background-image: url('images/Sheet-v.png');
}

.Sheet-cc
{
  position: absolute;
  overflow:hidden;
  z-index: -2;
  top: 35px;
  left: 35px;
  right: 35px;
  bottom: 35px;
  background-image: url('images/Sheet-c.png');
}


.Sheet
{
  margin-top: 30px !important;
}
/* end Box, Sheet */

/* begin Header */
div.Header
{
  margin: 0 auto;
  position: relative;
  z-index:0;
  width: 890px;
  height: 225px;
}

div.Header-png
{
  position: absolute;
  z-index:-2;
  top: 0;
  left: 0;
  width: 890px;
  height: 225px;
  background-image: url('images/Header.png');
  background-repeat: no-repeat;
  background-position: left top;
}


div.Header-jpeg
{
  position: absolute;
  z-index:-1;
  top: 0;
  left: 0;
  width: 890px;
  height: 225px;
  background-image: url('images/Header.jpg');
  background-repeat: no-repeat;
  background-position: center center;
}
/* end Header */

/* begin Logo */
.logo
{
  display : block;
  position: absolute;
  left: {LogoLeft}px;
  top: {LogoTop}px;
  width: {LogoWidth}px;
}

h1.logo-name
{
  display: block;
  text-align: {HorizontalAlign};
}

h1.logo-name, h1.logo-name a, h1.logo-name a:link, h1.logo-name a:visited, h1.logo-name a:hover
{
{LogoNameFont}
  padding:0;
  margin:0;
  color: {NameFontColor} !important;
}

.logo-text
{
  display: block;
  text-align: {HorizontalAlign};
}

.logo-text, .logo-text a
{
{LogoSloganFont}
  padding:0;
  margin:0;
  color: {TextFontColor} !important;
}

/* end Logo */









/* begin ContentLayout */
.contentLayout
{
  margin-bottom: 5px;
  width: 890px;
  position: relative;
}
/* end ContentLayout */

/* begin Box, Block */
.Block
{
  overflow: hidden;
  min-width:15px;
  min-height:15px;
  margin: 0 auto;
  position: relative;
  z-index: 0;
}


.Block-body
{
  position: relative;
  z-index: 0;
  margin: 7px;
}

.Block-tl
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  background-image: url('images/Block-s.png');
}

.Block-tr
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  right: 0;
  width: 7px;
  height: 7px;
}

.Block-tr div
{
  position: absolute;
  z-index: -1;
  top: 0px;
  left: -7px;
  width: 14px;
  height: 14px;
  background-image: url('images/Block-s.png');
}

.Block-bl
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 7px;
  height: 7px;
}

.Block-bl div
{
  position: absolute;
  z-index: -1;
  top: -7px;
  left: 0;
  width: 14px;
  height: 14px;
  background-image: url('images/Block-s.png');
}

.Block-br
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  bottom: 0;
  right: 0;
  width: 7px;
  height: 7px;
}

.Block-br div
{
  position: absolute;
  z-index: -1;
  top: -7px;
  left: -7px;
  width: 14px;
  height: 14px;
  background-image: url('images/Block-s.png');
}

.Block-tc
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  top: 0;
  left: 7px;
  right: 7px;
  height: 7px;
}

.Block-tc div
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 14px;
  background-image: url('images/Block-h.png');
}

.Block-bc
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  bottom: 0;
  left: 7px;
  right: 7px;
  height: 7px;
}

.Block-bc div
{
  position: absolute;
  z-index: -1;
  top: -7px;
  left: 0;
  width: 100%;
  height: 14px;
  background-image: url('images/Block-h.png');
}

.Block-cl
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  top: 7px;
  left: 0;
  width: 7px;
  bottom: 7px;
}

.Block-cl div
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 14px;
  height: 100%;
  background-image: url('images/Block-v.png');
}

.Block-cr
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  top: 7px;
  right: 0;
  width: 7px;
  bottom: 7px;
}

.Block-cr div
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: -7px;
  width: 14px;
  height: 100%;
  background-image: url('images/Block-v.png');
}

.Block-cc
{
  position: absolute;
  overflow:hidden;
  z-index: -2;
  top: 7px;
  left: 7px;
  right: 7px;
  bottom: 7px;
  background-image: url('images/Block-c.png');
}


.Block
{
  margin: 7px;
}

/* end Box, Block */

/* begin BlockHeader */
.BlockHeader
{
  position: relative;
  overflow: hidden;
  height: 30px;
  z-index: 0;
  line-height: 30px;
  padding: 0 7px;
  margin-bottom: 7px;

}

.BlockHeader-text
{
  white-space : nowrap;
  color: #000000;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 12px;
  font-style: normal;
  font-weight: bold;
  line-height: 30px;
  
}


.BlockHeader .l, .BlockHeader .r, .BlockHeader .r div
{
  top: 0;
  position: absolute;
  z-index: -1;
  overflow: hidden;
  height: 30px;
}

.BlockHeader .l
{
  left: 0;
  right: 6px;
}


.BlockHeader .r
{
  right: 0;
  width: 6px;
}


.BlockHeader .r div
{
  width: 890px;
  right: 0;
}


.BlockHeader .l, .BlockHeader .r div
{
  background-position: left top;
  background-repeat: no-repeat;
  background-image: url('images/BlockHeader.png');
}



.header-tag-icon
{
  display:inline-block;
  background-position:left top;
  background-image: url('images/BlockHeaderIcon.png');
  padding:0 0 0 30px;
  background-repeat: no-repeat;
  min-height: 14px;
  margin: 0 0 0 5px;
}




/* end BlockHeader */

/* begin Box, BlockContent */
.BlockContent
{
  overflow: hidden;
  min-width:1px;
  min-height:1px;
  margin: 0 auto;
  position: relative;
  z-index: 0;
}


.BlockContent-body
{
  position: relative;
  z-index: 0;
  margin:8px;
}


.BlockContent-body
{
  color:#162032;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
}

.BlockContent-body a:link
{
  color: #30486E;
  font-family: Arial, Helvetica, Sans-Serif;
  text-decoration: underline;
}

.BlockContent-body a:visited, .BlockContent-body a.visited
{
  color: #867C8D;
  font-family: Arial, Helvetica, Sans-Serif;
  text-decoration: underline;
}

.BlockContent-body a:hover, .BlockContent-body a.hover
{
  color: #D16200;
  font-family: Arial, Helvetica, Sans-Serif;
  text-decoration: none;
}


.BlockContent-body ul
{
  list-style-type: none;
  color: #363239;
  margin:0;
  padding:0;
}

.BlockContent-body li
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 12px;
  text-decoration: none;
}

.BlockContent-body ul li
{
  padding:0px 0 0px 13px;
  background-image: url('images/BlockContentBullets.png');
  background-repeat:no-repeat;
  margin:0.5em 0 0.5em 0;
  line-height:1.2em;
}

/* end Box, BlockContent */
ottyscom
Forum Members
Forum Members
Posts: 154
Joined: Tue Nov 13, 2007 12:01 am

Re: CSS Horizontal Menu - Aufgeklappte Menues verschwinden hinter Content

Post by ottyscom »

TEIL 2:

Code: Select all

/* begin Box, Post */
.Post
{
  overflow: hidden;
  min-width:17px;
  min-height:17px;
  margin: 0 auto;
  position: relative;
  z-index: 0;
}


.Post-body
{
  position: relative;
  z-index: 0;
  margin: 12px;
}

.Post-tl
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  background-image: url('images/Post-s.png');
}

.Post-tr
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
}

.Post-tr div
{
  position: absolute;
  z-index: -1;
  top: 0px;
  left: -12px;
  width: 24px;
  height: 24px;
  background-image: url('images/Post-s.png');
}

.Post-bl
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 12px;
  height: 12px;
}

.Post-bl div
{
  position: absolute;
  z-index: -1;
  top: -12px;
  left: 0;
  width: 24px;
  height: 24px;
  background-image: url('images/Post-s.png');
}

.Post-br
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
}

.Post-br div
{
  position: absolute;
  z-index: -1;
  top: -12px;
  left: -12px;
  width: 24px;
  height: 24px;
  background-image: url('images/Post-s.png');
}

.Post-tc
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  top: 0;
  left: 12px;
  right: 12px;
  height: 12px;
}

.Post-tc div
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 24px;
  background-image: url('images/Post-h.png');
}

.Post-bc
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 12px;
}

.Post-bc div
{
  position: absolute;
  z-index: -1;
  top: -12px;
  left: 0;
  width: 100%;
  height: 24px;
  background-image: url('images/Post-h.png');
}

.Post-cl
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  top: 12px;
  left: 0;
  width: 12px;
  bottom: 12px;
}

.Post-cl div
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 24px;
  height: 100%;
  background-image: url('images/Post-v.png');
}

.Post-cr
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  top: 12px;
  right: 0;
  width: 12px;
  bottom: 12px;
}

.Post-cr div
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: -12px;
  width: 24px;
  height: 100%;
  background-image: url('images/Post-v.png');
}

.Post-cc
{
  position: absolute;
  overflow:hidden;
  z-index: -2;
  top: 12px;
  left: 12px;
  right: 12px;
  bottom: 12px;
  background-image: url('images/Post-c.png');
}


.Post
{
  margin: 10px;
}


/* Start images */
a img
{
  border: 0;
}

.article img, img.article
{
  border-style: solid;
  border-width: 0px;
  border-color: #91A9CF;
  margin: 1em;
}

.metadata-icons img
{
  border: none;
  vertical-align: middle;
  margin:2px;
}
/* Finish images */

/* Start tables */

.article table, table.article
{
  border-collapse: collapse;
  margin: 1px;
  width:auto;
}

.article table, table.article .article tr, .article th, .article td
{
  background-color:Transparent;
}

.article th, .article td
{
  padding: 2px;
  border: solid 1px #988F9E;
  vertical-align: top;
  text-align:left;
}

.article th
{
  text-align:center;
  vertical-align:middle;
  padding: 7px;
}



/* Finish tables */
/* end Box, Post */

/* begin PostHeaderIcon */
.PostHeaderIcon-wrapper
{
  text-decoration:none;
  margin: 0.2em 0;
  padding: 0;
  font-weight:normal;
  font-style:normal;
  letter-spacing:normal;
  word-spacing:normal;
  font-variant:normal;
  text-decoration:none;
  font-variant:normal;
  text-transform:none;
  text-align:left;
  text-indent:0;
  line-height:inherit;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 22px;
  font-style: normal;
  font-weight: bold;
  text-align: left;
  color: #22334E;
}

.PostHeaderIcon-wrapper, .PostHeaderIcon-wrapper a, .PostHeaderIcon-wrapper a:link, .PostHeaderIcon-wrapper a:visited, .PostHeaderIcon-wrapper a:hover
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 22px;
  font-style: normal;
  font-weight: bold;
  text-align: left;
  color: #22334E;
}

/* end PostHeaderIcon */

/* begin PostHeader */
.PostHeader a:link
{
  font-family: Arial, Helvetica, Sans-Serif;
  text-decoration: none;
  text-align: left;
  color: #2A3F60;
}

.PostHeader a:visited, .PostHeader a.visited
{
  font-family: Arial, Helvetica, Sans-Serif;
  text-decoration: none;
  text-align: left;
  color: #46404A;
}

.PostHeader a:hover, .PostHeader a.hovered
{
  font-family: Arial, Helvetica, Sans-Serif;
  text-decoration: none;
  text-align: left;
  color: #101723;
}
/* end PostHeader */

/* begin PostContent */
/* Content Text Font & Color (Default) */
body
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  color: #000000;
}

.PostContent
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  text-align: justify;
  color: #000000;
}

/* Start Content link style */
/*
The right order of link pseudo-classes: Link-Visited-Hover-Focus-Active.
http://www.w3schools.com/CSS/css_pseudo_classes.asp
http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states/
*/
a
{
  font-family: Arial, Helvetica, Sans-Serif;
  text-decoration: underline;
  color: #5C7FB7;
}

/* Adds special style to an unvisited link. */
a:link
{
  font-family: Arial, Helvetica, Sans-Serif;
  text-decoration: underline;
  color: #5C7FB7;
}

/* Adds special style to a visited link. */
a:visited, a.visited
{
  font-family: Arial, Helvetica, Sans-Serif;
  text-decoration: underline;
  color: #FF8214;
}

/* :hover - adds special style to an element when you mouse over it. */
a:hover, a.hover
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-style: normal;
  font-weight: bold;
  text-decoration: none;
  color: #1A181B;
}

/* Finish Content link style */

/* Resert some headings default style & links default style for links in headings*/
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited
{
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
}


/* Start Content headings Fonts & Colors  */
h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 28px;
  font-style: normal;
  font-weight: bold;
  text-align: left;
  color: #324A71;
}

h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 22px;
  font-style: normal;
  font-weight: bold;
  text-align: left;
  color: #436498;
}

h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 18px;
  font-style: normal;
  font-weight: bold;
  text-align: left;
  color: #534C57;
}

h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 16px;
  font-style: normal;
  font-weight: bold;
  text-align: left;
  color: #172335;
}

h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 14px;
  font-style: normal;
  font-weight: bold;
  text-align: left;
  color: #172335;
}

h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 14px;
  font-style: normal;
  font-weight: bold;
  text-align: left;
  color: #172335;
}
/* Finish Content headings Fonts & Colors  */

/* end PostContent */

/* begin PostBullets */
/* Start Content list */

ul
{
  list-style-type: none;
  color: #39343C;
  margin:0;
  padding:0;
}

li
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 12px;
}



.Post ul li
{
  padding:0px 0 0px 19px;
  background-image: url('images/PostBullets.png');
  background-repeat:no-repeat;
  margin:0.5em 0 0.5em 0;
  line-height:1.2em;
}


/* Finish Content list */
/* end PostBullets */

/* begin PostQuote */
/* Start blockquote */

blockquote p
{
  color:#312D34;
  font-family: Arial, Helvetica, Sans-Serif;
  font-style: italic;
  font-weight: normal;
  text-align: left;
}

blockquote
{
  border-color:#FFB06B;
  border-width: 0px;
  border-style: solid;

  margin:10px 10px 10px 50px;
  padding:5px 5px 5px 37px;

  background-color:#FFD6B3;

  background-image:url('images/PostQuote.png');
  background-position:left top;
  background-repeat:no-repeat;
}



/* Finish blockuote */
/* end PostQuote */

/* begin Button */
button.Button, a.Button
{
  position:relative;
  display:inline-block;
  width: auto;
  outline:none;
  border:none;
  background:none;
  line-height:34px;
  margin:0;
  padding:0;
  overflow: visible;
  cursor: default;
  text-decoration: none !important;
}


/*This HACK needed for ie7 (button position)*/
*:first-child+html button.Button, *:first-child+html a.Button
{
  display:list-item;
  list-style-type:none;
  float:left;
}


.Button .btn
{
  position: relative;
  overflow: hidden;
  display: block;
  width: auto;
  z-index: 0;
  height: 34px;
  color: #1C2A40;
  white-space: nowrap;
  float: left;
}

.Button .t
{
  height:34px;
  white-space: normal;
  padding: 0 21px;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  text-align: left;
  line-height: 34px;
  text-decoration: none !important;
}

input, select
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
}

.Button .active
{
  color: #EDECEE;
}

.Button .hover,  a.Button:hover
{
  color: #241100;
  text-decoration: none !important;
}

.Button .active .r
{
  top: -68px;
}

.Button .hover .r
{
  top: -34px;
}

.Button .r
{
  display: block;
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  right: 0;
  width: 11px;
  height: 102px;
}


.Button .r span
{
  display: block;
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  right: 0;
  width:411px;
  height: 102px;
}


.Button .active .l
{
  top: -68px;
}

.Button .hover .l
{
  top: -34px;
}

.Button .l
{
  display: block;
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  left: 0;
  right: 11px;
  height: 102px;
}


.Button .l, .Button .r span
{
  background-image: url('images/Button.png');
}

/* end Button */

/* begin Footer */
.Footer
{
  position:relative;
  z-index:0;
  overflow:hidden;
  width: 890px;
  margin: 5px auto 0px auto;
}

.Footer .Footer-inner
{
  height:1%;
  position: relative;
  z-index: 0;
  padding: 8px;
  text-align: center;
}

.Footer .Footer-background
{
  position:absolute;
  z-index:-1;
  background-repeat:no-repeat;
  background-image: url('images/Footer.png');
  width: 890px;
  height: 100px;
  bottom:0;
  left:0;
}



.rss-tag-icon
{
  position: relative;
  display:block;
  float:left;
  background-image: url('images/rssIcon.png');
  background-position: center right;
  background-repeat: no-repeat;
  margin: 0 5px 0 0;
  height: 25px;
  width: 25px;
}




.Footer .Footer-text p
{
  margin: 0;
}

.Footer .Footer-text
{
  display:inline-block;
  color:#2C4163;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 11px;
}

.Footer .Footer-text a:link
{
  text-decoration: none;
  color: #2F466A;
  font-family: Arial, Helvetica, Sans-Serif;
  text-decoration: underline;
}

.Footer .Footer-text a:visited
{
  text-decoration: none;
  color: #4E4752;
  font-family: Arial, Helvetica, Sans-Serif;
  text-decoration: underline;
}

.Footer .Footer-text a:hover
{
  text-decoration: none;
  color: #101723;
  font-family: Arial, Helvetica, Sans-Serif;
  text-decoration: none;
}
/* end Footer */

/* begin PageFooter */
.page-footer, .page-footer a, .page-footer a:link, .page-footer a:visited, .page-footer a:hover
{
  font-family:Arial;
  font-size:10px;
  letter-spacing:normal;
  word-spacing:normal;
  font-style:normal;
  font-weight:normal;
  text-decoration:underline;
  color:#86A0CA;
}

.page-footer
{
  margin:1em;
  text-align:center;
  text-decoration:none;
  color:#AAA2AE;
}
/* end PageFooter */

/* begin LayoutCell */
.contentLayout .sidebar1
{
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  overflow: hidden;
  width: 222px;
}

/* end LayoutCell */

/* begin LayoutCell */
.contentLayout .content
{
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  overflow: hidden;
  width: 445px;
}

/* end LayoutCell */

/* begin LayoutCell */
.contentLayout .sidebar2
{
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  overflow: hidden;
  width: 222px;
}

/* end LayoutCell */
ottyscom
Forum Members
Forum Members
Posts: 154
Joined: Tue Nov 13, 2007 12:01 am

Re: CSS Horizontal Menu - Aufgeklappte Menues verschwinden hinter Content

Post by ottyscom »

TEIL 3:

Code: Select all

/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */

#menu_vert {
   margin-left: 1px;
   margin-right: 1px;
}

/* The wrapper clears the floating elements of the menu */

/* Fix for Opera 8 */
.clearb { clear: both; }
#menuwrapper { 
   /* Fix for Opera 8 */ 
   /*   overflow: hidden;  */ 
   background-color: #ECECEC;
   z-index: 99999;
   border-bottom: 1px solid #C0C0C0;
   width: 100%;
}

/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav li li { 
   width: 200px; 
}






/* Unless you know what you do, do not touch this */ 
#primary-nav, #primary-nav ul { 
   list-style: none; 
  z-index: 99999;
   margin: 0px; 
   padding: 0px; 
}
#primary-nav ul { 
   position: absolute; 
   z-index: 99999;
   top: auto; 
   display: none; 
}
#primary-nav ul ul { 
   margin-top: 1px;
   margin-left: -1px;
   left: 100%; 
   top: 0px; 
}
	
#primary-nav li { 
   margin-left: -1px;
   z-index: 99999;
   float: left; 
}
#primary-nav li li { 
   margin-left: 0px;
   margin-top: -1px;
   float: none; 
   position: relative; 
   
}

/* Styling the basic apperance of the menu elements */
#primary-nav a { 
   display: block; 
   z-index: 99999;   
   margin: 0px; 
   padding: 5px 18px; 
   text-decoration: none; 
   font-weight:bold;
   color: #ffffff;
}
#primary-nav li a { 
   border-right: 1px solid #C0C0C0;
   border-left: 1px solid #C0C0C0;
}
#primary-nav li li a { 
   border: 1px solid #C0C0C0;
}	
#primary-nav li, #primary-nav li.menuparent { 
   background:#2c2c2c url(images/OTTYSCOM-RADIO03/nav.png);
   
}

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive { 
   background-color: #C7C7C7; 
}


/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent, 
#primary-nav ul li.menuparent:hover, 
#primary-nav ul li.menuparenth { 
/* arrow for menuparents */
   background-image: url(images/cms/arrow.gif); 
   background-position: center right; 
   background-repeat: no-repeat; 
   z-index: 99999;
}


/* Styling the apperance of menu items on hover */

#primary-nav li:hover, 
#primary-nav li.menuh, 
#primary-nav li.menuparenth, 
#primary-nav li.menuactiveh { 
   background:#000066 url(images/OTTYSCOM-RADIO03/nav_a.png); 
}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

/* 
just add 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul ul ul,
for fourth level 
*/
#primary-nav ul, 
z-index: 99999;
#primary-nav li:hover ul, 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul, 
#primary-nav li.menuparenth ul ul { 
   display: none; 
}

/* add 
#primary-nav ul ul ul li:hover ul, 
#primary-nav ul ul ul li.menuparenth ul,
for fourth level
*/
#primary-nav li:hover ul, 
#primary-nav ul li:hover ul, 
#primary-nav ul ul li:hover ul, 
#primary-nav li.menuparenth ul, 
#primary-nav ul li.menuparenth ul, 
#primary-nav ul ul li.menuparenth ul { 
   display: block; 
}


/* IE Hacks */
#primary-nav li li { 
   float: left; 
   clear: both; 
}
#primary-nav li li a { 
   height: 1%; 
}
ottyscom
Forum Members
Forum Members
Posts: 154
Joined: Tue Nov 13, 2007 12:01 am

Re: CSS Horizontal Menu - Aufgeklappte Menues verschwinden hinter Content

Post by ottyscom »

TEIL 2:

Code: Select all

/* begin Box, Post */
.Post
{
  overflow: hidden;
  min-width:17px;
  min-height:17px;
  margin: 0 auto;
  position: relative;
  z-index: 0;
}


.Post-body
{
  position: relative;
  z-index: 0;
  margin: 12px;
}

.Post-tl
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  background-image: url('images/Post-s.png');
}

.Post-tr
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
}

.Post-tr div
{
  position: absolute;
  z-index: -1;
  top: 0px;
  left: -12px;
  width: 24px;
  height: 24px;
  background-image: url('images/Post-s.png');
}

.Post-bl
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 12px;
  height: 12px;
}

.Post-bl div
{
  position: absolute;
  z-index: -1;
  top: -12px;
  left: 0;
  width: 24px;
  height: 24px;
  background-image: url('images/Post-s.png');
}

.Post-br
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
}

.Post-br div
{
  position: absolute;
  z-index: -1;
  top: -12px;
  left: -12px;
  width: 24px;
  height: 24px;
  background-image: url('images/Post-s.png');
}

.Post-tc
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  top: 0;
  left: 12px;
  right: 12px;
  height: 12px;
}

.Post-tc div
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 24px;
  background-image: url('images/Post-h.png');
}

.Post-bc
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 12px;
}

.Post-bc div
{
  position: absolute;
  z-index: -1;
  top: -12px;
  left: 0;
  width: 100%;
  height: 24px;
  background-image: url('images/Post-h.png');
}

.Post-cl
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  top: 12px;
  left: 0;
  width: 12px;
  bottom: 12px;
}

.Post-cl div
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 24px;
  height: 100%;
  background-image: url('images/Post-v.png');
}

.Post-cr
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  top: 12px;
  right: 0;
  width: 12px;
  bottom: 12px;
}

.Post-cr div
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: -12px;
  width: 24px;
  height: 100%;
  background-image: url('images/Post-v.png');
}

.Post-cc
{
  position: absolute;
  overflow:hidden;
  z-index: -2;
  top: 12px;
  left: 12px;
  right: 12px;
  bottom: 12px;
  background-image: url('images/Post-c.png');
}


.Post
{
  margin: 10px;
}


/* Start images */
a img
{
  border: 0;
}

.article img, img.article
{
  border-style: solid;
  border-width: 0px;
  border-color: #91A9CF;
  margin: 1em;
}

.metadata-icons img
{
  border: none;
  vertical-align: middle;
  margin:2px;
}
/* Finish images */

/* Start tables */

.article table, table.article
{
  border-collapse: collapse;
  margin: 1px;
  width:auto;
}

.article table, table.article .article tr, .article th, .article td
{
  background-color:Transparent;
}

.article th, .article td
{
  padding: 2px;
  border: solid 1px #988F9E;
  vertical-align: top;
  text-align:left;
}

.article th
{
  text-align:center;
  vertical-align:middle;
  padding: 7px;
}



/* Finish tables */
/* end Box, Post */

/* begin PostHeaderIcon */
.PostHeaderIcon-wrapper
{
  text-decoration:none;
  margin: 0.2em 0;
  padding: 0;
  font-weight:normal;
  font-style:normal;
  letter-spacing:normal;
  word-spacing:normal;
  font-variant:normal;
  text-decoration:none;
  font-variant:normal;
  text-transform:none;
  text-align:left;
  text-indent:0;
  line-height:inherit;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 22px;
  font-style: normal;
  font-weight: bold;
  text-align: left;
  color: #22334E;
}

.PostHeaderIcon-wrapper, .PostHeaderIcon-wrapper a, .PostHeaderIcon-wrapper a:link, .PostHeaderIcon-wrapper a:visited, .PostHeaderIcon-wrapper a:hover
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 22px;
  font-style: normal;
  font-weight: bold;
  text-align: left;
  color: #22334E;
}

/* end PostHeaderIcon */

/* begin PostHeader */
.PostHeader a:link
{
  font-family: Arial, Helvetica, Sans-Serif;
  text-decoration: none;
  text-align: left;
  color: #2A3F60;
}

.PostHeader a:visited, .PostHeader a.visited
{
  font-family: Arial, Helvetica, Sans-Serif;
  text-decoration: none;
  text-align: left;
  color: #46404A;
}

.PostHeader a:hover, .PostHeader a.hovered
{
  font-family: Arial, Helvetica, Sans-Serif;
  text-decoration: none;
  text-align: left;
  color: #101723;
}
/* end PostHeader */

/* begin PostContent */
/* Content Text Font & Color (Default) */
body
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  color: #000000;
}

.PostContent
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  text-align: justify;
  color: #000000;
}

/* Start Content link style */
/*
The right order of link pseudo-classes: Link-Visited-Hover-Focus-Active.
http://www.w3schools.com/CSS/css_pseudo_classes.asp
http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states/
*/
a
{
  font-family: Arial, Helvetica, Sans-Serif;
  text-decoration: underline;
  color: #5C7FB7;
}

/* Adds special style to an unvisited link. */
a:link
{
  font-family: Arial, Helvetica, Sans-Serif;
  text-decoration: underline;
  color: #5C7FB7;
}

/* Adds special style to a visited link. */
a:visited, a.visited
{
  font-family: Arial, Helvetica, Sans-Serif;
  text-decoration: underline;
  color: #FF8214;
}

/* :hover - adds special style to an element when you mouse over it. */
a:hover, a.hover
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-style: normal;
  font-weight: bold;
  text-decoration: none;
  color: #1A181B;
}

/* Finish Content link style */

/* Resert some headings default style & links default style for links in headings*/
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited
{
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
}


/* Start Content headings Fonts & Colors  */
h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 28px;
  font-style: normal;
  font-weight: bold;
  text-align: left;
  color: #324A71;
}

h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 22px;
  font-style: normal;
  font-weight: bold;
  text-align: left;
  color: #436498;
}

h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 18px;
  font-style: normal;
  font-weight: bold;
  text-align: left;
  color: #534C57;
}

h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 16px;
  font-style: normal;
  font-weight: bold;
  text-align: left;
  color: #172335;
}

h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 14px;
  font-style: normal;
  font-weight: bold;
  text-align: left;
  color: #172335;
}

h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 14px;
  font-style: normal;
  font-weight: bold;
  text-align: left;
  color: #172335;
}
/* Finish Content headings Fonts & Colors  */

/* end PostContent */

/* begin PostBullets */
/* Start Content list */

ul
{
  list-style-type: none;
  color: #39343C;
  margin:0;
  padding:0;
}

li
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 12px;
}



.Post ul li
{
  padding:0px 0 0px 19px;
  background-image: url('images/PostBullets.png');
  background-repeat:no-repeat;
  margin:0.5em 0 0.5em 0;
  line-height:1.2em;
}


/* Finish Content list */
/* end PostBullets */

/* begin PostQuote */
/* Start blockquote */

blockquote p
{
  color:#312D34;
  font-family: Arial, Helvetica, Sans-Serif;
  font-style: italic;
  font-weight: normal;
  text-align: left;
}

blockquote
{
  border-color:#FFB06B;
  border-width: 0px;
  border-style: solid;

  margin:10px 10px 10px 50px;
  padding:5px 5px 5px 37px;

  background-color:#FFD6B3;

  background-image:url('images/PostQuote.png');
  background-position:left top;
  background-repeat:no-repeat;
}



/* Finish blockuote */
/* end PostQuote */

/* begin Button */
button.Button, a.Button
{
  position:relative;
  display:inline-block;
  width: auto;
  outline:none;
  border:none;
  background:none;
  line-height:34px;
  margin:0;
  padding:0;
  overflow: visible;
  cursor: default;
  text-decoration: none !important;
}


/*This HACK needed for ie7 (button position)*/
*:first-child+html button.Button, *:first-child+html a.Button
{
  display:list-item;
  list-style-type:none;
  float:left;
}


.Button .btn
{
  position: relative;
  overflow: hidden;
  display: block;
  width: auto;
  z-index: 0;
  height: 34px;
  color: #1C2A40;
  white-space: nowrap;
  float: left;
}

.Button .t
{
  height:34px;
  white-space: normal;
  padding: 0 21px;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  text-align: left;
  line-height: 34px;
  text-decoration: none !important;
}

input, select
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
}

.Button .active
{
  color: #EDECEE;
}

.Button .hover,  a.Button:hover
{
  color: #241100;
  text-decoration: none !important;
}

.Button .active .r
{
  top: -68px;
}

.Button .hover .r
{
  top: -34px;
}

.Button .r
{
  display: block;
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  right: 0;
  width: 11px;
  height: 102px;
}


.Button .r span
{
  display: block;
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  right: 0;
  width:411px;
  height: 102px;
}


.Button .active .l
{
  top: -68px;
}

.Button .hover .l
{
  top: -34px;
}

.Button .l
{
  display: block;
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  left: 0;
  right: 11px;
  height: 102px;
}


.Button .l, .Button .r span
{
  background-image: url('images/Button.png');
}

/* end Button */

/* begin Footer */
.Footer
{
  position:relative;
  z-index:0;
  overflow:hidden;
  width: 890px;
  margin: 5px auto 0px auto;
}

.Footer .Footer-inner
{
  height:1%;
  position: relative;
  z-index: 0;
  padding: 8px;
  text-align: center;
}

.Footer .Footer-background
{
  position:absolute;
  z-index:-1;
  background-repeat:no-repeat;
  background-image: url('images/Footer.png');
  width: 890px;
  height: 100px;
  bottom:0;
  left:0;
}



.rss-tag-icon
{
  position: relative;
  display:block;
  float:left;
  background-image: url('images/rssIcon.png');
  background-position: center right;
  background-repeat: no-repeat;
  margin: 0 5px 0 0;
  height: 25px;
  width: 25px;
}




.Footer .Footer-text p
{
  margin: 0;
}

.Footer .Footer-text
{
  display:inline-block;
  color:#2C4163;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 11px;
}

.Footer .Footer-text a:link
{
  text-decoration: none;
  color: #2F466A;
  font-family: Arial, Helvetica, Sans-Serif;
  text-decoration: underline;
}

.Footer .Footer-text a:visited
{
  text-decoration: none;
  color: #4E4752;
  font-family: Arial, Helvetica, Sans-Serif;
  text-decoration: underline;
}

.Footer .Footer-text a:hover
{
  text-decoration: none;
  color: #101723;
  font-family: Arial, Helvetica, Sans-Serif;
  text-decoration: none;
}
/* end Footer */

/* begin PageFooter */
.page-footer, .page-footer a, .page-footer a:link, .page-footer a:visited, .page-footer a:hover
{
  font-family:Arial;
  font-size:10px;
  letter-spacing:normal;
  word-spacing:normal;
  font-style:normal;
  font-weight:normal;
  text-decoration:underline;
  color:#86A0CA;
}

.page-footer
{
  margin:1em;
  text-align:center;
  text-decoration:none;
  color:#AAA2AE;
}
/* end PageFooter */

/* begin LayoutCell */
.contentLayout .sidebar1
{
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  overflow: hidden;
  width: 222px;
}

/* end LayoutCell */

/* begin LayoutCell */
.contentLayout .content
{
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  overflow: hidden;
  width: 445px;
}

/* end LayoutCell */

/* begin LayoutCell */
.contentLayout .sidebar2
{
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  overflow: hidden;
  width: 222px;
}

/* end LayoutCell */
NaN

Re: CSS Horizontal Menu - Aufgeklappte Menues verschwinden hinter Content

Post by NaN »

Sorry, hier ist leider nur der 3. Teil Deines Monster Posts angekommen.
Ohne Markup hilft das Fragment leider nicht weiter.
Außerdem, sagte ich
NaN wrote: [...]
den Ausschnitt aus Deinem Template / CSS postest.
[...]
Nicht die komplette Seite.
Das liest sich doch sonst kein Mensch durch.
Hast Du mal nen Link zum Anschauen?
ottyscom
Forum Members
Forum Members
Posts: 154
Joined: Tue Nov 13, 2007 12:01 am

Re: CSS Horizontal Menu - Aufgeklappte Menues verschwinden hinter Content

Post by ottyscom »

Hi,

Habe Dir den Link sobene per PN gesendet.

Habe schon viel mit dem Z-index rumgespielt aber leider immeer noch kein positives Ergebnis erzielt :-(

Danke
uniqu3

Re: CSS Horizontal Menu - Aufgeklappte Menues verschwinden hinter Content

Post by uniqu3 »

achte doch auf position:absolute oder relative; etc. aus deinem CSS ist nicht einfach einen durchblick zu finden ohne den restlichen Markup.
NaN

Re: CSS Horizontal Menu - Aufgeklappte Menues verschwinden hinter Content

Post by NaN »

Ein kleiner "Fehler" im Stylesheet.
Schau mal in Teil 1 Deiner Stylesheets:

.Sheet-body
{
  position: relative;
z-index: 0;
  margin: 5px;
}
Da dieser Div unter anderem auch das Menü enthält, aber den Index Null hat, kannst Du für das Menü einen Index definieren wie Du willst, es hat keinerlei Auswirkungen auf den Rest des Layouts.
Es wirkt nur innerhalb des .Sheet-body-Divs.
Also die Angabe für z-index an dieser Stelle rausnehmen.
Dann sollte alles okay sein.
Evtl. dürftest Du Dir dann die anderen Angaben mit z-index sparen können.
Lediglich für
/* begin ContentLayout */
.contentLayout
{
  margin-bottom: 5px;
  width: 890px;
  position: relative;
z-index:-1;
}
/* end ContentLayout */
bräuchtest Du einen negativen z-index, da dieser Bereich im Template erst nach dem Menü definiert wird.
(Ich habe mich jetzt allerdings nicht durch das komplette Layout durchgearbeitet. Könnte sein, dass die anderen z-index Angaben doch noch benötigt werden.)

Und dann würde ich soweit möglich die Seite noch etwas valider machen. (Sind nur kleine Fehler.)
Post Reply

Return to “Layout und Design”