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.
}
Related
The header position of my website is always aligning to the left side in IE.
But it should be in the middle, in Chrome and Firefox its working without problems.
May i ask for your expertice for this?
Homepage:
CSS Code:
.header {
left: 0;
right: 0;
top: 0;
margin-left: auto;
margin-right: auto;
position: fixed;
max-width: 950px;
height: 141px;
background: url(../img/bg_top.jpg);
background-size: cover;
color: #FFF;
z-index: 100; }
Please try this code for proper solution.
For header class you need to add below CSS
.header {
width: 100%;
}
and for navigation part, you need to update left side margin with below CSS.
.nav .ul .li {
margin-left: 32px;
}
By margin auto and max-width fixed no need to give left and right .It will automatically placed in the center of the page.
So just remove left and right
.header {
top: 0;
margin-left: auto;
margin-right: auto;
position: fixed;
max-width: 950px;
height: 141px;
background: url(../img/bg_top.jpg);
background-size: cover;
color: #FFF;
z-index: 100; }
I want to create an element in css and keep it at a constant right spacing from the main content.
for example:-
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
width: 924px;
height: 580px;
}
now I am creating an image that needs to be at a constant distance from the main content, and on its right hand side.
ie. say 100px from main content at all times, no matter the size of window:-
.NewElement {
width: 78px;
height: 70px;
position: fixed;
bottom: 550px;
right: .main.width() + 100px; <--- how do I represent this??
display: none;
text-indent: -9999px;
background: url('../xxx.png') no-repeat;
background-color: #000;
}
right: .main.width() + 100px; <--- how do I represent this correctly??
Place 'NewElement' within the 'main' DIV (assuming these are DIVs) and set the margin-left:100px, so it will always be relative to that main DIV.
<div class="main">
<div class="NewElement"></div>
</div>
Here's a fiddle.
You would have to use javascript or jquery to do this:
var width = $('.main').css('width');
$('.NewElement').css('width',width+100);
So I have two elements floated next to each other and one has a set width and the other needs to be a percentage so that when the window/browser is resized the content will flow with it. However I am having trouble keeping the content floated next to each other when the window size is smaller than certain ratio.
Here is my css code:
.box {
width: 50px;
height: 50px;
float: left;
margin-right: 10px;
background-color: blue;
}
p {
width: 95%;
float: left;
margin: 0;
padding: 0;
}
Is there a way around this? Here is my fiddle so you can see what is going on.
My example
If you make the size smaller you will see the P tag drops down below the box.
If the box is a fixed width you can use the following styles:
.item {
padding-left: 60px;
}
.box {
width: 50px;
height: 50px;
float: left;
margin-left: -60px;
background-color: blue;
}
p {
width: 100%;
float: left;
margin: 0;
padding: 0;
}
http://jsfiddle.net/3QhzS/1/
otherwise you will need to add a little bit of jquery to it to add styles on the fly:
http://jsfiddle.net/3QhzS/6/
If you don't know the width of the div.box (as you stated in comments) then you can use position:relative to the p tag which will do the trick.
p{
position:relative;
/* anchoring top, left and right sides */
top:0px;
right:0px;
left:0px;
margin:0;
padding:0;
}
Working Fiddle
Working Fiddle(with two div's)
Im very new to css and I still find hard to understand some concepts especially positioning.
Anyway, my problem is that my when I set position: relative; of the container and my footer position: absolute;
bottom: 0; the footer became small. It had the same width as the container which is supposed to be before I placed those codes. I did it because I want my footer to be at the most bottom part of the container.
Below is the screen shot:
The maroon is the footer.
In my footer I don't use div but instead I use html element <footer>.
My css codes:
div#container {
height: 100%;
width: 1000px;
margin: auto;
background-color: #C9C9C9;
position: relative;
}
footer {
background-color: #340B09;
height: 50px;
position: absolute;
bottom: 0;
}
Please help.
Add width: 1000px; to your footer
Check this, if that may help you
https://developer.mozilla.org/samples/cssref/css-positioning.html
i will also encourage, you to have firebug installed in your browser
Also above the footer, add some div container, give it some height.. so that footer will stay at bottom. don't use positioning explicitly... since you are new to this.
Get yourself some time, you will be there on top of it..with CSS position :- )
Is it necessary for you to use relative and absolute positioning ? I'm asking since it has one drawback which is that the layout of the page will not be the same as always for all the different sizes of the screen.
Since you wanted to display footer at the bottom of the container, so here it can be done in this way.
<style type='text/css'>
body{
margin: 0px;
padding: 0px;
background-color: black;
}
#inbody{ /* main page */
padding-top: 10px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding-bottom: 10px;
height: 1170px;
}
#container{ /*container */
padding: 10px;
margin-top: 10px;
margin-left: 30px;
margin-right: 30px;
height: 1130px;
background-color: orange;
}
#header{ /* header */
margin-left: 168px;
height: 51px;
}
#midbody{ /* middle body */
margin: 10px;
padding: 0px;
height: 999px;
}
#footer{ /* footer */
padding: 10px;
height: 30px;
background-color: black;
}
</style>
Moreover you can change colors of every part to see the changes. Also use inspect element which shows the HTML and CSS of the web page. Also for the box model concept try experimenting the metrics in the inspect element.
You are using;
footer {
background-color: #340B09;
height: 50px;
position: absolute;
bottom: 0;
}
If footer is some ID or Class, it should be defined in CSS like #footer or .footer and no problem if you are using html5 element footer.
If you want to stretch an element to fill container, use width: 100%. Add this to your footer if footer is inside your container. Otherwise it will stretch to screen.
I properly solved it by declaring width of footer to 980px; When I tried 1000px it became wider than the container because after researching I found out that mozilla and webkit doesn't include padding in the width.
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*/
}