Css- Help

Discussion in 'Web Design and Development' started by janitorC7, Nov 5, 2006.

  1. janitorC7 macrumors 6502a

    janitorC7

    Joined:
    Feb 10, 2006
    Location:
    North Hollywood, CA
    #1
    why on this page I'm designing. when I have an a:eek:ver on the home link.

    Does only the word get effected instead of the entire div.'

    and why does home show up as blue and underlined

    Thanks
     
  2. janitorC7 thread starter macrumors 6502a

    janitorC7

    Joined:
    Feb 10, 2006
    Location:
    North Hollywood, CA
    #2
  3. nightelf macrumors 6502

    Joined:
    Mar 25, 2003
    #3
    This my posts

    http://forums.macrumors.com/showthread.php?t=246430

    The <A hover> will only affect the word, because is an inline tag. You need to specify in the CSS to treat the A as a block.

    Check the CSS and HTML I wrote in your previous post and they should work correctly.
     
  4. janitorC7 thread starter macrumors 6502a

    janitorC7

    Joined:
    Feb 10, 2006
    Location:
    North Hollywood, CA
    #4
    Ok. thanks as helpfull as that was I'm still really lost. I'm new to this CSS idea and need some more help. I'm using Dreamweaver 8. Please HELP. Below is all of my code

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    #wrap {
    	margin: auto;
    	width: 812px;
    }
    #wrap #Topnav #logo {
    	float: left;
    	height: 49px;
    	width: 269px;
    	background-image: url(/images/topbar.jpg);
    }
    #wrap #Topnav {
    	height: 49px;
    	width: 812px;
    	margin-bottom: 10px;
    }
    #wrap #body {
    	float: left;
    	width: 543px;
    	padding: 4px;
    }
    #wrap #nav {
    	float: right;
    	width: 261px;
    }
    #wrap #body #image {
    	background-image: url(/images/Untitled-6.jpg);
    	background-repeat: no-repeat;
    	background-position: center center;
    	height: 245px;
    	width: 521px;
    	background-color: #000900;
    	margin-bottom: 20px;
    }
    #wrap #nav #NAVTITLE {
    	font-family: Futura;
    	background-color: #726969;
    	color: #d8d5d5;
    	font-weight: bold;
    	text-transform: uppercase;
    	font-size: 24px;
    	position: inherit;
    }
    #wrap #nav #NAVLINKS {
    	color: #726969;
    	background-color: #D8D5D5;
    	font-family: Futura;
    	font-size: 18px;
    	position: relative;
    	padding-top: 10px;
    	padding-bottom: 10px;
    	border-top-width: thick;
    	border-bottom-width: thick;
    	border-top-style: solid;
    	border-bottom-style: solid;
    	border-top-color: #D8D5D5;
    	border-right-color: #D8D5D5;
    	border-bottom-color: #D8D5D5;
    	border-left-color: #D8D5D5;
    }
    #wrap #nav #NAVLINKS div a:hover {
    	color: #D8D5D5;
    	background-color: #726969;
    }
    #footer {
    	clear: both;
    }
    -->
    </style>
    </head>
    
    <body>
    <div id="wrap">
      <div id="Topnav">
        <div id="logo"></div>
      </div>
      <div id="body">
        <div id="image"></div>
        <p><a href="#"></a></p>
      </div>
      <div id="nav">
        <div id="NAVTITLE">
          <div align="center"> NAVIGATION</div>
        </div>
        <div id="NAVLINKS">
          <div align="center"> <a href="#">HOME</a></div>
        </div>
        <div id="NAVLINKS">
          <div align="center">OVERVIEW</div>
        </div>
        <div id="NAVLINKS">
          <div align="center">PROS/CONS</div>
        </div>
        <div id="NAVLINKS">
          <div align="center">FAQ</div>
        </div>
        <div id="NAVLINKS">
          <div align="center">DATA</div>
        </div>
        <div id="NAVLINKS">
          <div align="center">MISSIONS</div>
        </div>
        <div id="NAVLINKS">
          <div align="center">CONTACT</div>
        </div>
        <div id="NAVLINKS">
          <div align="center">LEGAL</div>
        </div>
      </div>
    </div>
    </body>
    </html>
     
  5. epochblue macrumors 68000

    epochblue

    Joined:
    Aug 12, 2005
    Location:
    Nashville, TN
    #5
    Here's my shot at this:
    There are two kinds of elements in HTML - inline and block.

    An anchor (a) tag is an inline element. A div, for example, is a block element.

    An inline element is just the text, nothing else. A block-level element is a containing element (think, p-tag or div-tag). When you style a block level element, you're styling everything within it as well.

    Since you have the hover pseudo-class on the inline element (the a tag), you're only affecting the text, not the surrounding area.

    You have two possible solutions to this problem -

    1) make the a-tag a block level element by adding this rule to the a tag (in your css file) in question -- display: block; All the other a tags should inherit that. Be aware this could create other problems if you're currently designing around a being inline.

    2) apply your hover pseudo-class to the div instead. Be aware that only non-IE browsers (save IE7) recognize the hover on non-a elements.

    CSS can be tricky, but once you get comfortable with it, can be extremely powerful as well.



    Edit: as it pertains to above, these are your options:

    1)
    #wrap #nav #NAVLINKS div a:hover {
    display: block;
    color: #D8D5D5;
    background-color: #726969;
    }

    or 2)
    #wrap #nav #NAVLINKS div:hover {
    color: #D8D5D5;
    background-color: #726969;
    }
     

Share This Page