Jump to content

How do you have mouseover and a link at the same time?

xerox02

By xerox02
in CSS Help

Recommended Posts

xerox02 Member

xerox02

Posted
Posted

Example Page: http://kian02.comlu.com/kian3.html

I want the Navi to have mouseover and also be a link

<style TYPE= "text/css"> 

#logo {  

    position: absolute;

    left: 17px;

    

} 



#footer { 

    width: 100%;

    height: 44px;

    background-color: #193bac; 

    color: #red; 

    

}



#navi   {

    height: 32px ;

    width: 100%;

    background-color: #193bac; 

    color: white;

    font-family: arial;  

}


   #navihome
{
display: block;
  width: 82px;
  height: 32px;
  background: url("http://img84.imageshack.us/img84/7207/oneu.gif") no-repeat 0 0;
  position: fixed;
  left: 57px;
}

#navihome:hover
{ 
  background-position: 0 -20px;
}

#navihome span
{
  position: absolute;
  top: -999em;
}

#naviart {

    height: 32px ;

    width: 82px; 

    position: absolute;

    left: 165px;

    background: url("http://img843.imageshack.us/img843/9916/twoo.gif") ;

}



#naviart:hover { background-position: 0 -95px; }



#navimusic {  height: 32px ;

    width: 82px; 

    position: absolute;

    left: 273px;

    background: url("http://img148.imageshack.us/img148/3972/threer.gif") ;

}



#navimusic:hover { background-position: 0 -95px; }





#navidance {  height: 32px ;

    width: 82px; 

    position: absolute;

    left: 381px;

    background: url("http://img573.imageshack.us/img573/6940/four.gif") ;

}



#navidance:hover { background-position: 0 -95px; }



#navicontact {  height: 32px ;

    width: 82px; 

    position: absolute;

    left: 489px;

    background: url("http://img33.imageshack.us/img33/513/fiveu.gif") ;

}



#navicontact:hover { background-position: 0 -95px; }


body {
    margin: 0;
    padding: 0;
}



</style>

 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">

<html>

    <head>


    </head>

    <body>

       

        

        <div id="footer">  

            <div id="logo"> <img src="http://img638.imageshack.us/img638/3509/logo4jf.gif"> </div> 

        </div>

        <div id= "navi"> 

            <div id="navihome"> <a id="navihome" href="http://kian02.comlu.com/kian3.html" title="Home"><span>Home</span></a> </div> 

            <div id="naviart"> </div> 

            <div id="navimusic">  </div>

            <div id="navidance">  </div> 

            <div id="navicontact"> </div>

        </div> 

        



      
    </body>

    

</html>

 

 

xerox02 Member

xerox02

Posted
  • Author
Posted

I wanted to make it more organized

 

CSS

<style TYPE= "text/css"> 

#logo {  

    position: absolute;
    left: 17px;
} 



#footer { 

    width: 100%;
    height: 44px;
    background-color: #193bac; 
    color: #red; 

}

#navi   {

    height: 32px ;
    width: 100%;
    background-color: #193bac; 
    color: white;
    font-family: arial;  

}

   #navihome
{
display: block;
  width: 82px;
  height: 32px;
  background: url("http://img84.imageshack.us/img84/7207/oneu.gif") no-repeat 0 0;
  position: fixed;
  left: 57px;
}

#navihome:hover
{ 
  background-position: 0 -20px;
}

#navihome span
{
  position: absolute;
  top: -999em;
}

#naviart {

    height: 32px ;
    width: 82px; 
    position: absolute;
    left: 165px;
    background: url("http://img843.imageshack.us/img843/9916/twoo.gif") ;

}

#naviart:hover { background-position: 0 -95px; }

#navimusic {  
    height: 32px ;
    width: 82px; 
    position: absolute;
    left: 273px;
    background: url("http://img148.imageshack.us/img148/3972/threer.gif") ;
}

#navimusic:hover { background-position: 0 -95px; }

#navidance { 
    height: 32px ;
    width: 82px; 
    position: absolute;
    left: 381px;
    background: url("http://img573.imageshack.us/img573/6940/four.gif") ;

}

#navidance:hover { background-position: 0 -95px; }

#navicontact {  height: 32px ;
    width: 82px; 
    position: absolute;
    left: 489px;
    background: url("http://img33.imageshack.us/img33/513/fiveu.gif") ;

}

#navicontact:hover { background-position: 0 -95px; }

body {
    margin: 0;
    padding: 0;
}

</style>

 

HTML

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
    <head>
    </head>
    <body>
            <div id="footer">  
            <div id="logo"> <img src="http://img638.imageshack.us/img638/3509/logo4jf.gif"> </div> 
        </div>

        <div id= "navi"> 
            <div id="navihome"> <a id="navihome" href="http://kian02.comlu.com/kian3.html" title="Home"><span>Home</span></a> </div> 
            <div id="naviart"> </div> 
            <div id="navimusic">  </div>
            <div id="navidance">  </div> 
            <div id="navicontact"> </div>

        </div> 

            </body>

</html>

 

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.