CSS div question -

[TechBoyJK]

Hi Guys,

I'm trying to get a messaging app done and I need the CSS polished up. I understand CSS enough to hack my way through it, but for some reason I can't get the following done.

Here's what I'm trying to create. This will be placed within an existing div that is 550px wide.

I see 5 total divs that need to be created.

The containing div, which is the thick border around the entire image.

The profile pic div

the name div

the timestamp div

the message div


The containing div can't be height restricted.
The profile pic div, name div, and timestamp div need to stay at the top.
The message div will need to grow (height-wise)

div.view_message_block
{
width: 550px; (or 100% since the containing div is already set to 550px?)
margin: .5em .5em .5em .5em;
display: inline;
}

div.view_message_profile_pic
{
width: 75px;
display: inline;
float: left;
}

div.view_message_sender_name
{
width: 80%;
display: inline;
float: left;
}

div.view_message_date
{
width: 20%;
display: inline;
}

div.view_message_body
{
width: 80%;
display: inline;
}


--------------------------------------------------------
Any help or guidance will be appreciated! Don't want it done for me, but I'm not sure where to go from here.

 

[PhatoseAlpha]

I'd position the picture, name and timestamp absolutely. The message div gets positioned relatively to get it down from the top, and the container div gets padding on the bottom equal to the top offset of the message div.

 

[TechBoyJK]

hmmm.. well this code block would get repeated as a new row depending on how many messages the user has. So if I position things with absolute, so as the div is repeated, the 'absolute' position would be changed. Not sure how that would work. I can't change the css dynamically.

-Jason

 

[PhatoseAlpha]

If you mean you'll have more then one of the whole assembly, it's a non-issue. Absolutely positioning is from the position of the the parent element, not the document as a whole. Presumably that's the container div, and as long as that has positioning they'll all be positioned correctly. A simple position: relative; top: 0px; left: 0px will let the container serve as a reference point for child positions, without changing it's location at all.

 

[TechBoyJK]

thank you

 

[TechBoyJK]

ok I think i have it figured out! Thanks again!

 

[TechBoyJK]

Ok, I have it mostly working.... one last thing.

The actual content of the message is screwing things up if the content is bigger than the div.

Basically, the height of the container div needs to grow. If I use overflow, it doesn't grow it just adds a scroll bar.


#view_message_block
{
position: relative;
width: 560px;
}

#view_message_profile_pic
{
position: absolute;
width: 50px;
display: inline;
}

#view_message_sender_name
{
position: absolute;
top:0px;
left: 50px;
}

#view_message_date
{
position: absolute;
top:0px;
right: 0px;
display: inline;
}

#view_message_body
{
position: absolute;
left: 50px;
top: 15px;
display: inline;
}

 

[TechBoyJK]

Almost there!

I removed the absolute positioning on the message content (the actual message, not the name, pic, date). That allows the div to grow with it. BUT the content is going under everything, not along side the photo.


But now the message body is being placed under every div.

Compare - pic 1. Notice how the 'ok will do' is next to the pic..

Pic 2.. this is what I currently have. Notice the ipsum text is under the pic.

Pic 3.. the lines show where I want the message content

 

[PhatoseAlpha]

That's odd. It seems the div is flowing around the image - which it shouldn't be. Might be ignoring the positioning if it doesn't have top/left/right or bottom. Try these css modifications

#view_message_block
{
position: relative;
width: 560px;
padding-bottom: 15px;
} 

#view_message_profile_pic
{
position: absolute;
width: 50px;
top: 0px;
left: 0px;
} 

#view_message_body
{
position: relative;
left: 50px;
top: 15px;
display: inline;
width: 510px;
}

 

[TechBoyJK]

I made a test page with just the css for the divs and the divs.. You can go to

http://details.at/messageblock.cfm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>

<body>
<style>
/*---DIV's for view messages---*/

#view_message_block
{
position: relative;
width: 560px;
}

#view_message_profile_pic
{
position: absolute;
width: 50px;
top: 0px;
left: 0px;
}

#view_message_sender_name
{
position: absolute;
top:0px;
left: 50px;
}

#view_message_date
{
position: absolute;
top:0px;
right: 0px;
}

#view_message_body
{ display: inline;
}




</style>
<div id="view_message_block">

<div class="view_message_profile_pic">
<a href="http://details.at">
<img src="http://details.at/imagehost/profiles/528/xs_263504_10150686238175455_620170454_19297417_2455997_n.jpg">
</a>
</div>

<div id="view_message_sender_name">
<span class="mediumtext">
<a title="hello" href="http://details.at/members/members.cfm?q=mpv1&id=528">Paul Adam Smith</a>
</span>
</div>

<div id="view_message_date">
<span class="mediumtext">07/20/2011 - 03:59:55</span>
</div>

<div id="view_message_body">
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

</div>

</div>


</body>
</html>

 

[PhatoseAlpha]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>

<body>
<style>
/*---DIV's for view messages---*/



#view_message_block
{
position: relative;
width: 560px;
padding-bottom: 20px;
}

#view_message_body p
{
	margin-bottom: 0px;
}

.view_message_profile_pic
{
position: absolute;
width: 50px;
top: 0px;
left: 0px;
}

#view_message_sender_name
{
position: absolute;
top:0px;
left: 50px;
}

#view_message_date
{
position: absolute;
top:0px;
right: 0px;
}

#view_message_body
{ display: block;
	position: relative;
	top: 20px;
	left: 50px;
	width: 510px;
}




</style>
<div id="view_message_block">

<div class="view_message_profile_pic">
<a href="http://details.at">
<img src="http://details.at/imagehost/profiles/528/xs_263504_10150686238175455_620170454_19297417_245 5997_n.jpg">
</a>
</div>

<div id="view_message_sender_name">
<span class="mediumtext">
<a title="hello" href="http://details.at/members/members.cfm?q=mpv1&id=528">Paul Adam Smith</a>
</span>
</div>

<div id="view_message_date">
<span class="mediumtext">07/20/2011 - 03:59:55</span>
</div>

<div id="view_message_body">
<p>
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

</div>

</div>


</body>
</html>

Try that. You should probably be using classes for the various subpart instead of IDs if you're intended to have more then one of them on a screen.