stuck in simple css formatting

S

saurabh9

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>
 
E

Els

saurabh9 said:
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.
Click to expand...

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.
Click to expand...

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

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.
 
D

dorayme

Els said:
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.


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


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.
Click to expand...


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/>
 
H

Helpful person

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>
Click to expand...

Seems like an ideal situation for a table.
 
S

saurabh9

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.


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


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.
Click to expand...

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.
 
E

Els

saurabh9 said:
http://www.saurabhkumar.com/rac/xschool/member/viewmessages.php
Click to expand...
Only question now, why is my border-bottom:1px solid #778899; not
working to create an underline below each message? Thanks.
Click to expand...

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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Stuck with html and css 25
Positioning CSS components 1
Final chapter of "Learn PHP, MySQL and JavaScript" 3
Help with code 0
<div> help 1
Can't execute php to delete multiple rows in database 3
Clickable Div Block 1
Background image not showing up on html page 3

Members online

No members online now.
Total: 39 (members: 2, guests: 37)
Robots: 233

Forum statistics

Threads
473,997
Messages
2,570,240
Members
46,828
Latest member
LauraCastr

Latest Threads

Top