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
Avatar of Rartemass
Rartemass
Flag of Australia image

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.
Avatar of CREATiVENESS
CREATiVENESS
Flag of United States of America image

ASKER

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.
Avatar of CREATiVENESS
CREATiVENESS
Flag of United States of America image

ASKER

Any Ideas?
Avatar of Rob
Rob
Flag of Australia image

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

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

Avatar of CREATiVENESS
CREATiVENESS
Flag of United States of America image

ASKER

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

Any Ideas?
Avatar of Rartemass
Rartemass
Flag of Australia image

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
Avatar of Rob
Rob
Flag of Australia image

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
Avatar of CREATiVENESS
CREATiVENESS
Flag of United States of America image

ASKER

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.
Avatar of CREATiVENESS
CREATiVENESS
Flag of United States of America image

ASKER

Do I need to just pull them from the scroll_container and place them on the sides by themselves.
Avatar of Rartemass
Rartemass
Flag of Australia image

That would be another option, yes.
Avatar of Rob
Rob
Flag of Australia image

I'm currently overseas so please request attention if you need to though hopefully @Rartemass can finish this off for you
Avatar of CREATiVENESS
CREATiVENESS
Flag of United States of America image

ASKER

Any Updates, here or how would i rewrite it to work with out the scroll_container.
ASKER CERTIFIED SOLUTION
Avatar of CREATiVENESS
CREATiVENESS
Flag of United States of America image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of CREATiVENESS
CREATiVENESS
Flag of United States of America image

ASKER

any ideas guys, im still working on this.
Avatar of Rob
Rob
Flag of Australia image

I'm sorry I'm unable to help at the moment. I'll try and get some more expects involved
Avatar of Rartemass
Rartemass
Flag of Australia image

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).
Avatar of CREATiVENESS
CREATiVENESS
Flag of United States of America image

ASKER

rewrote it.
JavaScript
JavaScript

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.

127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo