View Full Version : I would appreciate help using CSS with my site.

02-11-2005, 03:26 AM
Hi, i'm having alot of trouble getting a grasp on CSS. I can honestly say it's got me pretty upset that i can't get a grasp on something that seems like it is fairly straight forward.

I would like to know if someone would be interested in helping me out with my website by coding a simple external style sheet for the site. It would include very little text. A few links that would need positioned styled.

The biggest part would be some image rollovers that i want. I know rollovers can be done with a 2-3 state graphic that changes position on mouseover. This really has me pulling my hair out.

I would happily give credit on my site, link to yours, etc. I just think i really need help and a kickstart on this.

I think if i had a external style sheet for my site, however simple it may be, i could tear it apart, and experiment with it to get me on the right path.

I can't afford to pay someone alot of money. I wish i could. It's just a personal site for a kids baseball team.

Here is a link to my layout so far. The small square graphics that i want to have css mousovers are on the left. I'd like them to turn b&w on mouseover. This is just a gif of my layout. Nothing works yet.

layout (http://www.leopardsbaseball.com/graphics/test.gif)


02-11-2005, 04:49 AM
Hi there,

Well....... the thing is you're kind of asking for a lot for people who help out here on their spare time. Just being honest. You could always ask a mod to move this post to the "work offers" forum if you'd like to offer a little money or services in exchange for coding a complete website in CSS.

If you're having trouble with some specific issues, though, we'd be glad to help you sort them out. Otherwise this is just a "code this for me please" offer. Just being up front :)

This offer from a forum member (http://codingforums.com/showthread.php?t=52020) might help you out, though...

I just re-read your post and I realize I may have misread that... do you only need help with the menu section? If so, post the code you've got so far and we can go from there...

02-11-2005, 10:41 AM
As Richard said: put a link up to the page, and we'll see what we can do you for.
Also, try to indicate what it is exactly that you have problems with understanding; helping a person out with specific problems is one thing, creating an entire style sheet from scratch is a totally different one.

Learning by example only goes sofar; if don't understand what's going on, or if there isn't someone around to explain in detail why they did something such-and-so, chances are you're not going to learn much from it.

02-11-2005, 03:18 PM
thanks for the replies.

rmedek, yes, the menu section(image rollovers) are the main issue. There's very little text that needs positioned,stylized. As you can see from my link, alot of images/text can be part of the background.

I can have my bg,etc in a table. I'm not asking someone to code the entire site in CSS. I was just wanting an external style sheet for the mouseovers and a few text links.

Basically, the layout that i'm showing can all be part of the background in a table. I'm going to use a table so i can easily insert my shoutbox, etc. Only small text links in the content boxes and the image navigation on the left for the photo gallery would be CSS.

And i know this is asking people to help me out and do something for me. As i said before, i'm very frustrated and think seeing this sheet in action and playing with it/tearing it apart would help me alot.

I didn't mean to be rude. I've done logo work/graphics for people before who were new and were lost trying to get an effect or people who just needed visual ideas. For instance, doing something in Photoshop and then sending them the psd also. Whether that's the right way or not, i was happy to help.

Yes, i hate to ask. Just thought it was worth asking and that it would help me out in the long run.

Thanks :)

02-11-2005, 03:41 PM
I didn't mean to be rude
You weren't rude in any way; it's just that all members around here do this for free, and the time they have to spend on helping out others is, sadly, limited. Creating a complete style sheet is a lot of work, hence the emphasis on more bite-sized requests.

Okay, just to get you started: using tables for layout purposes poses some serious drawbacks; nowadays, CSS positioning is the prefered route. Since you're not very familiar with CSS yet, though, as an intermediate approach a one row, two cell table could be used to create the menu on one side and the other boxes as a whole on the other. All other layout work should best be done with CSS, though, and with a bit of help it shouldn't be too hard.

