Hi i have 2 header as follow:
when i click the notification button, the drop down seems break the header layout. Following are the screenshot
The notification dropdown css are as follow
#notification_dropdown {
-webkit-box-shadow: 0 0px 13px rgba(20, 20, 20, 0.5);
-moz-box-shadow: 0 0px 13px rgba(20, 20, 20, 0.5);
box-shadow: 0 0px 13px rgba(20, 20, 20, 0.5);
background: white;
border: solid #888888 1px;
left: 300px;
width: 380px;
display: none;
float: left;
color: #444444;
}
what am i doing wrong here?
add position relative to its parent and position absolute to itself. by doing that it will come in to layering of layout and will not break your existing layout.
add position absolute like
#notification_dropdown {
position:absolute;
z-index:1;
}
and add position relative to its parent like
parent_0f_dropdown
{
position:relative;
}
Related
Im trying to create a stick nav. However on doing so, the nav goes into the background.
I've set the position on the nav div like so,
.site-header {
...
position: fixed;
}
However, this has worked as expected, as mentioned above. Is there anything else I should be adding, to ensure the div is ontop and fixed.
https://jsfiddle.net/fe6jc8nu/
Thanks,
Add z:index: 9; to .site-header rule:
.site-header {
background-color: #fff;
padding-bottom: 25px;
padding-top: 25px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: fixed;
z-index: 9;
}
I was wondering if anyone could point in the direction of a solution!
For some reason my rightbar's height isn't staying within the parent div (mainwrapper), and I have the body and the wrapper's height set to 100%.
When I set it to 90% it fits but then when I resize the window to anything lower than 1920x1080, it goes out of the wrapper again.
Any and all would be appreciated!
I read online somewhere that it's usually floating divs that cause this, but I have nothing floating and I believe I have the corrent position:relative placed.
I've not worded this the best with "bar", so here's a gyazo image to hopefully help with this: https://gyazo.com/6661da9c5194e2c2619e5fe1b5e3f2c5 - As you can see, the bar goes out of the wrapper when set to 100%
My code:
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background-image: url(/css/images/backgroundimages/bgimg.png);
}
div#mainwrapper {
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
border-left: 4px solid #000;
border-right: 4px solid #000;
box-shadow: 0px 0px 10px #000;
background-color: rgba(0, 0, 0, 0.6);
}
div#menubar {
background-color: rgba(41, 128, 185, 0.2);
text-align: center;
padding: 30px;
border-bottom: 3px solid #000;
}
div#menubar a {
text-align: center;
padding: 31px;
text-decoration: none;
color: rgba(255, 255, 255, 1);
transition: 0.3s;
font-size: 1.1em;
font-family: 'Muli', sans-serif;
text-shadow: 2px 4px 7px #000;
}
div#menubar a:hover {
background-color: rgba(0, 0, 0, 0.4);
padding: 30px;
font-size: 1.3em;
transition: 0.3s;
color: rgba(231, 76, 60, 1.0);
text-shadow: 1px 1px 2px #000;
font-weight: bold;
border-right: 2px solid #000;
border-left: 2px solid #000;
}
div#maincontent {
width: 100%;
height: 100%;
}
div#rightbar {
width: 15%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
<div id="mainwrapper">
<div id="menubar">
HOME
FRIENDS
FORUM
CONTACT
</div>
<div id="maincontent">
<div id="rightbar">
</div>
</div>
</div>
EDIT: Try erasing the height: 100%; on div#rightbar and replace it with min-height: calc(100vh - 85px);
The reasoning: 100vh means '100% viewport height'. So whatever the height of your browser window is the height #rightbar will be. But you need to subtract the height of #menubar from it (85px). calc() helps you accomplish this. Take a note of this css property/value combo because you'll potentially use it a lot for making your footers stick to the bottom of the page (AKA 'sticky footers'). Make sure you have a space on either side of the - sign. If you don't include those spaces, the calc() function won't work.
OLD ANSWER: I apologize if I don't understand what you're wanting, but I'll give it a shot: #rightbar's height actually is inside of the wrapper - it's just not inside the border that you created around #menubar.
Erase border-bottom: 4px solid #000; from div#menubar and move it to div#mainwrapper instead. Here's an example: https://jsfiddle.net/ms2e2e5v/1/
I want to move the header up to the topmost. But it won't go, here's the fiddle http://jsfiddle.net/DCtH7/4/
As you see in the fiddle, there is a white space above the header. I tried padding: 0 but it won't work.
Add position: absolute to the header
header {
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
color: white;
width: 100%;
height: 34px;
box-shadow: 0px 3px 3px black;
margin: 0 auto;
position: absolute;
}
An example : http://jsfiddle.net/DCtH7/6/
As an alternative way change margin to padding here:
header #header-content {
padding: 10px;
}
This will also fix the problem without use any absolute position
An example : http://jsfiddle.net/DCtH7/7/
I added a new navigation menu to my website. It's one I found from a tutorial and I am having an issue with it. It appears to be hiding behind the div directly below it. I have tried z index but that does not work in this case. I am using z index though. I have the div above the nav menu fixed so that it moves with the page when I scroll.
This fiddle is of most of the site. there is a lot of code but I do not know where the issue is so I added most of it. The last bit of css is for the datatables.
The following code is the div containing the nav menu (not sure if that's relevant.)
.box{
margin-left:auto;
margin-right:auto;
width:1000px;
position:relative;
margin-top:220px;
z-index:1;
}
So basically how can I make it so that the nav menu does not hide behind the bottom div. the content which is the datatables.
As always thanks in advance!
EDIT: I removed overflow:hidden from the .box and now it shows me the menu but it pushes all the divs and content below it down when the menu drops down. Anyway to fix this?
Here is your solution. Adjust to whatever you need it to be.
http://jsfiddle.net/cornelas/eNp8F/16/
.box{
margin-left:auto;
margin-right:auto;
width:1000px;
position:relative;
margin-top:220px;
z-index:999;
height: 400px;
}
#content {
/* Background color, gradients & Rounded Corners */
background-color: #121212;
border: 1px solid #343434;
-webkit-border-radius: 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px ;
-webkit-box-shadow: 1px 4px 15px 1px rgba(0, 0, 0, 9);
box-shadow: 1px 4px 15px 1px rgba(0, 0, 0, 9);
-webkit-box-shadow: 1px 4px 15px 1px rgba(0, 0, 0, 9);
box-shadow: 1px 4px 15px 1px rgba(0, 0, 0, 9);
margin:20px;
padding:5px 5px 5px 5px;
position: absolute;
top: 20em;
}
I have created a big menu that has its width set to 100%, I want this div to be scrollable from left to right.(on the X axis). I have set the scroll-left and scroll right properties accordingly but it still doesnt work. Im sure im doing something wrong, any advice is appreciated. Thanks.
code is on jsFiddle
You need to have a width in place that isn't 100%. Set the menu into a container div with your dimensions and overflow on and then set the actual menu to be really wide inside it. Think of the box div like a frame.
http://jsfiddle.net/spacebeers/WkUNn/19/
.box {
max-height:150px;
border: 2px solid red;
width: 100%;
overflow: scroll;
}
.megamenu {
width: 3000px;
overflow: hidden;
max-height:100px;
-webkit-box-shadow: 0px -1px 12px rgba(0, 0, 0, 0.48);
-moz-box-shadow: 0px -1px 12px rgba(0, 0, 0, 0.48);
box-shadow: 0px -1px 12px rgba(0, 0, 0, 0.48);
padding-bottom:45px;
padding-top:5px;
background: grey;
border-top:1px solid #767676;
font-family:Verdana, Tahoma, Sans-Serif;
z-index: 100;
}
EDIT: As pointed out by #c_kick (and in the original) you can use overflow-x, overflow-y. I was trying to keep things simple.