Neregistrovaný Přihlásit Registrovat

Přidat otázku mezi oblíbenéZasílat nové odpovědi e-mailemVyřešeno HTML - <frameset...>...

Dobrý deň,

momentálne sa hrám kus s html, teda s tvorbou webstránok, dám vam sem kúsok kódu:

<html>

<head>
    <meta charset="UTF-8">
    <title>
        Web
    </title>
    <frameset rows="100,*">
        <frame src="hlavicka.html" name="hlavicka" scrolling="no" noresize>
            <frameset cols="170,*,150">
                <frame src="menu.html" name="menu" scrolling="no" noresize>
                    <frame src="obs/uvod.html" name="obsah" noresize>
                        <frame src="reklama.html" name="reklama" scrolling="no" noresize>
                        </frame>
                    </frame>
                </frame>
            </frameset>
        </frame>
    </frameset>
</head>

</html>

Vím že sa neodporúča velmi delať rozloženie webstránky pomocou framou, ale napadlo ma ako skryť tie frami aby tam boly ale jakoby neviditelné (radu frameborder="0" vynechajte)
Prípadne jaký iný spôsob než frameset by ste mi odporučily ak chci mať zvyšok (obsah) webstránky mimo súboru index.html, samozrejme klidne aj s CSS nebo JS, no nejvíc bych rád to rešil cez frameset. Zvyšok mám už prakticky takmer hotový.
Dík vopred za help.

Jsou zobrazeny jen nové odpovědi. Zobrazit všechny
Předmět Autor Datum
tak momentálne mám to takto: index.html <html> <head> <meta charset="UTF-8"> <title> Web </title>…
Mlocik97 28.08.2016 16:26
 Mlocik97
https://cs.webdev.wiki/howto/trisloupcovy-layout.h tml
Wikan 28.08.2016 16:39
 Wikan
Tak mám to hotové, kód mám presne takto: index.html <html> <head> <meta charset="UTF-8"> <title> W… nový
Mlocik97 29.08.2016 13:43
 Mlocik97
nejak definovať pre stĺpce aby dĺžka byla "100% - 100px"... Lze zařídit pomocí calc() v CSS, viz č… nový
Pavel 29.08.2016 21:19
 Pavel
Na calc bacha. Není podporovaný v Android browseru 4.x. nový
Wikan 29.08.2016 21:22
 Wikan
Aha, díky za rozšíření obzorů. Netušil jsem. nový
Pavel 29.08.2016 21:38
 Pavel
tak mám momentálne tento kód: index.html <html> <head> <meta charset="UTF-8"> <title> Web </title>… poslední
Mlocik97 29.08.2016 22:13
 Mlocik97

tak momentálne mám to takto:

index.html

<html>

<head>
    <meta charset="UTF-8">
    <title>
        Web
    </title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div id="hlavicka">
        <iframe src="hlavicka.html" width="100%" height="100%">
        </iframe>
    </div>
    <div id="menu">
        <iframe src="menu.html" width="100%" height="100%">
        </iframe>
    </div>
    <div id="obsah">
        <iframe src="obs/uvod.html" width="100%" height="100%">
        </iframe>
    </div>
    <div id="reklama">
        <iframe src="reklama.html" width="100%" height="100%">
        </iframe>
    </div>
</body>

</html>

style.css

#hlavicka {position: relative; width: 100%; height: 100px; top: 0px; left: 0px}
#menu {position: relative; width: 200px; top: 0px; left: 0px}
#obsah {position: relative; width: *; top: 0px; left: 0px}
#reklama {position: relative; width: 150px; top: 0px; left: 0px}

už len potrebujem aby iframi menu, obsah a reklama boli vedla seba a ne podsebou, pomocou absolute som to vedel spraviť, ale blbo sa to pasovalo, pomocou relative mam ale kusok problem s tým že práve všetko mám pod sebou. Všetok obsah už mám hotový. Teraz když tak rozmýšlam tak podla IQ37 bych to mohol spraviť, je to podla Vás dobrá volba? Do budúcna bych chtel porešiť bootstrap, když pak zmením rozloženie.

