What’s Wrong with My Banner’s Code?

  • OK, so, I’m using a nifty little plugin called PromoBar to bypass some of WP’s limitations for the nav bar, and it’s working smashingly, except for a few things…

    A couple things that only happen when I plug the code into WordPress.

    For one, buttons get resized and misaligned. Also, Some buttons get doubles when you hover over them.

    When this code is applied into W3 School’s “Tryit Editor”, it works near perfectly (I don’t like that if you hover over the paper background without hovering over a specific selection, “About Me” is automatically highlighted, and for some reason, I can’t get the image swap function to work properly on the Business Card-Home Button (it’s supposed to be the same card except with a yellow highlighter scribbled across it. Other than these two issues, though, everything is correct in W3’s editor).

    So, is it my code? Is it a WP margin thing? Is it my theme? (Make by ThemeFoundry, the free version), does it have something to do with a setting in my dash’s “Media” tab?

    I’ll post the code here, along with some screenshots, at the end so you guys can get a look and tell me. This is one of the only times in my life I’ve done any coding, so I wouldn’t be surprised if I screwed something up (coding was a last resort that turned out to be the best solution, honestly).

    Thanks!

    – Raven V. 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>psdtowebnavbar.psd</title>
        <link href="styles.css" rel="stylesheet" type="text/css/div">
    </head>
    <body>
        <div id="background">
            <div id="Bar"><img src="https://www.ravenvinnie.com/wp-content/uploads/2017/04/bar.png"> </div> 
            <div id="Home"><a href="https://www.ravenvinnie.com/"><img src="https://www.ravenvinnie.com/wp-content/uploads/2017/04/home.png"></div>
            <div id="Aboutme"><a href=" https://www.ravenvinnie.com/about/"><img src="https://www.ravenvinnie.com/wp-content/uploads/2017/04/about.png"> </div>
            <div id="Gallery"><a href="https://www.ravenvinnie.com/gallery-2/"><img src="https://www.ravenvinnie.com/wp-content/uploads/2017/04/gallery.png"></div>
            <div id="Shop"><a href= "https://www.ravenvinnie.com/shop-3/"><img src="https://www.ravenvinnie.com/wp-content/uploads/2017/04/shop.png"></div>
            <div id="Services"><a href="https://www.ravenvinnie.com/services-2/"><img src="https://www.ravenvinnie.com/wp-content/uploads/2017/04/services.png"></div>
            <div id="Contact"><a href="https://www.ravenvinnie.com/contact-2/"><img src="https://www.ravenvinnie.com/wp-content/uploads/2017/04/contact.png"></div>
            <div id="Blog"><a href="https://www.ravenvinnie.com/blog-2/"><img src="https://www.ravenvinnie.com/wp-content/uploads/2017/04/blog.png"></div>
            <div id="Comics"><a href="https://www.ravenvinnie.com/comics/"><img src="https://www.ravenvinnie.com/wp-content/uploads/2017/04/comics.png"></div>
     
        
        <style> 
        body {
    margin: 0;
    padding: 0;
 }
 
 #background 
{ 
     left: 0px; 
     top: 0px; 
     position: relative; 
     margin-left: auto; 
     margin-right: auto; 
     width: 2000px;
     height: 1000px; 
     overflow: hidden;
     z-index:0;
    } 

 #Bar 
{ 
     left: 0px; 
     top: 0px; 
     position: absolute; 
     width: 2000px;
     height: 992px;
     z-index:1;
} 

 #Home
{ 
     left: 150px; 
     top: 31px; 
     position: absolute; 
     width: 451px;
     height: 336px; 
     z-index:3;
} 

#Home:hover
{ 
    left: 150px; 
     top: 31px; 
     position: absolute; 
     width: 451px;
     height: 336px;
        background: url(https://www.ravenvinnie.com/wp-content/uploads/2017/04/homealt.png) no-repeat; 
     z-index:4; 
  
   }
     
 #Aboutme 
{ 
     left: 640px; 
     top: -41px; 
     position: absolute; 
     width: 1409px;
     height: 380px;
     background: url(https://www.ravenvinnie.com/wp-content/uploads/2017/04/about.png) no-repeat; 
     z-index:4;
}  

#Aboutme:hover {

left: 640px; 
     top: -41px; 
     position: absolute; 
     width: 1409px;
     height: 380px;
     background: url(https://www.ravenvinnie.com/wp-content/uploads/2017/04/aboutalt.png) no-repeat; 
     z-index:4; 
     
     }

 #Gallery 
{ 
     left: 1020px; 
     top: 0px; 
     position: absolute; 
     width: 174px;
     height: 172px;
     z-index:5;
} 

 #Gallery:hover 
{ 
     left: 1020px; 
     top: 0px; 
     position: absolute; 
     width: 240px;
     height: 172px; 
     background: url(https://www.ravenvinnie.com/wp-content/uploads/2017/04/galleryalt.png) no-repeat;
     z-index:5;
}

 #Shop 
{ 
     left: 1339px; 
     top: 0px; 
     position: absolute; 
     width: 133px;
     height: 230px;
     z-index:6;
} 

 #Shop:hover 
{ 
     left: 1339px; 
     top: 0px; 
     position: absolute; 
     width: 250px;
     height: 230px;
     background:url(https://www.ravenvinnie.com/wp-content/uploads/2017/04/shopalt.png) no-repeat;
     z-index:6;
} 

 #Services 
{ 
     left: 1488px; 
     top: 5px; 
     position: absolute; 
     width: 210px;
     height: 253px;
     z-index:7;
} 

 #Services:hover 
{ 
     left: 1488px; 
     top: 5px; 
     position: absolute; 
     width: 320px;
     height: 253px;
     background: url(https://www.ravenvinnie.com/wp-content/uploads/2017/04/servicesalt.png) no-repeat;
     z-index:7;
}

 #Contact 
{ 
     left: 1729px; 
     top: 69px; 
     position: absolute; 
     width: 204px;
     height: 203px;
     z-index:8;
} 

 #Contact:hover 
{ 
     left: 1729px; 
     top: 69px; 
     position: absolute; 
     width: 300px;
     height: 203px;
     background:url(https://www.ravenvinnie.com/wp-content/uploads/2017/04/contactalt.png) no-repeat;
     z-index:8;
} 

 #Blog 
{ 
     left: 1210px; 
     top: -20px; 
     position: absolute; 
     width: 108px;
     height: 228px;
     z-index:9;
} 

 #Blog:hover 
{ 
     left: 1210px; 
     top: -20px; 
     position: absolute; 
     width: 180px;
     height: 228px;
     background:url(https://www.ravenvinnie.com/wp-content/uploads/2017/04/blogalt.png) no-repeat;
     z-index:9;
} 

 #Comics 
{ 
     left: 803px; 
     top: -50px; 
     position: absolute; 
     width: 300px;
     height: 300px;
     z-index:10;
} 

 #Comics:hover 
{ 
     left: 803px; 
     top: -50px; 
     position: absolute; 
     width: 300px;
     height: 300px;
     background:url(https://www.ravenvinnie.com/wp-content/uploads/2017/04/comicsalt.png) no-repeat;
     z-index:10;
}

</style>
   </div> 
</body>
 </html>

    The Code in W3's Editor

    The Code in WordPress

    Weird Double Button Hover in WP

    My PromoBar settings

    Blocked off premium settings I probably don't need but will aknowledge here anyway just so I don't leave anything out

    My code in PromoBar's interface

    Thanks again everyone!
    -Raven V.

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘What’s Wrong with My Banner’s Code?’ is closed to new replies.