Thread: CSS problem
View Single Post
Old 12-08-2007, 07:30 PM   #2 (permalink)
Wildhoney
La Vida es Sueño
Advanced Programmer Top Contributor 
 
Wildhoney's Avatar
 
Join Date: Sep 2007
Location: Oldham
Posts: 2,280
Thanks: 90
Wildhoney is on a distinguished road
Default

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>
__________________
The man who comes back through the Door in the Wall will never be quite the same as the man who went out.
Send a message via AIM to Wildhoney Send a message via MSN to Wildhoney Send a message via Yahoo to Wildhoney
Wildhoney is offline  
Reply With Quote
The Following User Says Thank You to Wildhoney For This Useful Post:
Tanax (12-08-2007)