In my body I have a #wrapper. I wanted to make the navigation bar which is fixed to the top, so inside the #wrapper I made new div #navbar that is transparent(70%). Next step was creating #content-wrapper inside #wrapper (a bit transparent too - 85%). And last one was #footer inside #wrapper that is fixed to the bottom of the site.
So the tree looks like that:
body ->
#wrapper ->
#navbar
#content-wrapper
#footer
Now, the CSS for #navbar:
width: 100%;
height: 50px;
position: fixed;
top: 0px;
left: 0px;
background-color: rgba(154, 210, 78, 0.8);
z-index: 100;
Everything works fine here I guess - #navbar is fixed, 100% width and has the inline-menu inside, which is 900px wide.
Now the CSS for #content-wrapper:
width: 900px;
background-color: rgba(255, 255, 255, 0.7);
height: 5000px; //just an example
margin: 70px 0px 30px 0px;
and the last CSS for #footer:
width: 100%;
text-align: left;
font-size: 12px;
font-family: "Calibri";
color: white;
text-shadow: 1px 1px 5px #3a3a3a;
position: fixed;
left: 25px;
bottom: 15px;
nothing special, just ordinary fixed footer I guess.
When I start scrolling down the page, the #navbar is overlapping the #content-wrapper and because the #navbar is a bit transparent, you can see the #content-wrapper through it. It not so bad at the end, but I want this website to be as perfect as possible, so I don't want the #content-wrrapper to be seen through it. I was looking for the answer for so long and I saw a lot of similar cases, but actually nothing worked for me. I was trying to implement the position: relative or absolute and overflow: auto onto the content and I was setting up the top: 70px, just to make sure content is below my #navbar - nothing. Tried some jQuery scripts, but they weren't so good, because they were just changing the opacity for the divs that are scrolled up. I can't think about any other solutions. Maybe my div's tree is bad, maybe I implemented the codes badly, but I was checking it with inspect-element function in browser, I was double-checking the code and nothing happened, I could still see the #content-wrapper underneath the #navbar. I'm not showing the HTML here. I'm sure everything is correct there. I'm looking for any solution - it can be some js script, php script, css code, etc. Thank you for you answers.
You should remove the transparency of from the #navbar I guess. So that you can’t see anything through it. And add a solid background to it like this:
background: rgb(154, 210, 78);
Related
I'm completely new to front end and have been coding using html and css for 3-4 months.
I'm currently completing a free course on free code camp and I'm currently working on a technical document page.
My main issue is figuring out how to stop my body element from scrolling behind my nav bar which is positioned on the left. I want the body element to only scroll upwards/downwards.
my second issue is figuring out how to build my list items with the top and bottom borders surrounding the list items fully extending within the nav bar
here is my project --> https://codepen.io/kboogie/pen/zYzBwXa
Thanks for the help and sorry for poor explanation
body { line-height: 30px;
min-width: 100%;
font-family: Azeret Mono, monospace;
padding-left: 250px;
}
#navbar { position: fixed;
left: 0px;
top: 0px;
height: 100%;
border-right: solid;
border-color: rgba(44, 187, 0, 0.603);
background-color: rgb(223, 253, 170);}
header {
text-align:left;
}
.head-n { text-align: center;}
li {
padding-right: 10px;
list-style: none;
}
Here is a solution to your first problem. The issue comes from setting the min-width: 100% and padding-left: 250px. This will cause all of the content to be 100% of the width plus an extra 250px. This will always result in content that is too big to fit on the screen. That is what is causing the horizontal scroll bar.
To fix this you should remove min-width: 100% from body{}. There is no need for this style since the text will automatically wrap regardless of the size of the screen.
Wasn't sure how to word the title properly - basically I want to know how the fixed header div disappears behind the nav bar in this codepen.
http://codepen.io/Guilh/pen/JLKbn
Header code:
header {
height: 300px;
padding-top: 50px;
background: #f07057;
position: fixed;
width: 100%;
top: 0;
}
nav bar code:
.main-nav {
background: #fff;
height: 80px;
z-index: 150;
margin-bottom: -80px;
box-shadow: 0 2px 3px rgba(0,0,0,.4);
position:relative;
}
How is that working? In contrast, my attempt is here:
http://codepen.io/Sasoon/pen/bVNVQv
Thanks so much!
Cast your .filler block as relative to make it above fixed block when scrolling and add background filling.
Here is your example modified:
http://codepen.io/anon/pen/YyPWpX
In the codepen1, they have used a script which will add a class to navigation when the page is scrolled. So the position will be fixed for the navigation once the new class is added (on scrolling down). If user scrolls page up, then the class will be removed. If you add the JavaScript that they have used, you can get the same functionality.
As can be seen here (please make it wider): http://jsfiddle.net/CZayc/1368/, I wanted to make my navbar width 100% of browser width, and place some links (First Second Third Fourth) in the centered, 1200px wide space.
I do not know why, but the middle container just overlaps the navbar.
Changing position: absolute; on navbar caused it to shrink to 1200px size (not desired).
What can I do about it? There is also a problem with link container, because I couldnt center First Second Third Fourth in the desired 1200px space (probably due to overlap).
Thanks!
Using absolute position on an element takes it out of the content flow: meaning that other elements in the flow act like its not there. The elements overlap because there is nothing to push the middle content down below the header.
There are 2 things you could do:
stop using position absolute. as #NendoTaka suggests, relative should be fine. If there is some reason for absolute positioning you haven't explained, then
add a margin to the middle content area.
Example CSS
.middle {
background-color: #7f7f7f;
height: 1050px;
margin: 74px auto 0; /* height of nav plus its borders*/
}
You can move .middle out of the way by adding margin-top: https://jsfiddle.net/CZayc/1371/
Be sure to set margin-top to the height of .nav. This includes borders, too.
Change your nav class to
.nav {
background-color: #34384A;
height: 70px;
width: 100%;
border-top: solid;
border-bottom: solid;
}
Note: You don't need the width: 100% but just in case.
You need to apply position:relative to both the .nav and the .middle
Your problem before was that .nav had an absolute position which caused the overlap. the relative positioning keeps that from happening because it formats each div relative to the previous div as written in your HTML.
.nav {
position: relative;
background-color: #34384A;
height: 70px;
/* position: absolute; */
left: 0;
right: 0;
border-top: solid;
border-bottom: solid;
}
.middle {
position: relative;
background-color: #7f7f7f;
height: 1050px;
margin: 0 auto;
}
You’re trying to solve the wrong problem with your question. The example below is a cleaned up version of your code.
* { margin:0; padding:0 }
nav {
background-color: #34384A;
height: 70px;
border-top: solid;
border-bottom: solid;
text-align: center;
}
<header>Test test</header>
<nav>
<a>First</a>
<a>Second</a>
<a>Third</a>
<a>Foruth</a>
</nav>
<div class="middle">
11111<br>22222<br>33333<br>44444<br>55555<br>66666
</div>
<footer>Test</footer>
Be mindful of the HTML you use. The HTML tags you choose should provide meaning to the content they wrap. Also you should avoid using position: absolute for general layout concerns such as this one.
Hope that helps.
The majority of the site displays well in all browsers including mobile except for the footer.
In 1600X900 dimensions the footer displays perfectly. On sites where the resolution height is below 900, the footer disappears. I've tried everything I could think of to have the footer "snap" to the bottom of the screen and am clearly out of my realm of expertise. Tested using the latest Chrome and Firefox with similar/same results (that is good I guess, LOL).
How do I have the bottom black elements snap to the bottom of the page?
URL of website: http://bit.ly/1ro8FtA
Screenshot at different dimensions: http://bit.ly/1uLGgNX
If I understand correctly (if you only want to move your Footer and not the all black region), try to change your CSS:
.agentpress-pro-black .site-footer {
background-color: #000000;
font-size: 16px;
padding: 40px 0;
text-align: center;
}
to this:
.agentpress-pro-black .site-footer {
background-color: #000000;
font-size: 16px;
padding: 40px 0;
text-align: center;
width: 100%; /*new*/
bottom: 0; /*new*/
position: fixed; /*new*/
}
NOTE
If you want all black region, then you should change your HTML, and move all your black region in order to have one positioning container fixed
I have a div that has a variable width, depending on its content. I want to use it for a menu bar that slides in from the side of the page when the user clicks it, so it has to stick out. I want it to stick out exactly 16px (because the arrow image has that size), no matter how wide it actually is.
How can I realize that without using JavaScript?
EDIT:
Thanks for your answers! But it came to my mind that I could do it just like I did with the navbar on that site – modify the width instead of sliding it in.
See here: http://dev.mezgrman.de/tagwall/
The easiest way to do that is to add another class to your menu item when it is collapsed and set another width there and a text indent like so (instead of write again all your css in a new class)
.collapsed {
width: 16px;
text-indent: -9999px;
background: url("/images/arrow_left.png") no-repeat scroll right center rgba(0, 0, 0, 0.85);
}
Now the only thing you have to do in javascript is to add and remove that class depending on the user's click. (You won't get rid of javascript. because css doesn't know when you click an element)
http://jsfiddle.net/LruWn/
No matter how long the .box is, it will always overlap the .container only by exactly 16px:
html:
<div class="container"><div class="box">text</div></div>
css:
.container {
position: relative;
outline: 1px solid red;
width: 100px;
height: 100px;
}
.box {
width: 70px;
position: absolute;
left: 100%;
margin-left: -16px;
outline: 1px solid black;
}
Add overflow: hidden; to .container to see how it might look like in action.
I solved my problem by modifying the width of my element now. Silly me.