Diskuze: oprava hitboxu tlačítka v menu

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

Aktivity

Neaktivní uživatel

Člen

Neaktivní uživatel:12.7.2017 22:35

Dobrý den, programuji si svojí stránku a všimnul jsem si že hitbox nebo jako to nazvat u dále rozbalujících se tlačítek je jen na horní polovině a na dolní polovinu se nedá kliknout jsem amatér a nemám tušení čím by to mohlo být a nebo jak to opravit přikládám zdroje: (základ menu jsem zkopíroval ale velmi jsem si ho upravil)
HTML:

<html>
        <head>
                <title>Prokop Randáček</title>
                <meta http-equiv="Content-Type" content="text/html;  charset=windows-1250">
                <link rel="stylesheet" type="text/css" href="../../../style/style.css" title="style">
                <style type="text/css" media="screen"> @import url("../../../styles.css"); </style>
                <style type="text/js" media="screen"> @import url("script.css"); </style>
                <!--[if lt IE 7]>
                        <style type="text/css" media="screen">
                                #menuh{float:none;}
                                body{behavior:url(csshover.htc); font-size:100%;}
                                #menuh ul li{float:left; width: 100%;}
                                #menuh a{height:1%;font:bold 0.7em/1.4em arial, sans-serif;}
                        </style>
                <![endif]-->
        </head>

        <body background="../../../images/bg.jpg">
        </br>
        </br>
                <div id="menuh-container" class="heading" >     <!--------MENU-------->
                        <div id="menuh">
                                <ul> <!--Kdo jsem-->
                                        <li><a href="../../../index.html">Kdo jsem?</a>
                                        </li>
                                </ul>

                                <ul> <!--Viry-->
                                        <li><a href="../../../xxxx/index.html" class="top_parent">xxxx</a>
                                                <ul>
                                                        <li><a href="../rodice/index.html" class="parent">Pro rodiče</a>
                                                                <ul>
                                                                        <li><a href="#">Before Windows</a></li>
                                                                        <li><a href="#" class="nohover">Další již brzy</a></li>
                                                                </ul>
                                                        </li>
                                                        <li><a href="#" class="parent">Trolling</a>
                                                                <ul>
                                                                        <li><a href="../../troll/dw/index.html">Double window</a></li>
                                                                        <li><a href="#" class="nohover">Další již brzy</a></li>
                                                                </ul>
                                                        </li>
                                                </ul>
                                        </li>
                                </ul>

                                <ul> <!--Hry-->
                                        <li><a href="../../../hry/index.html" class="top_parent">Hry</a>
                                                <ul>
                                                        <li><a href="../../../hry/rfm/index.html">Robots from Mars&nbsp;&nbsp;</a></li>
                                                        <li><a href="../../../hry/ms/index.html">Mikulášův slalom</a></li>
                                                </ul>
                                        </li>
                                </ul>

                                <ul> <!--Kontakt-->
                                        <li><a href="../../../kontakt.html">Kontakt</a></li>
                                </ul>
                        </div>
                </div>  <!--------MENU KONEC-------->
                <div id="obsah">
                <p>test</p>


                </div>
                </br></br></br></br></br>
                </body>
</html>

CSS1:

<?php header('Content-Type: text/css; charset=UTF-8'); ?>

#h1 {
        font-family: arial;
        font-size: 300%;
}

#heading {
    height: 42px;
    position: absolute;
    z-index: 1001;
    min-width: 800px;
    width: 90%;
    background: #25292C;
}

#menuh-container
        {
        position: absolute;
    top: 10%;
    left: 10%;
        width: 80%;
    background: #25292C;
        }

#menuh-container
        {
        position: absolute;
        }

#menuh
        {
        font-family: arial, helvetica, sans-serif;
        width:100%;
        font-size: 150%;
        }

#menuh a
        {
        text-align: center;
        display:block;
        margin: 1;
        padding: 0.6em;
        }

#menuh a:link, #menuh a:visited, #menuh a:active        /* menu at rest */
        {
        color: white;
        background-color: #25292C;
        text-decoration:none;
        }

#menuh a:hover                                          /* menu on mouse-over  */
        {
        color: white;
        background-color: #69C7E4;
        text-decoration:none;
        border-style: dashed;
        }

#menuh a.nohover                                                /* nezbarví se při přejetí myší  */
        {
        color: white;
        background-color: #25292C;
        text-decoration:none;
        border-style: none;
        }

#menuh a.top_parent, #menuh a.top_parent:hover
        {
        background-image: url(images/navdown_white.gif);
        background-position: right center;
        background-repeat: no-repeat;
        }

#menuh a.parent, #menuh a.parent:hover  /* attaches side-arrow to all parents */
        {
        background-image: url(images/nav_white.gif);
        background-position: right center;
        background-repeat: no-repeat;
        }

#menuh ul
        {
        list-style:none;
        margin:0;
        padding:0;
        float:left;
        width:9em;      /* width of all menu boxes */
        /* NOTE: For adjustable menu boxes you can comment out the above width rule.
        However, you will have to add padding in the "#menh a" rule so that the menu boxes
        will have space on either side of the text -- try it */
        }

#menuh li
        {
        position:relative;
        min-height: 1px;                /* Sophie Dennis contribution for IE7 */
        vertical-align: bottom;         /* Sophie Dennis contribution for IE7 */
        }

#menuh ul ul
        {
        position:absolute;
        z-index:500;
        top:auto;
        display:none;
        padding: 1em;
        margin:-1em 0 0 -1em;
        }

