Diskuze: rozbalovací menu stylované externím CSS v PHP

oorac

Člen

oorac:18.9.2020 12:15

Ahoj,
prosím o radu.
Tvořím si jednu testovací stránku. Mám to na localhost:8080 (nevím, jestli to s tím může souviset). Každopádně, když si vložím html kód do .html souboru a k němu připojím .css styl, tak se mi krásně zobrazí vše tak, jak jsem si nastyloval. Pokud to stejný udělám v .php souboru, tak se mi to prostě nezobrazuje vůbec tak, jak by mělo. V čem může být prosím problém? Hledám příčinu / řešení už 2 dny na netu a nic nepomáhá.
Děkuji

Zkusil jsem: Hledal jsem na google, hledal jsem zde na ITnetwork, ale nic jsem nenašel. Pracuji v php, kde mám html tagy a připojuji standardním způsobem <link rel="stylesheet" href="css/moje.css"> tento styl, ale výsledek je stránka bez stylování. už jsem zkoušel vložit i type = text/css, ale nepomohlo. Pracuji v PHP 7.4.0

Chci docílit: Chtěl bych vytvořit rozbalovací menu. Místo toho se mi kategorie zobrazují vedle ikony, která by měla mít v sobě v rozbalovacím menu tyto kategorie.

Odpovědět

18.9.2020 12:15

Ondřej Šrytr

Člen

Ondřej Šrytr:18.9.2020 12:53

Ahoj,

nejlepší asi bude, když nám se vložíš svůj kód. :-) Takhle těžko říct, proč by to nemohlo fungovat.

Nahoru Odpovědět

18.9.2020 12:53

oorac

Člen

oorac:18.9.2020 13:17

Spíše jsem očekával, že by mi tu někdo poradil, co je potřeba nastavit Každopádně zde přikládám index.php a moje.css - je to zatím v pracovní verzi, protože je to čerpáno z bootstrapu.

<body>
<div class="tg-haslayout">
                <header class="tg-haslayout">
                        <div class="container">
                                <div>
                                        <div>
                                                <nav>
                                                        <div class="tg-addnav">
                                <div>
                                        <li>
                                            <a href="#"><i class="fa fa-navicon"></i></a>
                                            <ul>
                                                <li><a href="#">O nás</a></li>
                                                <li><a href="#">Zakoupit členství</a></li>
                                                <li><a href="#">Statistiky</a></li>
                                                <li><a href="#">Ceník</a></li>
                                                <li><a href="#">Kontakt</a></li>
                                            </ul>
                                        </li>

                                </div>
                                                        </div>
                                                </nav>
                                        </div>
                                </div>
                        </div>

                </header>
        </div>
</body>

css:

body {
        position: relative;
        height: 100%;
        color: #373542;
        background:silver;
        overflow-x:hidden;
        font:400 14px/20px 'Open Sans', Arial, Helvetica, sans-serif;
}
.fa-facebook:before {content:"\f09a"}
.fa-instagram:before {content:"\f16d"}
.fa-navicon:before {content:"\f0c9"}
@font-face {
    font-family:'FontAwesome';
        src:url('../fonts/fontawesome-webfont5b62.eot?v=4.6.3');
        src:url('../fonts/fontawesome-webfontd41d.eot?#iefix&v=4.6.3')
        format('embedded-opentype'),url('../fonts/fontawesome-webfont5b62.woff2?v=4.6.3')
        format('woff2'),url('../fonts/fontawesome-webfont5b62.woff?v=4.6.3')
        format('woff'),url('../fonts/fontawesome-webfont5b62.ttf?v=4.6.3')
        format('truetype'),url('../fonts/fontawesome-webfont5b62.svg?v=4.6.3#fontawesomeregular')
        format('svg');font-weight:normal;font-style:normal
}
.fa {
    display:inline-block;
        font:normal normal normal 14px/1 FontAwesome;
        font-size:inherit;
        text-rendering:auto;
        -webkit-font-smoothing:antialiased;
        -moz-osx-font-smoothing:grayscale
}
.tg-socialicons{
        float:right;
        list-style: none;
        text-align:center;
        line-height:16px;
}
.tg-socialicons li{
        float: left;
        padding: 0 18px;
        position:relative;
        list-style-type: none;
}
.tg-wrapper{
        height:100%;
        position:relative;
        overflow-x:hidden;
}
.tg-socialicons li a i{
        color: #fff;
        display:block;
        line-height:16px;
    font-size:15px;
}
.tg-addnav{
        float:left;
        z-index:22;
        font-size:16px;
        line-height:16px;
        position:relative;
        text-transform:uppercase;
        font-family:'Oswald', Arial, Helvetica, sans-serif;
}
.tg-addnav ul{
        float:left;
        list-style:none;
        line-height:inherit;
}
.tg-addnav ul li{
        float:left;
        padding:0 17px;
        position:relative;
        line-height:inherit;
        list-style-type:none;
}
.tg-addnav > ul > li + li:before{
        bottom:0;
        left:0;
        width:1px;
        height:1px;
        content:'';
        position:absolute;
}
.tg-addnav > ul > li > div >a,
.tg-addnav > ul > li > a{
        color:#fff;
        display:block;
        line-height:inherit;
}
.tg-navigation .tg-colhalf:after{
        top:0;
        content:'';
        height:1px;
        width:9999px;
        background:#aeaeae;
        position:absolute;
}
.tg-navigation{
        width:100%;
        float:left;
        padding:0;
        text-transform:uppercase;
        font:16px/16px'Oswald', Arial, Helvetica, sans-serif;
}
.tg-navigation .tg-colhalf:first-child:after{right:70px;}
.tg-navigation .tg-colhalf:last-child:after {left: 70px;}
.tg-navigation ul{
        float:right;
        z-index:21;
        line-height:16px;
        list-style:none;
        position:relative;
}
.tg-navigation .tg-colhalf + .tg-colhalf ul{float:left;}
.tg-navigation ul li{
        float:left;
        line-height:16px;
        position:relative;
        padding:20px 17px;
        list-style-type:none;
}
.tg-navigation ul li:after{
        position:absolute;
        content:'';
        left:0;
        top:1px;
        width:0;
        height:1px;
        background:#aeaeae;
}
.tg-navigationm-mobile{ display:none !important;}
.tg-navigation{
        width:100%;
        float:left;
        padding:0;
        text-transform:uppercase;
        font:16px/16px'Oswald', Arial, Helvetica, sans-serif;
}
.tg-navigation .tg-colhalf{
        position:relative;
        padding:0 70px 0 0;
}
.tg-navigation .tg-colhalf + .tg-colhalf{padding:0 0 0 70px;}
.tg-navigation .tg-colhalf:after{
        top:0;
        content:'';
        height:1px;
        width:9999px;
        background:#aeaeae;
        position:absolute;
}
.tg-navigation .tg-colhalf:first-child:after{right:70px;}
.tg-navigation .tg-colhalf:last-child:after {left: 70px;}
.tg-navigation ul{
        float:right;
        z-index:21;
        line-height:16px;
        list-style:none;
        position:relative;
}
.tg-navigation .tg-colhalf + .tg-colhalf ul{float:left;}
.tg-navigation ul li{
        float:left;
        line-height:16px;
        position:relative;
        padding:20px 17px;
        list-style-type:none;
}
.tg-navigation ul li:after{
        position:absolute;
        content:'';
        left:0;
        top:1px;
        width:0;
        height:1px;
        background:#aeaeae;
}
.tg-navigation ul li.active:after,
.tg-navigation ul li:hover:after{width:100%;}
.tg-navigation > div > ul > li + li:before{
        bottom:20px;
        left:-1px;
        width:2px;
        height:2px;
        content:'';
        position:absolute;
}
.tg-navigation ul li a{
        color:#fff;
        line-height:16px;
}
.tg-navigation ul li ul{
        top:120%;
        left:0;
        margin:0;
        width:230px;
        opacity:0;
        visibility:hidden;
        background:#302e39;
        position:absolute;
}
.tg-navigation ul li ul li{
        width:100%;
        padding:0;
}
.tg-navigation ul li ul li a{
        padding:15px 30px;
        display:block;
        position:relative;
}
.tg-navigation ul li ul li.tg-dropdown a:before{
        top:50%;
        right:30px;
        margin:-7px 0 0;
        content:'\f105';
        font-size:14px;
        line-height:14px;
        position:absolute;
        font-family:'FontAwesome';
}
.tg-navigation ul > li > ul > li.active > a,
.tg-navigation ul > li > ul > li.active > a,
.tg-navigation ul > li > ul > li:hover > a,
.tg-navigation ul > li > ul > li > a:hover{
        background:#373542;
        padding:15px 30px 15px 40px;
}
.tg-navigation ul li ul li ul{
        top:0;
        left:120%;
        opacity:0;
        visibility:hidden;
}
.tg-navigation ul > li:hover > ul,
.tg-navigation ul > li > ul > li:hover > ul{
        opacity:1;
        visibility:visible;
}
.tg-navigation ul > li:hover > ul{top:100%;}
.tg-navigation ul > li > ul > li:hover > ul{
        top:0;
        left:100%;
}
.tg-close{
        top:50px;
        right:50px;
        z-index:2;
        cursor:pointer;
        font-size:18px;
        line-height:14px;
        position:absolute;
}
.tg-navigation{display:block;}
.tg-navigation ul li.active:after,
.tg-navigation ul li:hover:after{width:100%;}
.tg-navigation > div > ul > li + li:before{
        bottom:20px;
        left:-1px;
        width:2px;
        height:2px;
        content:'';
        position:absolute;
}
.tg-navigation ul li a{
        color:#fff;
        line-height:16px;
}
.tg-navigation ul li ul{
        top:120%;
        left:0;
        margin:0;
        width:230px;
        opacity:0;
        visibility:hidden;
        background:#302e39;
        position:absolute;
}
.tg-navigation ul li ul li{
        width:100%;
        padding:0;
}
.tg-navigation ul li ul li a{
        padding:15px 30px;
        display:block;
        position:relative;
}
.tg-navigation ul li ul li.tg-dropdown a:before{
        top:50%;
        right:30px;
        margin:-7px 0 0;
        content:'\f105';
        font-size:14px;
        line-height:14px;
        position:absolute;
        font-family:'FontAwesome';
}
.tg-navigation ul > li > ul > li.active > a,
.tg-navigation ul > li > ul > li.active > a,
.tg-navigation ul > li > ul > li:hover > a,
.tg-navigation ul > li > ul > li > a:hover{
        background:#373542;
        padding:15px 30px 15px 40px;
}
.tg-navigation ul li ul li ul{
        top:0;
        left:120%;
        opacity:0;
        visibility:hidden;
}
.tg-navigation ul > li:hover > ul,
.tg-navigation ul > li > ul > li:hover > ul{
        opacity:1;
        visibility:visible;
}
.tg-navigation ul > li:hover > ul{top:100%;}
.tg-navigation ul > li > ul > li:hover > ul{
        top:0;
        left:100%;
}

Nahoru Odpovědět

18.9.2020 13:17

Tomáš Maňhal

Člen

Tomáš Maňhal:18.9.2020 13:51

Máš nějaký nepořádek ve struktuře stránky, hlavičku vnořenou do těla, to je špatně. Z přiložených kódů není vidět ani hlavička dokumentu, kde bys měl mít CSS soubory definované a ani PHP. Pokud s weby teprve začínáš, nedoporučuju rovnou skákat do hotové šablony na Bootstrapu a tu upravovat. Máš v tom pak zmatek.

Nahoru Odpovědět

18.9.2020 13:51

oorac

Člen

oorac:18.9.2020 14:14

Tomáš Maňhal: nezačínám s weby, psal jsem, že je to převzato z bootstrapu. Je to jen úryvek. Je to pracovní verze. Každopádně problém jsem vyřešil. Bylo potřeba :hover dát do popředí ve stylu a už to funguje. Bohužel tohle není můj výmysl. Je to požadavek klienta, který si našel webtemplates a chce na to napojit funkční web. Takže to přepisuji do PHP. To je ten důvod Každopádně problém je vyřešen. Díky.

Nahoru Odpovědět

18.9.2020 14:14