I have to use the
position: relative
in order to have a scroll bar appear in case of overflow (scroll bars apparently don't work when using the fixed position).
But by using relative, my inline block will appear in the middle of the page, and I can't position it 30px to the right on every screen size. Is there any solution for this?
My code right now:
#main_wrap
{
min-height: 100%;
background: url(images/content_back.png) repeat-y top left;
margin: 0 0 0 240px;
position: relative;
}
#main
{
position: relative;
width: 680px;
padding: 0 40px 5px 40px;
font: normal 14px Verdana, Arial, sans-serif;
line-height: 20px;
display: inline-block;
z-index: 2;
}
Another solution I would be fine with is when I can have a scrollbar while using the fixed position.
Maybe a dumb question but I'm not that experienced with this subject :) Thanks in advance!
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 am having trouble with my container div, which you will see below. It contains a very simple graphic that repeats vertically. I want the background image to expand with the content, however it is not doing so. When I expand my browser window, the background image expands to fill the page vertically, as it should...but when I scroll, the lower portion of the background that was initially below the fold, is empty when I scroll down.
I've also included the html,body as I am not sure where the problem is.
CLICK HERE TO SEE THE PAGE I AM HAVING TROUBLE WITH
Thank you!!!
html,body {
background-color: #999;
background-image: url(../images/bg.jpg);
background-position: top;
background-repeat: repeat;
color: #fff;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
height: 100%;
line-height: 18px;
margin: 0;
padding: 0;
}
#container {
background-color: #000;
background-image: url(../images/bg_container.gif);
background-position: left top;
background-repeat: repeat-y;
display: block;
height: 100%;
margin: 0 auto;
max-width: 1200px;
min-width: 860px;
padding: 0 3px 0 3px;
position: relative;
}
The problem here is you are using position:absolute on the div id="triathlete" then your main container doesn't take in care the space of that element. The solution you can try is this:
In your html change the order between two elements, you have:
<div id="triathlete"></div>
<div id="mainBody"></div>
Change those elements like this :
<div id="mainBody"></div>
<div id="triathlete"></div>
Then remove the position:absolute :
#triathlete {
background-image: url(../images/image_triathlete.png);
background-position: top;
background-repeat: no-repeat;
display: block;
left: 3px;
margin: 0;
padding: 87px 30px 0 30px;
/*position: absolute; Remove this
top: 363px;*/
width: 150px;
z-index: 3;
}
And change the height for the container to min :
#container {
min-height:100%;
}
The Demo
If this doesn't work (for any reason), or you feel like implementing it gives you too much or a headache, here is a quick and dirty fix using jQuery:
setInterval(function() {
$("#container").css("height",$(document).height());
},50);
This will automatically resize your container div to envelop all of it's contents, even if they are absolutely positioned.
Noting again, this is not the proper way to solve a problem like this, but might help you if you don't have time to do it the right way.
My private webpage's main content is not displaying strangely within Firefox. The header and footer bar both display and the main text is placed adjacent to them towards the right. Occasionally, the footer also moves above the main text. I'm guessing this is all one issue involving the positioning of DIVs that I'm somehow missing. [This has been solved]
The height of two DIVs that are equally as tall when displayed in Chrome is also different. This issue also occurs in Safari but in a different way. There is a 1 px gap between the logo and the navbar that isn't present when viewed in Chrome or Firefox. Can anyone think of a way to reset all of the browser defaults to prevent similar things from happening in the future?
The website is currently not online yet and I'm debugging it for final release. (I don't really want to release this in the current condition as it will frustrate anyone who doesn't use a webkit browser.)
Also, as a side note, anyone know how to fix the CSS errors I'm getting in Internet Explorer 9? The gradient in the nav bar is gone, some areas have missing background color, and all picture links have annoying boxes around them.
EDIT: I saw in an online CSS gradient generator what I need to do to make the gradients work in IE9. The background issue apparently stems from the same source.
Also, is anyone in Opera experiencing issues with the latest debug version at http://jsbin.com/ipixay/1? (Credit for this one goes to Sunyatasattva.)
The link to the fiddle (where the code is posted at) is: http://jsfiddle.net/aaQSD/7/ Please forgive me for the amount of CSS that's still there, but I can't tell which causes the Internet Explorer 9 problems.
My best guess is that the Firefox problem lies somewhere in this section of CSS:
body {
margin: 0;
padding: 0;
text-align: center;
font-family: Times;
background: #efefef url(pics/background.png) repeat top center;
}
#container {
overflow:auto;
width: 95%;
min-height: 100%;
min-width: 946px;
margin: 0 auto 10px auto;
}
#content-wrapper {
width: 100%;
float: right;
text-align: left;
margin: 10px 0 0 0;
}
#content-inner {
padding: 0 15px 0 15px;
}
.center-slide {
font: normal 62.5%/1.5 Times;
letter-spacing: 0;
width: 900px;
height: 485px;
position: relative;
padding: 20px 0 0 0;
margin: 0 auto 0 auto;
background-color: #FFFFFF;
border-radius: 8px;
}
.boxes {
margin: 0 auto 0 auto;
width: 900px;
}
.left-box {
float: left;
background-color: #FFFFFF;
border-radius: 8px;
margin: 10px 5px 0 0;
padding: 20px;
width: 500px;
position: relative;
}
.logo {
width: 26%;
text-align: center;
float: left;
font-family: Times;
font-size: 65px;
font-weight: bold;
color: #FFFFFF;
padding: 10px 0 0 0;
background-image: -moz-linear-gradient(0% 22px 90deg, #0B3474, #517ABA);
background-image: -webkit-gradient(linear, 0% 0%, 0% 70%, from(#517ABA), to(#0B3474));
}
header {
width: 100%;
min-width: 863px;
background-color: #000047;
float: left;
padding: 10px;
color: #FFFFFF;
text-align: left;
font-size: 20px;
overflow: hidden;
margin: 0 0 10px 0;
}
nav {
background-color: #6a6a6a;
font: 16px Times;
min-width: 700px;
float: right;
width: 74%;
}
footer {
font-family: Times;
text-align: center;
background-color: #000047;
color: #FFFFFF;
text-align: center;
padding: 10px 0;
width: 100%;
min-width: 863px;
}
Here is the list of things that have been fixed:
Unwanted boxes/borders around picture
Firefox display issue
Glitchy footer
EDIT: I'm currently working on making a fiddle with the minimal code to replicate the issue as suggested in the comments. I hope you can forgive me for my noobish mistake. Thanks, everyone who have responded so far!
EDIT 2: The fiddle is out! I've removed the pandora's box of code that used to be below.
The header and footer are displayed adjacent to the main container
Is there a reason why they are floated? Removing the float: left rule from the header, makes the container stack below it. If they need to be floated for some reason I am not seeing, perhaps you should consider adding a clear?
Logo height different from navbar element heights
This piece baffled me a bit: I think the culprit is browser default line-height property, which, on Chrome, is coincidentally making your elements align.
Your nav elements have a set line-height of 61, plus a vertical padding of 12 on both sides, adding up to 85px. Your logo has no defined line-height and a font-size of 65px plus a padding-top of 10px. In Firefox this is 10px short.
To fix this, just set the line-height to your logo element as well.
Here is a working JSBin of your code:
Working example
Internet explorer problems:
Missing gradient
Missing background
Annoying border
I don't have IE9 at hand right now, so I might look into it later if you need it, but here are my guesses.
As for the missing gradient, your CSS specifies only webkit and mozilla vendor prefixes. You might want to take a look at the -ms– prefix as well, and check which rules really need it and which don't.
I am skipping the missing background part because it's quite vague and I am not testing on IE right now.
As for the border around linked images, you could perhaps add this rule to your CSS:
a img {
border: 0;
outline: 0;
}
EDIT:
Safari annoying one pixel gap
As for the Safari annoying one pixel gap, it apparently comes from the fact that Safari doesn't calculate well your float: left + width: 26% plus float: right + width: 74%. Adding a .1% to the first element width fixes the problem, but it is not the most elegant solution.
The best solution for your problem at hand is to just float both your elements left. You can see an updated fiddle working in Safari:
Working example
I have edited your fiddle for it to work. I essentially just added float: left; to your #container. You can look at my edits for further details. http://jsfiddle.net/aaQSD/8/
Been noodling about with CSS for the first time in ages and I have a nasty feeling I've backed myself into a corner.
I've created a 3 column floating layout with this:
* {
margin: 0;
padding: 0;
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
}
#wrapper {
width: 960px;
background: silver;
margin: 0 auto;
}
#column-left {
width: 240px;
float: left;
background: #f4d2d4;
padding-top: 36px;
}
#column-center {
margin-top: 41px;
margin-left: 34px;
margin-right: 34px;
width: 492px;
float: left;
background: white;
}
#column-right {
width: 160px;
float: left;
background: white;
margin-top: 49px;
}
The left-hand column, as you can see, has a coloured background. But it doesn't stretch to the bottom of the page, only to cover the content. And I need it to stretch all the way down.
Switching to position absolute or fixed screws up the 3-column layout. Using height: 100% has to go all the way back to body, and that messes everything up completely. Is there an easy way to fix this?
Dan Cederholm has a good way of making it look like the columns extend using a "faux column" technique. Rather than re-write it, I'll link it here:
http://www.alistapart.com/articles/fauxcolumns/
Chris Coyier also has a good write up of ways different people have solved this if you ever decide to use a fluid layout:
http://css-tricks.com/fluid-width-equal-height-columns/
Add height:100% to body, html and your columns.
I have a wrapper wrapping number of large 300 by 300 divs. when the browser is in full screen the wrapper sits in the center. But when I resize the browser the content flows to second the line, but the wrapper takes 100% of the window. For example the browser window width is 800px the content is 4 blocks 300px by 300px so two blocks together takes only 600px and the other two are in the second line. My problem is that wrapper stretches to 800px and the content sits to the left of the screen and i want it in the center (when I use float: left)
When I try the same using display: inline-block and text-align: centre, I can have the content centred in the screen even though the wrapper stretches to 100% of the width. Problem no1. with this solution is that is that if only one block is in the last row than it is centred right in the middle the second problem is mobile browser counts font-size: 0 somehow differently so it is a little misaligned.
simplified fiddle you can see that if the window is small the third orange box falls to second line but is centred. When I use text-align: left than all boxes are against left side leaving significant space on right.
here is the relevant CSS I have on site:
#site-wrapper {
min-height:100%;
text-align: center;
position:relative;
}
#container {
position:relative;
width: auto;
margin: 0 auto;
display: inline-block;
padding-bottom:40px; /* Height of the footer */
}
div#content-wrapper{
padding:5px 0 5px 0;
font-size: 0;
text-align: center;
margin-left: auto;
}
#column1, #column2, #column3 {
margin-right: 5px;
}
#column-last{
margin-right: 5px;
}
div.column {
//float: left;
display: inline-block;
vertical-align: top;
font-size: 0;
}
.item {
background: #0072C6;
width: 20em;
padding: 5px;
height: auto;
margin: 0 0 5px 0;
font-size: 14px;
color: #FFF;
box-shadow: inset 0 0 100px #1082D6;
}