Autor Zpráva
tatyalien
Profil
Dobrý den,
chtěl jsme používat jiný styl "layoutu", který jsem nalezl na css příklady, mám ale problém, pokud do něj zakomponuji vysouvací menu (které funguje). Tak se mě po rozbalení zobrazí jen část. Nejspíš to dělá absolutně umístěné divy co jsou v layoutu, ale to jsem právě chtěl... Jde to nějak rozchodit, abych mohl pužít tento layout?

Layout se skládá:
horní menu - nehýbe se při skrolování
levé menu - nehýbe se při skrolování
pravé menu - nehýbe se při skrolování
střed - dinamický
patička

U starého layoutu, kde není horní menu atd na pevno, tak vše funguje... :(
Na barvy zde nekoukejte, mám to zatím jen pro lepší přehlednost, nestyloval jsem ho ještě...

Kód:
<!--Force IE6 into quirks mode with this comment tag-->
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic Drive: CSS Left, Top, Bottom and Right Frames Layout</title>
<style type="text/css">

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
font-size:62.5%;
}

#menu_leve, #menu_prave{
position: absolute; 
top: 0; 
left: 0; 
width: 175px; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: green;
color: white;
}

#menu_prave{
left: auto;
right: 0; 
width: 175px; /*Width of right frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#zahlavi, #zapati{
position: absolute;
top: 0; 
left: 175px; /*Set left value to WidthOfLeftFrameDiv*/
right: 175px; /*Set right value to WidthOfRightFrameDiv*/
width: auto;
height: 50px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: red;
color: white;
}

#zapati{
top: auto;
height: 30px; /*Height of bottom frame div*/
bottom: 0;
clear:both;
text-align:center;
}

#obsah{
position: fixed; 
top: 100px; /*Set top value to HeightOfTopFrameDiv*/
bottom: 20px; /*Set bottom value to HeightOfBottomFrameDiv*/
left: 175px; /*Set left value to WidthOfLeftFrameDiv*/
right: 175px; /*Set right value to WidthOfRightFrameDiv*/
overflow: auto; 
background: #fff;
}



* html body{ /*IE6 hack*/
padding: 120px 150px 100px 200px; /*Set value to (HeightOfTopFrameDiv WidthOfRightFrameDiv HeightOfBottomFrameDiv WidthOfLeftFrameDiv)*/
}

* html #obsah{ /*IE6 hack*/
height: 100%; 
width: 100%; 
}

* html #zahlavi, * html #zapati{ /*IE6 hack*/
width: 100%;
}

/* styl menu start...*/
/* style the outer div to give it width */
.menu {
	font-size:100%;
        width:1000px;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
	padding:0;
        margin:0;
        list-style-type:none;
        height:3em;
        background-color:transparent;
        /*background-color: #E0A90C;  */
}
.menu ul a.vybrane {
	display:block;
	text-decoration:none;
        color:green;
        background:#b5b3b5;
        font-weight: bold;
}
.menu ul ul li a.vybrane {
	display:block;
	text-decoration:none;
        color:green;
        background:#b5b3b5;
        font-weight: bold;
}
.menu ul ul ul li a.vybrane {
	display:block;
	text-decoration:none;
        color:green;
        background:#b5b3b5;
        font-weight: bold;
}
/* style the sub-level lists */
.menu ul ul {width:15em;}


/* float the top list items to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu ul li {float:left;height:3em;line-height:3em;}

/* style the sub level list items */
.menu ul ul li {display:block;width:12em;height:auto; line-height:1em;}



/* style the links for the top level */
.menu a, .menu a:visited {
	display:block;
        padding:0 1em 0 1em;
        float:left;
	height:100%;
        width:5.7em; /* šířka hlavního menu - buňky */
        font-weight: bold;
        text-decoration:none;
        color:#fff;
        background:#E0A90C;
        border-right:1px solid #000;
}

/* style the sub level links */
.menu ul ul a, .menu ul ul a:visited {
	display:block;
        background:#E0A90C;
        color:#fff;
        width:12em;
        height:100%;
        line-height:1em;
        padding:0.5em 1em;
        border:1px solid #000;
}
* html .menu ul ul a, * html .menu ul ul a:visited  {width:14em; w\idth:12em;}


/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; left:1px; top:0; width:0; height:0; font-size:1em; z-index:-1;}


