If you have a quick look at this website that I am designing: http://milabalami.com
The blackline seen in the footer is the one that I want to fix. Is there anyway that I can put that footer at the bottom of the content (wrapper) of the page? I have not done any webdesigning since the golden days of tables so CSS is quite new to me.
Anyone that could assist this old man? Please be specific in any reply as I am new to CSS styling...
you mean that you want to eliminate the gap between wrapper and the black line? If yes just change the #blackbox2 margin to margin: 0 auto 15px;
You have:
#blackbox2 {
background-color: black;
bottom: 0%;
height: 33px;
margin-bottom: 15px;
margin-left: auto;
margin-right: auto;
margin-top: 11%;
position: relative;
top: auto;
width: 900px;
z-index: 12;
}
Try removing margin-top: 11%. This matches to '11% of the parent height', which is why your blackbox2 is so far from the wrapper above it.
Does this solve your problem — http://www.cssstickyfooter.com/ ?
Related
Firstly, I understand this is an easy question to answer for those of you who know CSS very well. I am a guy with basic web development skills and I am helping a new charity by building their website. So, please forgive me for asking an "easy" question that Google could help with. The problem is that I can't understand how to fix this with my theme. Googling basic CSS questions won't help me with this specific problem. Thanks.
On this page: http://www.ukraineaid.org/who/
I want to put the donate button on the left and the paragraph of text on the right? I have tried to edit the Danko wordpress theme to achieve this but something is messing it up. What do I need to do?
Make these changes in css:
.home-button {
width: 361px;
height: 84px;
margin-right: 20px;
margin-top: 21px;
}
and
.home-money {
width: 560px;
float: right;
}
Removing the margin-right: 20px; from the .home-button class should work.
Go to following class and add float:right; and remove .left class
.home-money {
width: 560px;
float: right;
}
And to following class add float:left;
.home-button a {
float: left;
text-align: right;
}
Change class .left to .right in .home-money div
reduce the width of .home-button from 400px to 380px if you want have a margin-right of 20px OR remove margin-right i.e. margin-right: 0;
Hello you can change the following css to set your design
.home-button {
height: 84px;
width: 400px;
}
.home-money {
float: right !important;
width: 560px;
}
http://jsfiddle.net/talmuda3/s9QyR/
footer {
margin-top: 1em;
width: 100%;
height: 20em;
position: relative;
bottom: 0;
left: 0;
}
The layout of an offline website is tricky. The content overflows into the footer.
Part of the code is as above.
How can the content be adjusted so the footer remains at the bottom, and the content stretches across the site without overlapping the footer. Please be gentle. Checked Chris Coyier's site for any tips - might just have missed something. Can anyone help?
You're pushing the article down with the top: 12em declaration. You should give the footer the same property, which fixes the issue: http://jsfiddle.net/s9QyR/1/
you should also push footer top:12em; that will add footer in right position. demo
I think this is what you're after - jsFiddle
article {
margin-top:12em;
width:80%;
height:100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 3em;
padding: 1em;
z-index: 2;
background: transparent;
overflow: visible;
}
footer {
margin-top: 1em;
width: 100%;
height: 20em;
}
It seems that changing the positioning broke the natural flow of your elements.
You may want to try this method to avoid having to position everything down the line.
This site http://doomedfromdayonemerch.bigcartel.com/ is currently scrolling too much down the page, this is because the footer (hidden) is at the bottom of the page. Even when i move the footer with CSS the page still scrolls the same amount. would like it to ideally to only scroll down a little bit. I did have overflow-y:hidden on the body, and although this did work, it doesn't allow for smaller screens/zooming in, as you then cannot scroll at all. Any help would be great! :)
In your CSS code add
html{
height:100%
}
The problem isn't with footer.
The problem resides in your div id="navigation"
I did some questions related to sticking footer into bottom of page. Check them out, maybe will help you.
I know an answer has been selected but let me explain a little further. You have the navigation div positioned relative, instead of absolute. It looks like you were trying to use absolute positioning because I see z-index in the navigation css. To use absolute positioning the parent element needs to be set to position: relative; and the element you want to have absolute needs to be set to position: absolute;
add position relative to #wrap
#wrap {
width: 740px;
height: 700px;
margin: 0 auto;
padding: 5px;
text-align: left;
position: relative;
}
and change navigation to absolute
#navigation {
z-index: 99;
position: absolute;
top: 175px;
padding-top: 10px;
padding-right: 5px;
margin-right: 4px;
height: 442px;
background: rgba(228, 228, 228, 0);
clear: both;
border-bottom-right-radius: 10px;
right: 10px;
}
I am a newbie with css coding (which very much shows) - can anybody help me get the two scroll bars off my page site is here.
The css is in a file called http://www.signature-online.net/chamberofcommercemainstyle2.css and if anybody can help me from ripping my hair out again I would be most grateful!
The footer isn't sticking, and there are two vertical scrollbars, what have I done?
Change the main class in you css like the following:
#main {
overflow: hidden;
}
You had overflow: auto; and we don't want that, also remove padding-bottom: 186px; and change your footer class, just remove margin-top: -186px; add bottom: 0 and it should look like this:
#footer {
bottom: 0;
position: relative;
height: 186px;
clear: both;
background-image: url(common/images/footer_mountains.png);
background-repeat: repeat-x;
background-position: center top;
z-index: 600;
}
Hope it helps!
So what do you need to do is to #main set overflow: hidden and padding-bottom: 372px and you're set to go!
EDIT[1]: Sorry you don't need to set #wrapper margin-bottom: 186px, my bad.
I'm back with more questions!
It's likely something very simple, but it has confused the hell out of me. I have a layout set-up so that the H2 text on pages and posts (Wordpress) has a background image next to it on both sides, accomplished by use of span:before and span:after.
Here is how it is working correctly and what I would like the overall CSS to achieve:
http://www.weburton.co.uk/content/demo/?page_id=121
This is currently achieved by min and max-widths in the CSS. And I've had the width part set to auto, where it is under a parent element with the width of the page. I don't understand how the lines aren't automatically resizing based on the H2's width. See, the problem here:
http://www.weburton.co.uk/content/demo/?p=36
Here is the CSS that is used:
#pagewrapper{
width: 960px;
margin: 0 auto;
position: relative;
padding-top: 140px;
text-transform: uppercase;
}
h2 span:before{background:url("http://weburton.co.uk/content/demo/wp-content/themes/epic/images/header_bg.jpg") repeat-x scroll left center transparent;content:" ";height:1px;margin-right:15px; left: 0%; position:absolute; margin-top: 15px; min-width: 25%; max-width: 50%; width: auto; }
h2 span:after{background:url("http://weburton.co.uk/content/demo/wp-content/themes/epic/images/header_bg.jpg") repeat-x scroll right center transparent;content:" ";height:1px; margin-left:15px; right: 0%; position:absolute; min-width: 25%; max-width: 50%; width: auto; margin-top: 15px; }
Basically, I've exhausted all options that I can think of. Is there something I'm missing here or is there another way to go about achieving this styling using something else but span that is easier?
Oh and I know I have some redundant styling calls, I'm in the process of cleaning it up. :)
Thanks in advance! :)
May be that is what you want
Remove min-width and max-width from h2 span:before and h2 span:after
h2 span {
position:relative;
}
h2 span:before {
left: -25%;
width: 20%;
}
h2 span:after {
right: -25%;
width: 20%;
}
without a fiddle it's hard to give you a definite answer, but I think that if you try changing the display property to display: inline-block it should do the trick.
This will cause the element to act as a block element while still being displayed inline (thus preserving your current layout - block elements typically take up the full available width and are followed by linebreaks).