stuck in simple css formatting

Discussion in 'HTML' started by saurabh9, Oct 17, 2008.

  1. saurabh9

    saurabh9 Guest

    Hi,
    Soemhow I am not able to make this work.

    I need to show a div block containing a message title, it's body, the
    username and date
    I need to show multiple such messages on the page, one under another
    I need to show the username and date to the right of the message and
    its title... so i tried putting down the css, but its just not
    working.

    Secondly, the page number on the bottom should be coming at the end
    under the last message...currently its coming in the same row as the
    message itself.

    here is the html... can somebody please help me out on this?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
    www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> website</title>

    <style >
    ..message {
    width=50px;
    text-align:center;
    //color:#778899;
    //background:#FFFFCC;
    font-size:smaller;
    border-bottom:1px solid #778899;
    margin: 0 auto;
    float:top;
    }

    #pagenumbers {
    text-align:center;
    }

    ..mcol1 {
    width=50%;
    float:left;
    display: inline;
    }
    ..mcol2 {
    width=50%;
    float:left;
    display: inline;
    }
    </style>
    </head>
    <body>
    <div id="content">
    <div id="header">
    <div id="header_txt">.</div>

    </div>
    <div id="nav">
    <table border="0" cellpadding="0" cellspacing="0" id="navigation">
    <tr>
    <td class="navText" ><a title="View messages already posted by
    other members" href="">VIEW </a></td>
    <td class="navText" ><a title="Check out the pictures shared
    by others" href="">VIEW </a></td>

    </tr>
    </table>
    </div>
    <div id="body">

    <p>dfh dhsugfsufog sudf gsudfgsfuysgaf suyfgsfuysffgzyusgffg ugy g</
    p>


    <div class="message">
    <div class="mcol1">
    <div class="subject">A new subjecvt</div>
    <div class="body">and this is sem long message lets see how it
    wraps.<br />
    This is now a new paragraph to test line breaks.<br />
    <br />
    A new line AND a new para :) </div>
    </div><div class="mcol2">
    <div class="poster">saurabh</div>
    <div class="posted">2008-10-17 13:47:06</div>

    </div>
    </div>
    <div class="message">
    <div class="mcol1">
    <div class="subject">A new subjecvt</div>
    <div class="body">and this is sem long message lets see how it
    wraps.<br />
    This is now a new paragraph to test line breaks.<br />
    <br />
    A new line AND a new para :) </div>
    </div><div class="mcol2">
    <div class="poster">saurabh</div>
    <div class="posted">2008-10-17 13:47:11</div>

    </div>
    </div><div id="pagenumbers">

    <a href="viewmessages.php?p=">&lt;</a>
    <a href="viewmessages.php?p=1">1</a>
    <a href="viewmessages.php?p=2">2</a> 3
    <a href="viewmessages.php?p=4">4</a>
    <a href="viewmessages.php?p=">&gt;</a>
    </div>
    </div>
    </div>
    </body>
    </html>
     
    saurabh9, Oct 17, 2008
    #1
    1. Advertising

  2. saurabh9

    Els Guest

    saurabh9 wrote:

    > Hi,
    > Soemhow I am not able to make this work.
    >
    > I need to show a div block containing a message title, it's body, the
    > username and date
    > I need to show multiple such messages on the page, one under another
    > I need to show the username and date to the right of the message and
    > its title... so i tried putting down the css, but its just not
    > working.


    It doesn't need to be complicated. float the username and date right,
    the message and title left. Use 'clear:both;' on each div block.

    > Secondly, the page number on the bottom should be coming at the end
    > under the last message...currently its coming in the same row as the
    > message itself.


    Set clear:both; on that page number's element.

    > here is the html... can somebody please help me out on this?


    The above answers I gave based on your question, I have not looked at
    the HTML / CSS. If it doesn't help, post it somewhere online, where
    people can see what you've got so far, and give the URL here.

    --
    Els http://locusmeus.com/
     
    Els, Oct 17, 2008
    #2
    1. Advertising

  3. saurabh9

    dorayme Guest

    In article <>,
    Els <> wrote:

    > saurabh9 wrote:
    >
    > > Hi,
    > > Soemhow I am not able to make this work.
    > >
    > > I need to show a div block containing a message title, it's body, the
    > > username and date
    > > I need to show multiple such messages on the page, one under another
    > > I need to show the username and date to the right of the message and
    > > its title... so i tried putting down the css, but its just not
    > > working.

    >
    > It doesn't need to be complicated. float the username and date right,
    > the message and title left. Use 'clear:both;' on each div block.
    >
    > > Secondly, the page number on the bottom should be coming at the end
    > > under the last message...currently its coming in the same row as the
    > > message itself.

    >
    > Set clear:both; on that page number's element.
    >
    > > here is the html... can somebody please help me out on this?

    >
    > The above answers I gave based on your question, I have not looked at
    > the HTML / CSS. If it doesn't help, post it somewhere online, where
    > people can see what you've got so far, and give the URL here.



    And OP should try to get the URL to validate as best as he can.

    My editor says about OP's code:

    8: Element “<style>†requires that the attribute “type†be specified.
    46: URI attribute value for attribute “href†is empty.
    48: URI attribute value for attribute “href†is empty.
    56: Unknown or malformed close element: “</>â€.
    56: Attribute values are not permitted in an element close tag.
    59: Document type does not permit element “<div>†in content of element
    “<p>â€.
    73: Document type does not permit element “<div>†in content of element
    “<p>â€.
    86: Document type does not permit element “<div>†in content of element
    “<p>â€.
    55: Close tag for element “</p>†omitted but document type doesn't
    permit it.

    (I am fairly sure BBEdit gets the last wrong but the div in the p is
    more serious)

    And I notice in the styles there is stuff like:

    ..message {
    width=50px;


    OP needs to get basics right before doing anything at all re this
    problem.

    <http://www.htmldog.com/guides/htmlbeginner/>

    --
    dorayme
     
    dorayme, Oct 17, 2008
    #3
  4. On Oct 17, 11:57 am, saurabh9 <> wrote:
    > Hi,
    > Soemhow I am not able to make this work.
    >
    > I need to show a div block containing a message title, it's body, the
    > username and date
    > I need to show multiple such messages on the page, one under another
    > I need to show the username and date to the right of the message and
    > its title... so i tried putting down the css, but its just not
    > working.
    >
    > Secondly, the page number on the bottom should be coming at the end
    > under the last message...currently its coming in the same row as the
    > message itself.
    >
    > here is the html... can somebody please help me out on this?
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    > <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    > <head>
    > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    > <title> website</title>
    >
    > <style >
    > .message {
    > width=50px;
    > text-align:center;
    > //color:#778899;
    > //background:#FFFFCC;
    > font-size:smaller;
    > border-bottom:1px solid #778899;
    > margin: 0 auto;
    > float:top;
    >
    > }
    >
    > #pagenumbers {
    > text-align:center;
    >
    > }
    >
    > .mcol1 {
    > width=50%;
    > float:left;
    > display: inline;}
    >
    > .mcol2 {
    > width=50%;
    > float:left;
    > display: inline;}
    >
    > </style>
    > </head>
    > <body>
    > <div id="content">
    > <div id="header">
    > <div id="header_txt">.</div>
    >
    > </div>
    > <div id="nav">
    > <table border="0" cellpadding="0" cellspacing="0" id="navigation">
    >       <tr>
    >         <td class="navText" ><a title="View messages already posted by
    > other members" href="">VIEW </a></td>
    >         <td class="navText" ><a title="Check out the pictures shared
    > by others" href="">VIEW </a></td>
    >
    >       </tr>
    >     </table>
    > </div>
    > <div id="body">
    >
    > <p>dfh dhsugfsufog sudf gsudfgsfuysgaf suyfgsfuysffgzyusgffg  ugy g</
    > p>
    >
    > <div class="message">
    > <div class="mcol1">
    > <div class="subject">A new subjecvt</div>
    > <div class="body">and this is sem long message lets see how it
    > wraps.<br />
    > This is now a new paragraph to test line breaks.<br />
    > <br />
    > A new line AND a new para :) </div>
    > </div><div class="mcol2">
    > <div class="poster">saurabh</div>
    > <div class="posted">2008-10-17 13:47:06</div>
    >
    > </div>
    > </div>
    > <div class="message">
    > <div class="mcol1">
    > <div class="subject">A new subjecvt</div>
    > <div class="body">and this is sem long message lets see how it
    > wraps.<br />
    > This is now a new paragraph to test line breaks.<br />
    > <br />
    > A new line AND a new para :) </div>
    > </div><div class="mcol2">
    > <div class="poster">saurabh</div>
    > <div class="posted">2008-10-17 13:47:11</div>
    >
    > </div>
    > </div><div id="pagenumbers">
    >
    > <a href="viewmessages.php?p=">&lt;</a>
    > <a href="viewmessages.php?p=1">1</a>
    > <a href="viewmessages.php?p=2">2</a> 3
    > <a href="viewmessages.php?p=4">4</a>
    > <a href="viewmessages.php?p=">&gt;</a>
    > </div>
    > </div>
    > </div>
    > </body>
    > </html>


    Seems like an ideal situation for a table.
     
    Helpful person, Oct 18, 2008
    #4
  5. saurabh9

    saurabh9 Guest

    On Oct 17, 11:22 pm, Els <> wrote:
    > saurabh9 wrote:
    > > Hi,
    > > Soemhow I am not able to make this work.

    >
    > > I need to show a div block containing a message title, it's body, the
    > > username and date
    > > I need to show multiple such messages on the page, one under another
    > > I need to show the username and date to the right of the message and
    > > its title... so i tried putting down the css, but its just not
    > > working.

    >
    > It doesn't need to be complicated. float the username and date right,
    > the message and title left. Use 'clear:both;' on each div block.
    >
    > > Secondly, the page number on the bottom should be coming at the end
    > > under the last message...currently its coming in the same row as the
    > > message itself.

    >
    > Set clear:both; on that page number's element.
    >
    > > here is the html... can somebody please help me out on this?

    >
    > The above answers I gave based on your question, I have not looked at
    > the HTML / CSS. If it doesn't help, post it somewhere online, where
    > people can see what you've got so far, and give the URL here.
    >
    > --
    > Els                    http://locusmeus.com/


    Hi,
    Actually my code was taken from the actual page, and hence perhaps a
    few missing tags here and there. The URL is at
    http://www.saurabhkumar.com/rac/xschool/member/viewmessages.php

    Thanks to you, that most of the intended formatting works now.

    Only question now, why is my border-bottom:1px solid #778899; not
    working to create an underline below each message? Thanks.
     
    saurabh9, Oct 20, 2008
    #5
  6. saurabh9

    Els Guest

    saurabh9 wrote:

    > http://www.saurabhkumar.com/rac/xschool/member/viewmessages.php


    > Only question now, why is my border-bottom:1px solid #778899; not
    > working to create an underline below each message? Thanks.


    It is working, only the bottom of each message is not where you think
    it is. See that thick 3px line above the messages? that's 3 x the
    bottom border, once for each message.
    The problem is, that everything inside div.message is floated.
    div.message is the parent element of the floated children elements,
    and floated elements aren't seen by their parents. So, they "think"
    they are empty, so they have no height.

    For a good explanation and different solutions, look here:
    http://netweaver.com.au/floatHouse/

    Also, see Helpful person's reply to your initial post. It would not be
    so bad using a table here I think.

    --
    Els http://locusmeus.com/
     
    Els, Oct 20, 2008
    #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. Davíð Þórisson

    stuck with this simple code

    Davíð Þórisson, Oct 24, 2004, in forum: ASP .Net
    Replies:
    3
    Views:
    1,726
    =?Utf-8?B?U0FOVE9TSA==?=
    Nov 2, 2004
  2. Replies:
    0
    Views:
    753
  3. Replies:
    29
    Views:
    883
    Ben C
    Mar 21, 2008
  4. TheSaint
    Replies:
    9
    Views:
    594
    TheSaint
    Jun 7, 2011
  5. Chris Finch

    stuck on simple problem!

    Chris Finch, Feb 28, 2007, in forum: Ruby
    Replies:
    4
    Views:
    118
    Tim Becker
    Feb 28, 2007
Loading...

Share This Page