Jump to content
Killersites Forums

Can I have different colors for hyperlinks on the same page?


Baggy
 Share

Recommended Posts

We have 2 navigation bars on our web pages - the original ones across the top, created by the site designers and a new one down the side, added by me.

 

The index.html which I am using as the 'template' for new pages I'm adding(my description - not a 'proper' template), has some CSS script at the top of the code to the page. In there it says - a: link colour:#ffffff text-decoration: none. As a result the text in the new navigation bar (nested table) changes from dark grey (#666666) to white, when I create a hyperlink.

 

Is there a way to stop this so that the font color doesn't change please?

Link to comment
Share on other sites

Yes, you can. You'll just need to add some css specifying the new link color. For example, say your nav bar has a class of "nav", you could add this to your css file:

 

.nav a:link { color:#666666; }

 

and remember, there are other states for links, which include:

 

a:visited, a:hover and a:active.

 

"link" is a regular link, "visited" is a link that has been visited, "hover" is a link that the user is hovering over with the mouse, and "active" is a link in the moment when it is being clicked.

Link to comment
Share on other sites

Do you have the page posted anywhere online? It's much easier to look directly at the code.

 

If I understand you correctly, you'll need to select the entire nav bar, and give it a class by adding "nav" to the class input in Dreamweaver. Then, you'll need to add the css I showed you above, or edit it to your liking and then add it.

Link to comment
Share on other sites

If I click on the edge of the table, so that the border becomes black and it's then possible to drag the sizes in/out, up/down, then in Properties it just refers to Table ID. If I click on the table border again, it turns blue and Properties shows the Div ID and Class, as mentioned previously. This is in Dreamweaver CS3 by the way.

Link to comment
Share on other sites

Ben,

 

many thanks, I have now got the linking/colour issues sorted - very grateful.

 

One more, related, question if I may ....

 

The table I have inserted inside a Div, for the nav bar, moves down the Div when the text expands the page. I realise I can lock it to the top/middle/bottom of the Div. However, for appearances, I would like it to appear about 1/4 of an inch below the top of the Div, so that it has the background colour of the Div as a border. This would result in the 'margin/border' looking roughly equal round the top & sides.

 

Can this be done?

Link to comment
Share on other sites

You can have different colors on different Menus by using a class or an ID to identify the menus.

.class a:link { color: white; }
.class a:hover { color: red; }

#id a:link { color: black; }
#id a:hover { color: blue; }

An ID would be 'stronger' than a class. Specificity applies more strength to the ID.

Link to comment
Share on other sites

jlhaslip - thanks for the response, got that sorted now, cheers.

 

Need to sort out how to permanently position a table within a Div, to stop my new Nav Bar moving down when text in the main section extends the page.

 

That's the one that seems to be causing some 'head scratching',

Link to comment
Share on other sites

I guess I'm doing it the only way I know how?
You can do whatever you want to - but if you should decide you want to do/learn it the right way, you may want to use divs for layout and tables for tabular data.
Link to comment
Share on other sites

Thelma,

 

Firstly, can you please explain what is wrong with using tables for a navigation bar?

 

Second, I'm just trying to make the site look as good as possible, whilst we add a lot more content. Once this is done, I propose to hand over to a professional to have a complete make-over, The layout methods will be updated/improved then.

 

For now, I would really appreciate it if you/someone can tell me if I can fix the position of the table, a little way down from the top of the Div which it is nested in, as it would then look better on each page.

 

cheers

Link to comment
Share on other sites

Navigation is a list of items - that's why navigation menus should be coded as a list. HTML tags have semantic meaning. Of course you can style your titles with an inline tag, but there are tags which assign specific importance to titles - that's helpful for search engines - for detailed discussions, see Follow the links in the first two posts

 

I thought you had posted a link, but if so, then maybe our Spambot got it. Can you repost, but include spaces to prevent that - for example: www. ki llersi tes.com (break up any words that could be found by google, etc.)

Link to comment
Share on other sites

Thanks again Thelma - a lot of reading there, which I will get to asap.

 

In the meantime, here's a link to the 'test' index page I'm working on:-

 

www. shire finan cial.co.uk/new_work/index1.html

 

I've already been told the code is a mess - I'm just trying to make the best of a bad job for now as previously explained.

 

cheers

Link to comment
Share on other sites

I started looking into it - but it's such a mess with all the table cells.... which makes another excellent point to NOT use tables - they create a ridiculous code-mess which makes updating more difficult, and trying to adjust stuff a major PITA.

 

I managed to get the navigation grid to align with the top by:

 

/blank-spacer.gif" width="5" height="5">

 

And to your internal styles, add:

 

#leftnav {margin-top: 30px;}

 

that should do it.

Link to comment
Share on other sites

It would be a pity if you launch new website on outdated code, so, to promote more semantic and "table less" coding I've re-used one of standard templates into your layout on CSS basis. You can copy-paste HTML of this template, download CSS file with it and edit it further.

nice work. very nice of you to do this.

Link to comment
Share on other sites

Thelma - many thanks done that and it works fine - very grateful.

 

Im - that is so kind of you, many thanks indeed. Errr ... I just need to understand what you mean by "You can copy-paste HTML of this template, download CSS file with it and edit it further."

 

I understand that I view 'source' in the page in your link, copy & paste the code, done that and saved it. I don't understand what to do next - sorry, I know I'm being thick!

Link to comment
Share on other sites

sorry, I know I'm being thick!
You're not being thick - you're new. Work through some of Stef's tutorials to get an understanding of HTML and CSS - it'll help you understand what lm is talking about:

 

http://www.killersites.com/forums/topic/76/where-can-i-learn-web-design/

Link to comment
Share on other sites

I will leave this page online for the time being till you get all files.

So you will need 2 files- HTML you copy from seeing source code of a page and css file.

How to get CSS:

1.find this line in HTML:


As you can see, HTML page is connected to style.css file which you will need to keep in a same folder, as your HTML page.

2.this is a link to style.css file

3.Copy- paste all css:

In your Dreamweaver create a new file with .css extension and copy paste all css into it. Save this file as style.css.

Once you've done it, preview your HTML page in browser now: you should see your very own CSS template with all images, colors and so on. Now you can edit both HTML and CSS the way you want it.

4. Keep us updated on your progress :D

5. Dont give up - if you once go all the way with CSS, you'll learn how to create modern websites.

Link to comment
Share on other sites

lm - once again thanks - but I am still struggling to follow your instructions.

 

Here's what I've done so far:

 

followed the link to the .css file and copied all the code then in DW I've created a new Folder (SFM-css) so that I don't risk screwing-up what I've already done (which, so far I'm quite pleased with, compared to what we have 'live' on the web at present).

 

