I am Trying to Place My Footer in the bottom Right of the page. I am using the HTML5's <footer> tags.
So, here is what i have in my CSS:
footer {
position:absolute;
bottom: 0px;
float: right;
height: 35px;
margin: 0px 50px 0px 0px;
background: #9FF;
color: #000;
text-align: right;
padding: 10px 30px;
}
With this code the footer perfectly sticks to the bottom. What i want is that it should also be in the rightmost part of the footer as well.
http://i47.tinypic.com/2rrox0w.png
So, when i use the following code: right: 50px in the CSS. Then the footer gets positioned relative to the browser. So, whenever i Resize my browser the footer is dislocated.
What i Want ?
I want to footer to be placed at the bottom. And at a a margin of 50px(right) from the container(#main or #maincontent) it is placed in rather than the browser. The float: right does not seem to work.
I have looked the whole internet and stackoverflow as well. But, could not find a solution to this kind of issue.
I am using Google Chrome 22. So, My Browser is largely HTML5 compatible.
Updated: you don't need to position it absolute, just remove the position, give some width to your footer and float it towards right like this
footer {
float: right;
height: 35px;
margin: 0px 50px 0px 0px;
background: #9FF;
color: #000;
text-align: right;
padding: 10px 30px;
width: 180px;
}
My New Fiddle
Add position: relative to the container, and then use the right property.
So your full CSS would look something like this:
#main,
#maincontent {
position: relative;
}
footer {
position: absolute;
bottom: 0px;
right: 50px;
height: 35px;
margin: 0px 50px 0px 0px;
background: #9FF;
color: #000;
text-align: right;
padding: 10px 30px;
}
Remove float and give right:50px (or your desired value) to it. if it still doesnt work then give clear:both;and also check your padding and margin values.
You need to create a centralized container to the footer with the same with that #main or #maincontent. And then use the margin inside that footer container.
Related
Here is my jsfiddle (without design)
Not able to put space between the search form and menu.
I need, as in the home link have some space before the menu.. the search form need to put some space after the menu.
#search-ams {
background: #FFF none repeat scroll 0% 0%;
border: 1px solid #CACACA;
width: 213px;
height: 24px;
float: right;
padding: 0px;
}
I tried to put padding value.. but if I add padding-right:5px; .. search form moved down in the menu.
Can anyone help me to fix this.
Thanks in advance.
Unfortunately I can't be 100% sure I understand exactly what you're asking, but assuming you just want to put some distance between the menu and the search box, wouldn't simply adding something like:
margin-top: 10px;
To #search-ams do the trick?
Though if this was all you needed, I'm guessing you'd probably have figured that out yourself :)
You can use margin.
margin clears the area around element. We can give top, right, bottom, and left margin to the element.
we can give different margins from different side as:
element{
margin-top: 10px;
margin-bottom: 12px;
margin-right: 15px;
margin-left: 20px;
}
we can use shorthand property:
element{
margin: 10px 15px 12px 20px; <!-- Top,Right,Bottom, Left respectively -->
}
If margin is same from all sides, we can simply give as:
element{
margin: 10px;
}
You can simply use margin to space elements out:
#search-ams {
float: right;
background: #FFF none repeat scroll 0% 0%;
width: 213px;
height: 24px;
border: 1px solid #CACACA;
margin-top: 20px;
margin-right: 20px;
}
JSFiddle
Recently took over a site from a new client. Trying to make two div's in the header. Left is the logo. Fine, no problem there. But the right div has two elements and they should both be on the right hand side of that div. Tried floating right and changing margins, padding, etc. Not much working. Big issue is the order should be social icons and then MailChimp widget and instead, it's in reverse. Here's what I'm currently using for my CSS for that area:
#theme-logo {
width: 50%;
float: left;
margin: 0;
}
#theme-header {
min-height: 60px;
}
#theme-header .tabcontent ul li.widget {
position: relative;
float: right!important;
padding: 0px 20px;
}
#theme-header .tabcontent {
position: relative;
float: left;
top:0px;
width: 50%;
}
#theme-header .tabcontent ul {
float: left;
list-style: outside none none;
margin: 0px 0px 0px 0px;
padding: 0px;
}
Found it. The original theme had absolute positioning on the MailChimp widget's div. Like this:
#mc_signup { position: absolute; right: 0px; width: 226px; }
So I just deleted that line from the theme's CSS and problem seems to have been solved.
Never fun to take over a theme from someone else.
I have two divs on the top of the webpage. I just want to overlap the shadow of the top div to the following one. Absolute and relative positioning completely changed the positions/places of divs by either expanding or fixing position. Is there a line of code that just achieves to decide which div will be overlapped and which div won't be without changing their positions? If there is not, how I can do this with posititioning?
My top div:
div#divSlogan{
background-color: #FFBD01;
width: 50%;
margin-left: auto;
margin-right: auto;
margin-top: -1.15%;
padding: 0.1%;
-moz-box-shadow: 0px 0px 10px 2px #888888;
-webkit-box-shadow: 0px 0px 10px 2px #888888;
box-shadow: 0px 0px 10px 2px #888888;
}
The following div:
div#menu{
text-align: center;
font-size: 120%;
background-color: #FFA700;
padding: 0.1%;
height: 20%;
width: 49%;
margin-left: auto;
margin-right: auto;
}
My webpage:
All in all, I want to put the shadow of the top div (which is written Listen. Enjoy..) to the following below div (which is menu). How can I do this?
You don't need to use absolute positioning for this .I'm not sure why relative positioning didn't work for you . To use z-index you need to use absolute , relative or static position .
Here is the working code , replace the div#menu by this in your css file .
div#menu{
text-align: center;
font-size: 120%;
background-color: #FFA700;
padding: 0.1%;
height: 20%;
width: 49%;
margin-left: auto;
margin-right: auto;
position:relative;
z-index:-1;
}
Edit 1:
You have to use position relative here because z-index won't work otherwise .
Here is a JSFiddle of this working: http://jsfiddle.net/pezrwv0z/3/
Edit 2 :
Other things that can be improved in the code .
Instead of margin-left:auto ; margin-right:auto; use
margin:0 auto ;
To center the div .
height:20%;
You can't give height a value in % , use pixels (px) instead . eg: height:50px;
Edit 3 :
It seems that links don't work in a container with negative z-index .
Here is the updated fiddle . http://jsfiddle.net/pezrwv0z/3/
Try changing div#menu to - should do the trick:
div#menu {
text-align: center;
font-size: 120%;
background-color: #FFA700;
padding: 0.1%;
height: 20%;
width: 49%;
margin-left: auto;
margin-right: auto;
/* add these */
margin-top: -10px;
/* z-index: 3; - this was the wrong way around, ignore this line :) */
z-index: -1;
}
Edit: not too sure on the margin-top - might be more appropriate to change margin-bottom on the slogan div - again, a negative value of your choosing.
I am having trouble for some reason with getting the bottom of my page to have some padding. I have a content box that goes to the end of the page and hits the bottom and doesn't look the greatest. I want to give some space from the bottom of the page to fix this issue, but it seems that margin-bottom isn't working as I expect it to? I have included the following code which should be everything that affects the content box. I have tried removing the margin:0 in the html/body (even though I kind of need that), but that doesn't seem to work either? I feel like I am missing something really obvious.
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
text-align:left;}
#content {
position: absolute;
left: 50%;
margin-left: -368px;
top: 104px;
padding-left: 35px;
padding-right: 35px;
padding-top: 15px;
padding-bottom: 15px;
background-color: white;
border: 1px solid black;
width: 664px;
margin-bottom: 20px;}
Any help would be greatly appreciated :) Thanks!
Live link - http://quintinmarcus.com/portfolio/
Since content has position: absolute, its after margins do nothing, nor should it stretch the inner height of the body so that the body's padding-bottom does anything.
If you want to centre your layout, modify your current style for #content to the following:
CSS:
#content {
width:664px;
margin:104 auto 20px auto;
padding: 15px 35px;
background-color: white;
border: 1px solid black;
}
This will also enable you to give the margin at the bottom you want.
I want to center my web page footer and create a reasonable gab between it and the above content. Currently, the footer has a line and paragraph joined to the above content. I can push down the content but the line does not move. I am sure the property I am missing out in my css style sheet. Could someone help?
This is my html mark up:
<div id="footer">
<p>Copyright (c) 2010 mysite.com All rights reserved</p>
</div>
Which css property can I use to solve this problem? A sample would be appreciated. Thanks.
#footer{
display: table;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Center a div horizontally? Typically done by setting margin: 0 auto, or margin-left: auto; margin-right: auto.
And if you want a gap above it, give it a top margin.
Use margin:auto to centre blocks with CSS, and margin-top or padding-top to make a gap above it:
#footer {
margin-left:auto;
margin-right:auto;
margin-top:2em;
}
I've used 2em for the top margin; feel free to change that as you like, even to a fixed pixel size if you prefer. You can also use padding-top as well as or instead of margin-top, depending on exactly what you need to achieve, though the centering can only be done with margin left/right, not padding.
The above code can be condensed using the shorthand margin code, which lets you list them all in the same line of code:
#footer {
margin: 2px auto 0 auto;
}
(sequence is top, right, bottom, left)
hope that helps.
I solved it with this:
#footer {
width: 100%;
height: 28px;
border-top: 1px solid #E0E0E0;
position: absolute;
bottom: 0px;
left: 0px;
text-align: center;
}
You can center the text with the following CSS
#footer {
margin: 0 auto;
}
If you want more space on top add
margin-top: 2em;
after the previous margin line. Note that order matters, so if you have margin-top first it gets overwritten by margin rule.
More empty vertical spacing above the footer can also be made using
padding-top: 2em;
The difference between margin and padding can be read about W3C's CSS2 box model. The main point is that margin makes space above the div element's border as padding makes space inside the div. Which property to use depends from other page elements' properties.
I used this code for bottom copyright.
.footer-copyright {
padding-top:50px;
display: table;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#Panel01 {
vertical-align:bottom;
bottom: 0;
margin-left:auto;
margin-right:auto;
width: 400px;
height: 100px;
}
Notes:
#Panel1 is the id for a DIV and the above code is CSS.
It is important that the DIV is large enough to contain the items
within it.
#footer{
text-align:center
}
.copyright {
margin: 10px auto 0 auto;
width: 100%;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
font-style: normal;
text-align: center;
color: #ccbd92;
border-top: 1px solid #ccbd92;
}