340 users online (0 members and 340 guests)  


  Results 1 to 4 of 4

Related

  1. Table position    Forum: HTML Forum
    Replies: 8
  2. Position Question    Forum: CSS Forum
    Replies: 1
  3. K-Position : Include Pro any good?    Forum: Search Engine Optimization - SEO - Forum
    Replies: 4
  1. #1
    andersgunnare's Avatar
    New User

    Status
    Offline
    Join Date
    May 2011
    Posts
    2

    Need CSS help - position of text

    Hello World,
    I have searched but not found any answer that helped me.
    Maybe you can help me ?!

    I have a page with three columns.
    Each column has a header.

    In my example, I have some text int the first column.
    As you can see in the code bellow, thoose two text-lines has a very strange position.
    I would like them to come and start under the first header.

    Is it possible, if so, how ?

    Regards
    Anders

    My example code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Multi-column layout via CSS</title>

    <style type="text/css">
    #head1 {
    position:absolute;
    top:5%;
    left: 5%;
    width: 33%;
    }
    #head2 {
    position:absolute;
    top:5%;
    left: 25%;
    width: 33%;
    }
    #head3 {
    position:absolute;
    top:5%;
    left: 50%;
    width: 33%;
    }

    #column1 {
    position:relative;
    left: 5%;
    width: 33%;
    }
    #column2 {
    position:relative;
    left: 25%;
    width: 33%;
    }
    #column3 {
    position:relative;
    left: 50%;
    width: 33%;
    }
    </style>

    </head>
    <body>

    <div id="head2">
    Second header 2
    </div>

    <div id="head1">
    First header 1
    </div>

    <div id="head3">
    Third header 3
    </div>

    <div id="column1">
    More
    </div>

    <div id="column1">
    Even more
    </div>

    </body>
    </html>

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    739

    Re: Need CSS help - position of text

    Hi there andersgunnare,

    and a warm welcome to these forums.

    The use of absolute positioning, as you have discovered, is not really an ideal method to use for page layouts.

    Try it like this...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>basic three column fluid layout</title>
    
    <style type="text/css">
    html,body {
        height:100%;
        padding:0;
        margin:0;
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:1em;
     }
    #left-column,#center-column,#right-column {
        float:left;
        width:33%;
        height:100%;
     }
    #left-column {
        color:#600;
        background-color:#fee;
     }
    #center-column {
        width:34%;
        color:#060;
        background-color:#efe;
     }
    #right-column {
        color:#006;
        background-color:#eef;
     }
    h1,h2,h3 {
        margin:0;
        padding:10px 0;
        font-size:100%;
        color:#999;
        text-align:center;
        background-color:#fff;
     }
    h2 {
        color:#666;
        background-color:#ccc;
     }
    p {
        margin:10px;
        font-size:100%;
     }
    </style>
    
    </head>
    <body>
    
    <div id="left-column">
    <h1>Header 1</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
    pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
    orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes, 
    nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
    sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
    Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
    pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
    Pellentesque in dui. In eget elit. Praesent eu lorem.
    </p>
    </div>
    
    <div id="center-column">
    <h2>Header 2</h2>
    <p>
    Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae, 
    orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum 
    augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet 
    interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque 
    lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis, 
    lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi. 
    Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum 
    volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla. 
    Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque 
    metus urna, semper eget, aliquam ac, feugiat nec, massa.
    </p>
    </div>
    
    <div id="right-column">
    <h3>Header 3</h3>
    <p>
    Nullam pharetra quam quis metus. Proin feugiat lacinia mauris. Cum sociis natoque 
    penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent faucibus erat 
    quis ante. Suspendisse eu tellus. Donec sit amet ante in nisl dapibus condimentum. Proin 
    diam. Curabitur egestas felis iaculis lorem. Aliquam sit amet risus ut nulla sollicitudin 
    scelerisque. Mauris viverra hendrerit augue. Morbi eu sapien sed enim rutrum blandit. 
    Quisque feugiat. Pellentesque luctus sagittis est. Donec dolor sem, bibendum ac, porta in, 
    rutrum sit amet, dui. Ut libero turpis, tempus nec, venenatis at, tincidunt ac, sem.
    </p>
    </div>
    
    </body>
    </html>
    

  3. #3
    andersgunnare's Avatar
    New User

    Status
    Offline
    Join Date
    May 2011
    Posts
    2

    Re: Need CSS help - position of text

    Quote Originally Posted by coothead View Post
    Hi there andersgunnare,

    and a warm welcome to these forums.
    ...
    Try it like this...
    ...
    Thanks, but there is a problem I forgott to mention.
    Code:
    ...
    <div id="column1">
    More
    </div>
    
    <div id="column1">
    Even more
    </div>
    ...
    this code-statement can be UNORDERED like

    Code:
    ...
    <div id="column1">
    More
    </div>
    
    <div id="column1">
    Even more
    </div>
    
    <div id="column3">
    More
    </div>
    
    <div id="column3">
    Even more
    </div>
    
    <div id="column1">
    More
    </div>
    
    <div id="column1">
    Even more
    </div>
    ...
    Because that part is generated from a database and I can't decide in which way it is coming.....
    :-(
    Last edited by andersgunnare; 05-27-2011 at 06:59 AM. Reason: Missed the [code] tag

  4. #4
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    739

    Re: Need CSS help - position of text

    Hi there andersgunnare,

    Are you using php includes to insert the content?

    Also Note that id="column1" and id="column3" are unique and may only be used once in a document.