Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jul 2007
    Posts
    100
    Thanks
    1
    Thanked 0 Times in 0 Posts

    coding a layout into CSS

    I use a HTML table to display my news, and I realize that it can be coded into CSS. I've attached a file of how I want the news to look like, but I'm having some trouble coding it.

    Here's the CSS that I have so far:
    Code:
    .news {
    	width:100%;
    	margin:auto;
    	border:solid 1px;
    	padding:1px;
    }
    
    .news_title {
    	padding:0px;
    	border:solid 1px;
    	text-align:center;
    }
    
    .news_footer {
    	border:solid 1px;
    	margin-left:0;
    	padding:1px;
    	text-align:left;
    }
    And here's my HTML:
    PHP Code:
    <div class="news">
        <p class="news_title"><strong><?=stripslashes($row['title'])?></strong></p>
        <p><?=stripslashes($row['news'])?></p>
        <div class="news_footer">
            <p><a href="profiles.php?name=<?=$row['name']?>"><em><?=$row['name']?></em></a><br />
            <?=$row['date']?></p>
        </div>
    </div>
    Take a look at the attachment. If someone could please point me out to the right direction, it would be appreciated.
    Attached Thumbnails Attached Thumbnails coding a layout into CSS-layout_of_news.png  

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    will this work for you

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    <meta http-equiv="Content-Language" content="sk" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>
    <style type="text/css">
    
    *{
    padding:0px;
    margin:0px;
    }
    
    .news {
    	width:500px;
    	margin:auto;
    	border:solid 1px;
    	
    }
    
    .news_title {
    	padding:0px;
    	border-bottom:solid 1px;
    	text-align:center;
    	
    }
    
    .newsContent {
    height:200px; /*can be taken out and will adjust to the content*/
    text-align:center;
    padding:5px;
    }
    
    .news_footer {
    	border-top:solid 1px;
    }
    
    .lefty{
    float:left;
    
    }
    
    .righty{
    float:right;
    
    }
    .clear{
    clear:both;
    }
    </style>
    
    </head>
    <body>
    
    <div class="news"> 
    
        <p class="news_title"><strong>Title of news</strong></p>
         
      <div class="newsContent">  <p>News post goes here</p> </div>
      
        <div class="news_footer"> 
           <p class="lefty"> <a href="#">Poster</a></p>
            <p class="righty">Date</p> 
            <div class="clear"></div>
        </div> 
        
    </div> 
    
    </body>
    
    </html>
    it seemed to work, you can also tweak things here and there!!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •