Back To Website Design Forum

Assistance with

  • CIW_Wol
  • Novice
  • Novice
  • No Avatar
  • Joined: Oct 13, 2004
  • Posts: 23
  • Loc: London,Uk
  • Status: Offline

Post February 14th, 2008, 10:17 am

Hi,

I'm hoping some wise person/s on this great site will be able to point me in the right direction with thie problem I have, I'm pulling my hair out. The site I am creating for someone below http://www.richbroadcast.co.uk/index.htm which has a link to another page listed at the bottom the home page. The problem is that the way I have coded the Css, the link takes the attributes from the menu list which is displayed in white with a black background. This link however needs to be displayed in black on same page with a white background - you need to look to see what I mean. I'm just after some advise on how to resolve or fix really. Any assistance would be greatly appreciated.

Thanks in advance.

Css file below.

Code: [ Select ]
body{
  margin: 0px;
  padding: 0px;
  font-family: Arial, verdana;  
  font-size:small;
  background-color: #000000;
  text-align: center;
  }
h3{
  font-family: Arial, verdana;
  font-weight: bold;
  font-size: small;
  letter-spacing: 0.9px;
  line-height: 1.5em;
  text-align: left;
  margin: 10px 20px 10px 20px;
  }

em{
  font-weight: normal;
  font: normal;
 }
p {
  font-family: Arial, verdana;
  font-weight: bold;
  font-size: small;
  letter-spacing: 0.9px;
  line-height: 1.5em;
  text-align: left;
  margin: 10px 20px 10px 20px;
  }

#wrapper{
  width: 800px;
  height: 550px;
  position: relative;
   }    
#textarea{
  background: url("images/textbox.jpg") no-repeat;
  width: 530px;
  height: 335px;
  position: absolute;
  left: 260px;
  top: 151px;
  }
#LightingCameraman{
  color:#333333;
  width: 530px;
  height: 335px;
  overflow:auto;
  position: absolute;
  text-align: left;
  left: 1px;
   } 
#experience{
  color:#333333;
  width: 530px;
  height: 335px;
  overflow:auto;
  position: absolute;
  text-align: left;
  left: 1px;
    }
#documentarylist{
  text-align: left;
  left: 1px;
  }
#references{
  color:#333333;
  width: 530px;
  height: 335px;
  overflow:auto;
  position: absolute;
  left: 1px;
  text-align:left;
   }

#lightingtext{
  color:#333333;
  width: 530px;
  height: 335px;
  overflow:auto;
  position: absolute;
  left: 1px;
  text-align:left;
  }
#kittext{
  color:#333333;
  width: 530px;
  height: 315px;
  overflow:auto;
  position: absolute;
  left: -1px;
  text-align:left;
  font-weight: bold;
  margin-top: 10px;
  top: 9px;
  }

#logo{
  background: url("images/RJeffsWebsite.jpg") no-repeat;
  width: 218px;
  height: 88px;
  position: absolute;
  left: 0px;
  top: 30px;
  }
#header{
  background: url("images/cameratake.jpg") no-repeat;
  width: 536px;
  height: 78px;
  position: absolute;
  left: 260px;
  top: 30px;
  }
#RichardJeffs{
  background: url("images/Richard Jeffs Lighting Cameran.jpg") no-repeat;
  width: 250px;
  height: 205px;
  position: absolute;
  left: 5px;
  top: 310px;
  }
#referencepic{
  background: url("images/referencepic.jpg") no-repeat;
  width: 250px;
  height: 205px;
  position: absolute;
  left: 5px;
  top: 310px;
  }
#experiencepic{
  background: url("images/experiencepic.jpg") no-repeat;
  width: 250px;
  height: 205px;
  position: absolute;
  left: 5px;
  top: 310px;
  }
#kitpic{
  background: url("images/kitpic.jpg") no-repeat;
  width: 250px;
  height: 205px;
  position: absolute;
  left: 5px;
  top: 310px;
  }
