2. Fórumok
  3. Szoftverfejlesztés
  4. CSS topic

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

  • #887 Dreamweaver7 csendes tag Forza_JUVE #884
    Új Válasz #887
    Ú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

    Dreamweaver7

    csendes tag

    válasz Forza_JUVE #884 üzenetére

    Szia!

    Nekem is van még mit tanulnom HTML/CSS terén és a kérdésedre nem tudom igazán a választ. Ha ilyesmi két oszlopos elrendezést szeretnél, amilyet írtál, gondolkodj el az alábbi megoldáson, lehet megfelel neked is.

    A HTML:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="author" content="Dreamweaver7">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/>
    <title>Teszt HTML oldal</title>
    <link href="test.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="page_container">
    <div id="header">
    <p>Fejléc</p>
    </div>
    <div id="middle_section">
    <div id="content_right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra mi ac massa euismod in imperdiet metus tempor. Phasellus vestibulum varius dolor vel molestie. Duis rutrum metus non purus varius eget porttitor leo ultricies. In sed odio sed nibh interdum ultricies in id dolor. Donec euismod augue vel lacus luctus blandit.</p>
    </div>
    <div id="content_left">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra mi ac massa euismod in imperdiet metus tempor. Phasellus vestibulum varius dolor vel molestie. Duis rutrum metus non purus varius eget porttitor leo ultricies. In sed odio sed nibh interdum ultricies in id dolor. Donec euismod augue vel lacus luctus blandit. Donec vel felis felis, sed vestibulum nibh. Maecenas mattis tortor in sapien tempus ut sagittis est tincidunt. Duis sed dolor leo, eu dictum tortor.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra mi ac massa euismod in imperdiet metus tempor. Phasellus vestibulum varius dolor vel molestie. Duis rutrum metus non purus varius eget porttitor leo ultricies. In sed odio sed nibh interdum ultricies in id dolor. Donec euismod augue vel lacus luctus blandit. Donec vel felis felis, sed vestibulum nibh. Maecenas mattis tortor in sapien tempus ut sagittis est tincidunt. Duis sed dolor leo, eu dictum tortor.</p>
    </div>
    <div class="clearer">
    </div>
    </div>
    <div id="footer">
    <p>Lábléc</p>
    </div>
    </div>
    </body>
    </html>

    A CSS:

    body,div,html,p
    {
    border: none;
    padding:0;
    margin:0;
    }

    .clearer
    {
    clear:both;
    }

    #page_container
    {

    }

    #header
    {
    background-color:#333333;
    color:#ffffff;
    font-size:40px;
    height:100px;
    text-align:center;
    width:auto;
    }

    #middle_section
    {
    background-color:#00ff00;
    margin:0 0 0 0;
    }

    #footer
    {
    background-color:#666666;
    color:#ffffff;
    font-size:40px;
    height:100px;
    text-align:center;
    width:auto;
    }

    #content_left
    {
    background-color:#009900;
    float:none;
    margin:0 200px 0 0;
    }

    #content_right
    {
    background-color:#00bb00;
    float:right;
    width:200px;
    }

    Képernyőfotók keskeny és széles ablakkal, így ugyanúgy látszik a viselkedése, mintha valamelyik oszlopba több vagy éppen kevesebb szöveget tennénk:

    Az oszlopok viselkedése széles ablaknál

    Az oszlopok viselkedése széles ablaknál

    Az oszlopok viselkedése keskeny ablaknál

    Az oszlopok viselkedése keskeny ablaknál

    Én ilyen megoldást tudok rá, de én is még tanulom a HTML/CSS-t. :K

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