NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

Diskuze: Vysouvací menu koliduje s iframe

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Jakub Chán
Člen
Avatar
Jakub Chán:10.10.2016 8:52

Ahoj,
mám na stránce vlevo vysouvací vertikální menu. Je-li obsah stránky text, obrázek, tabulka ..... vysouvací menu se zobrazuje v pořádku (nad obsahem stránky). Je-li ovšem v obsahu .pdf (zkóušel jsem embed, iframe i object) vysouvací menu se schová za obsah stránky. Bohužel z-index v CSS na to nezabírá. Nějaké nápady? děkuji mockrát :-)

 
Odpovědět
10.10.2016 8:52
Avatar
Pavel Mareš
Tvůrce
Avatar
Pavel Mareš:10.10.2016 14:18

nějaký odkaz na web. verzi?

Editováno 10.10.2016 14:19
Nahoru Odpovědět
10.10.2016 14:18
Však ono půjde ...
Avatar
Jakub Chán
Člen
Avatar
Odpovídá na Pavel Mareš
Jakub Chán:10.10.2016 14:45

Ahoj, je to firemní intranet, kompletně offline. Slouží jen k centralizaci důležitých informací. Přidám kód, zda bude chtít někdo nahlédnout
:-)

 
Nahoru Odpovědět
10.10.2016 14:45
Avatar
Jakub Chán
Člen
Avatar
Jakub Chán:10.10.2016 14:50

<!DOCTYPE html>
<html lang="cs-cz">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EDGE"/>
<title>Intranet</ti­tle> <!--hlavicka v prohlizeci-->
<link rel="stylesheet" href="style.css" type="text/css" /> <!--propojeni se style sheetem-->
</head>

<body>
<table>
<tr>
<th colspan="2" class="namece­ll">INTRANET</th> <!--hlavicka-->
<th class="logoce­ll"><img class="logo" src="pictures/lo­go.png" alt="logo"></th>
</tr>
<tr class="podhla­vicka"> <!--podhlavicka-->
<td class="homecell"><a href="index.html"><img class="home" src="pictures/ho­me.png" alt="home"/></a></t­d>
<td class="homece­ll">TBD</td>
<td><a class="odkazdura" href="http://­www.duraauto.com">DU­RA WEB</a></td>
</tr>
<tr>
<td class="menucell"> <!--menu bunka-->
<ul class='menu'>
<li style='width:200px'><a href='kontakt­.html'>KONTAK­T</a></li>
<li style='width:200px'><a href='numbers­.html'>TELEFON­NÍ SEZNAM STK</a></li>
<li style='width:200px'><a href='http://­www.google.com'>IN­TERNET</a></li>

<li style='width:200px'>OD­KAZ2<span>></span>
<ul>
<li style='width:200px'><a href='/kubuntu/'>OD­KAZ2.1</a></li>
<li style='width:200px'><a href='/kubuntu/lu­cid/'>ODKAZ2.2</a></li>
<li style='width:200px'><a href='/kubuntu/kar­mic/'>ODKAZ2.3</a></li>
</ul>
</li>
<li style='width:200px'>OD­KAZ3<span>></span>
<ul>
<li style='width:200px'><a href='/3.1/'>OD­KAZ3.1</a></li>
<li style='width:200px'><a href='/3.2/'>OD­KAZ3.2</a></li>
<li style='width:200px'><a href='/3.3/'>OD­KAZ3.3</a></li>
</ul>
</ul>
</td>
<td class="obsah" colspan="2"> <!--obsah stranky-->
<article>
<header>
<h3>DURA Automotive</h3>
</header>
<section>
<h4>

</h4>
</section>
</article>
</td>
</tr>
<tr>
<td class="footer" colspan="3"><st­rong> 2016 </strong></td> <!--paticka-->
</tr>
</table>

</body>
</html>

Editováno 10.10.2016 14:50
 
Nahoru Odpovědět
10.10.2016 14:50
Avatar
Jakub Chán
Člen
Avatar
Jakub Chán:10.10.2016 14:52

CSS - týkající se menu

.menu li
{
position: relative;
}

.menu, .menu ul
{
padding: 0;
list-style-type: none;
margin-top: 0px;
}

.menu li
{
text-align: left;
/* padding: 0 2 0 10px;
height: 45px;
line-height: 30px;
background-color: #393939;
background-position: left top;
background-repeat: repeat-x;
display: block;
border-bottom: 1px;
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-style: solid;
border-color: white;

line-height: 50px;
color: white;
font-family: 'Arial';
font-size: 18px;
font-weight: normal;
font-style: normal;
text-decoration: none;
padding-left: 10px;
z-index: 0;
}

.menu a
{
text-decoration: none;
color: white;
display: block;
}

.menu li {
cursor: pointer;
}

.menu li span {
right: 8px;
font-style: italic;
position: absolute;
}

.menu ul {
visibility: hidden;
left: 0;
top: 0;
position: absolute;
}

.menu li:hover
{
background-color: black;
background-position: 0 -30px;
color: #f80
}

.menu li:hover>ul
{
visibility: visible;
top: 0px;
left: 100%;
z-index: 100;
}

 
Nahoru Odpovědět
10.10.2016 14:52
Avatar
Ján Timoranský
Tvůrce
Avatar
Odpovídá na Jakub Chán
Ján Timoranský:10.10.2016 15:00

Prosím ťa, že ma klame zrak a nemáš web robený cez tabuľku?? Sa ani nedivím, že ti to nejde, veď tabuľka je zlo, ktoré treba za splnu mesiaca zakopať presne 3 metre pod zem, 2 kroky na severových od 30 rokov starej vŕby za spevu lesních víl. Aspoň to hovorí legenda. Večer sa ti na to pozriem, nemaj strach ale tú tabuľku ti neodpustím...

Nahoru Odpovědět
10.10.2016 15:00
Find what you love and let it kill you.
Avatar
David Moškoř
Člen
Avatar
David Moškoř:10.10.2016 15:03

Tohle by ti mohlo fungovat:

<style media="print">
.menu ul li
{
display:none;
}
</style>

Pochopil jsem to tak, že když se obsah tiskne v PDF, tak se to stane. Možná, že jsem to pochopil špatně nevím.

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
10.10.2016 15:03
Život je příliš krátký na to, abyste vymýšleli smysluplné názvy proměnných...
Avatar
Jakub Chán
Člen
Avatar
Odpovídá na David Moškoř
Jakub Chán:10.10.2016 16:35

Děkuji Davide ;)
moc si vážím rady.

Btw - tohle je můj první projekt. Je to malý firemní intranet, sloužící pouze k centralizaci důležitých informací. Proto děkuji i Slovenskému příteli za podporu ;) ..... Zatím co jsi vymýšlel tuhle krásnou pohádku, David můj problém vyřešil ve čtyřech řádcích .... ještě jsem zapomněl zmínit, že problém přetrvával jen v IE. Nakonec se mi s Davidovou pomocí podařilo docílit můj záměr. ještě jednou díky ;-)

 
Nahoru Odpovědět
10.10.2016 16:35
Avatar
Ján Timoranský
Tvůrce
Avatar
Odpovídá na Jakub Chán
Ján Timoranský:10.10.2016 16:49

Som rád, že som potešil malou legendou :). Aj nabudúce :D

Nahoru Odpovědět
10.10.2016 16:49
Find what you love and let it kill you.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 9 zpráv z 9.