#menu{ 
  width: 138px;
  height: 160px;
  position: absolute;
  left: 0px;
  top: 140px;
  text-align: left;
  }
ul.vert-one{
  margin: 5px;
  padding: 0;
  list-style-type: none;
  display: block;
  font-family: Arial, verdana;line-height:165%;
  font-size: small;
  width: 120px;
    }
ul.vert-one li{
  margin: 0;
  padding: 0;
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
    }
ul.vert-one li a{
  display: block;
  text-decoration: none;
  color: #cccccc;
  background: #transparent;
  width: 120px;
    }
ul.vert-one li a:hover{
  color:#cc0000;
    }
ul.vert-one li a.current,ul.vert-one li a.current:hover{
  color:#ffffff;
    }

#contact{
  position: absolute;
  color: #ffffff;
  line-height: 18px;
  font: arial;
  font-size: small;
  left: 260px;
  top: 120px;
  width: 545px;
    }


#linkList {
    line-height: 2.5ex;
    display: block;
    font-weight: bold;
    text-decoration: none;
    color: #000000;
    left: 1px;
    }
linkList a:link, a:visited{
    color:#ffffff;
    text-decoration: none;
    }
linkList a:hover, a:active {
    color: #cc0000;
    text-decoration: none;
    }
  1. body{
  2.   margin: 0px;
  3.   padding: 0px;
  4.   font-family: Arial, verdana;  
  5.   font-size:small;
  6.   background-color: #000000;
  7.   text-align: center;
  8.   }
  9. h3{
  10.   font-family: Arial, verdana;
  11.   font-weight: bold;
  12.   font-size: small;
  13.   letter-spacing: 0.9px;
  14.   line-height: 1.5em;
  15.   text-align: left;
  16.   margin: 10px 20px 10px 20px;
  17.   }
  19. em{
  20.   font-weight: normal;
  21.   font: normal;
  22.  }
  23. p {
  24.   font-family: Arial, verdana;
  25.   font-weight: bold;
  26.   font-size: small;
  27.   letter-spacing: 0.9px;
  28.   line-height: 1.5em;
  29.   text-align: left;
  30.   margin: 10px 20px 10px 20px;
  31.   }
  33. #wrapper{
  34.   width: 800px;
  35.   height: 550px;
  36.   position: relative;
  37.    }    
  38. #textarea{
  39.   background: url("images/textbox.jpg") no-repeat;
  40.   width: 530px;
  41.   height: 335px;
  42.   position: absolute;
  43.   left: 260px;
  44.   top: 151px;
  45.   }
  46. #LightingCameraman{
  47.   color:#333333;
  48.   width: 530px;
  49.   height: 335px;
  50.   overflow:auto;
  51.   position: absolute;
  52.   text-align: left;
  53.   left: 1px;
  54.    } 
  55. #experience{
  56.   color:#333333;
  57.   width: 530px;
  58.   height: 335px;
  59.   overflow:auto;
  60.   position: absolute;
  61.   text-align: left;
  62.   left: 1px;
  63.     }
  64. #documentarylist{
  65.   text-align: left;
  66.   left: 1px;
  67.   }
  68. #references{
  69.   color:#333333;
  70.   width: 530px;
  71.   height: 335px;
  72.   overflow:auto;
  73.   position: absolute;
  74.   left: 1px;
  75.   text-align:left;
  76.    }
  78. #lightingtext{
  79.   color:#333333;
  80.   width: 530px;
  81.   height: 335px;
  82.   overflow:auto;
  83.   position: absolute;
  84.   left: 1px;
  85.   text-align:left;
  86.   }
  87. #kittext{
  88.   color:#333333;
  89.   width: 530px;
  90.   height: 315px;
  91.   overflow:auto;
  92.   position: absolute;
  93.   left: -1px;
  94.   text-align:left;
  95.   font-weight: bold;
  96.   margin-top: 10px;
  97.   top: 9px;
  98.   }
  100. #logo{
  101.   background: url("images/RJeffsWebsite.jpg") no-repeat;
  102.   width: 218px;
  103.   height: 88px;
  104.   position: absolute;
  105.   left: 0px;
  106.   top: 30px;
  107.   }
  108. #header{
  109.   background: url("images/cameratake.jpg") no-repeat;
  110.   width: 536px;
  111.   height: 78px;
  112.   position: absolute;
  113.   left: 260px;
  114.   top: 30px;
  115.   }
  116. #RichardJeffs{
  117.   background: url("images/Richard Jeffs Lighting Cameran.jpg") no-repeat;
  118.   width: 250px;
  119.   height: 205px;
  120.   position: absolute;
  121.   left: 5px;
  122.   top: 310px;
  123.   }
  124. #referencepic{
  125.   background: url("images/referencepic.jpg") no-repeat;
  126.   width: 250px;
  127.   height: 205px;
  128.   position: absolute;
  129.   left: 5px;
  130.   top: 310px;
  131.   }
  132. #experiencepic{
  133.   background: url("images/experiencepic.jpg") no-repeat;
  134.   width: 250px;
  135.   height: 205px;
  136.   position: absolute;
  137.   left: 5px;
  138.   top: 310px;
  139.   }
  140. #kitpic{
  141.   background: url("images/kitpic.jpg") no-repeat;
  142.   width: 250px;
  143.   height: 205px;
  144.   position: absolute;
  145.   left: 5px;
  146.   top: 310px;
  147.   }
  148. #menu{ 
  149.   width: 138px;
  150.   height: 160px;
  151.   position: absolute;
  152.   left: 0px;
  153.   top: 140px;
  154.   text-align: left;
  155.   }
  156. ul.vert-one{
  157.   margin: 5px;
  158.   padding: 0;
  159.   list-style-type: none;
  160.   display: block;
  161.   font-family: Arial, verdana;line-height:165%;
  162.   font-size: small;
  163.   width: 120px;
  164.     }
  165. ul.vert-one li{
  166.   margin: 0;
  167.   padding: 0;
  168.   border-top: 1px solid #000000;
  169.   border-bottom: 1px solid #000000;
  170.     }
  171. ul.vert-one li a{
  172.   display: block;
  173.   text-decoration: none;
  174.   color: #cccccc;
  175.   background: #transparent;
  176.   width: 120px;
  177.     }
  178. ul.vert-one li a:hover{
  179.   color:#cc0000;
  180.     }
  181. ul.vert-one li a.current,ul.vert-one li a.current:hover{
  182.   color:#ffffff;
  183.     }
  185. #contact{
  186.   position: absolute;
  187.   color: #ffffff;
  188.   line-height: 18px;
  189.   font: arial;
  190.   font-size: small;
  191.   left: 260px;
  192.   top: 120px;
  193.   width: 545px;
  194.     }
  197. #linkList {
  198.     line-height: 2.5ex;
  199.     display: block;
  200.     font-weight: bold;
  201.     text-decoration: none;
  202.     color: #000000;
  203.     left: 1px;
  204.     }
  205. linkList a:link, a:visited{
  206.     color:#ffffff;
  207.     text-decoration: none;
  208.     }
  209. linkList a:hover, a:active {
  210.     color: #cc0000;
  211.     text-decoration: none;
  212.     }
