NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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

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

Aktivity
Avatar
oorac
Člen
Avatar
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
Avatar
Ondřej Šrytr
Člen
Avatar
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
Avatar
oorac
Člen
Avatar
Odpovídá na Ondřej Šrytr
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
Avatar
Tomáš Maňhal
Člen
Avatar
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
Avatar
oorac
Člen
Avatar
Odpovídá na Tomáš Maňhal
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
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 5 zpráv z 5.