Other Design Help

[Mings]

Question: Using CSS, I am wanting to have one link style a certain way (no underline, first color pink, second white) but want a second link style to have the second color of grey but the same first color and underline) how can I set it up to do this. Currently it all goes to the 1st one when I do it. Do I just change the color manually, or is there a code way to do it as well? Thanks.

[pollux]

I'm assuming you're talking about the website you did earlier this summer... So I went back to see how you coded your CSS.

Since you have created div tags with different ids for the header and the rest of the document, here's what you can do to have different styles on different links:

#Layer2 a:link, #Layer2 a:visited {
text-decoration: none;
color: #F881BF;
}

#Layer2 a:hover {
text-decoration: blink;
color: #FFFFFF;
}

This will tell the sheet to apply the style only on links included in the Layer2 div. You can do the same with your Layer3, and then change the colors/settings on those links.

------

I see that you have lots of font tags and on-the-fly CSS (for lack of a better term). I really encourage you to make an external CSS stylesheet, and then add the link to all your pages. This way, when you make a change, you'll only need to do it at one place instead of having to change all the pages. Then all you have to do in your stylesheet is to either create specific classes or overwrite the standard HTML tags.

Here's a quick example for you : Example. Okay, it's in french, but what I want to show you is how clean the HTML code looks like. I only created a couple of classes, and overwritten html tags within those classes so that they behave differently, depending on where they are in the document.

Here's the CSS: CSS document.

#menu {
	float:left;
	width: 150px;
}

#menu ul {
	list-style-type: none;
	padding: 0px; margin: 0px;
	font-weight: bold;
	padding-bottom: 20px;
}

#menu li a {
	height: 20px;
	display: block;
	line-height: 20px;
	padding-left: 15px;
	color: #333333;
	text-decoration: none;
}

#menu li a:hover {
	height: 20px;
	display: block;
	background: url(../images/lien.gif);
	color: #FFFFFF;
}

This is a good example of what I did. In the left menu, I wanted to have links with changing background image, embedded in a list. So I changed the ul and li tags to better fit my needs. This will result in a quicker loading page (no tables except for data like standings...) and also, if you remove the stylesheet from the page, it will still display something that is easily readable.

[Mings]

Yeah I bought a book, and I'm trying right now to get it to do it all in a CSS stylesheet. Can I do such things as placement of objects and background color, stuff like that on the style sheet too, or is it better to just do div tags?

And yeah, its the same website. Its gonna be my guinea pig to learn CSS.

Edit: Here is the early going for it: New Website.

[paynomind]

Wow. Pollux, nice answer. Very thorough. I think it is nice of folks who know what they are doing to spend so much time researching and giving the correct and detailed answer to someone.

Very nice of you. Well done.

[Mings]

Wow. Pollux, nice answer. Very thorough. I think it is nice of folks who know what they are doing to spend so much time researching and giving the correct and detailed answer to someone.

Very nice of you. Well done.

Indeed JR. I looked at his example, and by looking at it, and the way he did it, I answered most of the questions that I had remaining about putting stuff into the Stylesheet.

I do have one more question though. Is there a script that will automattically resize a browser to show just the right size you need to show the site and nothing more? I know there probably has to be. I'm gonna look through the book more, so it might be there. Oh and Pollux, you rock dude.

[pollux]

Yeah I bought a book, and I'm trying right now to get it to do it all in a CSS stylesheet. Can I do such things as placement of objects and background color, stuff like that on the style sheet too, or is it better to just do div tags?

And yeah, its the same website. Its gonna be my guinea pig to learn CSS.

Edit: Here is the early going for it: New Website.

You can do what you want is CSS stylesheets. Positioning is possible, as well as font definition, width, height... There's almost no limit to what you can do using CSS. I had the chance to learn a lot during the past six months and I'm amazed by all the possibilities CSS stylesheet can offer to complement HTML code.

Although you can do positioning in your CSS, I suggest that you don't use absolute positioning. The problem I often see is that the content of a previous div tag can overlap the content of the next div tag because of this. Remember that a new div tag will automatically start a new line, so it'll be aligned under the preceding one.

The rest of your code looks a lot cleaner than what you have on the first version. I'm looking at it and except for the style attribute for the header (which contains an absolute positioning) and the table layout or the links, it is very well written. Kudos on that.

I can suggest that you use background images for both the header and the menu. You will eliminate the absolute positioning you're using right now.

background: url(path_to_image.gif) no-repeat;
width: (image-width)px;
height: (image-height)px;
display: block;

The display element will tell the browser to show all of the width and height. You can put this once in you #body id (which you could rename header, because you can eventually re-write your body tag) and once in your menu.

For the links, you could overwrite the ul and li tags to make them display inline.

#menu ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

#menu li {
    display: inline;
}

And then define your links using #menu li a... You can always center the list by adding a text-align: center to your menu style.

I do have one more question though. Is there a script that will automattically resize a browser to show just the right size you need to show the site and nothing more? I know there probably has to be. I'm gonna look through the book more, so it might be there. Oh and Pollux, you rock dude.

There is a way to resize the window automatically, but I haven't used is for a while. The reason is that I do not think it's necessary to use it, simply because you play around the user's settings. I personally hate it when a website automatically resizes my window, because this isn't the resolution I want. But again, this is your call, and I know there are ways to do it.

And thanks for the compliments

Wow. Pollux, nice answer. Very thorough. I think it is nice of folks who know what they are doing to spend so much time researching and giving the correct and detailed answer to someone.

Very nice of you. Well done.

Thanks JR! Nice to know that some of you read the whole thing through. I may be somewhat impaired when it comes to graphic design, but I learned a lot of things for website design, so I'm happy to be able to share my knowledge here. I think you also do website design if I'm not mistaken, so you probably know as much as I do.

Anyway, I think everybody learns through constructive criticism and knowledge sharing, so I'm happy I can at least contribute!

EDIT: I now realize that my answer is very long... I hope it answers your questions though

Edited December 8, 2005 by pollux

[Mings]

Actually, I did have one more question, but you answered it lol. It was how to get rid of the table lol. With that, I just adjust the margin to space them out a bit, kinda like I have currently?

Thanks again man, I really appreciate it.

[pollux]

Actually, I did have one more question, but you answered it lol. It was how to get rid of the table lol. With that, I just adjust the margin to space them out a bit, kinda like I have currently?

Thanks again man, I really appreciate it.

You can adjust the padding-left and padding-right on the li tag. Make sure you set them the same or it won't align exaclty in the center (if you centered it).

[Mings]

Actually, I did have one more question, but you answered it lol. It was how to get rid of the table lol. With that, I just adjust the margin to space them out a bit, kinda like I have currently?

Thanks again man, I really appreciate it.

You can adjust the padding-left and padding-right on the li tag. Make sure you set them the same or it won't align exaclty in the center (if you centered it).

For some reason that isnt doing it for the individual items, only for the list as a whole.

[pollux]

For some reason that isnt doing it for the individual items, only for the list as a whole.

Very weird... I tested it and it works fine on both Firefox and IE. Here's what I have:

li {
	display: inline;
	padding-left: 10px;
	padding-right: 10px;
}

If it doesn't work, can you post a link on your test? (It's not on the link you posted above...)

[Mings]

Yeah it didn't work for some reason, do I need to do a thing to make it go the whole span or something?

Here is the link for ease of use lol Here

[pollux]

On the provided link, the table containing the links is still there... I hope I'm not bugging you by giving you code, otherwise I'll stop. Anyway, here's what it should look like once you're done modifying it:

In your HTML:

<div id="menu">
    <ul>
        <li><a href="jewelry.htm">Jewelry</a></li>
        <li><a href="gifts.htm">Gifts</a></li>
        <li><a href="knits.htm" target="_self">Knits</a></li>
        <li><a href="about.htm" target="_self">About</a></li>

        <li><a href="contact.htm" target="_self">Contact</a></li>
        <li><a href="photography.htm" target="_self">Photography</a></li>
    </ul>
</div>

In your CSS:

#menu {
    width: 760px;
    text-align: center;
}

#menu ul { list-style-type: none; }

#menu li {
    display: inline;
    padding-left: 10px;
    padding-right: 10px;
}

Then you define your links the usual way...

Hope this helps!

Here's a quick link you can build on, I made it quickly: Quick horizontal lists

[Mings]

How are ya bugging me by giving me code? You have done nothing but help where the book left off. Thanks man. Thats wierd that the table is still there, I must have not deleted it.

[pollux]

I see the problem now! Every link should have its own li tag, so that the padding is applied to each link! This should do the trick!

BTW, I forgot to mention that it would be better if you set the margin and padding of the ul tag to 0px, as there are some default values which may cause some problems.

[Mings]

Its cool, I got it. Works good now. Thanks man.

[pollux]

Its cool, I got it. Works good now. Thanks man.

No problem josh.

I just looked at the code and it looks pretty clean. Good job.

[Mings]

Its cool, I got it. Works good now. Thanks man.

No problem josh.

I just looked at the code and it looks pretty clean. Good job.

Thanks man, without your help,I still would have been lost. But after looking at your code and looking at the book a little more, it all makes a lot of sense yet. I even have a contact form made up. Now Lindsay has to get off her but and get me pics and descriptions so I can get all of that done lol.

[CJR]

Although you can do positioning in your CSS, I suggest that you don't use absolute positioning. The problem I often see is that the content of a previous div tag can overlap the content of the next div tag because of this.

Just wanted to briefly touch on this.

Absolute positioning can cause problems, that's for sure, but it's also a very powerful tool to know how to use. If you're worried about source order, you almost have to use absolute positioning.

[pollux]

Although you can do positioning in your CSS, I suggest that you don't use absolute positioning. The problem I often see is that the content of a previous div tag can overlap the content of the next div tag because of this.

Just wanted to briefly touch on this.

Absolute positioning can cause problems, that's for sure, but it's also a very powerful tool to know how to use. If you're worried about source order, you almost have to use absolute positioning.

I'm not quite sure I understand... I absolutely agree that it can be a powerful tool when you use it correctly, yet I have seen better solutions for source order.

Could you explain a little bit more what you meant for the source order?

[CJR]

I was specifically thinking of page headings and navigation. Most of the time they come first in the page's source code and your content comes somewhere later. Maybe you don't want to make the search engines look so hard for your content (not that they have to look hard on a CSS-based page, anyway), you can list your content first and relatively position it to where you want, then add the other elements at the end of the X/HTML and absolutely position them back to where you want them to appear on the page.

Maybe that's a bad example, I don't know, I'll readily admit that I don't know nearly as much CSS as I'd like.