Scribd Logo
Upload

Welcome to Scribd!

  • CSS Positioning Float

    Uploaded by

    Almeda Asuncion
    14 views22 pages
    CSS Positioning

    Copyright

    © © All Rights Reserved

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    CSS Positioning

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    14 views22 pages

    CSS Positioning Float

    Uploaded by

    Almeda Asuncion
    CSS Positioning

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 22

    CSS Positioning

    First a brief introduction to some style


    elements
    Links
    CSS
    a.nav:link { color: pink;} Lo
    a.nav:visited { color: red;} Ve
    a.nav:hover { color: yellow;} H
    a.nav:active { color: yellow;}
    A!
    (LoVeHA!)
    HTML
    <a href=index.html class=nav>index page</a>
    CSS images

    li { list-style-image: url(pic.jpg); }

    body { background-image: url(pic.jpg); }


    Positioning what is it?
    Positioning refers to the layout of the items
    on your page.

    It also refers to the position descriptor in


    CSS rules (more on this in a minute)

    http://www.intensivstation.ch/en/templates/
    http://www.solucija.com/home/css-templates/
    Normal Flow no positioning

    Left to Right, Top to Bottom


    Normal Flow no positioning
    Top left of the page = (0,0)

    Left to Right, Top to Bottom


    Normal Flow
    The yellow box is the container (more on this)
    This is a paragraph If the next paragraph
    to which I have set fits next to it on the
    the width. right, it will line up.
    Normal Flow
    This is a paragraph However, if the second
    to which I have set paragraph is too wide to fit
    the width. the container, it will shift
    down.
    Normal Flow
    This is a paragraph
    to which I have set
    the width.
    However, if the second
    paragraph is too wide to fit
    the container, it will shift
    down.

    This is the basic principle of Normal Flow


    Box Model
    All of the items in your webpage generate invisible boxes
    you have to figure out how all of those boxes will fit into your
    page, like a puzzle.

    Image Small print


    with link text, bullet Image
    list
    Set of links
    (navigation)

    Regular text
    Box Model
    Margin
    Border

    Padding

    Content
    Box Model
    Think of it like an egg:

    The yolk is the content

    The albumen is the padding

    The shell is the border

    The margin is how far


    the egg is from
    anything else (another
    tiny egg, perhaps)
    Margin and Padding
    styleX {
    margin: 10px 10px 10px 10px; TRBL
    padding: 5px 5px 5px 5px; } top right bottom - left
    OR
    styleX {
    margin: 10px; Shorthand:
    padding: 10px; } Just one number = all 4 sides
    OR Two numbers = top/bottom, left/right
    styleX {
    margin: 10px 15px; padding: 5px 10px; }
    Interrupt the Flow

    Absolute When you want to do fancier


    layout, you can position boxes
    Relative
    or containers. By doing this,
    Float you interrupt the normal (top to
    bottom, left to right) flow. You
    can do this in three ways; Float,
    Absolute, and Relative.
    Float
    HTML
    <div>
    <p> This is the This is the normal This text is
    normal</p> flow of a document; floated right.
    from top to bottom,
    <p class=float>This left to right. When the floated text is
    text is floated added, it moves to the top right
    right.</p> corner of the containing element, in
    </div> this case the <div>. Normal text
    flows around the floated text.

    CSS
    .float {float:right;}
    Absolute
    HTML
    <div>
    This is the normal flow of a
    <p> This is the
    document; from top to bottom, left
    normal <span
    to right. When you add the
    class=abs> This
    absolutely positioned This
    text, text
    it is
    text is absolutely absolutely
    moves to the coordinates you set
    positioned.</span> positioned.
    based on the top left corner of the
    top to bottom </p>
    containing element, in this case
    </div> the <div>. Normal text flows over
    the absolutely positioned text.
    CSS There is no gap where the text is
    .abs {position: absolute; taken from.
    top: 40px;
    left: 80;}
    This text is relatively
    positioned.
    Relative
    HTML
    <div> This is the normal flow of a
    document; This text is relatively
    <p> This is the
    positioned from top to bottom, left
    normal <span
    to right. When you add the
    class=rel> This text
    relatively positioned text, it moves
    is relatively positioned.
    to the coordinates you set based
    </span> from top to
    on the top left corner of the
    bottom</p>
    containing element, in this case
    </div> the <div>. Normal text flows as
    normal, but a gap is left where the
    CSS relative text used to be, and the
    .rel {position: relative; text overlaps with the newly
    top: -50px; positioned relative text if they are
    left: -150px} in the same area.
    <html>
    <head>
    <title>My Resume</title>
    <link href=home.css" rel="stylesheet"
    type="text/css">
    </head>
    <body>
    <div id="container">
    Content goes here
    </div>
    </body>
    </html>
    HTML
    #container
    #banner

    #nav #content

    #footer
    <body>
    <div id="container">
    <div id=header"><img src="pic.jpg" /></div>
    <div id=menu">
    <span><a href="home.htm">home</a></span>
    <span><a href="contact.htm">contact</a></span>
    </div>
    <div id=main">
    <h1>My Resume</h1> HTML
    <p>Resume text</p>
    </div>
    <div id=footer>Copyright info here</div>
    </div>
    </body>
    body {
    margin:100px 40px 10px 70px; }
    #container {
    width: 920px; }
    #header{
    width: 920px; height: 120px; }
    #menu {
    float: left; width: 200px; } CSS
    #main {
    width: 720px; }
    #footer {
    font-size: .8em; }

    You might also like