/* style třetího vnoření */
.menu ul ul ul a, .menu ul ul ul a:visited {
	background:#E0A90C;
}
/* style čtvrtého vnoření */
.menu ul ul ul ul a, .menu ul ul ul ul a:visited {
	background:#E0A90C;
}
/* style zanoření level 1 */
.menu ul :hover a.sub1 {
	background:#b4be9c;
}
/* style zanoření sub level 2 */
.menu ul ul :hover a.sub2 {
	background:#c4ceac;
}
/* posun podmenu */
.menu ul :hover ul.left {
	left:-89px;
}
.menu ul :hover ul.left :hover ul {
	left:-183px;
}

/* style the level hovers */
/* first */
* html .menu a:hover {color:#000;background:#d4d8bd; position:relative; z-index:100;}
.menu li:hover {position:relative;}
.menu :hover > a {color:#000;background:#d4d8bd;}
/* second */
* html .menu ul ul a:hover{color:#000;background:#b4be9c; position:relative; z-index:110;}
.menu ul ul li:hover {position:relative;}
.menu ul ul :hover > a {color:#000;background:#b4be9c;}
/* third */
* html .menu ul ul ul a:hover {background:#c4ceac; position:relative; z-index:120;}
.menu ul ul ul :hover > a {background:#c4ceac;}
/* fourth */
.menu ul ul ul ul a:hover {background:#d4debc; position:relative; z-index:130;}


/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden;position:absolute;height:0;top:3em;left:0;width:14em;}

/* position the third level flyout menu */
.menu ul ul ul{left:12em;top:0;width:14em;}


/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{visibility:visible; height:auto; padding-bottom:3em; background:transparent url(images/trans.gif);}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{visibility:visible;}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {visibility:visible;}
</style>
</head>

<body>
<div id="zahlavi">
Záhlaví...
<div class="menu">
<ul>
	<li><a href="#">Výběr 1</a>
	<ul>
        <li><a href="#">položka 1</a></li>
        <li><a href="#">položka 2</a></li>
        <li><a href="#">položka 3</a></li>
    </ul>
    </li>
	<li><a href="#">Výběr 2</a>
	<ul>
        <li><a href="#">položka 1</a></li>
        <li><a href="#">položka 2</a></li>
        <li><a href="#">položka 3</a></li>
    </ul>
    </li>
</ul>
</div>
</div>

<div id="menu_leve">
Levé menu...
</div>

<div id="menu_prave">
Pravé menu...
</div>

<div id="obsah">

<h1>Dynamic Drive CSS Library</h1>
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
Dlouhý text<br />
</div>

<div id="zapati">
Zápatí
</div>

</body>
</html>
panther
Profil
tatyalien:
jestli chceš pomoct, dej sem místo 300 řádků kódu odkaz na web, kde to menu je zakomponované. Nebo si snad myslíš, že se tímhle bude někdo prohrabovat?
tatyalien
Profil
Menu které tam je použito je: Odkaz
Každopádně zde jsem dal přímo už vytvořené krátké menu, kód menu začíná na 85řádku a končí na 221 ale to menu funguje jak má, jen když se na něj najede, tak se zobrazí, ale layout, který je dinamický je "nad ním" a z části ho překrývá.

Jinak náhled stránky co je udaná v prvním příspěvku je zde: Odkaz
panther
Profil
tatyalien:
Menu které tam je použito je: Odkaz
tak znovu: dej sem odkaz na stránku, kde to menu nefunguje. Na odkazu uvedeném v [#3] je všechno funkční.

Nebo sem odkaz nedávej, je to tvoje věc. Pro mě se toto vlákno stane nezajímavým (přehrabovat se v tunách kódu a z funkční ukázky si domýšlet, proč tobě to za nějakých okolností nefunguje, nebudu).

Jediné, co vystřelím od boku ke zmínce o překrývání: z-index.
tatyalien
Profil
panther:
Odkaz je již daný v minulém příspěvku viz text:
Jinak náhled stránky co je udaná v prvním příspěvku je zde: Odkaz
panther
Profil
tatyalien:
přidej k div#zahlavi nějaký z-index, aby se dostal na obsah a odeber overflow: hidden.
Tori
Profil
Jak píše panther, je to z-index + overflow:hidden na div#zahlavi. Tohle by mohlo pomoci:
#zahlavi { overflow: visible !important; z-index: 1000;}


promiň duplicitu, panthere, neobjevil se mi oznam o novém příspěvku
tatyalien
Profil
Díky za pomoc ;) už to fachá...
Pomohlo dodání co radil Tori

#zahlavi { overflow: visible !important; z-index: 1000;}

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0