Solved

Help Formatting Blog Page Using CSS

Posted on 2008-10-23
3
347 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 200 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 300 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

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.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

758 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now