2. lecke (HTML5, CSS3, PHP5)


Két oszlopos tartalom létrehozása

Weboldalunk tartalmát szeretnénk két oszlopra bontani, ahogy az alábbi kép mutatja:


Másoljuk le a "main1.css" fájl ugyanoda "main2.css" néven, mert ezt fogjuk továbbfejleszteni. Szúrjuk be a "section" stílusbeállításai fölé a baloldali oszlop (a HTML tag majd "aside" lesz) stílusait! Itt az új jellemző a float:left;, aminek hatására az "aside" oszlop balra "úszik", s látszik, hogy a módosítandó jobboldali "section" oszlop is ugyanezzel bővült. Egészítsük ki, ezenkívül a szélességét is vegyük vissza 680 pixelre!

    /* Bal oldal stílusai középen*/
    aside {
        width:220px; float:left; margin-top:15px; padding-left:20px;
    }

    /* Jobb oldal (tartalom) stílusai  */
    section {
        width:680px; float:left; padding:0px 20px 0px 20px;
    }


Másoljuk le az "index1.php" fájlt is "index2.php" néven, majd tegyük a "section" fölé a baloldali oszlopot! Így:

    <aside>
        Ide írjunk valami szöveget
    </aside>

Ne felejtsük el kijavítani a <link rel='stylesheet' href='css/main1.css'> sort <link rel='stylesheet' href='css/main2.css'> -re!


Ha megnézzük az oldalt, már sejthető a két oszlop, de felfelé csúsztak, és látszólag eltűnt a lábrész is. Most - egyenlőre magyarázat nélkül - szúrjunk be még egy sort a weboldalunkba a <footer> fölé!

    <div style='clear:both;'></div>

Most pedig jöjjön ismét egy kis PHP

<?php
    include('incl/p2.inc');
?>

Ez tegyük az "Ide írjunk valami szöveget" helyébe, ahogy a szélesebb oszlopba is egy beszúrt szöveget "includoltunk"! S hogy ez működjön is, hozzuk létre a "p5.inc" fájl mellé a "p2.inc" fájlt az előbbi 1-2 bekezdéséből!


Ellenőrzésképpen ide teszem a módosított "index2.php" tartalmi részét egy kis kiegészítéssel.



Vissza a tanfolyam menüjére



Rohan az idő ...

Jön, jövöget: 2018

63053 perc még

Elérhetőség

Katt a képre!

Weboldalaim

Naptár

Névnap

Erzsébet napja van ma

Boldog névnapot kívánok!