http://www.coffeeproteindrink.com/method-athlete/
I am trying to remove the open space below the main wrapper, in Firefox it shows about a 20px open area, with a verticalscroll bar on the main page in order to see it.
In IE there is a visible 115px area, with no scroll bar.
My goal is to have the main_wrap + footer sit flush to the bottom of the page, but nothing I am trying is seeming to help.
#main_wrap {height: 390px;
background: url(images/content_back.png) repeat-y top left;
margin: 0 0 0 240px;
opacity: .8;
position:absolute;
top:325px;
overflow: hidden;
}
#main
{position: relative;
width: 680px;
padding: 0 40px 5px 40px;
font: normal 12px Verdana, Arial, sans-serif;
line-height: 20px;
display: inline-block;
z-index: 2;
}
#footer
{
width: 680px;
padding: 25px 40px 0 0px;
font-size: 12px;
position: relative;
height: auto;
clear: both;
bottom:50px;}
Example of what I am trying to accomplish: http://www.bio-genix.com/
Thanks for any help,
Ken
Turns out you don't need a sticky-footer technique because your background image is stretching to the screen, meaning you can use height: 100% and it's reliably set to the full height.
So, seeing that, bottom: 0 will work on #main_wrap. The next puzzle was where the phantom 60px or so of bottom margin was coming from; finally, after tweaking, it was determined that overflow: hidden would hide the additional height that was developed by the margins and paddings within the #main_wrap element.
This is what ended up working (the h2 part a fix for a fix):
#main_wrap {
position: absolute;
height: 390px;
bottom: 0;
margin-top: 0;
margin-bottom: 0;
overflow: hidden;
}
#main {
padding-bottom: 0;
}
#main_wrap #main h2.section_title {
margin: 20px 0 40px
}
http://jfcoder.com/test/methodsite.html
Related
Can someone help me regarding this http://www.alerto24.com/
Why is there a wide space to the right and the horizontal scrollbar is visible?
Both your footer and content section have a right margin of -100% which causes the scrollbar. Disable that CSS property for both elements and the scrollbar is gone.
please change below css
#content::before {
background: rgba(0, 0, 0, 0) url("../images/site-bg-b.jpg") no-repeat scroll 50% 0;
content: " ";
/*left: -100%;
position: absolute;
right: -100%;
top: 0;
bottom: 0;
z-index: -1;*/
}
#footer::before {
background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0;
border-top: 1px solid #032d34;
content: " ";
/*left: -100%;
position: absolute;
right: -100%;
top: 0;
bottom: 0;
z-index: -1;*/
}
I think there is a structure problem in your #footer and #content.
For example. You put background properties to apply a 100% background in :before and a max-width: 920px combined with width: 100% in footer element, which appears like a contradiction.
I suggest you these modifications :
You remove #content:before and #footer:before properties. You can create a container div in your #content element which contains the width of the website like this :
#content .container {
width: 920px;
margin: 0 auto;
}
And you apply background properties on #content which has width: 100%;
#content {
width: 100%;
background: blue; /* you put your background properties on it */
}
Also, you do the same for footer :
#footer {
position: relative;
z-index: 1;
width: 100%;
/* max-width: 920px; remove this line */
background: blue; /* you put your background properties on it */
margin: 0 auto;
padding: 30px 0 15px;
color: #fff;
}
#footer .wrap {
position: relative;
margin: auto; /* you use this property to center this container as it is on the website */
padding: 0 0 50px;
font-size: 0;
width: 920px; /* you apply width on this container instead of the #footer container */
letter-spacing: -5px;
}
EDIT : I've made a JSFiddle to explain my thoughts
See it here
So I'm new to HTML, CSS, and the whole web development scene so I decided to learn by altering existing pages. The bellow is a template that I have altered to my needs to allow for my CMS. The problem is, is that the content moves every now and then to the most unliked position.
I believe that there is something wrong with my CSS that is causing this problem.
Upon inspection of the footer and site_content divs, I have found pretty much no differences. But I don't know why it doesn't ALWAYS show up like this:
The CSS is too large to put on here but the whole source can be found on GitHub under OrangeCider. However I am putting in the (what I think is) relevant pieces of code:
#main, #logo, #menubar, #site_content, #footer {
margin-left: auto;
margin-right: auto;
}
#site_content {
width: 837px;
overflow: hidden;
margin: 0 auto 0 auto;
padding: 20px 24px 20px 37px;
background: #FFF url(content.png) repeat-y;
}
UPDATE: So it seems that if I remove the overflow: hidden; from the #site_content, the content shows how it should, except there is text overlapping with the sidebar ontop of the footer. Could it be things with the overflow?
It looks like you may have some conflicting CSS rules here. One thing you can try is the !important keyword.
#main, #logo, #menubar, #site_content, #footer {
margin: 0 auto !important;
}
Also, just to make sure that float: left isn't interfering with your styles, put clear: both on the #site_content.
#site_content {
width: 837px;
display: block;
overflow: hidden;
clear: both;
padding: 20px 24px 20px 37px;
background: #fff url(content.png) repeat-y;
}
#main, #logo, #menubar, #site_content, #footer {
margin-left: auto;
margin-right: auto;
}
#site_content {
clear:both;
width: 837px;
overflow: hidden;
margin: 0 auto;
padding: 20px 24px 20px 37px;
background: #FFF url(content.png) repeat-y;
}
try this css
Hey, you need to be sure the center block has block display and clear: both.
So you should update your CSS due to this one:
#main, #logo, #menubar, #site_content, #footer {
margin-left: auto;
margin-right: auto;
}
#site_content {
width: 837px;
display: block;
overflow: hidden;
clear: both;
margin: 0 auto;
padding: 20px 24px 20px 37px;
background: #fff url(content.png) repeat-y;
}
That's it. Have fun!
Vague questions but i don't know the right question to ask google either.
I have a widget that has a background img that is in columns on my page. But when I resize the page my widget will be destroyed making impossible to scroll the page sideways. The background image is also cut off.
Also: how can I prepare for my page to adapt to different screen sizes? Is there a way to make my widget stick in one place? Can anyone point me in the right direction?
Thanks
.example_wrapper
{
margin: 10px 20% 10px 20%;
border-style: solid;
border-width: 0px;
height: 315px;
border-radius: 20px;
}
.example_container
{
margin: 10px 0px 10px 3%;
align: center;
border-radius: 0px;
height: 300px;
overflow:auto;
background-image: url('img.png');
background-repeat: no-repeat;
background-position: center;
}
.example_textarea
{
position: absolute;
margin: 145px 30% 0 5%;
align: left;
overflow: hidden;
height: 130px;
}
.twitter_block
{
position: left;
margin: 6px;
height: 120px;
width: 120px;
align: left;
float: left;
}
.twitter_pic
{
position: center;
margin: 1px 20% auto 20%;
}
.scale-image
{
height:73px;
width: 73px;
}
.twitter_link
{
position: none;
margin: 0px 100px auto 30px;
}
.twitter_half
{
margin: 0px;
}
.twitter_profile_pos
{
text-align: center;
margin: 0px 10px auto 17px;
font-weight: bold;
}
.twitter_profile_pos a
{
color: #043E6B;
}
It could be some sort of clearing issue, or it could be something to with your position rules.
position:none, position:left and position:center are not valid rules. So those won't help with any positioning issues.
position:absolute might be breaking your layout if position:relative is not applied to the parent element (otherwise it positions the element relative to the whole document, rather than a specific element). This could be causing the break on resize.
If you could post your corresponding HTML, everyone should be able to recreate it. Or better yet, if you post the code on jsfiddle and put the link here, we can help solve it even faster!!
I have a similar problem to this question Why does my floated left div go to the next line in IE6 using the 960.gs?
In my design, the subcategories should be 4 per row. They look fine in FF,Safari,Chrome, but in ie6 they only show 3 per row. I tried creating a different css for ie6, but it didnt work, also i tried reducing the width and padding of each row, but still i have 3 subcategories per row.
I asked again because i bet the solution can be very specific to the css you have.
try setting width of each .subcategory at 24% or max 237px
.subcategory
{
width:24%;
}
updated
in category.css change in this way:
.subcategory {
FLOAT: left; MARGIN-BOTTOM: 15px; WIDTH: 24%; HEIGHT: 230px; TEXT-ALIGN: center
}
.category-item-image {
DISPLAY: block; BACKGROUND: #fff; MARGIN: 5px 30px; WIDTH: 170px; PADDING-TOP: 5px; HEIGHT: 170px; oveflow: hidden
}
.subcategory-image {
DISPLAY: block; BACKGROUND: #fff; MARGIN: 5px 30px; WIDTH: 170px; PADDING-TOP: 5px; HEIGHT: 170px; oveflow: hidden
}
Problems are
MARGIN: 5px 34px;
and
WIDTH: 25%;
I've tried to set them at 30px and 24% and in IE6 it works!
This code works for IE7 and 8 but not for 6. How can I get it to work for 6. Or is there a better way to do it?
#contentLoading {
width:90px;
height: 90px;
position: fixed;
top: 50%;
left: 50%;
background:url(_img/ajax-loader4.gif) no-repeat center #fff;
text-align:center;
padding:10px;
font:normal 16px Tahoma, Geneva, sans-serif;
border:2px solid #666;
margin-left: -50px;
margin-top: -50px;
z-index:2;
overflow: auto;
}
Did you know that IE6 does not support position: fixed;? It will be rendered as a static element.
I usually use something like:
#contentLoading {
width: 90px;
margin-left: auto;
margin-right: auto;
}
If you'd like to center the #contentLoading div within a container you can do it like so:
#contentLoading {
width: 500px; /* whatever width you want */
margin: 0px auto; /* top and bottom margin of zero, left and right are automatically calculated based on the space available in the enclosing container */
}
For Ie6, you need to text-align:center the body in your CSS, and then style the main wrapping div with text-align:left, to re-align the text toe the left.
Here is a example.
body{
text-align: center; /*This alligns all content to the center for IE6*/
}
#mainWrapper{
width: 900px;
margin: 0 auto;
text-align: left; /*This re aligns all content within this id to the left*/
}