SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: CSS links issue

  1. #1
    SitePoint Member picselate's Avatar
    Join Date
    Aug 2006
    Location
    Romania
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS links issue

    I have a big issue ... i just started to put together the xhtml/css for a site i code ... see it here .

    Anyway even if i defined the links very clearly with the positioning and everything the links are messed up, overwrite styling ...

    I really don't understand which is the issue. The xhtml/css validate.
    I'm confused.

    Please help me ASAP if you can.
    Ty
    Best regards,
    Bistrian
    web creative

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Most of your problems are caused by this sort of thing:

    Code:
    #container #top h3 a, a:visited, a:hover, a:active
    It should be:

    Code:
    #container #top h3 a, #container #top h3 a:visited, #container #top h3 a:hover, #container #top h3 a:active
    because otherwise you're setting the visited, hover and active state for every link on the page to whatever the style is.
    You also seem to be lacking an understanding of the concept of the cascade in CSS. There's no need to repeat everything for each rule. For instance, this:

    Code:
     #container #navcontainermain li a#specificatii {
     	font-family: Verdana, Arial, Helvetica, sans-serif;
     	font-size: 11px;
     	font-weight: normal;
     	color: #333333;
     	text-decoration: none;
     	display: block;
     	line-height: 38px;
     	background-image: url(images/meniu.gif);
     	background-repeat: no-repeat;
     	height: 38px;
     	width: 191px;
     	float: left;
     	text-align: center;
     	position:relative;	
     }
     
     #container #navcontainermain li a#specificatii:hover {
     	font-family: Verdana, Arial, Helvetica, sans-serif;
     	font-size: 11px;
     	font-weight: normal;
     	color: #FFFFFF;
     	text-decoration: none;
     	display: block;
     	line-height: 38px;
     	background-image: url(images/meniu.gif);
     	background-repeat: no-repeat;
     	height: 38px;
     	width: 191px;
     	float: left;
     	text-align: center;
     	position:relative;	
     	background-position: 0 -38px;
     }
    can be rewritten like this:

    Code:
     a#specificatii {
     	font: 11px Verdana, Arial, Helvetica, sans-serif;
     	color: #333;
     	text-decoration: none;
     	display: block;
     	line-height: 38px;
     	background: url(images/meniu.gif) no-repeat;
     	height: 38px;
     	width: 191px;
     	float: left;
     	text-align: center;
     	position:relative;	
     }
     
     a#specificatii:hover { background-position: 0 -38px; }
    That could be reduced further if you added the base font rules to the body and then adjusted the font-size for different elements throughout (you don't need to specify font-weight: normal unless something is bold by default like a heading or has inherited it from a parent element).

    You also don't need to do #container #navcontainermain li a#specificatii as a#specificatii is specific enough.

  3. #3
    SitePoint Member picselate's Avatar
    Join Date
    Aug 2006
    Location
    Romania
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    thanks mate, this was very useful
    it's fixed now, million thanks


    can an admin close the tread please ?
    Thanks again
    Best regards,
    Bistrian
    web creative


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •