2. Fórumok
  3. Szoftverfejlesztés
  4. Weblap készítés
  5. (kiemelt téma)

Új hozzászólás Aktív témák

  • #16252 Gave addikt hiperFizikus #16246
    Új Válasz #16252
    Új hozzászólás
    Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra
    Privát üzenet küldése

    Gave

    addikt

    válasz hiperFizikus #16246 üzenetére

    Ehhez amit szeretnél elvileg elég 1db iframe. Gyorsan az alábbit dobtam össze, a könyvtárat, és HTML fájlokat tedd hozzá.

    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>

    html,body {
    margin: 0;
    padding: 0;
    height: 100%;
    }
    .col {
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    margin-left: -.25em;
    padding: 1.5em;
    }

    #oldal {
    position: relative;
    padding-left: 30%;
    }

    #tartalomjegyzek {
    width: 30%;
    background: #eee;
    border-right: 1px solid #ddd;
    position: fixed;
    bottom: 0;
    left: 0;
    top: 0;
    overflow-y: auto;
    min-width: 10em;
    z-index: 999;
    }

    #fokusz {
    position: relative;
    height: 0;
    overflow: hidden;
    padding: 0 0 100%;
    }

    #oldaltartalom {
    width: 100%;
    }

    iframe[name="f1"] {
    border: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    }

    @media screen and (max-width: 1280px){
    #tartalomjegyzek {
    width: 25%;
    }
    }

    @media screen and (max-width: 640px){
    #tartalomjegyzek {
    width: 33%;
    }
    }

    </style>
    </head>
    <body>
    <div id="oldal">
    <div id="tartalomjegyzek" class="col">
    <h3>Tartalomjegyzék</h3>
    <ul>
    <li><a href="konyvtar/oldal1.html" target="f1">1. oldal</a></li>
    <li><a href="konyvtar/oldal2.html" target="f1">2. oldal</a></li>
    <li><a href="konyvtar/oldal3.html" target="f1">3. oldal</a></li>
    </ul>
    </div>
    <div id="oldaltartalom" class="col">
    <header>
    <h1>Oldal Címe</h1>
    <h2>Alcíme...</h2>
    </header>
    <div id="fokusz">
    <iframe name="f1" src="konyvtar/kezdooldal.html">
    <!--DNT-->
    Ha ezt látja, az ön kliense nem támogatja az iframe elemeket.
    </iframe>
    </div>
    </div>
    </div>
    </body>
    </html>

    Egyébként így szerkeszteni egy oldalt hamar unalmassá fog válni szerintem, így talán neked is egy tartalom kezelőben kellene gondolkodni.

    inline frame egyik problémája sajnos, hogy alapvetően nem kapta meg a funkciót, hogy a tartalma alapján layouthoz tudjon igazodni magasságban, ezt egy kis scripteléssel lehet leginkább korrigálni, a CSS ami itt van messze nem tökéletes...csak szemléltetésnek írtam hozzá.

    Ideális esetben egy szerver oldali sablon generátorral tudnál gyorsan statikus oldalakat kiállítani. A frameset és frame megoldás elavult.

    Here? For folks like us? Wrong city.., wrong people

Új hozzászólás Aktív témák