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

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

  • #896 Dreamweaver7 csendes tag Lacces #895
    Új Válasz #896
    Ú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 Lacces #895 üzenetére

    Szívesen, örülök, hogy segíthettem. :)

  • #894 Dreamweaver7 csendes tag Lacces #893
    Új Válasz #894
    Ú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 Lacces #893 üzenetére

    A "miniblock" osztály float:left tulajdonsága miatt a "miniblocks" azonosítójú div magassága 0 px, azért nem látszik.

    A "<div class="clear"></div>" részt tedd be a "miniblocks" azonosítójú div végére így:

    <body >
    <div id="wrapper">
    <div id="content">

    <div id="logo">

    </div>

    <div class="clear"></div>

    <div id="miniblocks" >
    <div class="miniblock">
    <span>Teszt1</span>
    <p>
    A Lorem Ipsum egy egyszerû szövegrészlete, szövegutánzata a betûszedõ és nyomdaiparnak. A Lorem Ipsum az 1500-as évek óta standard szövegrészletként szolgált az iparban; mikor egy ismeretlen nyomdász összeállította a betûkészletét és egy példa-könyvet vagy szöveget nyomott papírra, ezt használta. ...<a href="#">részletek&raquo&raquo</a></p>

    </div>
    <div class="miniblock">
    <span>Teszt2</span>
    <p>
    A Lorem Ipsum egy egyszerû szövegrészlete, szövegutánzata a betûszedõ és nyomdaiparnak. A Lorem Ipsum az 1500-as évek óta standard szövegrészletként szolgált az iparban; mikor egy ismeretlen nyomdász összeállította a betûkészletét és egy példa-könyvet vagy szöveget nyomott papírra, ezt használta. .. <a href="#">részletek&raquo&raquo</a></p>

    </div>
    <div class="miniblock">
    <span>Teszt3</span>
    <p>
    A Lorem Ipsum egy egyszerû szövegrészlete, szövegutánzata a betûszedõ és nyomdaiparnak. A Lorem Ipsum az 1500-as évek óta standard szövegrészletként szolgált az iparban; mikor egy ismeretlen nyomdász összeállította a betûkészletét és egy példa-könyvet vagy szöveget nyomott papírra, ezt használta. ...<a href="#">részletek&raquo&raquo</a></p>

    </div>
    <div class="clear"></div>
    </div>



    </div><!-- end of content -->
    </div><!-- end of wrapper -->
    </body>

    Így már látszik a fehér háttér, kipróbáltam. :K

    szerk: A span tulajdonságaihoz tedd hozzá a "display:block;" sort, így középre igazodik.

  • #889 Dreamweaver7 csendes tag Forza_JUVE #888
    Új Válasz #889
    Ú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 #888 üzenetére

    Szívesen, amit linkeltél, az sokkal profibb megoldás, mint az enyém, köszi, könyvjelzőztem. :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

  • #883 Dreamweaver7 csendes tag szmegma #882
    Új Válasz #883
    Ú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 szmegma #882 üzenetére

    Igen, a HTML-ben lévőre, ott is az inline CSS-re, ez a sorközi, bár inline-nak nevezni jobb. A W3Schools stíluslapokkal foglalkozó oldalán sok információt megtalálsz a CSS kiértékelési sorrendjével kapcsolatban is, ajánlom elolvasni.

    Egyébként lehet a HTML-ben CSS nyugodtan, csak vigyázni kell vele. Kis weblapoknál nem probléma, mert fejben tartható, mit hova tett az ember, de már egy pár oldalból álló lap esetén is érdemes inkább külső fájlba tenni. Sokkal átláthatóbb lesz és sokkal könnyebben megtalálja az ember az esetleges hibákat.

    Én is jártam már úgy, hogy lusta voltam a külső CSS-be új osztályt, azonosítót adni egy-egy elemnek, hanem csak beírtam a HTML elemebe a style="" meghatározást, azután később sokáig keresgéltem, hogy ez miért is így néz ki vajon, ahogy nem kellene.

    Szóval a lényeg az, hogy a programkód legyen átlátható és követhető, az elnevezések pedig kifejezőek, ezzel a későbbiekben sok munkát megspórol az ember. A W3Schools oldalt mindenképp ajánlom HTML információforrásként. Ha esetleg hozzájutsz, olvasd el a Virginia DeBolt - HTML és CSS - Webszerkesztés stílusosan című könyvet, én se vagyok még nagyon profi web fejlesztésben, de számomra is érthető volt.

    Sok sikert!

    Ja és Boldog Karácsonyt! :DDD

  • #881 Dreamweaver7 csendes tag szmegma #880
    Új Válasz #881
    Ú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 szmegma #880 üzenetére

    Szerintem inkább a kék keret van elcsúszva, ez relatív, de valami biztos nincs a helyén.

    Az sorközi CSS felülír mindent, vigyázz vele. A HTML kódból szedd ki az összes CSS-t, helyette class és/vagy id jelölőket használj, sokkal tisztább lesz a kódod és nem jönnek majd elő nehezen levadászható hibák. Utána próbáld ki, lehet egyből megtalálod a problémát. :K

    Egyébként h1 elemből egy oldalon csak egy darabot illik használni.

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

Hirdetés