I have two divs in my html page and I want them to appear one after the other. Here is the structure of my html page:
<html>
<body>
<div id="navigationBar"></div>
<div id="afterNav"></div>
</body>
</html>
The first div is a navigation bar, so I set its position to fixed. I am expecting the second div to appear below navigation bar, but it appears the above the navigation bar when the page is loaded. The afterNav div starts at the top left corner of the body/html. I tried playing around with the position property, but was not very successful. How do I get the second div appear after the first? Below is my css:
html, body{
height:100%;
width:100%;
margin:0px;
margin:0;
font-family: "Helvetica" , "Arial", sans-serif;
font-size: 1rem;
color: #212529;
}
#navigationBar{
display:block;
position:fixed;
background-color: black;
width:100%;
height:70px;
z-index:0;
}
#afterNav{
position:relative;
z-index:-1;
}
If you set the first div (navigationBar) to fixed then you need to make padding top to set the outer div position.
If your navigation height is 70px then you need to set outer div padding-top 70px.
#navigationBar{
display:block;
position:fixed;
background-color: black;
width:100%;
height:70px;
z-index:0;
}
#after-nav{
position:relative;
z-index:-1;
padding-top: 70px;
}
you can use margin-top also.
You need to move it below the fixed-navigation:
#navigationBar{
z-index:1;
}
#after-nav{
margin-top:70px
z-index:0;
}
When you have a position:fixed; element, that element will be on top of anything below it, with a lower z-index.
I would also change z-indexes so you don't have a -1.
Related
For example if I have a h1 element with the value "hello" with background-color: pink;, if the width of this element is shrunk to 10px it looks like this by default: https://i.stack.imgur.com/r4s4S.png .
I am wanting the pink part of the element (the background color) to be on the other side of the h1 element (closer to where "o" is, not "H").
What I have tried:
I have tried float: right on the h1 element but that moves the element off screen when the width is changed
and
I have tried giving h1's width a negative value (unsure why this didn't work).
My current HTML code:
<h1 style="background-color: pink; width: 10px;">hello</h1>
You can use ::after selector of h1 element for this.
h1{
display:inline-block;
position:relative;
}
h1::after{
position:absolute;
content:"";
top:0;
right:0;
width:10px;
height:100%;
background:pink;
z-index:-1;
}
<h1>hello</h1>
You can use a box-shadow for this:
h1 {
display: inline-block;
box-shadow: -10px 0 inset pink;
}
<h1>hello</h1>
I'm currently playing around with HTML and using position to align my div content.
At the moment, I have 3 divs. 2 divs using position:fixed and the other using position:relative.
My two fixed divs span the width of the page at 100% and are aligned at the top of the webpage. Like a top bar.
My third div is placed underneath the top bar with position:relative. The problem i'm having is that the third div is not being positioned underneath the two fixed divs (see picture)
Here is my code:
.topbar-container {
position:fixed;
width:100%;
height:72px;
background-color:#ffffff;
border-bottom:1px solid #e0e0e0;
z-index:2;
top:0;
}
.topbar {
position:fixed;
width:1200px;
height:72px;
left:50%;
margin-left:-600px;
top:0;
}
.body-container {
position:relative;
width:80%;
height:200px;
margin:0 auto;
left:50%;
margin-left:-600px;
max-width:1200px;
border:1px solid red;
}
My HTML:
<div class="topbar-container">
<div class="topbar">
</div>
</div>
<div class="body-container">
</div>
As you can tell by the picture, the div with the red border is being pushed up to the top of the page, where i thought by using position:relative would have fixed the problem.
Could someone please take a look for me?
Thanks in advance
http://www.dumpt.com/img/viewer.php?file=d96p2ywgzqs5bmnkac7q.png
Setting position: fixed or position: absolute will remove the element from the page flow. You now need to explicitly set the top property for .body-container to make it appear under the .topbar-container:
.body-container {
position:relative;
width:80%;
height:200px;
margin:0 auto;
left:50%;
margin-left:-600px;
max-width:1200px;
border:1px solid red;
top: 72px; /* must be >= the height of .topbar-container */
}
With a basic three row layout:
<div class="EditorHeaderWrapper">
<h1>Title</h1>
</div>
<div class="EditorMainRowWrapper">
// Main row guts go here
</div>
<div class="EditorFooterWrapper">
</div>
How can I make it so that, when the browser height is reduced, the middle row gets complete crushed before the footer (or header) get crushed at all?
.EditorHeaderWrapper{
position:absolute;
top:0;
left:0;
right:0;
height:49px;
background-image:url('blah');
border-bottom:1px solid black;
}
.EditorMainRowWrapper{
position:absolute;
top:49px;
left:0;
right:0;
bottom:30px;
background:#f9f9f4;
overflow:hidden;
}
.EditorFooterWrapper{
position:absolute;
bottom:0;
left:0;
right:0;
height:30px!important;
background:#3c3b37;
border-bottom:1px solid black;
}
Here's a working fiddle using the code above:
http://jsfiddle.net/ZaFp8/3/
But here's the problem: When you put the code in a real browser (FF26) inside the body element (not in a fiddle), with no other styles present, it doesn't work! The footer gets cut off first! So jsfiddle is adding something that fixes the problem.
So I assume I need to add some definitions to the body, html or possibly a wrapper div with some formatting. But what, and why?
Because your footer div is absolutely positioned, you need to assign a min-height of 100% to the body and html elements to "stretch" them to the full height of the window. You also don't really need to absolutely position the other two divs - they will align from top to bottom automatically using relative positioning.
Made a few other tweaks to your code here: http://jsfiddle.net/hoppergrass/ZaFp8/10/
HTML:
<div>
<div class="EditorHeaderWrapper">
<h1>Title</h1>
</div>
<div class="EditorMainRowWrapper">
// Main row guts go here
</div>
<div class="EditorFooterWrapper">
</div>
</div>
CSS:
html {
height: 100%;
}
.EditorHeaderWrapper{
position:relative;
height:49px;
background:#3c3b37;
border-bottom:1px solid black;
}
.EditorMainRowWrapper{
position: relative;
overflow:hidden;
}
h1 {
margin: 0;
padding: 0;
}
.EditorFooterWrapper{
position:absolute;
bottom:0;
left:0;
right:0;
height:30px!important;
background:#3c3b37;
border-bottom:1px solid black;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
background:#f9f9f4;
}
Edit: typos
I want to put a div Element constantly on the bottom of his parant div.
This should work with
position:relative;
bottom:0px;
Anyway it doesnt, the only think i can to is to margin top until it fits, but i dont like that. Can you find a reason in my code why the rlative position wont work?
#charset "utf-8";
/* CSS Document */
body {
background-color:#999;
}
#wrapper {
height:40em;
max-height:45em;
min-height:40em;
width:80%;
max-width:60em;
min-width:30em;
margin-left:auto;
margin-right:auto;
background-color:#333;
border:#000 solid;
border-width:thin;
}
#header {
width:100%;
height:70px;
background-color:#009900;
border-bot:#000 solid;
border-width:thin;
}
#content {
position:relative;
bottom:0px;
top:auto;
width:100%;
height:30em;
background-color:#FFFFFF;
border-top:#000 solid;
border-width:thin;
}
Content and Header are both parents of wrapper. So i want to put content on the bottom of wrapper.
Set the position #wrapper to relative, then set #content's position to absolute and bottom to zero.
the parent element should have a position:relative and the one sticking to the bottom
position:absolute;
bottom:0px;
hope this helps.
My basic layout for my page is:
<body>
<div id="headWrap"></div>
<div id="contentWrap"></div>
</body>
headWrap has all my menu items and search bar. contentWrap holds the content of each page. Both have a width of 100%. headWrap uses a repeating background images contentWrap uses a background image much larger than the screen size.
Somehow, when the page is rendered, the horizontal scroll bar is visible. Even though it appears that all content is on the page. If I scroll to the side, the background image does not continue, and the scrolled part of the screen is white. If I stretch the window wide enough the background image takes up the entire page.
How can I find out what is causing the horizontal scroll bar, and why does the background show up when I stretch the window, but not when I scroll.
#headWrap{
position:relative;
width:auto;
height:100px;
margin:0px;
padding:0px;
z-index:500;
background:url(images/VenueMenu.jpg) repeat-x;
}
#contentWrap{
position:absolute;
top:50px; left:0px;
text-align:left;
z-index:10;
width:auto;
height:1005;
margin:0 0 0 0;
padding:0 0 0;
float:left;
background:url(images/contentBg.jpg) repeat-x;
}
Use following CSS styles: width and overflow:hidden;
html{
margin: 3px 1px;
}
*+html{
overflow:auto;
}
body{
margin:0;
width:100%;
min-width:800px;
position:relative;
}
#headWrap{
position:relative;
width:100%;
height:100px;
margin:0px;
padding:0px;
z-index:500;
background:url(images/VenueMenu.jpg) repeat-x;
}
#contentWrap{
position:absolute;
top:50px; left:0px;
text-align:left;
z-index:10;
width:100%;
margin:0;
padding:0;
float: left;
background:url(images/contentBg.jpg) repeat-x;
}
Maybe you have some default margins that are added in addition to the 100% width? I suggest using a reset css, for instance YUI 2: Reset CSS.
You're looking to set the overflow CSS property.