Empty space in div?

Hi guys,
I think that this is just something easy ive never needed to do in css.
But I have a site that has a div that includes two buttons on both sides of the screen and they are centered vertically on the page, in the middle it is empty. This needs to be on top of everything else. But I am having issues with it blocking buttons in the middle of the screen since it is on top. Theres many ways to do this but I am trying to fix what I have already set up.
So what i need to do is figure what i need to do in css to make it so that the empty space is actually empty and doesn't block the buttons below it.
#scroll_container {
	width: 100%;
	height: auto;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 999;
}

Open in new window

Any ideas?

Thanks,
Randy
CREATiVENESSAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RartemassLife CoachCommented:
You have the start of it in the CSS already.
You use the z-index attribute, but it has to be used on all elements that are affected. Only elements with a position attribute can have the z-index working.

You do need to alter the z-index number however. A high number is placed on top of low numbers. So for this to be invisible in the middle, it needs a low number (you can go negative).
I'd recommend having this as z-index 1 and the other elements starting at 2. If you need to add other elements you can layer them as needed.

The only issue I can think of here is that is the buttons on the left and right need to be on top of other elements. You would need to position everything and layer them accordingly.
This may involve modifying the html to ensure everything is place where it needs to go.
0
CREATiVENESSAuthor Commented:
I thought this was a simple fix, using whitespace tag or something like that.
Any Ideas?

With the code above this is the html
<div id="scroll_container">
<a href="#" id="forward" class="navigate" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('scroll_right','','images/btn_rightscroll-roll.png',1)"><img src="images/btn_rightscroll.png" name="scroll_right" width="52" height="197" border="0" id="scroll_right2" outline="0" /></a>
<a href="#" id="backward" class="navigate" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('left_scroll','','images/btn_leftscroll-roll.png',1)"><img src="images/btn_leftscroll.png" name="left_scroll" width="52" height="197" border="0" id="left_scroll" outline="0" /></a>
	<div id="scroll_left">    
</div>  
    <div id="scroll_right">  
    </div> 
</div>


<div id="container">
<img src="20130829_FINAL_img673H_web.jpg" />
</div>

Open in new window

This is a dumbed down version but there is buttons that go in the container div but the scroll_container need to be above the container because it has a large image. But the empty area of the scroll container in the middle is blocking the buttons below. Can whitespace or clear or something make it empty so the features below can be used.
0
CREATiVENESSAuthor Commented:
Any Ideas?
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

RobOwner (Aidellio)Commented:
I'll have a look soon, some of us have to sleep ;-) just be aware we can be on very different timezones
0
RobOwner (Aidellio)Commented:
I think all you're after is to set the background of the div to be transparent.  You can do this with css of:

#scroll_container {
  width: 100%;
  height: auto;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 999;
  background-color = 'transparent';
}

Open in new window

0
CREATiVENESSAuthor Commented:
I added
background-color: transparent;
it did not work clear out the empty areas.

Any Ideas?
0
RartemassLife CoachCommented:
Try wrapping the two buttons in a container div and have them in individual divs inside that. Set the z-index of the container low and the buttons high.
Eg <div id=container><div id=button1></div><div id=button2></div></div>
In css container is position:fixed; z-index:1;
Button 1 and 2 are position:relative;  z-index:99;
This way the gap in between is treated separately
0
RobOwner (Aidellio)Commented:
I'm struggling with the visual on this... do you not want the #container on top of those 2 buttons?  

Sure the #scroll_container has to be on top but you need to be able to click the buttons in the #container div right?  Then for that to happen you need to set the z-index higher on the #container div than that of the #scroll_container.  

Please correct me if I'm wrong but I suspect the whitespace you're talking about it actually image transparency, which is still part of the image and not possible to click "through".

I'm trying to get a visual here: http://jsbin.com/ODoFini/2/edit
0
CREATiVENESSAuthor Commented:
Sorry you need to have the additional css there.

http://jsbin.com/OquCUzo/1
or edit at
http://jsbin.com/OquCUzo/1/edit

#scroll_left {
	float: left;
	width: 52px;
	height: 197px;
	position: relative;
	padding: 210px 0;
}

#scroll_right {
	float: right;
	width: 52px;
	height: 197px;
	position: relative;
	padding: 210px 0;
}#backward {
  left: 0;
}
#forward {
  right: 0;
}a.navigate {
	text-decoration: none;
	display: block;
	color: #aaaaff;
	height: 200px;
	position: absolute;
	font-size: 50px;
	z-index: 200;
	top: 50%;
	text-align: center;
	line-height: 200px;
}

Open in new window


As you can see there is a large empty area in the middle.
0
CREATiVENESSAuthor Commented:
Do I need to just pull them from the scroll_container and place them on the sides by themselves.
0
RartemassLife CoachCommented:
That would be another option, yes.
0
RobOwner (Aidellio)Commented:
I'm currently overseas so please request attention if you need to though hopefully @Rartemass can finish this off for you
0
CREATiVENESSAuthor Commented:
Any Updates, here or how would i rewrite it to work with out the scroll_container.
0
CREATiVENESSAuthor Commented:
Using this
http://jsbin.com/OquCUzo/1/edit
how could i rewrite it to work, without the scroll_container.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
CREATiVENESSAuthor Commented:
any ideas guys, im still working on this.
0
RobOwner (Aidellio)Commented:
I'm sorry I'm unable to help at the moment. I'll try and get some more expects involved
0
RartemassLife CoachCommented:
Sorry I haven't commented in a while, its been a busy week.
What is the importance of having the large image on top of everything else?
Can we see the final product as you have it currently? It will make things easier to see the whitespace you have to work with.

For ease of alignment take the left and right divs out of the scroll div and align them based on the scroll div's parent. This may not give you what you desire which is why it would be good to see the actual images and results you are after on a live site (or at least the code files and images uploaded on EE).
0
CREATiVENESSAuthor Commented:
rewrote it.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.