The menu could be done using two styled, unordered lists next to eachother; the images can be made part of the list items, absolutely positioned out of their normal position to line up next to each list item. That way, a mouseover effect can be added to them slightly more easily (for instance, turning them from black-n-white to color on mouseover as seen on the adaptive path (http://www.adaptivepath.com/) site).

The boxes on the right can be done using fairly standard markup, a bit of CSS and floating; the drop shadows would be a bit more of a challenge, though, but still doable. Time-consuming, but doable.

Two questions:

Would you like this site to have fixed width, or should its width adapt to the available window width?
Do you have any specific questions about CSS you'd like some help with, concepts or mechanisms you just can't figure out?

02-11-2005, 04:37 PM
Thanks Ronald.

Here's what i thought would be best seeing as how i'm a CSS newbie.

I would have a table with a single cell at the top for the header graphics and 2 cells below for the left column and the main content area. I may add a cell later for my shoutbox, etc.

I was planning on slicing the image and using the images as bg's in the cells. None of the content boxes, drop shadows, or even text in the example would need to be CSS. Since the only text that i need positioned and styled would be the small text links that i will have a the bottom of a couple of the content boxes. Even the text of the boys names can be part of the bg.

Which means only about 2-3 instances of text and the mouseover navigation.

I figured the more simple the better right now.

In answer to your question Ronald, I think a fixed width will work for now. Most of my families, if not all of them, will be viewing at 800x600. But i'll try to center everything so that at higher resolutions, it will just mean more space on
either side.

I am trying to learn and pick up on this. I am currently working on a tutorial at this address link (http://www.westciv.com/style_master/academy/hands_on_tutorial/01.introduction.html)

I was told it was a good one.

By the way, thanks for that great link. That's a good example of what i'd like to accomplish with my navigation. A site like that gets me pumped about CSS!!


Thanks. :cool:

02-11-2005, 04:47 PM
I would strongly recommend implementing texts as text and not as images, apart from the odd header (like the big logo header up top); changing text is far easier then editing images, it far more flexible (flowing, wrapping, sizing, etc.) and lasty but not least, takes up far less space!

I was told it was a good one
It looks very good; good luck with the study! I know it looks hard in the beginning, but once you understand the general principles it will get easier to "think styles".

02-13-2005, 11:55 PM
I'm using the tutorial i found and have a question.

I have an external style sheet with the <h2> coded for my 4 link states, but when i preview it, it's still underlined, wrong color, etc. Like the browser/html is overriding it.

<h2><a href="http://www.blahblahblah.com/02gallery" target="_blank">...more</a></h2>

i also have this code in my style sheet

a:link {
color: #000066;
background-color: #CCCCCC;}

a:visited {
color: #000066;
background-color: #CCCCCC;}

a:hover {
color: #CCCCCC;
background-color: #000066;}

a:active {
color: #CCCCCC;
background-color: #000066;}

Now, will this code(a:) apply to the links on my page? Or am i wrong when i try to have a link in my <h2> tag like i do above?

Sorry for the probably dumb question.

I'm terrible at hand coding too because i'm used to dreamweaver, lol.

For all i know that could be the problem.

At least in the end i'll know alot more about hand coding as well.


02-14-2005, 12:05 AM
Add this to your stylesheet;

h2 a {
text-decoration: none;

With this you are just sayin: any anchor that is within a h2 tag shouldn't have an underline.

Kind Regards,


02-14-2005, 12:13 AM

In my style sheet i have:

h2 {
font-size: 11px;
text-align: justify;
font-weight: bold;}

a:link {
color: #000066;
background-color: #CCCCCC;}

a:visited {
color: #000066;
background-color: #CCCCCC;}

a:hover {
color: #CCCCCC;
background-color: #000066;}

a:active {
color: #CCCCCC;
background-color: #000066;}

In my html code i have this:

<h2><a href="http://www.leopardsbaseball.com/02gallery" target="_blank">>>more</a></h2>

I want the text ">>more" to be the link and have the link styles. Is this wrong?
Because when i preview it in FF the link is still underlined and the wrong color.

I'm sure this is simple, but i'm new to it.

The tutorial has a wysiwyg editor that it uses, but i'm trying to learn the css/html code along the way.


02-14-2005, 12:27 AM
It's not wrong... something can be both a link and a header.

As Gary said, you might need to apply the rules of specificity (in other words, adding "h2 a {whatever}" to the stylesheet, but...

It looks like a problem is the ">>" which can trip some browsers up. Change those to "&gt;" and see if that helps.

02-16-2005, 12:38 AM
I've been working on styling, positioning my text for my site. It's going pretty well.

One thing i've run into, i text that i've positioned and then set the width so that it fits nicely in my "content box", but i've noticed that when the text is adjusted to fit in the width, i end up with large spaces between words in some places, etc.

Also, say i have a section of text that consists of a couple paragraphs and i want vertical space between paragraphs, what would be the best way to accomplish this? I know i could put the next paragraph in i different tag and position it again. But this seems like alot of extra work for a little space.

Thanks for any help.


02-16-2005, 08:59 AM
Without a peek at the actual markup and styling it's hard to say anything conclusive, but have you justified the text? This can cause rather large gaps, and is therefore usually not the best choice for web pages. In print, the text can be tweaked to yield a consistent result without too large gaps; on a web page, there's no way to influence the result.
Either left or right aligned usually works better.

Vertical spacing between paragraphs should be done through styling; usually margins. If a special case of spacing is needed, it may be necessary to use a class to be able to address only those specific paragraphs. At any rate, adding superfluous markup for spacing is not advised.

02-16-2005, 10:29 PM
I've positioned and styled some text on my site. I'm still using a table, but if i can get this text sorted out, i'm going to try going without tables altogether.

What i have so far looks ok on FF at 800x600, but in IE, well, what a mess!!!

I'm sure my code is terrible, this could be most of the problem.

For instance, i'm not even sure if the tags i'm using are the best choice(p1,p2, etc)

I just tried adding more text. Positioned the with the same top margin, but with more left margin, and all the other text moved all over the place.

Some things that concern me. What will different resolutions do to my text positioning, etc?

What if someone uses different sized fonts. Couldn't this really mess up a site?

Here's a link to the site, and css file.

site link (http://www.leopardsbaseball.com/style/site5.htm)
css file (http://www.leopardsbaseball.com/style/baseballsheet.css)

02-17-2005, 10:37 AM
Absolutely positioning everything is not such a good idea. The precise control might look good initially, but everything is so inflexible that the slightest change me throw everything off.
Try to leave things in the normal flow as much as possible and if possible account for variance; there is a number of approaches to accomplish this.

Coding-wise, you've got a chunk of regular markup in between two table rows; this is definitely not how a table should be marked up.

And what's going on with all the hx elements? The number in these elements indicates a level, not a sequence, meaning the h1 header is not the first, followed by the second h2 header, etc, but rather the h1 header is the top level header (compare to the chapters in a book), the h2 header indicates the next level below the h1 (like sections within a chapter), etc.

Although opinions vary, a common approach is to use the h1 header for the page title (and not the site title!), making the page quasi a "chapter" of the site. h2, h3, etc. headers are used to mark up section titles within the page, resp. within page sections, etc.