New Topic/Question
Reply
I'm trying to add a dropdown site switcher to the top left of a website but for some reason their is a small button hovering over the bottom left corner of the logo image. It should be just to the right of it so you can click on it to pop down the site list. I'm not sure how to bring it back to the right side without affecting the navigation menu or the slider.
Here is the link for the site in question: WEBSITE
This is the HTML for the switcher, nested inside the Logo <span> of the parent header <div>. And the navigation structure as well, just in case.
<body class="front_page">
<div id="wrapper">
<div id="header_container">
<div id="header">
<span id="logo" class="switcher">
<a href="#" title="ThemeForest"><img src="images/i/multi.png" width="165" height="37" alt="themeforest"></a>
<a class="switchbutton" href="#">switchbutton</a>
<ul class="dropdown">
<!--<li><a href="http://markcshaw.com" title="Multimedia"><img src="images/i/multi.png" width="165" height="37" alt="multi"></a></li> -->
<li><a href="http://photo.markcshaw.com" title="Photography"><img src="images/i/photo.png" width="165" height="37" alt="photo"></a></li>
<li><a href="http://illustration.markcshaw.com" title="Illustration"><img src="images/i/illustration.png" width="165" height="37" alt="drawn"></a></li>
<li><a href="http://audio.markcshaw.com" title="Audio Editing"><img src="images/i/audio.png" width="165" height="37" alt="audio"></a></li>
<li><a href="http://video.markcshaw.com" title="Video Editing"><img src="images/i/video.png" width="165" height="37" alt="video"></a></li>
<li><a href="http://print.markcshaw.com" title="Print Design"><img src="images/i/print.png" width="165" height="37" alt="print"></a></li>
<li><a href="http://web.markcshaw.com" title="Web Design"><img src="images/i/web.png" width="165" height="37" alt="web"></a></li>
</ul>
</span><!-- end logo -->
<ul id="nav">
<li><a href="index.html" class="current"><span>Home</span></a></li>
<li><a href="about.html"><span>About Us</span></a></li>
<li><a href="#"><span>Portfolio</span></a>
<ul class="subnav">
<li><a href="viewall.html">View All</a></li>
<li><a href="#">Sections</a>
<ul class="subnav">
<li><a href="#">Photography</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Audio</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Print</a></li>
<li><a href="#">Web</a></li>
</ul>
<!-- end 2nd sub navigation -->
</li>
<li><a href="#">Artists</a>
<ul class="subnav">
<li><a href="#">Photography</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Audio</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Print</a></li>
<li><a href="#">Web</a></li>
</ul>
<!-- end 3nd sub navigation -->
</li>
</ul>
<!-- end sub navigation -->
</li>
<li><a href="http://blog.markcshaw.com"><span>Blog</span></a>
<ul class="subnav">
<li><a href="blog.html">Featured Articles</a></li>
<li><a href="single-post.html">Post Archives</a></li>
</ul>
<!-- end sub navigation -->
</li>
<li><a href="servall.html"><span>Services</span></a>
<ul class="subnav">
<li><a href="http://photo.markcshaw.com">Photography</a></li>
<li><a href="http://illustration.markcshaw.com">Illustration</a></li>
<li><a href="http://audio.markcshaw.com">Audio</a></li>
<li><a href="http://video.markcshaw.com">Video</a></li>
<li><a href="http://print.markcshaw.com">Print</a></li>
<li><a href="http://web.markcshaw.com">Web</a></li>
</ul>
<!-- end sub navigation -->
</li>
<li><a href="contact.php"><span>Contact</span></a></li>
</ul>
<!-- end main navigation -->
This is the CSS Styling for the Switcher:
.switcher ul.dropdown {
width: 195px;
min-height: 100px;
padding: 16px 0px 14px;
display: block;
background: #232323;
border: 1px solid #565044;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
position: relative;
margin-left: -9999px;
margin-top: -71px;
z-index:200;
}
.switcher ul.dropdown li {
display: inline-block;
width: 175px;
height: 50px;
padding: 12px 16px 4px 4px;
}
.switcher ul.dropdown li:hover {
background: #20201f;
border: 1px solid #565044;
border-width: 1px 0px;
height: 48px;
margin: -1px 0px 1px;
}
.switcher ul.dropdown li a{
display: inline-block;
width: 220px;
height: 50px;
}
.switcher a.switchbutton {
display: inline-block;
text-indent: -9999px;
width: 13px;
height: 21px;
position: relative;
top: -15px;
left: 1px;
background: url('http://testarea.virtuallycreative.ca/mcs/images/i/switcher.png') no-repeat 0px 0px transparent;
}
.switcher a.switchbutton:hover {
background-position: -13px 0px;
}
.switcher a.switchbutton:active + ul.dropdown, ul.dropdown:hover {
margin-left: -17px;
}
#logo {
float: left;
margin-bottom: 0;
border: none;
}
#logo a {
display: block;
height: 28px;
width: 93px;
}
img {
padding: 1px;
background-color: transparent;
border: hidden;
}
Everything was fine until I hit refresh and then for some reason the button's placement jumped to the other side of the logo image.
Any insight into why this is occuring would be great! Thanks!
EDIT:// Problem Solved!! Found the cause of the issue. Needed to remove display: block; and width: from the #logo a CSS element and it's working.
This post has been edited by Vip3rousmango: 24 March 2011 - 07:24 PM
MultiQuote
| 