Welcome to WebmasterWorld Guest from 174.129.135.89

Forum Moderators: not2easy

Message Too Old, No Replies

A few questions in regards to being new to CSS.

   
9:56 am on Jan 30, 2008 (gmt 0)

5+ Year Member



Edit: The code tags aren't working formatting the code so I put in bolded start and end points.

Okay, I have been used to making photoshop based spliced layouts when I was dabbling in it. I realized how that could be detrimental to the user experience and want to make a portfolio website that is accessible. So CSS was the way to go for me and I did not want any tables at all. So today I went out and started dabbling in CSS and I must say that the scope of CSS is very flexible..

So onto the agenda..I had a couple questions here.

1) I wanted a CSS layout that I could implement a CMS-like system into the website for easy updating (Wordpress Preferably) but I have not actually downloaded the program and just am doing a basic template for now to get my legs in the water. Can I easily take out the text in the current template and say add a script generated from Wordpress so my 'posts' or updates can be easily added? Do I need to specify CSS in Wordpress or do I do that in my template?

2) Now for the real point of this post: I wanted a couple of different link styles. For example, on the div id=menu, I want links to have a colored background (no images) and a different color text..like say white on auburn? Then in my content for my entries, I wanted a seperate link color like say standard black with a dotted underlined decoration. But when I try to apply a link decoration in the .css stylesheet, it causes the links to very large and the decoration works - but the format does not stay the same. Like instead of


BLOG LABS ABOUT RESUME

It goes:

BLOG
LABS

The spacing between them is horribly ugly. So I tried a new set of classes, but it didn't help any.

At any rate, here is the file..

The CSS file named: style.css


.topcolumn_menu {
font-family: "Times New Roman", Times, serif;
color: #000000;
background-color: #FFFFFF;
}

.content_links {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
background-color: #FFFFFF;
}

a{
display:block;color: #981793;padding:10px
}

/* Menu CSS Tags, contains css for website menu's */
div #menu

h2{
height:30px;line-height:30px;margin:0; word-spacing: 10px;
padding-left:0px;background: #EEE;color: #000; font-family:"Times New Roman", Times, serif;
}

End of CSS Portion

The HTML portion:

<!-- Layout container. -->
<div id="container">
<div id="menu">
<h2>BLOG LABS ABOUT RESUME</h2>
</div>


End of HTML portion

Keep in mind, when I enclose BLOG ¦ LABS etc into links, they seperate into links that go vertically instead of horizontally like I want them to.

[edited by: Aethowyn at 10:04 am (utc) on Jan. 30, 2008]

3:48 pm on Jan 30, 2008 (gmt 0)

10+ Year Member



I would put those navigation links into an unordered list and set the list to display: inline;.

That, btw, is your problem. You've set the a tag to display: block; . It should be diplay: inline; if you want them to line up all on one line.

<head>
<title>test inline links</title>
<style type="text/css">
.topcolumn_menu {
font-family: "Times New Roman", Times, serif;
color: #000000;
background-color: #FFFFFF;
}

.content_links {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
background-color: #FFFFFF;
}

a{
display:inline;color: #981793;padding:10px
}

/* Menu CSS Tags, contains css for website menu's */
div #menu

h2{
height:30px;line-height:30px;margin:0; word-spacing: 10px;
padding-left:0px;background: #EEE;color: #000; font-family:"Times New Roman", Times, serif;
}
</style>
</head>
<body>

<!-- Layout container. -->
<div id="container">
<div id="menu">
<h2><a href="">BLOG</a> ¦ <a href="">LABS</a> ¦ <a href="">ABOUT</a> ¦ <a href="">RESUME</a></h2>
</div>
</div>

</body>
</html>

3:50 pm on Jan 30, 2008 (gmt 0)

10+ Year Member



As far as wordpress goes, the easiest way to go is to create a theme, upload it to the appropriate folder and select it from inside wordpress.

There's info on how to do this in the wordpress codex.

6:37 pm on Jan 30, 2008 (gmt 0)

5+ Year Member



You are extremely helpful! I am heading to work and will update after I get off. Thank you very much for the quick responses!

[edited by: Aethowyn at 6:38 pm (utc) on Jan. 30, 2008]