Assistance with

  • CIW_Wol
  • Novice
  • Novice
  • CIW_Wol
  • Posts: 23
  • Loc: London,Uk

Post 3+ Months Ago

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

Post 3+ Months Ago

  • zaiah
  • Proficient
  • Proficient
  • zaiah
  • Posts: 375

Post 3+ Months Ago

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
  • snuggles
  • Posts: 27

Post 3+ Months Ago

Code: [ Select ]
h3 a {
background-color: #000000;
}
  1. h3 a {
  2. background-color: #000000;
  3. }
  • zaiah
  • Proficient
  • Proficient
  • zaiah
  • Posts: 375

Post 3+ Months Ago

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
  • CIW_Wol
  • Posts: 23
  • Loc: London,Uk

Post 3+ Months Ago

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
  • CIW_Wol
  • Posts: 23
  • Loc: London,Uk

Post 3+ Months Ago

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
  • zaiah
  • Posts: 375

Post 3+ Months Ago

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
  • snuggles
  • Posts: 27

Post 3+ Months Ago

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
  • CIW_Wol
  • Posts: 23
  • Loc: London,Uk

Post 3+ Months Ago

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
  • Posts: 34

Post 3+ Months Ago

Were these replies helpful for you?
  • CIW_Wol
  • Novice
  • Novice
  • CIW_Wol
  • Posts: 23
  • Loc: London,Uk

Post 3+ Months Ago

Yes the replies were of great use and very helpful.

Post Information

  • Total Posts in this topic: 11 posts
  • Users browsing this forum: No registered users and 73 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
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.