CSS problem

Tanax · 12-08-2007, 06:56 PM

Hi!
I've recently made a content box in photoshop, and since I've got nearly no knowledge in CSS, I would love to know how I would code this box in CSS.

HTML Code:

<div class="contentbox">

	<div class="head">
		<div id="title">New style</div>
	</div>
	
</div>

I want that, to generate this:

HTML Code:

	<div class="spacer"></div>

HTML Code:

	<div class="content">
		
		<div class="top">
		
			<div id="title">New style</div>
			<div id="admin">Edit   Delete</div>
			<div id="line"></div>
			<div id="postdetails">Posted 18:28 the 8th of December 2007 by Tanax</div>
			
		</div>
		
		<div class="content">
		
			<div id="post">Been working on a new style for the website today, and I think that I've finally came up with a nice design. Please tell me what you think of it!</div>
			
		</div>
		
		<div class="bottom">
			
			<div id="edited">Updated 18:39 the 8th of December by Friiidiiish</div>
			<div id="reason">Spelling mistake :P</div>
			<div id="line"></div>
			<div id="comments">Comments (13)</div>
			
		</div>

HTML Code:

	<div class="spacer"></div>
	
	<div class="footer"></div>

And so, the whole code would be:

HTML Code:

<div class="contentbox">

	<div class="header">
		<div id="title">New style</div>
	</div>
	
	<div class="spacer"></div>
	
	<div class="content">
		
		<div class="top">
		
			<div id="title">New style</div>
			<div id="admin">Edit   Delete</div>
			<div id="line"></div>
			<div id="postdetails">Posted 18:28 the 8th of December 2007 by Tanax</div>
			
		</div>
		
		<div class="content">
		
			<div id="post">Been working on a new style for the website today, and I think that I've finally came up with a nice design. Please tell me what you think of it!</div>
			
		</div>
		
		<div class="bottom">
			
			<div id="edited">Updated 18:39 the 8th of December by Friiidiiish</div>
			<div id="reason">Spelling mistake :P</div>
			<div id="line"></div>
			<div id="comments">Comments (13)</div>
			
		</div>
		
	</div>
	
	<div class="spacer"></div>
	
	<div class="footer"></div>
	
</div>

That's the structure of the HTML that I've thought out.. but I have no idea how to actually code it in CSS so the box expands if you write more text, etc etc..

Anyone have any ideas?

Oh, and I know that the quality is really bad.. it wasn't intentionally, but now after I've uploaded them, I realized that it was a kind of good way to prevent ppl from stealing it xD

This is not sliced yet btw..