I researched a lot and could not find the solution for my problem. The footer overlaps the fixed sidebar. I want to prevent divs overlapping each other. Could you please help me. Z-index does not solve the problem.
#sidebar {
margin: 140px 0px 0px 572px;
float: right;
width: 226px;
position: fixed;
}
#footer {
clear: both;
height: 55px;
width: 100%;
position: relative;
}
Make your sidebar opaque by giving it a background color or image.
for example: https://jsfiddle.net/a3t22856/
The piece I added is:
background-color: white;
Related
So i have a website with a header and a navbar. The effect i'm trying to achieve is that the navbar lays behind the header and then slides out when scrolling past the header. Example
But the links wasn't clickable in the example above (they got covered by the header), so i redesigned a bit and got a successful result. But now the navbar stays on top of the header. I tried changing it by z-index, but with no success, and i have no idea what is wrong.. Example 2
(the links are server archives, won't be changed.)
Sincerely,
a confused dev.
Changed your code in your first exmple, now it's working fine:
#Nav {
position: fixed;
background-color: #F0F4C3;
width: 100%;
background-size: 100% auto;
background-position: right center;
background-repeat: no-repeat;
top: 0px;
z-index: 10000;
box-shadow: 0px 4px 0px #AFB42B;
height: 50px;
margin-left: -8px;}
#Pic {
height: 300px;
/*changed*/
z-index: 100001;
margin-left: -8px;
margin-right: -8px;
margin-top: -8px;
/*added*/
position: relative;
}
You have to add position:relative to the elements using z-index make the z-index work
Found the problem:
Add position: to #headimage in the css.
My bad guys :).
I am fairly new to CSS and although I have found examples for centring a IMG within a DIV, because I have a float: right; on an outer DIV it doesn't work as I want. This basically makes the DIVs appear in the correct place, but the IMGs are not central.
Here is a CSSDesk link for an example of my scenario: http://www.cssdesk.com/2pgBf
I'm trying to get the green share icon to appear centered both vertically and horizontally within the outer red boxes (DIVs).
I'm sure there are lots of enhancements that can be made to my CSS, but please only answer with solutions to my problem (though feel free to comment on this post with tips for CSS).
Hope that makes sense....
You can do position: relative; on the parent and then:
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
On the child, this will center it.
DEMO HERE
This will work just as well and no positioning needed.
JSFiddle Demo
.social-media-icon {
background: Red;
margin: 2px;
float: right;
display: inline;
position: relative;
}
.social-media-icon a {
display: block;
}
.social-media-icon a img {
width: 16px;
height: 16px;
display: block;
margin:5px;
}
When i need to do that kind of code i set the parent tag, in this case the DIV to position: relative and the image to position: absolute, top:50%, left: 50% and margin: half the dimension just do this in your code:
.social-media-icon{
position:relative;
}
.social-media-icon a img{
position:absolute;
top:50%;
left:50%;
margin: -8px 0 0 -8px;
}
Im very new to css and I still find hard to understand some concepts especially positioning.
Anyway, my problem is that my when I set position: relative; of the container and my footer position: absolute;
bottom: 0; the footer became small. It had the same width as the container which is supposed to be before I placed those codes. I did it because I want my footer to be at the most bottom part of the container.
Below is the screen shot:
The maroon is the footer.
In my footer I don't use div but instead I use html element <footer>.
My css codes:
div#container {
height: 100%;
width: 1000px;
margin: auto;
background-color: #C9C9C9;
position: relative;
}
footer {
background-color: #340B09;
height: 50px;
position: absolute;
bottom: 0;
}
Please help.
Add width: 1000px; to your footer
Check this, if that may help you
https://developer.mozilla.org/samples/cssref/css-positioning.html
i will also encourage, you to have firebug installed in your browser
Also above the footer, add some div container, give it some height.. so that footer will stay at bottom. don't use positioning explicitly... since you are new to this.
Get yourself some time, you will be there on top of it..with CSS position :- )
Is it necessary for you to use relative and absolute positioning ? I'm asking since it has one drawback which is that the layout of the page will not be the same as always for all the different sizes of the screen.
Since you wanted to display footer at the bottom of the container, so here it can be done in this way.
<style type='text/css'>
body{
margin: 0px;
padding: 0px;
background-color: black;
}
#inbody{ /* main page */
padding-top: 10px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding-bottom: 10px;
height: 1170px;
}
#container{ /*container */
padding: 10px;
margin-top: 10px;
margin-left: 30px;
margin-right: 30px;
height: 1130px;
background-color: orange;
}
#header{ /* header */
margin-left: 168px;
height: 51px;
}
#midbody{ /* middle body */
margin: 10px;
padding: 0px;
height: 999px;
}
#footer{ /* footer */
padding: 10px;
height: 30px;
background-color: black;
}
</style>
Moreover you can change colors of every part to see the changes. Also use inspect element which shows the HTML and CSS of the web page. Also for the box model concept try experimenting the metrics in the inspect element.
You are using;
footer {
background-color: #340B09;
height: 50px;
position: absolute;
bottom: 0;
}
If footer is some ID or Class, it should be defined in CSS like #footer or .footer and no problem if you are using html5 element footer.
If you want to stretch an element to fill container, use width: 100%. Add this to your footer if footer is inside your container. Otherwise it will stretch to screen.
I properly solved it by declaring width of footer to 980px; When I tried 1000px it became wider than the container because after researching I found out that mozilla and webkit doesn't include padding in the width.
I'm trying to tweak my site and have been sitting for a bit too long at the computer hence I do not know where my mistake is. Hoping someone could help out a person with basic knowledge of css.
Here is my css:
#body {float: left; width: 100%; min-height:100%;}
#header-wrap,
#slider-wrap,
#content-wrap,
#footer-wrap {
float: left;
clear: both;
width: 100%;
}
#header-wrap {
float: left;
width: 100%;
}
#header {height: 100px;}
#slider {height: 500px;}
#content {padding: 0; text-align: left;}
I wanted to add
position: absolute; top: 0px
to #slider-wrap so that it begins at the top right under the header but when I do that both the #content moves up and is placed directly under the slider?
What is the correct positioning for these objects so that they show in the following order:
1. header
2. slider (partially under the header)
3. content
and on pages with no slider the content should follow the header???
any clues for this noob would be much appreciated
This:
#header-wrap,
#slider-wrap,
#content-wrap,
#footer-wrap {
float: left;
clear: both;
width: 100%;
}
Means that all three rules are applied to all the four specified elements. If you add your position rule there as well it'll apply to all those elements.
Instead, try adding:
#slider-wrap { position: absolute; top: 0px }
On my webpage over at http://www.replyonline.co.uk/avaya/16312_UC_ms/costs/index.html you will see a twitter div named #twitter.
As you can see, it looks out of position and needs to be after the 4 #about divs to the left of it, but also needs to line up with the others. It looks pushed down currently.
I've fiddled with the CSS but haven't had any luck.
Here's the CSS for the about boxes and the twitter box:
#about{
width: 260px;
min-height: 140px;
float: left;
margin: 0 35px 10px 0;
background: url(../images/about_grad.jpg) bottom right;
display: block;
}
#twitter{
float: right;
width: 260px;
margin-bottom: 20px;
height: 290px;
overflow: auto;
font-size: 11px;
background: #ececec;
}
Thanks
I added a wrapper div (no styling) around the a linked items and removed the float:right attribute of the twitter box - that seemed to work.
Just remove float: right from #twitter.