CSS and Positioning issues

Discussion in 'HTML' started by nightstar@gmail.com, Aug 11, 2005.

  1. Guest

    Here is a watered down version of the code including my css file, as i
    am just trying to get the proper formatting:


    PHP (HTML) File:


    <?php include('frontend.php'); ?>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">
    <link href="statements.css" rel="stylesheet" type="text/css">
    </head>

    <body>


    <div id="statement">
    <div id="header"><?php dispheader(); ?></div> header displays
    all three sections correctly
    <div id="statementtitle"><?php statementtype(); ?></div>
    statementtitle displays correctly
    <div id="outputsection">
    <div id="midsection">
    <div id="col1">
    Col1<br>
    Col1<br>
    Col1<br>
    Col1<br>
    Col1
    </div>
    <div id="col2">
    Col2<br>
    Col2<br>
    Col2<br>
    Col2
    </div>
    </div>
    <div id="bottomsection">BOTTOM SECTION</div>
    </div>
    </div>


    </body>
    </html>


    CSS File:


    #statement {
    position:absolute;
    left:0px;
    width:668px;



    }


    #header {
    left:0px;
    height:113px;
    width:100%;


    }


    #topleft {
    position:absolute;
    text-align:left;
    left:0px;
    width:33%;


    }


    #topcenter {
    position:absolute;
    left:33%;
    width:34%;


    }


    #topright {
    position:absolute;
    text-align:right;
    left:67%;
    width:33%;


    }


    #outputsection {
    position:absolute;
    left:0px;
    width:100%;


    }


    #statementtitle {
    position:relative;
    padding:5px;
    text-decoration:underline;
    font:bold 1.2em serif;
    text-align:center;
    width:100%;
    }


    #midsection {
    position:relative;
    width:100%;


    }


    #col1 {
    position:absolute;
    left:0;
    width:50%;


    }


    #col2 {
    position:absolute;
    left:50%;
    width:50%;


    }


    #bottomsection {
    width:100%;


    }


    In the HTML when I display bottom section it does not show up at the
    very bottom, it displays overtop of where midsection begins. I need
    help organizing this to make it display correctly based upon my first
    message in the thread. Most likely the statement needs to look like
    this

    Header (fixed height based on height of graphic, but would be nice to
    have a variable height)

    Where I make a call to dispheader() in the PHP there three other
    sections printed out here.
    <div id="topleft">Stuff Here</div>
    <div id="topcenter">Stuff Here</div>
    <div id="topright">Stuff Here</div>

    Where I make a call to statementtype() in PHP I have
    <div id="statementtitle">Title/Type of Statment</div>

    Mid Section (variable height)

    Bottom Section (variable height)

    Sorry about bad formatting with copy and paste.

    I have looked over numerous sites with no prevail. Maybe some savvy
    person with fresh eyes can find the dumb mistake I have with keeping in
    mind IE and Firefox.

    Thanks
     
    , Aug 11, 2005
    #1
    1. Advertising

  2. Mark Parnell Guest

    Previously in alt.html, <> said:

    > Here is a watered down version of the code including my css file, as i
    > am just trying to get the proper formatting:


    A URL is much more useful.

    > In the HTML when I display bottom section it does not show up at the
    > very bottom, it displays overtop of where midsection begins.


    This is normal behaviour given the code in question. That is what
    absolute positioning does - it removes the element from the flow of the
    page, so anything following it acts as though that element was never
    there in the first place.

    > I need
    > help organizing this to make it display correctly based upon my first
    > message in the thread.


    Um, this *is* the first message in the thread.[1]

    <looks back through other threads>

    Ah, you must be talking about this message:
    <> It seems that
    (amongst other things) Google Groups is also dreadful at threading. If
    at all possible, please do everyone a favour and get yourself a real
    newsreader. Personally, I use 40tude Dialog -
    http://www.40tude.com/dialog/ - but there are plenty of free ones
    available. Even *cough* Outlook Express *cough* is preferable to Google.

    > I have looked over numerous sites with no prevail. Maybe some savvy
    > person with fresh eyes can find the dumb mistake I have with keeping in
    > mind IE and Firefox.


    You have misunderstood how absolute positioning works. Absolute
    positioning should very rarely be used - there is certainly no need to
    use it in this situation.

    In this case, as mbstevens said in the other thread, a bank statement is
    definitely tabular data, so use a table for the transactions. Just one
    will suffice. ;-)


    [1] Actually *this* is the second. The one I'm replying to is, of
    course, the first. :)

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
    alt.html FAQ :: http://html-faq.com/
     
    Mark Parnell, Aug 11, 2005
    #2
    1. Advertising

  3. mbstevens Guest

    Mark Parnell wrote:

    > [1] Actually *this* is the second. The one I'm replying to is, of
    > course, the first. :)


    Pardon me, sir, but did you see a white rabbit in a waistcoat with a
    watch go by here?
    ;)
     
    mbstevens, Aug 11, 2005
    #3
  4. Mark Parnell Guest

    Mark Parnell, Aug 11, 2005
    #4
  5. mbstevens Guest

    Mark Parnell wrote:

    >>Pardon me, sir, but did you see a white rabbit in a waistcoat with a
    >>watch go by here?

    >
    >
    > No, but it's my unbirthday today.
    >


    That must be why the party treacled down to this thread!
     
    mbstevens, Aug 11, 2005
    #5
  6. Toby Inkster Guest

    nightstar wrote:

    > <div id="midsection">
    > <div id="col1">
    > Col1<br>
    > Col1<br>
    > Col1<br>
    > Col1<br>
    > Col1
    > </div>
    > <div id="col2">
    > Col2<br>
    > Col2<br>
    > Col2<br>
    > Col2
    > </div>
    > </div>


    Why isn't this a table?

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Aug 11, 2005
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Eric

    Datalist and CSS positioning

    Eric, Sep 14, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    588
    =?Utf-8?B?Q3VydF9DIFtNVlBd?=
    Sep 14, 2005
  2. KatB
    Replies:
    8
    Views:
    4,230
  3. Len Philpot
    Replies:
    2
    Views:
    5,978
    Len Philpot
    Dec 24, 2005
  4. Peter
    Replies:
    2
    Views:
    472
    Jonathan N. Little
    Mar 26, 2006
  5. chaser7016
    Replies:
    3
    Views:
    394
    chaser7016
    Jan 3, 2007
Loading...

Share This Page