Avatar of CREATiVENESS
CREATiVENESSFlag for United States of America asked on

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
JavaScriptHTMLWeb DevelopmentWeb Languages and StandardsCSS

Avatar of undefined
Last Comment
CREATiVENESS

8/22/2022 - Mon
Rartemass

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.
ASKER
CREATiVENESS

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.
ASKER
CREATiVENESS

Any Ideas?
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
Rob

I'll have a look soon, some of us have to sleep ;-) just be aware we can be on very different timezones
Rob

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

ASKER
CREATiVENESS

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

Any Ideas?
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Rartemass

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
Rob

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
ASKER
CREATiVENESS

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.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
ASKER
CREATiVENESS

Do I need to just pull them from the scroll_container and place them on the sides by themselves.
Rartemass

That would be another option, yes.
Rob

I'm currently overseas so please request attention if you need to though hopefully @Rartemass can finish this off for you
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
CREATiVENESS

Any Updates, here or how would i rewrite it to work with out the scroll_container.
ASKER CERTIFIED SOLUTION
CREATiVENESS

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
CREATiVENESS

any ideas guys, im still working on this.
Rob

I'm sorry I'm unable to help at the moment. I'll try and get some more expects involved
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Rartemass

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).
ASKER
CREATiVENESS

rewrote it.