Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Help Formatting Blog Page Using CSS

Posted on 2008-10-23
3
Medium Priority
?
356 Views
Last Modified: 2012-05-05
Hi,

I have been working on formatting the page below using CSS:

http://www.thetechstore.co.uk/index.html

I'm working on integrating a blog into the site using blogger, feedburner and buzzboost

There are still some things that I can't work out how to do. Hopefully someone can help!?

1. I would like some white space between the end of an article and the start of the next article
2. I would like to make the dotted line under the title extend to the width of the page (not just an underline)
3. I would like this dotted line to also appear at the bottom of the article
4. I'd like to know how to change the styling on the Digg, Del.icio.us, links at the bottom of each article

CSS Code is attached below:

Thanks in advance!
<style type="text/css">
 
div.feedburnerFeedBlock ul { 
padding:50px;
margin-right:50px;
margin-left:50px;
list-style-type:none;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:medium;
color:#333333;
}
 
div.feedburnerFeedBlock ul li span.headline { 
font-weight:bold; 
letter-spacing:1px;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:x-large;
border-bottom:1px dashed #ccc
}
 
div.feedburnerFeedBlock ul li span a
{
color:#FF9900;
}
 
a:visited {
	text-decoration: none;
	color: #999999;
}
a:hover {
	text-decoration: none;
	color: #333333;
}
 
a:link {
	text-decoration: none;
	color: #ff9900;
}
 
#creditfooter
{
display: none;
}
 
</style>

Open in new window

0
Comment
Question by:shuboarder
3 Comments
 
LVL 44

Assisted Solution

by:scrathcyboy
scrathcyboy earned 600 total points
ID: 22792149
1.  use <BR /> <BR /> for as much whitespace as you need
You can also do this on the container the text is in, using CSS with -- margin-bottom:40px; or similar
2. use HR and style in CSS -- HR {width:640px; color:silver; }  or similar.  That looks good
3.  HR {width:640px; color:silver; style:dotted;}
0
 
LVL 2

Accepted Solution

by:
joshnunn earned 900 total points
ID: 23630098
If you are still interested in some help, could you post the code that you will be using for the site (not just the CSS)?

Some possibilities:
1. in "div.feedburnerFeedBlock ul li span.headline" add "padding-top: 10px;" (or more) to push the heading down automatically.
2.To extend the dotted line try adding "width:100%;" to the same section as the previous question.
3. Add "border-top:1px dashed #ccc" to the section.
4. I'd need to know the code you've got to help you style these buttons.

Some of these might not quite be right, but without some sort of example it's hard to figure out which solution might be best.
0
 
LVL 21

Author Closing Comment

by:shuboarder
ID: 31509389
I managed to solve this myself in the end, but points rewarded for the effort.

Thanks.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses four methods for overlaying images in a container on a web page
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…
Suggested Courses

927 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question