homepage Welcome to WebmasterWorld Guest from 54.166.108.167
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
A few questions in regards to being new to CSS.
Aethowyn




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

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]

 

varya




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

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>

varya




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

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.

Aethowyn




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

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]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved