Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jun 2007
    Posts
    28
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Change div color on hover...

    Im trying to create a box on the left corner with links inside and when you hover over a link, the 15px grey will change color but I cant think of how i can do it.... and i feel the code is a bit cluttered....

    Is there a better way of accomplishing this:


    <div style="
    float: left;
    width: 150px;
    border-style: solid;
    border-top-style: none;
    border-left-style: none;
    border-right-width: thin;
    border-right-color: #CAF2FA;
    border-bottom-width: 1px;
    border-bottom-color: #CAF2FA;
    margin: 0 auto;
    padding: 0;
    ">
    <div style="height: 25px; background-color: #f2feff;"><span style="width: 15px; height: 25px; display: block; background-color: #DEF5F7;"></span></div>
    <div style="font-size: 10px; width: 15px; background-color: #EBF1F1;"><div style="padding-left: 19px; width: 137px;"><a href="#">dasdasdasd<br />Blah 1<br />Blah 2<br />Blah 3</a></div></div>
    <div style="font-size: 10px; width: 15px; background-color: #EBF1F1;"><div style="padding-left: 19px; width: 137px;">dasdasdasd</div></div>
    <div style="font-size: 10px; width: 15px; background-color: #EBF1F1;"><div style="padding-left: 19px; width: 137px;">dasdasdasd</div></div>
    <div style="font-size: 10px; width: 15px; background-color: #EBF1F1;"><div style="padding-left: 19px; width: 137px;">dasdasdasd</div></div>

    </div>

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Do you want the whole box to change colour, or just the link background? A list of links should be in a list rather than a bunch of divs. You can use the :hover pseudo class on <a> elements only in IE
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #3
    New Coder
    Join Date
    Jun 2007
    Posts
    28
    Thanks
    2
    Thanked 0 Times in 0 Posts
    i tried the list method first but then when i added line breaks, it didn't line up correctly...

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,918
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Now, first and foremost: semantic HTML is the way to go. As ahallicks stated correctly a list of links belongs in an actual list. Then you don’t add line breaks in the HTML, you style that list with CSS. That’s what this whole shebang is made for.

    Semantic code means: no useless elements. An element is useful if it marks its content properly, i.e. <p> for a paragraph of text, <h1> for a primary headline, <ul> for an unordered list, <div> for a logical division of the page (ead more on this in this article). The basic thought is: if it doesn’t make sense when viewed without styles then it’s wrong.

    Now back to your actual problem. Try this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
    ul {
    	clear: left;
    	margin: 0;
    	padding: 25px 0 0 0;
    	list-style: none;
    	border: 1px solid #CAF2FA;
    	border-left: none;
    	width: 150px;
    	background-color: #F2FEFF;
    }
    li {}
    li a {
    	border-left: 15px solid #EBF1F1;
    	display: block;
    	width: 135px; /* needed for IE */
    	background-color: white;
    }
    li a:hover {border-color: #900;}
    </style>
    </head>
    
    <body>
    <ul>
    	<li><a href="#">link</a></li>
    	<li><a href="#">link</a></li>
    	<li><a href="#">link</a></li>
    	<li><a href="#">link</a></li>
    	<li><a href="#">link</a></li>
    </ul>
    </body>
    </html>
    You might wanna add a background image to the ul element for the little square on top left.
    Last edited by VIPStephan; 07-18-2007 at 08:21 PM.

  • #5
    New Coder
    Join Date
    Jun 2007
    Posts
    28
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ahhh yes.. i kinda knew my code was cluttered and messy. Thanks for the link Stephan and much thanks for the alterations. I really appreciate it.


  •  

    Posting Permissions

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