#menuh ul ul ul
        {
        top:0;
        left:100%;
        }

div#menuh li:hover
        {
        cursor:pointer;
        z-index:100;
        }

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}

#obsah {
        position: absolute;
        font-family: arial;
    top: 17%;
    left: 10%;
        width: 80%;
        background: #dbdbdb;
}

tento soubor jsem musel přidat na stránku (dle instrukcí na webu s touto šablonou na menu) nevím co to je ale bez něj menu nefunguje

<attach event="ondocumentready" handler="parseStylesheets" />
<script>
/**
 *      Whatever:hover - V1.41.050927 - hover & active
 *      ------------------------------------------------------------
 *      (c) 2005 - Peter Nederlof
 *      Peterned - http://www.xs4all.nl/~peterned/
 *      License  - http://creativecommons.org/licenses/LGPL/2.1/
 *
 *      Whatever:hover is free software; you can redistribute it and/or
 *      modify it under the terms of the GNU Lesser General Public
 *      License as published by the Free Software Foundation; either
 *      version 2.1 of the License, or (at your option) any later version.
 *
 *      Whatever:hover is distributed in the hope that it will be useful,
 *      but WITHOUT ANY WARRANTY; without even the implied warranty of
 *      MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 *      Lesser General Public License for more details.
 *
 *      Credits and thanks to:
 *      Arnoud Berendsen, Martin Reurings, Robert Hanson
 *
 *      howto: body { behavior:url("csshover.htc"); }
 *      ------------------------------------------------------------
 */

var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
        onhover:{on:'onmouseover', off:'onmouseout'},
        onactive:{on:'onmousedown', off:'onmouseup'}
}

function parseStylesheets() {
        if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
        window.attachEvent('onunload', unhookHoverEvents);
        var sheets = doc.styleSheets, l = sheets.length;
        for(var i=0; i<l; i++)
                parseStylesheet(sheets[i]);
}
        function parseStylesheet(sheet) {
                if(sheet.imports) {
                        try {
                                var imports = sheet.imports, l = imports.length;
                                for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
                        } catch(securityException){}
                }

                try {
                        var rules = (currentSheet = sheet).rules, l = rules.length;
                        for(var j=0; j<l; j++) parseCSSRule(rules[j]);
                } catch(securityException){}
        }

        function parseCSSRule(rule) {
                var select = rule.selectorText, style = rule.style.cssText;
                if(!csshoverReg.test(select) || !style) return;

                var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
                var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
                var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
                var affected = select.replace(/:(hover|active).*$/, '');
                var elements = getElementsBySelect(affected);
                if(elements.length == 0) return;

                currentSheet.addRule(newSelect, style);
                for(var i=0; i<elements.length; i++)
                        new HoverElement(elements[i], className, activators[pseudo]);
        }

function HoverElement(node, className, events) {
        if(!node.hovers) node.hovers = {};
        if(node.hovers[className]) return;
        node.hovers[className] = true;
        hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
        hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
        function hookHoverEvent(node, type, handler) {
                node.attachEvent(type, handler);
                hoverEvents[hoverEvents.length] = {
                        node:node, type:type, handler:handler
                };
        }

        function unhookHoverEvents() {
                for(var e,i=0; i<hoverEvents.length; i++) {
                        e = hoverEvents[i];
                        e.node.detachEvent(e.type, e.handler);
                }
        }

function getElementsBySelect(rule) {
        var parts, nodes = [doc];
        parts = rule.split(' ');
        for(var i=0; i<parts.length; i++) {
                nodes = getSelectedNodes(parts[i], nodes);
        }       return nodes;
}
        function getSelectedNodes(select, elements) {
                var result, node, nodes = [];
                var identify = (/\#([a-z0-9_-]+)/i).exec(select);
                if(identify) return [doc.getElementById(identify[1])];

                var classname = (/\.([a-z0-9_-]+)/i).exec(select);
                var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
                var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
                for(var i=0; i<elements.length; i++) {
                        result = tagName? elements[i].all.tags(tagName):elements[i].all;
                        for(var j=0; j<result.length; j++) {
                                node = result[j];
                                if(classReg && !classReg.test(node.className)) continue;
                                nodes[nodes.length] = node;
                        }
                }       return nodes;
        }
</script>

Předem děkuji za odpověď

Odpovědět

12.7.2017 22:35

Neaktivní uživatelský účet

Jiří Fencl

Člen

Jiří Fencl:13.7.2017 13:30

Cau,
pridej si do stylu:

#menuh a.parent,
#menuh a.top_parent{
position: relative;
z-index: 1000;
}

strucne receno : z-index urcuje poradi vrstev a kdyz ten rozbalovaci seznam ma vetsi cisllo, padding nahore, top je auto a nemas box-sizing: border-box tak ten vrchni padding prekryva tlacitko.

Pak toto

<style type="text/js" media="screen">

je snad z roku 1990, kdy pamatuju netscape a JSSS... dneska to snad ani zadnej prohlizec nepodporuje.

Pak jeste k tomu "krasnymu" borderu kolem tlacitek po hoveru : aby to neskakalo sem tam, tak pro obycejne acko dej uz border, ale border-color : transparent, pro hover jen pridej barvu.

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

13.7.2017 13:30

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 2 zpráv z 2.

Nejčastěji vyhledáváné

Diskuze: oprava hitboxu tlačítka v menu