my page has one big div with fixed width, like this:
#index_body{
width: 1010px;
background-image: url('images/main_bg_dark.png');
margin: auto;
overflow: hidden;
min-height: 50px;
padding-bottom: 10px;
border-radius: 7px;
-moz-box-shadow: 0 5px 15px #000000;
-webkit-box-shadow: 0 5px 15px #000000;
box-shadow: 0 5px 15px #000000;
}
I want to add button (20x20px) on the right side of page (vertically in the middle) - still next to index_body.
So the button has code, like this:
#butt {
width:20px;
height:20px;
background: url('images/scrollUp.png');
position:fixed;
top:50%;
left:WHAT SHOULD BE HERE??
}
Because it depends on actual resolution. My index_body is always centered. if I change resolution my button is moved to the left-right...
Instead of setting the left or right position, make sure the button element is inside the index element and then use a margin.
margin: 0px 0px 0px 1010px;
Here is a tested and working version with your code - http://lukewakeford.co.uk/testsite/blackbutton/
#butt {
width:20px;
height:20px;
background: url('images/scrollUp.png');
position:fixed;
top:50%;
right: 10%;
}
The 10% is an example, change to a percentage that looks good, and it should be responsive to screen resolution.
On the other hand, why would you want a fixed element INSIDE a fixed container? just make it absolute and float it to the right with a margin.
ok, it should be just like this:
#butt {
width:20px;
height:20px;
background: url('images/scrollUp.png');
position:fixed;
top:50%;
margin-left: 1010px;
}
Related
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 have a static image as background splash (800x600px), which consists of a blank space at a particular location which needs to be filled with a text box, this splash page is centered for all resolutions (CSS code below)
I am able to align it properly on a particular screen resolution, however when I see it in a different resolution the box moves out of position.
CSS / HTML :
.centeredSplash {
position:relative;
width:100%;
height:100%;
background:url(Coming-soon.png) center center no-repeat;
}
.roundcorner{
position:absolute;
background-color: #000;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border: 0px solid #000;
padding: 15px;
width: 350px;
v-align:top;
/*bottom:34%;*/
bottom : 420px;
right:50%;
margin-right: -190px;
}
input
{
-webkit-border-radius: 5px; //For Safari, etc.
-moz-border-radius: 5px; //For Mozilla, etc.
border-radius: 5px;
float:left;
}
<div class="centeredSplash">
<div class="roundcorner">
<input type="text" style="width:269px;margin-right: 10px" id="email"/>
</div>
</div>
This works fine in certain resoltuions but for higher resolutions the "roundcorner" keeps floating to awkward locations, how can I lock the position for any resolution, i.e. relative to the splash page image which will always be centered according to the resolution?
It is difficult to center an element with position: absolute specified. By some hacks, we can achieve the result but that solution would be more of a patchy work.
In this setup, .roundcorner will take its left and right from its parent which is centeredSplash containing your background image.
You can try the following:
.centeredSplash
{
position:relative;
width:100%;
height:100%;
background:url(Coming-soon.png) center center no-repeat;
}
.roundcorner
{
background-color: #eae53f;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border: 0px solid #000;
padding: 15px;
width: 400px; /*important*/
margin:0 auto; /*This will keep your box center in all screen resolutions*/
}
input
{
-webkit-border-radius: 5px; / * For Safari, Chrome */
-moz-border-radius: 5px; /* For Mozilla */
border-radius: 5px;
width:100px;
height:20px;
}
Working Demo
Note: For a block element to remain horizontally centered in all screen resolutions, it must have some width specified explicitly otherwise margin:0 auto will not work. For aligning vertically centered, we have to do something extra which is a different story. Here is a complete guide on centering in CSS.
This question probably has a simple solution.
I've designed a website with two columns side by side. Everything is fixed (menu bar and left column) with the exception of the right column.
This is intentional as I only want the right column to scroll has it will hold the readable content for the page. So everything is great, right?
Not exactly, the left column is floated left, and the right column is also floated with a larger enough left margin to allow to to sit properly in the page on load.
However when the screen is too small horizontally, the user can scroll left and right with moves the second column all around and even under my fixed first column. That is what I want to prevent.
How can I get the second column to scroll vertically but not move horizontally?
Here's a snipet of the css:
#main-content {float: left; margin: 100px 0 0 0; background: rgba(128,127,128,0.9); padding: 15px 25px 15px 15px; width: 500px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;}
#button-glue {float: left; position: fixed; padding: 0 25px 15px 0px; width: 525px;}
#button{
float:right; margin: 5px -20px 0 0;
}
#button a {
background:url(../images/button.png)
no-repeat;
display:block; /* Necessary, since A is not a block element */
width: 167px;
height: 58px;
}
#button a:hover {
background:url(../images/buttonhover.png) no-repeat;
width:167px;
height:58px;
}
.right {float:right; margin: 0 0 5px 25px;}
#secondary-content {float: right; margin: 100px 0 15px 569px; background: rgba(128,127,128,0.9); padding: 20px; background: rgba(128,127,128,0.9); width:405px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;}
Thank you!
overflow-x:hidden
that will not allow scroll bars on an element and hide anything hanging over.
I hope I understood your question right way, but why do you may not need to use float.
Float is to push an element to the left or right, and I think it's very handy but for your solution you don't need it. Instead you can use on your secondary-content div position: absolute. Instead of using margins it's easier to use top, left. So if you want to have your secondary-content div in the right place you can use:
position: absolute;
top: 100px;
left: 569px;
I suggest you do the same with the other elements and use margins for creating space around your elements.
I'm making a very simple website and I've got a problem with my footer: it's not centering. I've done all the margin-left:auto; and right things, and the problem persists in Chrome and Firefox. The code:
#footer {
position: fixed;
z-index:10;
margin-left: auto;
margin-right: auto;
width: 1000px;
height:35px;
bottom:0px;
background-color:#363636;
/* Style info that has nothing to do with the problem below this line */
box-shadow: 1px -2px 6px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:1px -2px 6px rgba(0, 0, 0, 0.5);
-moz-box-shadow:1px -2px 6px rgba(0, 0, 0, 0.5);
border-top-left-radius: 10px;
-moz-border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
border-top-right-radius: 10px;
-moz-border-top-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
}
Already tried typing in "display:inline-block;".
The index.html code (ofc it's still in-dev, has nothing): http://d.pr/btSa
Thanks in advance.
The reason your footer is not centering with margin is because of the postion:fixed. Remove that and it will obey your margin auto's.
If you need it to be fixed, update your css to look like this:
#footer {
position: fixed;
z-index:10;
bottom:0;
left:50%;
margin-left: -500px;
width: 1000px;
height:35px;
bottom:0px;
background-color:#363636;
/* Style info that has nothing to do with the problem below this line */
}
note adding the bottom:0;, left:50%; and updating the margin properties.
I think you have a problem with the:
position: fixed
Try without it. If you want it stuck to the bottom try with other positions (absolute and etc). Try instead of with margin then to use left: auto and right: auto. since on fixed position i believe margins don't matter.
If you insist on it, try putting the footer as 100% width, make it fixed position and wherever you want it, then put the content in a wrapper inside the fixed footer and give that a margin: 0 auto. it will center inside the footer.
Try to use your footer in a table and set the alignment of td to center
i am making a website, where the scroll bar is not showing in any browser.....in firefox i can use down key to move downwards in chrome it worst...i am showing my codes below and i used div tag for division of page..
any suggestion:
globalheader-->at top of page;
globalnav-->should be at left hand side with fixed position no effect of scrolling.
globalcontent-->at the middle of page, here i show all data and results.
globalright-->at the right hand side of page-
css code:
html { overflow: -moz-scrollbars-vertical; overflow-y: scroll; height: 101%;}
body{ padding:0px; margin:0px; }
#globalheader{width:930px; height:28px;background:#fff; z-index:1; position:absolute;
margin: 15px 200px 0px 200px; padding: 1px; float:left; border:0px solid; }
#globalnav { float:left; margin:120px 0px 0px 0px; padding:0px; background:#FFF; z-index:2;
position:fixed; left:0px; overflow:visible; width:150px; height:auto; border:0px solid #ababab;}
#globalright{ margin-top:50px; height:auto; width:205px; position: absolute; left:1055px;
right:0px; top:50px; border:#cdcdcd 0px solid; }
#globalcontent{ margin:50px 105px 20px 215px; border:#aaa 1px solid; height:900px;
float:left; width:761px; border-top:none;}
For #globalcontent's style use, min-height:900px;, instead of height:900px;
Also, 100%, not 101% for html's height.
More importantly, consider using a standard, tried-and-proven layout, like "The Perfect 3 Column Liquid Layout" (et cetera) instead of reinventing the wheel unnecessarily.