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*/
}
Related
I'm working on making a simple photography website for someone, and I'm stuck trying to figure out the horizontal positioning. I have the margins set to auto on left/right, and the position set on relative. It should go in the middle, shouldn't it?
I have a picture slideshow that I want in the middle, and then there's the navigation that I have on the right side. The nav is in the right place, but the slideshow is stuck overlapping with the navigation and I can't figure out how to get it to center horizontally.
Here's the nav:
#nav {
position: fixed;
top: 22%;
right: 1%;
text-align: center;
}
The rogue slider:
#slider {
background:#000;
border:5px solid #eaeaea;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
height:400px;
width:600px;
margin: 100px auto 0;
overflow:visible;
position:relative;
}
The slider is contained in the wrapper div:
.wrapper {
height: 100%;
width: 55%;
margin-right: auto;
margin-left: auto;
background: #eaeaea;
padding-bottom: 150px;
}
What can be done to get this right?
If you need more info, you can take a look at the page and source code:
bwphotog.com
The child .container element is wider than its parent, .wrapper. If you remove the 960px width of the container it will be centralized.
Change your .container class to this
.container {
margin: 0 auto;
overflow: hidden;
/* width: 960px; */
}
So I've got this:
<div class="addedcartbg"><div class="addedcart"> Successfully added to cart. </div></div>
And I want it to pop up in the middle of the screen when an image is clicked. The image is currently opening "#" so it just goes to the top of the page.
My problem is, when I set the addedcartbg to position:fixed, it dissapears from the page completely. I also need to know how to centre it in the middle vertically on the screen, I know I can set left and right margins to auto to centre it horizontally, but that doesn't work with top and bottom.
This is my current CSS code for the divs:
.addedcartbg .addedcart {
background-color: #999;
height: 40px;
width: 300px;
margin-right: auto;
margin-left: auto;
padding-top: 15px;
}
.addedcartbg {
background-color: rgba(153,153,153,0.3);
height: 80px;
width: 320px;
padding-top: 40px;
padding-right: 30px;
padding-left: 30px;
}
I assume that this is your lighbox class than modify it like this, this should do the work for you
Demo
.addedcartbg {
background-color: rgba(153,153,153,0.3);
height: 80px;
width: 320px;
padding-top: 40px;
padding-right: 30px;
padding-left: 30px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; /*half of total height + half of top padding*/
margin-left: -175px; /*half of total width + half of left padding*/
}
There are top and bottom along with position. You might also want to add, style for body.
body {
text-align:center;
/*the rest of your style*/
}
.addedcartbg {
position: relative;
top:200;
margin-right: auto;
margin-left: auto;
/*the rest of your style*/
}
you should also add a z-index
.addedcartbg {
z-index:9999; // include this to avoid overlay of other divs.
}
I having difficulties setting my footer properly. I have a Bottom navigation bar as part of my footer which is working fine(color:#7A7A7A). The issue is with the copy right information that follows. It has an address and phone number. I am wanting that this side of the footer to have a black bakcground(#000). This part is labeled in the css under copyRight which i am not get any results. Any Ideas of what may be wrong?
Here is my Live EXAMPLE.
Thank you
CSS
html, body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:#333333;
font-family: trebuchet, 'trebuchet ms', 'tahoma', sans-serif;
font-size:small;
color:#5e5e5e;
line-height: 130%;
}
/****** COLORBLOCK: this is the orangey-yellow bar behind the wrapper in the background. ******/
#colorblock {
position: absolute;
top: 60px;
left: 0px;
background: #c69a55;
z-index: 0;
height: 65px;
width: 100%;
padding: 0px;
margin: 0px;
}
/**************************************************/
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:925px;
background:#f0f0f0;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
border-right: 15px solid #000000;
border-left: 15px solid #000000;
}
div#contentArea {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#contentArea p {
text-align:justify;
padding:0 1em;
}
#content {
margin-left: 240px;
margin-right: 0 auto;
background: #ebebeb;
padding: 5px;
width:635px;
height: 400px;
}
/****** TOP BANNER: This is the banner with Greg's List logo and main navigation. Also includes the styles for the main navigation links. ******/
div#header {
/*padding:1em;*/
height: 175px;
border-top:15px solid #000000;
}
div#header p {
margin:0;
}
/****** LEFT COLUMN: This is the left gray column next to the content. Features the styling for the log-in form and the location links. ******/
#left2 {
float: left;
width: 200px;
background: #dddddd;
-moz-border-radius: 10px;
border-radius: 10px;
margin-right: 15px;
padding: 5px;
height: 400px;
}
/****** FOOTER: This is the junk at the bottom of the page. Do NOT remove the clear div; it's what makes it stick to the bottom. ******/
div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#7A7A7A;
border-bottom:15px solid #000000;
}
div#footer p {
padding:1em;
margin:0;
}
a.footer {
color: #c7c7c7;
font-size: 80%;
padding-right: 20px;
letter-spacing: 1px;
}
p {
margin:0 0 1em;
}
#copyRight{
background:#000;
color: #FFF;
font-size: 75%;
bottom: 0;
}
.left{float:left;}
.right{float:right;}
</style>
You're floating the contents of #copyRight so it needs to be floated in order to contain them properly. Add this to #copyRight:
float: left;
width: 100%;
Read Brilliand detailed explanation below
Add overflow:hidden in #copyRight
So your CSS should look like this:
#copyRight{
background:#000;
color: #FFF;
font-size: 75%;
bottom: 0;
overflow:hidden
}
The problem you are having is that most elements, including divs, do not by default expand to contain floating elements. Since everything within copyRight is floating, it behaves as though it were empty, and shrinks to nothing.
There are many ways to make an element expand to contain floating elements. My personal favorite is to set overflow to just about anything - hidden being the most common.
#copyRight{
overflow: hidden;
}
Another way is to make the containing element float too, though it's then liable to cause the same problem with the element trying to contain it. Also, floating causes shrinkwrapping, so you have to set an explicit width:
#copyRight{
float: left;
width: 100%;
}
A similar result can be achieved using various display declarations, such as display: inline-block. This avoids propagating the problem to the parent element:
#copyRight{
display: inline-block;
width: 100%;
}
Apparently back in 2004 it was considered a wonderful new idea to solve such a problem by inserting a clearing element with the :after pseudo-class instead of the older method of adding a <div style="clear:both;"></div>. Those tricks would also solve your problem, though clearing floats and containing them are not quite the same thing.
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
I am trying to vertically center one div (containing a search bar) inside another (a top banner). I was under the impression that to do so you did the following:
#banner {
height: 35px;
width: 100%;
}
#searchbar {
height: 15px;
position: relative;
top: 50%;
margin-top: -7.5px; /* half of the height */
}
This works fine until you add the margin-top at which point it is applied to the #banner as well.
Is there an alternative way to do this, or am I just doing it wrong?
Here's a jsFiddle of my actual code.
I use line-height with the value being the same as height of parent div.
As seen here: http://jsfiddle.net/vkJ78/24/
CSS:
#banner {
background-color: #770E17;
height: 35px;
width: 100%;
border-bottom: 1px solid #333;
}
#src {
width: 300px;
height: 15px;
border: 1px solid #333;
padding: 3px;
}
#srcdiv {
width: 308px;
margin: 0px auto;
position: relative;
line-height: 35px;
}
EDIT: Per recommendation from NGLN, this will also fix horizontal centering, #srcdiv and #src having equal widths.
You have to add overflow: hidden to #banner. To clear the float, I guess.
Then, modify the negative margin to margin-top: -11px in #srcdiv (you have to sum the div height, the border, and the padding for the total height)
http://jsfiddle.net/vkJ78/1/
Give margin:0px and padding:0px and remove margin-top
body {
margin:0px;
padding:0px;
}