I have an project that includes 3 divs to be layered on top of each other using the z index in css, but when I apply that to the three and adjust the top positioning, theres a big empty space left where the two other div were previously. Anyone come across this and figured out how to resolve it?
Heres the html
<div id="kit" data-role="page" data-theme="a">
<div data-role="header">
<h1>HI 9829 Kit</h1>
</div>
<div class="kit edgeLoad-EDGE-1809939789" style="margin: auto;"></div>
<div class="container edgeLoad-EDGE-1809939789"></div>
<div class="buttons edgeLoad-EDGE-1809939789">
</div>
<div data-role="footer" data-position="fixed">
<h3>©2013</h3>
</div>
</div>
and heres the css
#kit .kit{
width:700px;
height:670px;
background-image:url(../img/9829-Kit_2.png);
z-index:1;
}
#kit .buttons{
position: relative;
margin: auto;
height: 670px;
width: 700px;
z-index:3;
}
#kit .container {
position: relative;
margin: auto;
background-image: url(../img/9829-Kit.png);
background-repeat: no-repeat;
height: 670px;
width: 700px;
z-index:2;
}
In order for the z-index to operate properly, position attribute should be set, nevermind if it is set to absolute, relative, or fixed.
Related
I want the third div down, "contents", to fill its container but leave exactly 200px of space on the right side to fit the fixedWidthButtons.
So far, no matter what I set right to, it doesn't affect the width of the div.
If I set its display:block; it fills the container completely and the buttons get pushed out of the container.
If I set the display:inline-block;, the container becomes 181.344 px wide and won't resize no matter what I set right to.
<div class="container" style="left:0; right:0; margin-bottom: 10px; height: 65px; display: block;">
<div class="panel" style="width:100%; display: block;">
<div class="contents" style="display:inline-block; position:relative; left: 0px; right: 200px;">
<div class="buttonTextAndCounterContainer" style="width:100%; display:block">
<div class="button" style="float:left; display:none;"></div>
<div class="textAndCounterContainer" style="display:block;">
<div class="counter" style="float:right; display:block;"></div>
<div class="text" style="width:100%; position:relative; left:0px; vertical-align:top; display:inline-block;"></div>
</div>
</div>
</div>
<div class="fixedWidthButtons" style="display:inline-block; float:right;"></div>
</div>
</div>
You need to read up on some of properties you're dealing with. Position is for a point of origin not width.
You also express some issues with block versus inline-block these are easily googled. That said a solution to your problem is to change the css:
.content {
display: inline-block;
width: calc(100% - 200px);
}
Few suggestions:
position: absolute works relative to where its relative is (parent who is positioned relative is).
position: relative informs that the element is not positioned (without changing the layout at all) and make it's children if set to absolute position behave relative to it's parent
Setting inline-block also give us the provision of setting width and height which it would adjust to; if that is not needed, better off to go with inline.
It is good to remove the inline-styles - sample snippet below
.container {
margin-bottom: 10px;
height: 65px;
border: 1px solid black;
position: relative;
}
.contents {
border: 1px solid grey;
position: absolute;
display: inline-block;
width: 300px;
left: 0;
}
.fixedWidthButtons {
display: inline-block;
width: 200px;
position: absolute;
right: 0;
border: 1px solid red;
}
<div class="container">
<div class="panel">
<div class="contents">
<div class="buttonTextAndCounterContainer">
<div class="button">button</div>
<div class="textAndCounterContainer">
<div class="counter">counter</div>
<div class="text">text</div>
</div>
</div>
</div>
<div class="fixedWidthButtons">For my buttons</div>
</div>
</div>
Solution:
To set a div's width by using only left and right, you must set the div's position: absolute;
Source: http://alistapart.com/article/conflictingabsolutepositions
Having the following:
<div class="big-container">
<div class="header">many things here that must be fixed on top of the page</div>
<div class="content">
<img src="image"/> <!--Must expand the content div to the size of the image -->
<div class="footer"> Must be inside the image but at the bottom</div>
</div>
</div>
<!-- .content and .header must be at the same top, .content is much higher than header-->
I was trying with relative and absolute but the page being responsive, i can not set the height of the .content
What is the css?
You can not just ask for code without even given a try. check below code. it might be helpful.
.header{
background:red;
width:100%;
position:fixed;
top:0;
}
.content{
margin-top: 30px;
position: relative;
min-width: 300px;
max-width: 500px;
}
.content img{
position: relative;
height: 300px;
width: 100%;
}
.content .footer{
background: gray;
position: absolute;
width: 100%;
bottom: 0px;
}
<div class="big-container">
<div class="header">many things here that must be fixed on top of the page</div>
<div class="content">
<img src="http://r.ddmcdn.com/s_f/o_1/cx_633/cy_0/cw_1725/ch_1725/w_720/APL/uploads/2014/11/too-cute-doggone-it-video-playlist.jpg"/> <!--Must expand the content div to the size of the image -->
<div class="footer"> Must be inside the image but at the bottom</div>
</div>
</div>
I'm trying to get the first initial first section to take up the whole height of the page.
I've tried this question here: Making a div fit the initial screen but I cannot get it to work, everything just overlaps.
My nav bar is centered on the first section and will stick to the top when the page is scrolled, I just need the first part to take up the whole page.
Like this:
Spotify also do it on their website
My HTML:
Title
<body>
<span id="top"></span>
<div id="floater"></div>
<div id="centered">
<div id="sticky_navigation_wrapper">
<div id="sticky_navigation">
<div class="navbar">
<a class="navbar" href="#about">about</a> <a class="navbar" href="#portfolio">portfolio</a> <a class="navbar" href="#top"><img src="/media/nav/logo.png" alt="Logo" /></a> <a class="navbar" href="#social">social</a> <a class="navbar" href="#contact">contact</a>
</div>
</div>
</div>
</div>
<div>
<a>Random Text here, blah blah blah!</a>
</div>
</body>
My CSS
html,body{
border: 0;
margin: 0;
padding: 0;
height:100%;
width:100%;
}
#floater {
position:relative; float:left;
height:50%; margin-bottom:-25px;
width:1px;
}
#centered {
position:relative; clear:left;
height:50px;
margin:0 auto;
}
#sticky_navigation_wrapper {
width:100%; height:50px;
}
#sticky_navigation {
width:100%; height:50px; background-color:rgb(241, 241, 241); text-align:center; -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999;
}
I think the best solution, which I use on sites like this, would be to wrap each section in a containing div (or , if all your target browsers support it or you don't mind using a html5 shiv).
like so
<div class="section">
<p>Hello World</p>
</div>
<div class="section">
<p>Hello World</p>
</div>
You can then give that div height: 100% and width: 100% like...
.section{
height: 100%;
width: 100%;
}
You can see it all put together in this jsfiddle: http://jsfiddle.net/Ucetz/
I do this to my webpages all the time. Just add a containing div with the position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; style. That should give you a shade like area to cover the whole webpage. You can then put whatever you want inside that div.
To center vertically, do a little math and use a div. Thus, if the height of your div is going to be 400px then make the position: fixed again with the same specifications above, except change the top to 50% and then margin-top a negative value to half of the height. So, in this case it would be margin-top: -200px;
<div id="container" style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%;">
<div id="otherstuff" style="position: fixed; top: 50%; left: 0px; width: 100%; height: 400px; margin-top: -200px;"> I am a verticall centered div! :)
</div>
</div>
and then for your navigation bar after you get passed the first layer, put that on position: fixed; as well, just make sure it is above the code given above. That way, it appears on the bottom.
<div style="position: fixed; top: 0px; left: 0px; height: 70px; width: 100%;">Your navigation content</div>
<!-- THE CODE GIVEN ABOVE SHOULD GO HERE -->
Be sure to include height: 100% in the style for the HTML and BODY tags. Then set the height of the sections.
Use Viewport Height.
Set the height of your div (also works with section) to whatever percentage you want your div to fill up the screen.
.section_div {
/* fill up 85% of screen heigth */
height: 85vh;
/* fill up 100% of screen width */
width: 100vw;
/* you can also use min-height instead of height. */
}
So, I've been trying to create a horizontal scrolling page on my website. I set the entire scroll portion to 400%, as I have four pages. However, I was wondering is it possible(using CSS, jQuery, etc.) to cut up that 400% so that I can use 0-100% for the first page, 100%-200% for the second page, etc.? Or is there another way around this (I've been trying to accomplish this for cross-browser/screen size compatibility). I've only managed to do this so far using hard pixels, but is there a way to change that into percentages?
HTML:
<div id="transition-slide-container">
<div id="transition-slide">
<div id="inner-container>
<div class="slide" id="home">
<h1>home</h1>
</div>
</div>
<div class="slide" id="portfolio">
<div id="inner-container">
<h1>portfolio</h1>
</div>
</div>
<div class="slide" id="about">
<div id="inner-container">
<p>about</p>
</div>
</div>
<div class="slide" id="contact">
<div id="inner-container">
<p>contact<p>
</div>
</div>
</div>
</div>
CSS:
div#transition-slide-container {
background: #bee1ff;
padding-top: 128px;
padding-bottom: 50px;
height: 900px;
min-width: 400%;
z-index: -1;
float: left;
position: relative;
}
div#transition-slide {
white-space: nowrap;
}
.slide {
display: inline-block;
width: 1620px;
margin: 0 auto;
}
div#inner-container {
width: 1024px;
margin: 0 auto;
padding: 0;
}
Website: andrewgu12.kodingen.com
you can set your .slide width to 100% and give background-color: #bee1ff; to your body.
demo
and where is your #inner-container in html?
translition slide should have width of 400% and each slide 100%. The container would be width 100%, overflow:hidden if you want to do this with javascript/anchors or overflow-x:scroll;
you could give 100% width to your .slide class
.slide {
display: inline-block;
width: 100%;
margin: 0 auto;
}
I'm pretty proficient in CSS and HTML but I just can wrap my head around how this will work correctly.
I want to have a width of 990px for the container but i have about 1237px width of due to added shadows to the left and right
ive got it positioned but i want the overflow to be hidden until 990px width...
is there a way to make this happen?? here is my current code.
CSS:
body, html {margin:0; padding:0;}
body {background:url(../images/bg-x.jpg) top center repeat-x; background-color:#000;}
#main-wraper { }
#main-container {margin:0 auto; width:990px; background:url(../images/container-bg.jpg) no-repeat; height:660px;}
#main-left {background:url(../images/bg-left.jpg) left center no-repeat;}
#main-right {background:url(../images/bg-right.jpg) right center no-repeat;}
#shadows {width:1237px; margin:0 auto; overflow-x: hidden}
html:
<body>
<div id="shadows">
<div id="main-left">
<div id="main-right">
<div id="main-wraper">
<div id="main-wraper-liner">
<div id="main-container">
<div id="main-container-liner">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Here is the link
http://hithouse.businesscatalyst.com/index.html
thanks in advance.
If I got you right, you don't want the shadow to be displayed, when the screen is smaller than 990px. What I would do is this:
leave the body as it is
create a transparent png with a height of 1px and a width of 990px + shadows (left and right)
use this much simpler markup
you're ready to go
HTML
<div class="content">
<div class="shadow"></div>
<h1>Normal content goes here</h1>
</div>
CSS
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div.content {
position: relative;
width: 400px;
height: 100%;
margin: 0 auto;
border: 1px solid red;
}
div.shadow {
position: absolute;
top: 0;
left: -28px;
width: 456px;
height: 100%;
background: transparent url(https://dl.dropbox.com/u/1336931/_Stackoverflow/example_shadow.png) repeat-y 0 0;
}
DEMO
Try before buy