SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS help, a hover div

    Hi,

    Iv got a couple of sitepoint books so i thought i would post my question here, it's been annoying me for hours now...

    im trying to get a few div's to have a hover state, it worked fine in firefox but as usuall IE is the problem,

    simply,

    Code:
    a:hover {
    	text-decoration: none;
    	border:none;
    	background-color:#fff;
    	opacity:0.6;
    }
    and

    Code:
    <a href="#"><div id="box5"></div><div id="box5-1"></div></a>
    any help appriciated

    Steven

  2. #2
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi and welcome to Sitepoint

    Seems your structure isn't quite correct: you have block level (div) nested inside inline (a tag). You might rethink that structure

    If you still have problems, post the full html and css code or a link to a live page (because you're new, you wont be allowed yet to post the link in it's normal way, so just replace the dots in the adress with the word 'dot'. We'll do the rest ;-) )
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  3. #3
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Im not sure the best way to achive what i am after so here is my pages so you get the idea..

    www dot stiofan dot com/testfolder/

    It's a building plan, look at it in firefox, that's how i need it to look,

    advice on how best to get that would be amazing

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Well, Firefox is being kind to you with your errors. The HTML5 people did decide to change the rules and let anchors wrap divs... so if you wanted to research HTML5 and switch to that then possibly all the browsers would be cool with that, I dunno.

    However, remaining in the real world of HTML4, you would have to do one of two things (because I'm pretty sure your problem with IE8 is IE is actually calling you out on your error... removing the error should make it work):

    You can either change all those divs to some legal inline element (spans are fine for this) and if they need block nature, with css you can set the to display: block;

    Or, you can have divs on the outside and anchors on the inside and those anchors themselves set to display: block (so they can have a set height and width).

    I'm leaning towards #1 because that preserves most of what you already have. Remember that this means your p's also have to change to something inline.

    Blocks are like buckets. Inlines are like water. Buckets can hold water, and other buckets, but water can't hold a bucket.

    Except in HTML5. Bleh.

  5. #5
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by stiofansisland View Post
    Im not sure the best way to achive what i am after so here is my pages so you get the idea..

    www dot stiofan dot com/testfolder/

    It's a building plan, look at it in firefox, that's how i need it to look,

    advice on how best to get that would be amazing
    Here you go: you have some validation errors, mainly because you nested block elements into an inline element, like i already told you. IE6 and Opera choked on that

    I didn't take a close look at your css or didn't alter much to your structure. Like poes said, there are some ways to go round but i took the easy way out (being the lazy bum i am lol) and cleaned up your nesting structure. I also removed the extra closing body tag. See if this works for you (only tested locally in Opera and IE6):

    Code HTML4Strict:
    <div id="body">
    	<div id="menuwrap" >
    		<div id="box1">
    			<p>&nbsp;</p>
    			<p><a href="#" title="Vacant B3/1/A <br> open mos">Vacant B3/1/A 1710sq ft</a></p>
    		</div>
    		<div id="box1-2"></div>
    		<div id="box1-3"></div>
    		<div id="box2"><br />
    			<br />
    			<br />
    			<a href="#">Vacant B3/1/B</a> </div>
    		<div id="box3-1"><a href="#">STTC Test Laboratory<br />
    			B3/1/C</a></div>
    		<div id="box3"></div>
    		<a href="#"></a>
    		<div id="box4"></div>
    		<a href="#"></a>
    		<div id="box5"></div>
    		<div id="box5-1"></div>
    		<a href="#"></a>
    		<div id="box6"></div>
    		<div id="box6-1"></div>
    		<a href="#"></a>
    		<div id="box7"></div>
    		<a href="#"></a>
    		<div id="box8"></div>
    		<a href="#"></a>
    		<div id="box9"></div>
    		<a href="#"></a>
    		<div id="box10"></div>
    		<a href="#"></a>
    		<div id="box11"></div>
    		<a href="#"></a>
    		<div id="box12"><a href="#">Stairs </a></div>
    		<div id="box13"></div>
    		<a href="#"></a>
    		<div id="box14"></div>
    		<a href="#"></a>
    		<div id="box15"></div>
    		<a href="#"></a>
    		<div id="box16"></div>
    		<a href="#"></a>
    		<div id="box17"></div>
    		<div id="box18"></div>
    		<div id="box19"></div>
    		<div id="box20"></div>
    		<div id="box21"></div>
    		<div id="box22"></div>
    		<div id="box23"></div>
    		<div id="box24"></div>
    		<div id="box25"></div>
    		<div id="box26"></div>
    		<div id="box27"></div>
    		<div id="box28"></div>
    		<div id="box29"></div>
    		<div id="box30"></div>
    		<div id="box31"></div>
    		<div id="box32"></div>
    		<div id="box33"></div>
    		<div id="box34"></div>
    		<div id="box35"></div>
    		<div id="box36"></div>
    		<div id="box38"></div>
    		<div id="box37"></div>
    		<div id="box39"></div>
    		<div id="box40"></div>
    		<div id="box41"></div>
    		<div id="box42"></div>
    		<div id="box43"></div>
    		<div id="box44"></div>
    		<div id="box45"></div>
    		<div id="box46"></div>
    		<div id="box47"></div>
    		<div id="box48"></div>
    		<div id="box49"></div>
    		<div id="box50"></div>
    	</div>
    </div>
    <div>
    	<p>c</p>
    	<p>c</p>
    	<p>c</p>
    	<p>c</p>
    </div>

    Something not clear, problems.... just come back to us
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You can fake this by overlaying an absolute anchor
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>YuriKolovsky - overlay layers in IE6</title>
    <style type="text/css">
    /*this is organised for you*/
    /*Predefined Vars*/
     * {
      margin:0;
      padding:0;
    }
    .hoverb {
      position:relative;
      margin-top:1.25em;
      margin-left:1.25em;
    }
    /*Predefined Vars*/
    /*width / height*/
    .hoverb div, a, a:hover span {
      border-style:solid;
      border-width:4px;
    }
    .hoverb div, a, a span {
      width:12em;
      height:100px;
    }
    a {
      display:block;
      margin-top:-108px;
      text-decoration:none;
    }
    h2, p {
      width:12em;
      margin:4px;
    }
    /*width / height*/
    /*overlay trickery*/
    a span {
      display:block;
      position:absolute;
      z-index:10;
      top:0px;
      left:0px;
      background-image:url(fake.gif);
      cursor:pointer;
    }
    h2, p {
      position:absolute;
      left:0;
      z-index:2;    
    }
    /*overlay trickery*/
    /*Colors*/
    .hoverb div {
      background-color:#999;
    }
    a {
      border-color:#555;    
    }
    a:hover {
      background-color:#e3e3e3;    
    }
    a:hover span {
      border-color:#000;
    }
    /*Colors*/
    /*MISC*/
    h2 {
      margin-top:-1px;
      margin-left:10px;
      font-size:xx-large;
    }
    p {
      margin-left:10px;
      margin-top:8px;
      top:1.7em;
      font-size:large;
    }
    /*MISC*/
    </style>
    </head>
    <body>
    <!--having h2 and p to look like its inside a link can be usefull, as clients often want hover buttons with text, and usually use ie6...
    notice how the links are clickable-->
    <div class="hoverb">
    <div><h2>Planes</h2><p>for air travel</p></div><!--you could probably put all this in another div and treat that div as the h2 and p, and move h2, p inside the div-->
    <a href="#planes"><span>&nbsp;</span></a><!--&nbsp; is to avoid the empty span warning in the validator-->
    </div>
    
    <div class="hoverb">
    <div><h2>Trains</h2><p>for land travel</p></div>
    <a href="#trains"><span>&nbsp;</span></a>
    </div>
    
    <div class="hoverb">
    <div><h2>Automobiles</h2><p>for personal travel</p></div>
    <a href="#automobiles"><span>&nbsp;</span></a>
    </div>
    
    </body>
    </html>
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  7. #7
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's not what im trying to do. That makes the text have a white background when hovered, but im trying to make the whole div white when hovered like it does for me in firefox,

    I understand this is not possable to wrap a a href arounf a div, but is there a way i can get the effect i want in ie using someother tag?

    Im still just learning css so examples are a great help.

    i tryed
    Code:
    <a href="#"><span id="box6"></span><span id="box6-1"></span></a>
    but no luck,

    Do u understand what im trying to do?

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    if you replace every div and p with a span, that will make it legal but as I said, they are inlines and so to make them act like the divs did, you need to make them display: block in the css. You didn't have to say that for the divs or the ps because that's how they come out of the box.

    That way a single anchor can remain a parent for the other elements.

  9. #9
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK not really sure how to get ti to work with replacing div with span and p?

    look at

    www dot stiofan dot com/testfolder/ and look at test3 is that what u mean?


    can anyone give me a working example of test 3?

  10. #10
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by stiofansisland View Post
    That's not what im trying to do. That makes the text have a white background when hovered, but im trying to make the whole div white when hovered like it does for me in firefox,

    I understand this is not possable to wrap a a href arounf a div, but is there a way i can get the effect i want in ie using someother tag?

    Im still just learning css so examples are a great help.

    i tryed
    Code:
    <a href="#"><span id="box6"></span><span id="box6-1"></span></a>
    but no luck,

    Do u understand what im trying to do?
    Do you have my html still? Try setting the a tag as display:block and give it a height of 100%.

    Code CSS:
    a {
    	color:#000;
    	text-decoration: none;
    	border:none;
    	display:block;
    	height:100%;
    }
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by stiofansisland View Post
    That's not what im trying to do. That makes the text have a white background when hovered, but im trying to make the whole div white when hovered like it does for me in firefox,
    Was that directed at me? My code works
    I understand this is not possable to wrap a a href arounf a div, but is there a way i can get the effect i want in ie using someother tag?
    There is no tag in the world that will make a block inside of an inline valid . Use the way I pointed out.
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  12. #12
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Was that directed at me? My code works

    There is no tag in the world that will make a block inside of an inline valid . Use the way I pointed out.
    No your code works amazing but can i make it work to hightlight two or more areas as it needs to highlight a whole room when hoverd,

    please look at www dot stiofan dot com/testfolder/xls-test-3.html

    that works in firefox, see how it makes the whold room highlighted, is that possable with your code?

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Rough around the edges but is this what you meant? Does each box need content in it?
    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=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0
    }
    div.wrapper {
        position:relative;
        width:15em;
        margin:20px;
    }
    div{height:10em;}
    a {
        height:10em;
        background:#f2f2f2;
        text-decoration:none;
    	overflow:hidden;
        display:block;
    	margin-top:-3em;
    }
    a.two{margin:0;}
    a:hover {
        background:red;
    }
    h2, p {
        padding:0 20px;
        position:relative;
        z-index:1;
    }
    span {
        z-index:100;
        position:absolute;
        width:15em;
        height:10em;
        top:0;
        left:0;
        background: url(fake.gif);
    }
    span.two{z-index:99;}
    div.two{width:200&#37;;}
    </style>
    </head>
    <body>
    <div class="wrapper">
        <div>
    	<h2>Planes</h2>
    	<p>for air travel</p>
    	<a href="#"><span></span></a>
        </div>
        <div class="two">
    	<a href="#" class="two"><span class="two"></span></a>
        </div>
    </div>
    </body>
    </html>
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  14. #14
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What you can do is this: from my example

    Code CSS:
    a {
    	color:#000;
    	text-decoration: none;
    	border:none;
     
    }
     
     
     
    a:hover {
    	text-decoration: none;
    	border:none;
    	background-color:#fff;
    	opacity:0.6;
    	display:block;
    	height:100&#37;;
    }
     
    #box2:hover{
               background-color:#FFFFFF;
    }

    tsted in IE6 and opera and the whole div changes to white on hover. Note that i used it on the html i provided you earlier.
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  15. #15
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Rough around the edges but is this what you meant? Does each box need content in it?
    Thats almost it, only one box needs content.

    the whole thing i am stuck on is i need both boxes to be highlighted on hover (at the same time) and they will both link to the same thing

    So if i hover on the top box the top box will highlight and the bottom box will highlight aswell and the same the otherway about.

    thats why i was trying to put two divs in a href because they both highlight...

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Both at the same time? I don't think that would be possible without some javascript in place . Because if you think about it, you can't hover over two elements at once, nor can you make that kinda shape with an element (an anchor is inline and it wrapped around the <div> in your first example to create taht shape. Other browsers won't do that)

    Javascript is probably your only way here.
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  17. #17
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Both at the same time? I don't think that would be possible without some javascript in place . Because if you think about it, you can't hover over two elements at once, nor can you make that kinda shape with an element (an anchor is inline and it wrapped around the <div> in your first example to create taht shape. Other browsers won't do that)

    Javascript is probably your only way here.
    i had kind of fugured that might be the case, are u any good at javascript?

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Lol no I'm not. Head over to the Javascript forum for help
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  19. #19
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Lol no I'm not. Head over to the Javascript forum for help
    Thanks for all your help m8

    I finally got if sorted with soem javascript
    Code:
     <style type="text/css"> 
           
    	   
    	   .myHighlight { 
               color:#fff; 
    	background-color:#0C6;
    	opacity:0.5;
    filter: alpha(opacity=50); 
             } 
           .myDefault { 
             color:#333; 
             background:#090; 
           } 
         </style> 
         <script type="text/javascript"> 
           function changeTo(myId) 
             { 
               document.getElementById(myId).className='myHighlight';            
             }  
           function changeBack(myId) 
             {  
               document.getElementById(myId).className='myDefault'; 
             }  
         </script>
    and
    Code:
    <a href="http://www.google.co.uk"><div id="box33" class="myDefault" onMouseover="changeTo('box33'); changeTo('box34');" onMouseout="changeBack('box33'); changeBack('box34');"></div>
    <div id="box34" class="myDefault" onMouseover="changeTo('box33'); changeTo('box34');" onMouseout="changeBack('box33'); changeBack('box34');"><br />
      <br />
      <br />
      test</div></a>
    i know it's totaly not valid but it workes in ie, firefox and safari, so im happy..

  20. #20
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Glad to hear it's all sorted
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!


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
  •