coding a layout into CSS [Archive]

Bob42

04-14-2008, 04:44 PM

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:

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

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

jcdevelopment

04-14-2008, 05:21 PM

will this work for you

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