I'm building this site (www.ellamatthew.com) in Magento. I need a full-width page but the way the Magento CSS is templated, I haven't been able to create it without using "Position:absolute" 100% width in CSS. This creates an issue with the footer not going below the image.
Here's the original Magento CSS that frames the page:
.col-left { float:left; width:182px; padding:0 0 0; margin:0 0 -1px; }
.col-main { float:left; width:715px; padding:0 20px 20px; }
.col-right { float:right; width:182px; padding:0 0 0; margin:0 0 -1px; }
Here's the custom CSS that I've put into Magento but it still doesn't recognize it. There's still a forced space on either side of .col-main:
.col-left { float:left; width:0px; padding:0 0 0; margin:0 0 -1px; }
.col-main {float:left; width:100%; height:100%; padding:0 10px 20px; }
.col-right { float:right; width:1px; padding:0 0 0; margin:0 0 -1px; }
.col1-layout .col-main { float:none; width:100%; padding-top:0px; }
Here's my absolute code:
.homepage {position: absolute;left:0px; top:150px; float:left; width:100%; height:100%; }
The footer is overlapped on the page when I do this. Does anyone have a solution to either force the body content to 100% or move the footer down below the absolute.
Any answers to any of these would be greatly appreciated as I've tried so many things with no luck. Thanks
<div class="main col1-layout">...</div>
Try using .main.col1-layout {float:none; width:100%; padding-top:0px;}
EDIT
To see how to do this, I looked at the source of the page (via inspect element in chrome, or firebug in firefox). Then I looked at the various elements that could be causing the issue, and I noticed the css had it set to be 920px. Once this was overridden it showed up correctly. You might still have some issues with layouts more than 1 column wide (if you decide to use them).
Related
Basically, the current setup has space between the top of the page and the #header div. I want to remove that space. Tried searching, came up with adding
position:absolute;top:0;left:0;
to the #header div, it works (positions it at the top without space) but the rest of my divs loose all their structure. How to position it at the very top and preserve the current layout of the rest of the divs?
I am also using an image underneath the divs as a background. Using this code.
body
{
background-image:url('../imagez/bestone1400.jpg');
background-repeat:no-repeat;
background-position:top, center;background-size:100%; 2000px;
}
Thanks in advanced.
#container
{
width:100%;
}
#header
{
background-color:#FFA500;
height:400px;
}
#leftcolumn
{
background-color:#FFD700;
height:200px;
width:10%;
float:left;
}
#content
{
background-color:#EEEEEE;
height:200px;
width:80%;
float:left;
}
#rightcolumn
{
background-color:#FFD700;
height:200px;
width:10%;
float:right;
}
#footer
{
background-color:#FFA500;
clear:both;
text-align:center;
}
There is likely padding or margin on html or body. Try something like:
html, body {
padding: 0;
margin: 0;
}
There may also be padding or magins on divs or other elements, so a universal selector might work:
* {
padding: 0;
margin: 0;
}
But it is generally good practice to implement a css reset, like this one, which may be the best solution.
You should remove the Default browser padding, margin and border, use:
/*reset default browser settings */
html, body {
margin: 0px;
padding: 0px;
border: 0px;
}
I got a quick question and hope the answer is quick too. How do I make my background to repeat itself throughout the page? I have tried css repeat, it does not work for some reason.
#main_container{
background:url(../images/cb.jpg) top left repeat;
margin:0 auto;
padding:100px 0 150px 0;
z-index:9999;
body{
background-color:#000;
color:#fff;
padding:0 0 0 0;
margin:0 0 0 0;
width:100%;
display:table;
overflow-x:hidden;
position:relative;
}
The problem you see is because your #main-container doesnt fill the full page, you need to extend it for the full height of the page. Why are you using
body { display: table }
in your css? I'd remove that since it could confuse some browsers and shouldn't make any sense...
An easy workaround would be to put the background image in the body tag instead if that is an option for you?
Otherwise you could always add css to your #main-container:
#main_container {
position: absolute;
top: 100px;
bottom: 0;
margin: 0 auto;
}
and keep your body { position: relative; }
You could use background-repeat:
#main_container{
...
'background-repeat:repeat;'
}
It should work on your browser if your not using netscape or smthn like that ^^
I have a jquery slider on my page which is centered when the page is wide enough to fit it yet aligns with the left edge of the window and shifts when the window is smaller. Below is my CSS - Am I missing something?
#billboardWrapper {height:600px;width:100%;margin:-170px 0 0 0px; position:relative; overflow:hidden; /*border-width: 0 20px 20px 20px; border-style:solid; border-color: {{settings.billboard_color}}; /* can't use border shorthand. IE9 has a rendering bug, see more notes in the ie8.css file */ }
#billboard {height:600px;width:1000px;position:relative;/*background:#1c1c1c;*/ background-position: 50% 0pt;}
#billboardPrev,
#billboardNext { display:block; text-indent:-9999px; position:absolute; left:40px; top:270px; width:30px; height:30px; cursor:pointer; background: url(arrows.png) no-repeat 0 0; z-index:99;}
#billboardNext {left:auto; right:40px; background-position:0 -92px; }
.slide {height:600px;width:1000px;display:none; }
.slide img {height:600px; width:100%; background-position: 50% 0pt;
.slideLeftLayout .slideTitle,.slideLeftLayout .slideText,.slideLeftLayout .slideLink {left:50px;}
.slideRightLayout .slideTitle,.slideRightLayout .slideText,.slideRightLayout .slideLink {right:50px;text-align:right;}
Perhaps it is centered by chance on the larger screen.
Centering usually works when you have:
width: (any-FIXED-WIDTH-value); - Good spot Bram Vanroy ;)
margin: auto;
which I cannot see...
You should really add your HTML too, and if possible start a jsfiddle and include the link. This way other users can play with it and solve it for you, and we can understand your code better too.
Hope that helps
I have some divs which i positioned with
position:absolute;
width:100px;
margin:-20px 420px;
same like this another one also...
the problem is it is looking fine in chrome and firefox ,but in ie7 those divs are being moved away.
how to set it to look perfect in all browsers??thanks
edited:
.button {
display:block;
position:absolute;
width:200px;
height:50px;
background:url(../images/portfolio.gif) no-repeat 0 -49px;
margin:-50px 420px;
}
.button a {
display:block;
position:absolute;
width:100%;
height:100%;
background:url(../images/portfolio.gif) no-repeat 0 0;
text-indent:-9999px;
}
.button a:hover {
background-position: 0 50px;
}
.button1 {
display:block;
position:absolute;
width:200px;
height:50px;
background:url(../images/design-brief.gif) no-repeat 0 -49px;
margin:-20px 420px;
}
.button1 a {
display:block;
position:absolute;
width:100%;
height:100%;
background:url(../images/design-brief.gif) no-repeat 0 0;
text-indent:-9999px;
}
.button1 a:hover {
background-position: 0 50px;
}
these two buttons,button and button1 are inside this div along with some text
.cont
{
position:relative;
width:1400px;
height:500px;
}
I guess you have to set a top:0px and a left:0px. You can not use position:absolute without setting a real position.
Or: You can try position:static or position:relative, I'm not sure what you want to do.
Don't use margin to position your buttons. If you have made it position:absolute; use top: 0px; left: 0px; (obviously setting them to the desired position). As you have set the parent div .cont as position:relative; the buttons will be set within this div as long as they are there in the DOM. So if you were to set them top: 0px; left: 0px; the buttons would sit in the top left hand corner of the div.
Much more reliable than playing with negative margins.
Agree with Matt Asbury... If u r using positions then there is no use of margins. and one more thing, u r using position absolute for buttons. in that case don't use position for its child unless and until u want to position its child as well. If u can provide html then it will be easy to understand the code and help.
I am using this site.
Aim :
I want to move my footer based on the content of every page.
1)If there is more content then i want to put my footer after the content.
2)I want to fix the footer to the bottom of the window screen, if there is no content like this in the following picturealt text http://www.freeimagehosting.net/uploads/e893eac88b.png
My existing CSS :
I am currently using min-height property in #content to keep the footer at the bottom.
#footer_outer{
width:100%;
background:#444;
padding:10px 0 0 0;
margin-top:50px;
height: 130px;
}
#footer {
margin:0 auto;
width:834px;
height:auto;
overflow:hidden;
}
#content {
padding:5px;
margin:0 auto;
width:890px;
height:auto;
min-height:450px;
}
body {
font-family:'Helvetica Neue', helvetica, arial, sans-serif;
color:#757575;
font-size:14px;
padding:0;
margin:0;
background:#FAFAFA;
}
Please help me in achieving my aim. Thanks a lot in advance.
regards,
vaths
1. Use fixed position divs
http://www.dailycoding.com/Posts/creating_always_visible_div_using_css.aspx
Change CSS to
#footer {
margin:0 auto;
width:834px;
height:auto;
overflow:hidden;
position: fixed;
bottom: 0px;
}
2. How to keep footers at the bottom of the page
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page