Tak mám to hotové, kód mám presne takto:

index.html

<html>

<head>
    <meta charset="UTF-8">
    <title>
        Web
    </title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div class="web">
        <div class="hlavicka">
            <iframe src="hlavicka.html" width="100%" height="100%">
            </iframe>
        </div>
        <div class="menu">
            <iframe src="menu.html" width="100%" height="100%">
            </iframe>
        </div>
        <div class="reklama">
            <iframe src="reklama.html" width="100%" height="100%">
            </iframe>
        </div>
        <div class="obsah">
            <iframe src="obs/uvod.html" width="100%" height="100%">
            </iframe>
        </div>
    </div>
</body>

</html>

style.css

.web{
    width: 100%;
    margin: auto;
    border: 1px #f2f2f2;
}
.hlavicka{
    width: 100%;
    height: 100px;
}
.menu{
    width: 200px;
    height: 100%;
    float: left;
}
.reklama{
    width: 150px;
    height: 100%;
    float: right;
}
.obsah{
    margin-left: 200px;
    margin-right: 150px;
}

dál bych potreboval nejak definovať pre stĺpce aby dĺžka byla "100% - 100px"... alebo ešte lepšie nejak tak aby slpce končily presne jak končí obrazovka, tzv. nebolo scrollovanie teda krom vínimky že by som scrollovanie mal iba vo framu "obsah".

tak mám momentálne tento kód:

index.html

<html>

<head>
    <meta charset="UTF-8">
    <title>
        Web
    </title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div class="web">
        <div id="hlavicka">
            <iframe src="hlavicka.html" width="100%" height="100%">
            </iframe>
        </div>
        <div class="menu" id="horizontal-menu">
            <iframe src="horizontal-menu.html" width="100%" height="100%">
            </iframe>
        </div>
        <div class="content">
            <div class="menu" id="vertical-menu">
                <iframe src="vertical-menu.html" width="100%" height="100%">
                </iframe>
            </div>
            <div class="obsah">
                <div class="menu" id="obs">
                    <iframe src="obs/uvod.html" width="100%" height="100%">
                    </iframe>
                </div>
                <div id="copyright">
                    <iframe src="copyright.html" width="100%" height="100%">
                    </iframe>
                </div>
            </div>
            <div id="right-sidebar">
                <iframe src="right-sidebar.html" width="100%" height="100%">
                </iframe>
            </div>
        </div>
    </div>
</body>

</html>

style.css

.web{
    position: relative;
    height: 100%;
    width: 100%;
}
#hlavicka{
    position: relative;
    height: 100px;
    width: 100%;
}
#horizontal-menu{
    position: relative;
    height: 40px;
    width: 100%;
}
.content{
    position: relative;
    height: calc(100% - 140px);
    width: 100%;
}
#vertical-menu{
    position: relative;
    height: calc(100%);
    width: 200px;
    top: 0px;
    left: 0px;
    float: left;
}
.obsah{
    position: relative;
    height: calc(100%);
    width: calc(100% - 350px);
    top: 0px;
    left: 0px;
    float: left;
}
#obs{
    position: relative;
    height: calc(100% - 20px);
    width: 100%;
    top: 0px;
    left: 0px;
    float: left;
}
#copyright{
    position: relative;
    height: 20px;
    width: 100%;
    top: 0px;
    left: 0px;
}
#right-sidebar{
    position: relative;
    height: 100%;
    width: 150px;
    top: 0px;
    right: 0px;
    float: right;
}

a funguje to dokonale, presne tak jak chci, aspoň zatím v prohlížeči chrome, GS a FF,... presne je rozloženie také aké presne chcem....

[img=http://s18.postimg.org/jplrpt5bd/screenshot_320.png]http://s18.postimg.org/jplrpt5bd/screenshot_320.pn g[/img]

Zpět do poradny Odpovědět na původní otázku Nahoru