TalkPHP - View Single Post

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>