on button click i m opening lightbox. I am displaying content on it. Lightbox working fine. In High Resolution alignment of the lightbox is center to the screen. If i see the same in normal resolution 1024 *768. Lightbox showing in left of the screen. I want to show it in center of the screen it any resolutions.
I am using following css.
.white_content_note {
display: none;
position: absolute;
width: auto;
height: auto;
padding: 15px 25px;
opacity:1.00;
border: 2px solid #c90000;
background-color: #ffffff;
z-index:1002;
border-radius: 10px 10px 10px 10px;
top:165px;
margin:0;
font-family:Calibri;
right:455px;
behavior:url(images/PIE.htc);
}
Even i try position : relative;
margin: 50px auto;
It not working. Any help appreciated
You should use a relative setting for your right alignment:
right:455px;
and change the position to relative also.
Related
I have а search page and want to prevent "top20" div section on the right to move below the section rounded by rectangle when I change the size of browser window.
CSS:
#search_parameters_border {
border: 1px outset gray;
float: left;
padding: 10px;
}
#searchBox {
background-color: white;
color: black;
text-align: left;
margin-bottom: 15px;
}
#categories {
line-height: 20px;
height: 420px;
width: 250px;
float: left;
padding: 10px;
margin: 5px 5px 5px 5px;
}
#additionalFilters {
width: 700px;
float: left;
padding: 10px;
margin: 5px 5px 5px 5px;
}
#top20 {
width: 650px;
padding: 5px;
margin: 5px 5px 5px 50px;
float: left;
}
The screen shot:
Since you don't have a containing element for your floats, the phone is allowing your last float to get pushed down below where you're not wanting it to go. It's generally a good idea to use a "container" or "wrapper" div as you'll see them referenced to at times with your site's maximum allowed width to surround your builds (or min-width if you want to get a little fancier.) It will solve your issue as well as help you stay organized. As well, like in this situation, if you run into problems, sometimes it can be faster to just set a property in your "container" div to "position:relative;" and then position the div you're having trouble with absolutely via "position:absolute; top:100px; left:50px;" or something similar for spacing. If you have any questions about anything above or in the other comments let me know and I can explain in more detail.
As you're using absolute values for all widths you need to give a min-width to the surrounding container. Than you're top20 div will not move.
But you should consider making you're style more fluid.
Here is a Plunker I just created: http://plnkr.co/edit/jKo6yavo9fFNHiMsEvAL?p=preview
It is a simple single row layout. What I need is a fixed minimum margin on both sides (left and right) of the row. Let's say 25px. Resizing the window should always show at meast 25px of grey background before and after the row.
I tried modifying the table.container style from:
table.container {
width: 580px;
margin: 0 auto;
text-align: inherit;
}
to
table.container {
width: 580px;
margin: 0 25px 0 25px;
text-align: inherit;
}
But it seems it does not work for the right margin (goes out of the page). Any suggestion?
I think the simplest solution would be to use the left and right table borders instead of margin.
Something like the CSS below should do the trick.
table.container {
width: 580px;
border-left: solid 25px #f1f0ef !important;
border-right: solid 25px #f1f0ef !important;
text-align: inherit;
}
Since not all email clients support margin your other option would be to add padding/border to an outer table/tables.
If you have any questions let me know.
I have a Wordpress promoslider pluggin on the front of my website which is inside it's own div, the css looks like this:
#content.promoslider {
float: left;
margin-left: 16%;
height: 420px;
width: 840px;
background-color: #3397cc;
margin-top: 20px;
margin-bottom: 35px;
border: none;
}
On my laptop it is centred and looks fine but on different sized monitors (mainly wider ones) it isn't in the center. You can see it on my website's homepage http://designbyiliria.com/
Could some one please tell me how I can use #mediascreen to adjust the margin-left depending on which monitor it is viewed on I'm a bit confused.
Many Thanks
Set the margins to auto if you want it to be centered on varying resolutions.
#content.promoslider {
height: 420px;
width: 840px;
background-color: #3397cc;
margin: 20px auto 35px auto;
border: none;
}
I'm working on the unbounce landing page platform. Overall, it's really awesome and makes A/B testing pretty easy. It's more or less just drag and drop, but you're able to add css, html, javascript, etc.
Anyway, I'm working on creating a fixed signup area on the bottom of the screen (should boost conversions), but I'm having some troubles. The signup box is created within the wysiwyg dashboard, and from what I see it just builds the CSS for you, as you move sliders, change colors and such.
I'm able to make the entire signup area float right to the bottom, but I can't get the signup box to stay centered. I can use margins and positioning, but not the align: center function.
I've tried doing margin-left: auto; margin-right: auto as well as text-align: center; but it does absolutely nothing!
When changing the size of the screen, it just will not stay centered. But here's the kicker; the text has no problem centering with just width: 100%.. The signup box doesn't seem to respect any wrapper and I'm thinking this might be the problem.
This is all the CSS I'm using to create this fixed section:
#lp-pom-box-214 {
top: auto !important;
display:block;
position:fixed;
margin-left: auto;
margin-right: auto;
bottom:0px;
width: 100%;
align: center;
}
#lp-pom-form-51 {
top: auto !important;
display:block;
width: 100%;
position:fixed;
bottom: 25px;
margin-left: 26%;
}
#lp-pom-text-211 {
top: auto !important;
display:block;
position:fixed;
bottom:75px;
width: 100%;
}
Thanks a TON in advance!! This client is really good to me, so I want to do a good job for them. I'm not a great coder, but I'm very good at marketing so feel free to give me a shout if you need help in that arena :) That's the best way I know how to give back to whoever helps me out (or anyone else in the community for that matter).
Thanks again.
You can't adjust the position of a fixed positioned element in this way.
A fixed position element is positioned relative to the viewport, or the browser window. The viewport doesn't change when the window is scrolled, so a fixed positioned element will do exactly as the name implies and remain fixed in it's assigned position. To position a fixed element you use the properties top, right, bottom, and left
If you want to keep it as a fixed positioned element you can vertically and horizontally center it on the page by setting top and left to 50% so as the left-top corner of the container is centered within the page, you can then use margin-top and margin-left with negative values to compensate for half of the width and height of the element to achieve true center within the center of your container.
Something like this?
if yes check this code
css
.fixed-bottom {
position:fixed;
left:0;
bottom:0;
padding:10px 0;
background:#CCC;
width:100%;
}
.fixed-bottom h1 {
text-align:center;
}
#lp-pom-button-52 {
display: block;
z-index: 61;
width: 175px;
height: 54px;
line-height: 54px;
behavior: url(/PIE.htc);
border-radius: 8px;
background-color: #ff0000;
background: -webkit-linear-gradient(#ff0000,#e60000);
background: -moz-linear-gradient(#ff0000,#e60000);
background: -ms-linear-gradient(#ff0000,#e60000);
background: -o-linear-gradient(#ff0000,#e60000);
background: linear-gradient(#ff0000,#e60000);
box-shadow: inset 0px 1px 0px #ff4c4c,inset 0 -1px 2px #b30000;
text-shadow: 1px 1px #5c0000;
-pie-background: linear-gradient(#ff0000,#e60000);
color: #fff;
border-style: solid;
border-width: 3px;
border-color: #333333;
font-size: 24px;
font-weight: bold;
font-family: arial;
text-align: center;
background-repeat: no-repeat;
float:left;
margin:0 0 0 10px;
}
#lp-pom-form-51 .lp-pom-form-field input[type=text] {
border-style: solid;
border-width: 10px;
border-color: #002c77;
}
a {
color: #ff0000;
text-decoration: none;
}
I just stumbled on a problem where the shared border between a menu bar and the main content box does not go on properly (as the content box is too small)
Image: http://imgur.com/O3ra9
Code: http://jsfiddle.net/gh55e/2/
So I was wondering if there was a way to fix the border. Maybe by giving them both one and making it overlap? Just have no idea how to do this as margin -x doesn't work.
Give the right element a border all around, then use the margin-top and margin-left properties in the negatives to make them overlap. Here's an updated jsfiddle:
http://jsfiddle.net/gh55e/4/
CSS:
#right {
width: 85px;
float: right;
background-color: #e1e1e1;
padding: 0px 10px 10px 10px;
margin-top: -54px;
}
For later visitors, this is the CSS that eventually fixed it.
#right {
width: 385px;
float: right;
background-color: #e1e1e1;
padding: 0px 10px 10px 10px;
margin-left: -10px;
}
You basically make a margin of 10px and move it back for 10 px