Jump to content

Footer; links and colors


harryd

Recommended Posts

I have a simple css #navigation.

 

Home

 

I would like to have a different color text and links in the footer from the rest of the page.

Should I use #footer ul li {..} and how would my div look.

 

 

Could I do it like this but again I would need different text and link color in the footer.

Home | Contact Us | Directions | About Us | Resources

 

 

Thanks

HD

Edited by harryd
Link to comment
Share on other sites

There are no Internet Police that will come knocking on your door if you use the Html you propose.

In fact, for a horizontal row of links, that would be quite acceptable.

Use :

#footer p {}
and #footer a {}

to markup the text and links in the footer.

Link to comment
Share on other sites

Simple enough once you think about it... just a matter of thinking in a new form.

 

The best thing to do (for any site) is to use includes (PHP for instance, but most languages have them). The include inserts the content of a specified page in to a place holder.

 


        [include place holder, for instance to: nav.inc]

 

 


        [include place holder, for instance to: nav.inc]

 

 

 

nav.inc:

Home
Link 1
 Link 2
 Link 3

 

This way you use the same links in both places, need to add or change a link, do it in one place and it is shown on all pages and both navs. The formatting in not done in the include, this is just the straight clean HTML. Any formatting for the look is defined in the ID's CSS, GlobalNav and FooterNav. So the same links look different depending on which ID they are in.

 

Additionally using the full URL to the links allows you to place the same nav in any folder/level of the site and not have to muck around with relatively linking, the link always goes straight to where the page is.

Link to comment
Share on other sites

One more thing.

 

I would like to keep it simple like this. How can I have different colors just for footer.

Home | Contact Us | Directions | About Us | Resources

 

Footer

#footer {

width: 900px;

height: 200px;

clear: both;

color: #A60000;

border: 1px solid #ccc;

background-color: #78B876;

margin: 0px 0px 10px 0px;

padding: 10px;

 

}

 

This are my links in css

a {

color:#005100;

border-bottom:none;

text-decoration:none}

a:visited{

color:#00D700;

border-bottom:thin;

}

a:hover{

text-decoration:underline; color:#009933;

}

 

Thanks again

Edited by harryd
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...
×
×
  • Create New...