8 Replies - 6367 Views - Last Post: 28 March 2011 - 11:28 AM

#1 Vip3rousmango  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 56
  • View blog
  • Posts: 98
  • Joined: 10-February 10

CSS Layout Issue: Weird Button Placement

Posted 24 March 2011 - 06:58 PM

Hello,

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


Is This A Good Question/Topic? 0
  • +

Replies To: CSS Layout Issue: Weird Button Placement

#2 Vip3rousmango  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 56
  • View blog
  • Posts: 98
  • Joined: 10-February 10

Re: CSS Layout Issue: Weird Button Placement

Posted 26 March 2011 - 07:12 AM

Sorry for Double Post, I guess you can only edit a post once?

I solved my earlyer problem with the dropdown button above on the home page, but now I'm having a layout and formatting issue that is driving me crazy.

For some reason I can't get my content sections of my site to clear the CSS dropdown site-switcher in the top left corner. On the home page the layout is fine because the width of the image slider cleverly hides the error, but if you click any of the top right navigation links you will notice on the other pages under the header, the content is pushed farther down the page.

I've been racking my brain as to why this is occuring.

Here is the problem, occuring on all pages except index.html: About Page

I'm sure it has something to do with improperly clearing all floats somewhere, but I think I've been looking at code for so long a fresh set of eyes could do the trick.

Thanks for any help!
Was This Post Helpful? 0
  • +
  • -

#3 chinchang  Icon User is offline

  • Indie Game Developer
  • member icon

Reputation: 192
  • View blog
  • Posts: 725
  • Joined: 22-December 08

Re: CSS Layout Issue: Weird Button Placement

Posted 27 March 2011 - 02:44 AM

You need to change the position attribute of the content div to relative. Then set the top attribute accordingly.

Suppose if the div of the content is named mainContent ,
#mainContent{
position : relative;
top: 10px;
}

Was This Post Helpful? 2
  • +
  • -

#4 Vip3rousmango  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 56
  • View blog
  • Posts: 98
  • Joined: 10-February 10

Re: CSS Layout Issue: Weird Button Placement

Posted 27 March 2011 - 06:28 AM

Thank you!! That did the trick.

I knew it had to do with improper float position I just had no idea where to isolate it. Always helps to have that fresh set of eyes.

Now that the content <div> is aligned, using a negative top: -245px; everything above is ok, but now their is a rather large gap between the main content/sidebar and footer because of the negative space. How would I account for this? I don't want to bring the footer up, I just want to minimize the space between as I want the footer fixed to the bottom of the page.

Thanks for any insight!

This post has been edited by Vip3rousmango: 27 March 2011 - 06:53 AM

Was This Post Helpful? 0
  • +
  • -

#5 chinchang  Icon User is offline

  • Indie Game Developer
  • member icon

Reputation: 192
  • View blog
  • Posts: 725
  • Joined: 22-December 08

Re: CSS Layout Issue: Weird Button Placement

Posted 27 March 2011 - 08:17 AM

Use the same positioning for your footer also.

#footer{
position: absolute;
bottom: 5px;
}

Was This Post Helpful? 0
  • +
  • -

#6 Vip3rousmango  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 56
  • View blog
  • Posts: 98
  • Joined: 10-February 10

Re: CSS Layout Issue: Weird Button Placement

Posted 27 March 2011 - 07:00 PM

Thanks for the reply!

I tried adding position:absolute to #footer and it didn't correct the issue, it just moved the footer content to the left inside the container. I then tried to add it to #footer_container as it's #footer's parent, but that didn't work either.

Also, what's the code you used to get the box around the CSS properties in your previous post!? I would love to know so it's easyer to mark them out in text!

Any other ideas? Thanks so much!
Was This Post Helpful? 0
  • +
  • -

#7 chinchang  Icon User is offline

  • Indie Game Developer
  • member icon

Reputation: 192
  • View blog
  • Posts: 725
  • Joined: 22-December 08

Re: CSS Layout Issue: Weird Button Placement

Posted 28 March 2011 - 02:00 AM

View PostVip3rousmango, on 28 March 2011 - 07:30 AM, said:

Thanks for the reply!

I tried adding position:absolute to #footer and it didn't correct the issue, it just moved the footer content to the left inside the container. I then tried to add it to #footer_container as it's #footer's parent, but that didn't work either.

Also, what's the code you used to get the box around the CSS properties in your previous post!? I would love to know so it's easyer to mark them out in text!

Any other ideas? Thanks so much!



To mark out your variables, put them inside inline tags.

And what did the above code for the footer resulted in ? It would have fixed your footer at the bottom of the screen.
Was This Post Helpful? 0
  • +
  • -

#8 chinchang  Icon User is offline

  • Indie Game Developer
  • member icon

Reputation: 192
  • View blog
  • Posts: 725
  • Joined: 22-December 08

Re: CSS Layout Issue: Weird Button Placement

Posted 28 March 2011 - 02:01 AM

View PostVip3rousmango, on 28 March 2011 - 07:30 AM, said:

Thanks for the reply!

I tried adding position:absolute to #footer and it didn't correct the issue, it just moved the footer content to the left inside the container. I then tried to add it to #footer_container as it's #footer's parent, but that didn't work either.

Also, what's the code you used to get the box around the CSS properties in your previous post!? I would love to know so it's easyer to mark them out in text!

Any other ideas? Thanks so much!



To mark out your variables, put them inside inline tags.

And what did the above code for the footer resulted in ? It would have fixed your footer at the bottom of the screen.


EDIT : Sorry for the double post :sweatdrop:

This post has been edited by chinchang: 28 March 2011 - 02:03 AM

Was This Post Helpful? 0
  • +
  • -

#9 Vip3rousmango  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 56
  • View blog
  • Posts: 98
  • Joined: 10-February 10

Re: CSS Layout Issue: Weird Button Placement

Posted 28 March 2011 - 11:28 AM

Thanks for the info.

When I put the CSS fix into Firebug on the fly, all it did was move the content of my footer to the left side of the screen when I added position: abosolute; to #footer, but it kept the actual location of the footer in the same place.

This occured again if change the position attribute to #footer_container as well. Neither brings the footer up towards the #body_content div or brings said div down to #footer_container.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1