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

Wildhoney · 12-08-2007, 07:30 PM

This will give you the perfect layout, without the images. You can learn CSS by dropping in all the images and polishing it off

! Try W3Schools.com.

html4strict Code:

<style type="text/css">

    body
    {
        text-align: center;
    }
    
    div.header
    {
        background-color: rgb(150, 150, 150);
        margin: auto;
        width: 800px;
    }
    
    div.content
    {
        margin: 20px auto auto auto;
        width: 750px;
        text-align: left;
        overflow: hidden;
    }
    
    div.content div.top
    {
        border-bottom: 1px solid rgb(45, 45, 45);
        overflow: hidden;
        float: left;
    }
    
    div.content div#postdetails
    {
        clear: both;
        padding-top: 5px;
    }
    
    div.content div.top div#title
    {
        float: left;
        overflow: hidden;
        font-family: Georgia;
        font-size: 24px;
    }
    
    div.content div.admin
    {
        float: right;
        overflow: hidden;
    }
    
    div.content div.contentbody
    {
        overflow: hidden;
        margin-top: 20px;
        
        /* Won't work in IE but why do you want so much empty space anyway? */
        min-height: 100px;
    }
    
    div.bottom
    {
        overflow: hidden;
        float: left;
        border-bottom: 1px solid rgb(45, 45, 45);
    }
    
    div.bottom div#edited
    {
        float: left;
        overflow: hidden;
    }
    
    div.bottom div#reason
    {
        padding-left: 5px;
        float: left;
        overflow: hidden;
    }
    
    div#comments
    {
        clear: both;
        width: 750px;
        margin: auto;
        overflow: hidden;
        text-align: left;
        padding: 15px 0 15px 0;
    }
    
    div.footer
    {
        background-color: rgb(150, 150, 150);
        height: 15px;
        width: 800px;
        margin: auto;
    }

</style>

<body>
<div class="contentbox">

    <div class="header">
        <div id="title">New style</div>
    </div>
    
    <div class="content">
        
        <div class="top">
            <div id="title">New style</div>
            <div class="admin">Edit   Delete</div>
        </div>
        
        <div id="postdetails">Posted 18:28 the 8th of December 2007 by Tanax</div>
        
        <div class="contentbody">
        
            <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 class="admin">Edit   Delete</div>
            
        </div>
        
    </div>
    
    <div id="comments">Comments (13)</div>
    
    <div class="footer"></div>
    
</div>
</body>

Tanax · 12-08-2007, 08:11 PM

Thanks! That's really neat :D

Now I just have to figure out how to get the images.. >.<

victorius · 12-08-2007, 08:35 PM

Hi Tanax, here is my ~20min take on this. I actually sliced your graphics so I could use them.

See the attachment from me with the HTML (styles in the html) and two graphics files. These are ofcourse just in the jpeg quality you posted here earlier.

But I made it so that each post can expand at will, and the heading will remain in the middle but the lower bars will extend from the center. (change the width of the container to try out)

Ah, one more thing, the pictures are transparent png's. Which means that you can change the background and the bar will blend in. This will not work in IE6 though unless you use a png fix for IE6

victorius · 12-08-2007, 08:58 PM

Oh, Wildhoney you were quicker than me.

Although probably great solution you've come up with there, it's my personal opinion that we don't need to use so many divs. (Tanax as well)

Also, using the id="" so much makes it (according to standards) impossible to have more than one of those blocks in the same document. The id is supposed to be unique in a document.

Although it will display correctly, the best practice is to only assign id to a specific item.

And this block you can repeat as you like for many posts.

Oh, and yet another thing. It's important for SEO to use headings

Here is a sample from my proposal. I use the standard tags as much as possible. Even in this case I would probably try to use less code, but I was trying to make it look exactly like Tanax's mockup.

Code:

<!-- A single post -->          
            <div class="post">            
                
                <!-- The title bar with graphics -->
                <div class="post-title"><p>New style</p></div>
                
                <!-- actual post contents -->
                <div class="post-content">
                    <!-- the admin panel -->                
                    <div class="admin-panel"><a href="#">Edit</a> <a href="#">Delete</a></div>                           
                    
                    <!-- Title: always use a heading tag as a title -->
                    <h2>New style</h2>
                    
                    <p>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!</p>
                    
                    <p>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!</p>
                    
                    <div class="admin-panel"><a href="#">Edit</a> <a href="#">Delete</a></div>
                                        
                    <p class="post-details">Updated 18:39 the 8th of December by <a href="#">Friiidiiish</a></p>
                    <p class="comments"><a href="#">Comments (13)</a></p>
                </div>
            </div>
        <!-- A single post -->

See the attached file for the whole thing.

Tanax · 12-08-2007, 10:11 PM

That's awesome :| :O

A big thanks to you! I will study the code carefully :D

One thing though that got my attention.. I'm trying to slice my own pictures.. so I get full quality.. but the header turns out to be a real pain in the ass to get working >.<

Because the left and the right sides of the header(and the footer), is rounded... so I'm using another image there.

For the footer I've just used:

HTML Code:

            div.footer {
        		background: url(footer.jpg) repeat-x top left;
        		height: 15px;
        		margin: auto;
    		}

                <div class="footer">
                	<img src="footer-left.jpg" style="float: left;" />
					<img src="footer-right.jpg" style="float: right;" />
                </div>

But that doesn't work for the header =//
See SS

victorius · 12-08-2007, 10:55 PM

Oh, I didn't notice they were round.

Judging by the top left corner of the first post in your screenshot, the round image isn't aligning with the header.

There are a few possible solutions to that

The image isn't the same height as the header image. You need to add transp. pixels above so it is the same height.
use padding-top on the image to make it fit

Also, I noticed that in your (original) version the lines underneath the title and above the comments don't go all the way across like they do in my version. So if you want that back with my code, then...

change in .post h2
padding to margin of the same value
.comments {
In here this is inherited from the P tag, so you will have to set padding to 0 and margin to the same as in the previous example.