I want my sidebar to overlap the footer. I tried position:absolute, but that didn't work.
.sidebar-menu {
list-style: none;
margin: 0;
padding: 0;
}
element.style {
padding-bottom: 25px;
}
.main-footer {
background: #fff;
padding: 15px;
color: #444;
border-top: 1px solid #d2d6de;
}
If I understand your question correctly you should try use z-index attribute. If you set sidebar bigger z-index it will overlap your footer.
Try the below code
.sidebar-menu {
list-style: none;
margin: 0;
padding: 0;
position: fixed;
}
Hope this helps.
Related
this might be a really stupid question, but I recently started getting into web development again as a hobby, and I am trying to create a simple website to remember what I knew.
Unfortunately, I ran into a roadblock: I want a navigation bar that spans 100% of the page, but no matter what I try, there are still tiny margins to each side, like this:
The website
Right now, the relevant CSS looks like this:
body {
background-color: beige;
}
.navbar {
background-color: black;
overflow: hidden;
margin: 0 0 1em 0;
float: left;
width: 100%;
display: inline-block;
}
.navbar a {
background-color: #dddddd;
color: black;
float: left;
font-size: 24px;
padding: 16px 16px;
text-decoration: none;
}
.navbar a:hover {
background-color: #777777;
color: white;
}
.navbar a.active {
background-color: coral;
color: white;
}
Andrew provided a nice answer for you but to not run into this kind of problem again I suggest always adding this to your main .css file.
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
Otherwise just add this to the html and body elements.
The gaps are most probably from your parent body element. Add the following to your CSS to remove those gaps:
body {
background-color: beige;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
My navigation bar spans the width of the page but when I write object: fixed;, the navigation bar shrinks and goes over the text. I would like the navigation bar to be like dootrix.com, where it is sort of ingrained in the website and does not shrink when you scroll down!
I have created a JSFiddle with my code: https://jsfiddle.net/kpsq8r9m/
Here is my CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
border-style: solid;
border-color: darkgrey;
border-width: 6px;
position: fixed;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
padding: 14px 50px;
text-decoration: none;
}
Any help would be greatly appreciated!
EDIT: What I meant when it was "shrinking" was if I did not have position:fixed; it would extend to the entire page but when I did it shrunk. In order to see what I am talking about I would recommend trying this out in google chrome.
Please try:
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
z-index:100 should do the trick.
I am new to html/css and I am trying to edit a landing page. I almost got it I only have one problem that I can't seem to find how to do.
I want to move this navbar at the very edge left side of my website:
I think I need to insert something in this codes but just don't know what it is.
ul {
float: left;
margin: 30px 0 50px 0;
font-family: 'Roboto', sans-serif;
border-radius: 10px;
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #010c15;
}
li a {
display: block;
color: white;
padding: 8px 16px;
text-decoration: none;
}
li a:hover {
border-radius: 10px;
background-color: #0099ff;
color: white;
}
Thank you for your answers.
You could try adding the following:
ul{
position:absolute;
left: 0;
....
}
Also you seem to have margin listed twice
You can use that :
ul {
position:absolute;
left: 0px;
top: 0px;
....
}
For ref: http://www.w3schools.com/cssref/pr_class_position.asp
I am a little stuck. I am trying to build a horizontal navigation bar, 1024px across, which will allow for a submenu to display below it. But i want the submenu to also be 1024px in width and to display directly below the navigation bar, vertically aligned.
At the moment the submenu appears but fixes its left side to the left side of the current li that you are hovering over. How can I fix this?
Thanks!
EDIT: So on mouse over it would look something like this: http://eventav.biz/site/example.jpg
Link to what I've done so far -
http://www.eventav.biz/site/
ul.top_menu {
position: relative;
margin: 0;
margin-bottom: -1px;
list-style: none;
display: table;
width: 1024px;
border: 1px solid #111111;
border-bottom: 1px solid #000000;
border-radius: 10px 10px 0px 0px;
}
.top_menu li {
display: block;
position: relative;
border-right: 1px solid #111111;
float: left;
margin: 0px;
display: table-cell;
vertical-align: middle;
}
.top_menu li:first-child {
border-left: 1px solid #111111;
}
.top_menu li a {
display: block;
text-decoration: none;
color: #000000;
text-shadow: 3px 3px 8px #3A3A3A;
padding: 15px;
height: 30px;
display: table-cell;
vertical-align: middle;
margin: 0px;
}
#top_menu_item ul {
display: none;
margin: 0px;
}
#top_menu_item:hover ul {
display: block;
position: fixed;
margin: 0;
}
#top_menu_item:hover li {
width: 1024px;
background-color: #666;
text-align: left;
color: #FFF;
font-size: 12px;
margin: 0px;
}
<ul class="top_menu">
<li id="top_menu_item">HOME</li>
<li id="top_menu_item">OUR SERVICES
<ul><li id="top_menu_item">test</li></ul>
</li>
<li id="top_menu_item">EXAMPLES OF OUR WORK
<ul><li id="top_menu_item">test</li></ul>
</li>
<li id="top_menu_item">CONTACT US</li>
</ul>
Remove the fixed positioning from the child ul, and replace it with position:absolute. Add in left:0px, and then remove position:relative from the parent li.
Working jsFiddle example
#top_menu_item:hover ul {
display: block;
position: fixed; /* Change this to position:absolute; */
left:0px; /* Add this */
}
.top_menu li {
display: block;
position: relative; /* Remove this */
}
1) Remove position: relative; from #top_menu_item
2) Set #top_menu_item ul to position: absolute; left: 0; instead
3) Remove left padding on #top_menu with padding-left: 0;
4) Add:
#top_menu_item:first-child {
margin-left: 40px;
}
Essentially, the problem was that you've been positioning your inner ul tag relative to it's parent li. Instead, the solution above positions the secondary navigation absolutely in relation to the primary navigation, and we use left: 0; to make sure it's completely left-aligned.
It's also against the standard to use an id multiple times on a page. Therefore I'd recommend changing #top_menu_item into .top_menu_item and changing the HTML accordingly.
Let me know if you have any problems!
I have a (CSS) stacking question.
The tab-boxes on my development site below have z-index set as -1 so that their border appears behind the tabs above them, so that the active tab's white bottom border covers it. But on all browsers but Opera this makes descendants of the tab-boxes (links, forms, etc.) unclickable. You can see this at:
http://od.philosofiles.com/
Can anyone help? Here's the bare bones of the HTML and CSS, though examining the link above with Firebug would probably be more illuminating:
<ul class="odtabs">
<li id="tab-Authors1" class="first active">Tab</li>
</ul>
<div id="tab_content-Authors1" class="odtab-content">
<p>Tab Box</p>
</div>
<style type="text/css">
<!--
.odtabs li {
float: left;
background-color: #ddd;
width: 80px;
height: 19px;
list-style-type: none;
}
.odtabs li.active {
background-color: white;
border-bottom-color: white;
}
.odtab-content {
border: 1px solid #babcbd;
margin-top: -1px;
clear: both;
position: relative;
top: -1px;
z-index: -1;
}
-->
</style>
Set z-index to -100.
.odtab-content {
border:1px solid #BABCBD;
clear:both;
font-size:0.9166em;
margin-top:-1px;
padding:0 1em;
position:relative;
top:-1px;
z-index:-100;
}
I finally fixed this myself, after a lot of experimentation with line-by-line reconstruction. I believe the problem was due to the z-index being negative; however, the only way to make it work with a positive z-index and a higher positive z-index was to set position: relative on the tabs, which required quite a different approach. (Apparently z-index only works on absolute, relative or fixed positioned elements.) Here, for those interested/with similar problems, is the full CSS I used:
ul.odtabs {
display: inline;
margin: 0;
padding: 0;
}
.odtabs li {
float: left;
background-color: #ddd;
border: 1px solid #babcbd;
width: 80px;
height: 19px;
margin-right: 2px;
text-align: center;
list-style-type: none;
position: relative;
z-index: 2;
}
.odtabs li.active {
background-color: white;
border-bottom-color: white;
}
.odtabs a {
color: #78797c;
font-size: 0.75em; /* 9px = 12*0.75 */
font-weight: bold;
margin-top: 0px;
padding-top: 0px;
}
.odtabs .last {
margin-right: 0px;
}
.odtab-content {
font-size: 0.9166em;
border: 1px solid #babcbd;
padding: 0px 1em; /* ie. 12px */
clear: both;
position: relative;
top: -1px;
z-index: 1;
}