In the new folder, I created a new file and named it style.css and pasted all the copied code into and saved it.

 

I think you're saying that I only need an HTML file in here now to make this 'new version of the site' work? If so, do I copy index1.html (my work-in-progress Home Page) into the new folder and put into the code somewhere to make it work off 'style.css'

 

Or have I got that totally wrong (again)?

 

I hope this is not too exasperating for you!

Link to comment
Share on other sites

I think you're saying that I only need an HTML file in here now to make this 'new version of the site' work? If so, do I copy index1.html (my work-in-progress Home Page) into the new folder and put into the code somewhere to make it work off 'style.css'
You need to use the HTML file that lm created - not your old one. Yours doesn't have the proper divisions, etc. to work with the stylesheet. Use her html page, just update it with your content.
Link to comment
Share on other sites

Thelma - got it, thanks. I have it working in DW, now I just have to learn how to edit it!

 

It looks and works quite differently from what I'm used to (in my very limited experience), for instance, I can't see any measurements for the gaps around/between the images and nav bars and there are some adjustments needed.

 

I will certainly try to get to grips with this but may have to just put the finishing touches to what we have so far, for expediency, as I fear it will take me some time to learn the CSS 'way'.

 

Many thanks to both of you for your kind help so far.

Link to comment
Share on other sites

I can't see any measurements for the gaps around/between the images and nav bars and there are some adjustments needed.

Now you can do these adjustments in browser, previewing your page.

Install Firefox ( if you havent got it yet), and Web developer bar plugin to it.

Then preview your page in Firefox, click CSS - Edit CSS on Web developer bar and changing margins, you can move your divs around.

On the same Web Developer Bar there is a button Outline. Click on it and choose the option Outline block level elements - you will get the position of all divs and other blocks in your template. Again, changing margins in CSS, adjust the position of the divs.

Link to comment
Share on other sites

No problems, it is just a learning curve.

Believe me you've made a big step forward a lot already, editing now your page in Firefox.

Now if you see your your CSS in Edit CSS,

look there for id of box you want to move, it will be something (for example) like in these lines:

 

#leftheading           { background-image: url(http://www.shirefinancial.co.uk/new_work/images/left-pen.jpg); background-repeat: no-repeat; background-position: center top; display: inline; margin: 0 4px 0 0; width: 245px; height: 200px; float: left; padding: 0; }
#centerheading           { background-image: url(http://www.shirefinancial.co.uk/new_work/images/middle-montage.jpg); background-repeat: no-repeat; background-position: center top; display: inline; margin: 0 2px 0 0; padding: 0; width: 250px; height: auto; float: left; }
#rightheading         { background-image: url(http://www.shirefinancial.co.uk/new_work/images/right-money.jpg); background-repeat: no-repeat; background-position: center top; display: inline; margin: 0; padding: 0; width: 245px; height: auto; float: right; }

 

look for this in #leftheading line:

margin: 0 4px 0 0;

now, if you change 4px to 6px, you'll move nearby box ( #centerheading) to the right. And so on.

 

By the way, to pick up CSS very quickly, go through W3schools CSS tutorials.

 

Ask you questions if you need help.

Edited by lm
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...