הלינקייה: מגזין חודשי למפתחים

רוצה לשמוע על כל האירועים, המדריכים, הקורסים והמאמרים שנכתבו החודש ?
הלינקייה הינו מגזין חופשי בעברית שמשאיר אותך בעניינים.
בלי ספאם. בלי שטויות. פעם בחודש אצלך בתיבה.

CSS Positioning and Layouts

Positioning an element in the right spot takes some practice. This page shows some examples of using the positioning instructions of css.

Let's start with a short list of css instructions relevant to positioning. Remember to look them up in the docs for a full description.

Dimensions:

  • height
  • width
  • margin
  • padding

Position:

  • left
  • top
  • right
  • bottom
  • float
  • position
  • display

Wrapping Text Around an Image

<html>
    <head>
        <title>Float</title>
        <style type="text/css">
            .thumb {
                float: left;
                width: 320px;
            }
 
        </style>
    </head>
 
    <body>
    <h1>Happy Purim</h1>
    <img src="clown.gif" class="thumb" />Clowns are comic performers
    stereotypically characterized by the grotesque
    image of the circus clown's colored wigs, stylistic makeup, outlandish
    costumes, unusually large footwear, and red nose, which evolved to project
    their actions to large audiences. Other less grotesque styles have also
    developed, including theatre, television, and film clowns. Peter Berger
    writes
    that "It seems plausible that folly and fools, like religion and magic,
    meet
    some deeply rooted needs in human society".[1] For this reason, clowning
    is
    often considered an important part of training as a physical performance
    discipline, partly because tricky subject matter can be dealt with, but
    also
    because it requires a high level of risk and play in the performer.[2]
    </img>
</body>
</html>

Centering a block in a page

<html>
    <head>
        <title>Centered Box</title>
        <style>
            body {
                background-color: #CCD3D9;
                color: #000000;
            }
            div#content {
                width: 640px;
                margin-right: auto;
                margin-left: auto;
                border: 2px solid #A6B2BC;
                background-color: #FFFFFF;
                color: #000000;
                padding: 0 20px 0 20px;
            }
 
        </style>
 
    </head>
    <body>
        <div id="content">
            <p>This box is 640 pixels wide and centered.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
            sit amet mi massa, id porta orci. Cras placerat suscipit metus,
            eget blandit metus vehicula at. Fusce iaculis blandit dolor,
            laoreet sollicitudin risus rhoncus ut. Morbi molestie scelerisque
            turpis, ac feugiat dolor imperdiet vitae. Nullam sed porttitor
            metus. Ut sit amet iaculis orci. In urna mi, consectetur ac
            iaculis sit amet, tempus eu libero. Nunc id risus enim, id
            accumsan est. Etiam consectetur leo id tellus aliquet vitae
            faucibus lorem facilisis. Nullam cursus leo non odio consectetur
            quis scelerisque lectus sagittis. Aliquam erat volutpat. Phasellus
            quam ante, ultricies sit amet suscipit ut, ultrices non lorem.
            Mauris auctor, felis sed varius faucibus, enim quam tempus lectus,
            id ultrices nibh dui in nibh. Maecenas felis dolor, pretium at
            tincidunt porta, sagittis ac enim.
 
            Morbi sit amet nulla sit amet turpis fermentum pellentesque. Sed
            nec erat dui. Nullam sed sapien mollis quam faucibus posuere. Sed
            a erat ante, vel posuere libero. Ut lobortis tellus augue. Nam
            iaculis aliquam arcu quis rutrum. In aliquam nisi lobortis arcu
            lacinia ornare. Etiam lorem nunc, facilisis ut adipiscing non,
            semper nec sem. Sed sed lacus ante, tincidunt semper mauris. Cras
            eu lorem quis lectus placerat euismod sit amet sit amet urna.
            Proin sagittis cursus nulla. Sed eros arcu, pharetra sed iaculis
            non, tincidunt sit amet eros. Aenean a ligula felis, sit amet
            vestibulum est. Cras commodo vulputate mollis. Praesent ut metus
            lectus.
 
            Curabitur sed leo tellus, a cursus massa. Duis vel odio eu risus
            venenatis iaculis. Nunc tincidunt justo eu purus adipiscing ac
            condimentum mi dignissim. Vivamus ullamcorper eros ultricies orci
            tincidunt lacinia rutrum nisl hendrerit. Aliquam lobortis, neque
            ornare ornare posuere, eros sem tempus felis, sed dictum sem risus
            a felis. Nunc libero nisi, porta a tincidunt at, varius ut eros.
            Suspendisse potenti. Suspendisse consectetur varius justo nec
            mattis. Nunc auctor vestibulum pretium. Integer dapibus aliquet
            sapien at placerat. Aenean et porta justo. Nunc et purus nisl.
            Mauris vitae augue dolor. Ut consequat lectus vitae arcu iaculis
            auctor. Ut elementum dignissim massa, ac bibendum lorem varius
            vel. </p>
        </div>
    </body>
</html>