[/code][/quote]
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post February 14th, 2008, 10:17 am

  • zaiah
  • Proficient
  • Proficient
  • No Avatar
  • Joined: Dec 15, 2007
  • Posts: 375
  • Status: Offline

Post February 14th, 2008, 10:38 am

Not going to try and explain it. Plus that would be too easy for you! Check here: http://www.echoecho.com/csslinks.htm

Good luck.
  • snuggles
  • Novice
  • Novice
  • No Avatar
  • Joined: Feb 06, 2008
  • Posts: 27
  • Status: Offline

Post February 14th, 2008, 11:03 am

Code: [ Select ]
h3 a {
background-color: #000000;
}
  1. h3 a {
  2. background-color: #000000;
  3. }
  • zaiah
  • Proficient
  • Proficient
  • No Avatar
  • Joined: Dec 15, 2007
  • Posts: 375
  • Status: Offline

Post February 14th, 2008, 11:17 am

Am I missing something? I turned the css off and I don't even see a link at the bottom. Your email link is messed up however. Looks like you were trying to take the underline off and so now you have a space of one character that will link to your email. Is this the link you were talking about?
  • CIW_Wol
  • Novice
  • Novice
  • No Avatar
  • Joined: Oct 13, 2004
  • Posts: 23
  • Loc: London,Uk
  • Status: Offline

Post February 14th, 2008, 11:23 am

zaiah wrote:
Am I missing something? I turned the css off and I don't even see a link at the bottom. Your email link is messed up however. Looks like you were trying to take the underline off and so now you have a space of one character that will link to your email. Is this the link you were talking about?


Hi,

Yea I am aware of the email link not working properly. That is related to the other links not displaying correctly too. The link on the bottom of the Reference 1 page next to the word Reference 2, (Click here ) is showing in white. :D Hope that helps.
I am reading the article on the link you sent me earlier Zaiah....
  • CIW_Wol
  • Novice
  • Novice
  • No Avatar
  • Joined: Oct 13, 2004
  • Posts: 23
  • Loc: London,Uk
  • Status: Offline

Post February 14th, 2008, 11:31 am

snuggles wrote:
Code: [ Select ]
h3 a {
background-color: #000000;
}
  1. h3 a {
  2. background-color: #000000;
  3. }


8) Thanks for the suggestion fella but not quite the effect I was after.
  • zaiah
  • Proficient
  • Proficient
  • No Avatar
  • Joined: Dec 15, 2007
  • Posts: 375
  • Status: Offline

Post February 14th, 2008, 11:41 am

Not sure, but I'm using Firefox and it's actually blue...But the article should help you. You need to create another class for the links that you want different. Including the email link.
  • snuggles
  • Novice
  • Novice
  • No Avatar
  • Joined: Feb 06, 2008
  • Posts: 27
  • Status: Offline

Post February 14th, 2008, 12:25 pm

CIW_Wol wrote:
snuggles wrote:
Code: [ Select ]
h3 a {
background-color: #000000;
}
  1. h3 a {
  2. background-color: #000000;
  3. }


8) Thanks for the suggestion fella but not quite the effect I was after.


It was meant to be an example of how to access the element so that it was viewable on the background.

Have a play around using h3 a { ... }
  • CIW_Wol
  • Novice
  • Novice
  • No Avatar
  • Joined: Oct 13, 2004
  • Posts: 23
  • Loc: London,Uk
  • Status: Offline

Post March 4th, 2008, 7:57 am

snuggles wrote:
CIW_Wol wrote:
snuggles wrote:
Code: [ Select ]
h3 a {
background-color: #000000;
}
  1. h3 a {
  2. background-color: #000000;
  3. }


8) Thanks for the suggestion fella but not quite the effect I was after.


It was meant to be an example of how to access the element so that it was viewable on the background.

Have a play around using h3 a { ... }




Aaah ok I see ... Thanks that does work.
However I found a special links tag and css code on fixing this.
Thanks to all who replied and took the time to offer assistance.
  • ibragimm
  • Novice
  • Novice
  • User avatar
  • Joined: Feb 21, 2007
  • Posts: 34
  • Status: Offline

Post March 4th, 2008, 8:28 am

Were these replies helpful for you?
  • CIW_Wol
  • Novice
  • Novice
  • No Avatar
  • Joined: Oct 13, 2004
  • Posts: 23
  • Loc: London,Uk
  • Status: Offline

Post March 6th, 2008, 7:43 am

Yes the replies were of great use and very helpful.

Page 1 of 1

Post Information

  • Total Posts in this topic: 11 posts
  • Users browsing this forum: No registered users and 94 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.