This is my 2nd attempt at getting this fixed! I fixed the first problem with help from Stobor, now this second problem seems to be a bit tricky, but it cant be that hard right?
As you can see here http://dekkro.no-ip.org/ I have a completely centered image, and a styled div with a login box.
What I am trying to achieve is that the login box, is ALWAYS 100% dead center of that image. It is centered for me, but for a lot of people with smaller resolutions it is not.
Here is the problem: http://dekkro.no-ip.org/problem.png
Is there a way to fix this? My code is a bit messy but understandable. I have been trying to do this since 5am and it's now 5pm! Struggling a bit here!
Thanks!
Here you go...tested in firefox, ie9, chrome and opera. Hope this works in the problem resolution or gives you a start.
screenshot
<html>
<head>
<style type='text/css'>
html, body{
margin: 0px; /* some browsers add a margin at the top, get rid of it to have proper positioning */
}
body{
background-image: url('blahbg.png');
}
.Centered{
margin-right: auto;
margin-left: auto;
align: center;
}
.LayoutContainer{
background-image: url('blink.gif');
background-position: bottom left;
background-repeat: no-repeat;
height: 100%;
width: 100%;
}
.BodyContainer{
background-image: url('testimage.png');
background-repeat: no-repeat;
margin-top: 50px; /* to bring the layout-body down a bit you want this */
height: 425px;
width: 690px;
}
.MiddleContainer{
text-align: center;
padding-top: 20px;
width: 200px;
}
.LoginContainer{
border: 1px solid #000000;
background-color: #FFFFFF;
margin-top: 20px;
height: 230px;
}
.InfoContainer{
border: 1px solid #000000;
background-color: #FFFFFF;
margin-top: 20px;
height: 30px;
}
</style>
</head>
<body>
<div class='LayoutContainer'>
<div class='BodyContainer Centered'>
<div class='MiddleContainer Centered'>
<div class='LoginContainer'><img src='logo.png' /></div>
<div class='InfoContainer'></div>
</div>
</div>
</div>
<body>
</html>
Related
I have a problem with my site. I am using Skrollr to display one image and a text on this image. The text fades out and the image has some nice effect. First I used Foundations as a framework, but this doesn't work for me. So I switched to Bootstrap. Now I have the issue that my body height is set to 2157px. I don't know why, but on pages without Skrollr this doesn't occur. For me it seems like Skrollr is the problem. I used the following code:
<section id="slide-1" class="homeSlide">
<div class="bcg"
data-0="background-position: 0px 0px;"
data-300="background-position:0px -200px;"
>
<div class="hsContainer">
<div class="hsContent container"
data-0="opacity:1;"
data-500="opacity:0;"
>
Lorem ipsum
</div>
</div>
</div></section>
My Css is:
.hsContainer {
display: table;
table-layout: fixed;
width: 100%;
max-height: 50%;
overflow: hidden;
position: relative;
opacity: 1;
}
.hsContent {
font-size:5vw;
max-width: 450px;
margin: -150px auto 0 auto;
display: table-cell;
vertical-align: middle;
color: #ebebeb;
padding: 13% 8%;
text-align: center;
text-shadow: 0 0 5px #333;
}
.bcg {
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 45vw;
width: 100%;
}
I don't see, where the problem comes from. Does anybody have an idea?
Yes, it is skrollr that is causing that issue as an effect of its parallax calculations. You can pass in forceHeight=false as an option when you initialize skrollr, like so:
var s = skrollr.init({
forceHeight: false
});
And it will then leave your <body> height alone.
I am trying to make following image and text responsive so that when it scale it looks similar to the following.
http://i58.tinypic.com/6q9kpe.png
However when I scale it down it looks scale to this.
http://i57.tinypic.com/s60mjm.png
I have found one solution here.
However it is not compatible with all the browsers. It is using vw for font which is not yet even released as a standard.
The other solution is this. But for some reason it does not work for me.
My HTML looks like this.
<div class="red-arrow-bg">
<div class="text-left">
<h1>Step 1</h1>
</div>
</div>
And the CSS
.red-arrow-bg{
background: #EEE url("../img/step-bg-arrow-red.png") no-repeat;
width: 100%;
background-position: left -71% center;
cackground-size: contain;
padding: 2% 0;
position: relative;
overflow: hidden;
width: 100%;
}
.text-left {
padding: 30px 0;
}
.text-left h1{
line-height: 150%;
position: absolute;
bottom: 8px;
color: #FFF;
margin-left: 26%;
}
It's best to see it yourself, so check out this fiddle:
https://jsfiddle.net/6rc4zzcv/1/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Test</title>
<style type="text/css">
#container
{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AAAADICAMAAACHxIozAAAABlBMVEUAAAD///+l2Z/dAAACq0lEQVR42u3VQQ0AMAzEsHX8OXcoWuk0G0I+uQUAxLsHAIhn6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChAwCGDgCGDgAYOgBg6PCtXqAyGDowrcZpDIYOABg6AGDoAGDoAIChAwCGDgAYOgAYOgBg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ABg6ACAoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChAwCGDgAYOgBg6ACAoQOAoQMAhg4AGDoAYOgAYOgAgKEDAIYOABg6ABg6AGDoAIChAwCGDgCGDgAYOgBg6ACAoQOAoQMAhg4AGDoAYOgAYOgAgKEDAIYOABg6ABg6AGDoAIChAwCGDgCGDgAYOgBg6ACAoQOAoQMAhg4AGDoAYOgAYOgAgKEDAIYOABg6AGDokKfHaQyGDkyrBSqDoQMAhg4AGDoAGDoAYOgAgKEDAIYOAIYOABg6AGDoAIChA4ChSwAAhg4AGDoAYOgAgKEDgKEDAIYOABg6AGDoAGDoAIChAwCGDgAYOgAYOgBg6ACAoQMAhg4Ahg4AGDoAYOgAgKEDgKEDAIYOABg6AGDoAGDoAIChAwCGDgAYOgAYOgBg6ACAoQMAhg4Ahg4AGDoAYOgAgKEDgKEDALEeYdfPYfw5pLEAAAAASUVORK5CYII=');
background-position: center top;
background-repeat: no-repeat;
min-width: 302px;
background-color: yellow;
border: 1px solid blue;
}
#centerbox
{
width: 300px;
height: 300px;
border: 1px solid lime;
margin: auto;
position: relative
}
#floater
{
position: absolute;
top: 50px;
left: 101px;
width: 98px;
height: 98px;
background-color: red;
}
</style>
</head>
<body>
<div id="container">
<div id="centerbox">
<div id="floater"></div>
</div>
</div>
</body>
</html>
When you resize the browser window (or just the fiddle output window), sometimes the red square stays exactly within the black frame, and sometimes there's a 1px gap. I checked this in Chrome and IE11. IE11 seems to try and render "half-pixel", so it's less noticeable, but still there. Curiously, if the background image is smaller than the viewport, this does not happen.
I can imagine the cause for this effect (the centering code is duplicated in two places, for background and for margins, and uses different rounding methods) - but how to work around it?
In real life, the black box is actually an artistically drawn box which merges with the background, so I'd really rather avoid splitting it out.
jsFiddle
Yes exactly as you've noticed, the issue is that Chrome (and possibly other browsers too) bugs on centering large images, cause the centering calculation offset.
One solution would be, instead of setting that 2000×200px background to the parent hitting that issue, use another inner element set at
#bg{ /* I'm inside the parent */
position: relative;
background: url("2000x200image.jpg");
width: 2000px;
height: 200px;
left: 50%; /* center left edge */
margin-left: -1000px; /* -half width */
}
as you can see above, the element is centered! and will move same as all other centered elements on the page.
HTML:
<div id="container">
<div id="centerbox">
<div id="bg"></div>
<div id="floater"></div>
</div>
</div>
CSS:
#container{
min-width: 302px;
background-color: yellow;
border: 1px solid blue;
overflow:hidden;
}
#bg{
position:relative;
width:2000px; /* same as your image size */
height:200px;
/* center element instead of image! */
left: 50%;
margin-left:-1000px; /* -half width */
background: url('data:image/png;base64,iVBORw0KG...=');
}
#centerbox{
width: 300px;
height: 300px;
border: 1px solid lime;
margin: auto;
position: relative;
}
#floater{
position: absolute;
top: 51px;
left: 101px;
width: 98px;
height: 98px;
background-color: red;
}
The answer you already know. Pixel perfection on the web is a myth. You can Google for that and find a multitude of articles about the subject. Rounding errors are the chief culprit. Bugs may be another but, perhaps, less likely. Attempting to line things up to the pixel and then hope the browser, any browser, resizes fractional calculations in your favor is never going to happen except with just luck.
I have been trying to rack my brain as to why I can't seem to apply any attributes to my H1 tag... I couldn't get it to work and started trying to put a border around it so I could see where the section was actually at. But I couldn't even get the border to appear on the section. At first thinking that maybe you couldn't put a border round a section because it was possibly more of a metaphorical grouping and not an actual "physical" grouping... I then tried putting it within a div tag and an article tag, to which I still had no success...
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<section id="under_banner"></section>
<section id="main_pic"></section>
<section id="title">
<h1>The Adventures of Chris Wakeling!</h1>
</section>
</body>
</html>
And the CSS is...
/* Basic Underlay */
html {
background-color: #03113D;
z-index: -2;
}
#under_banner {
border-radius: 5px;
background-image: url("images/sydney.jpg");
background-position: 0px -180px;
background-size: cover;
margin: 0px auto;
height: 350px;
width: 1100px;
z-index: -1;
}
/* Main Body */
#main_pic {
background-color: #000;
width: 550px;
height: 600px;
}
h1 {
text-align: center;
width: 550px;
height: 600px;
margin: auto;
border: 1px solid #999;
background-color: white;
}
Basically if you open up the code in JSFiddle, in the result there is supposed to be an empty space due to a picture. but I want the "Adventures of Chris Wakeling" to be centered.
Any help would be appreciated...
Cheers in advance.
add this css style
#title h1 {
margin: 0 auto;
}
it will make your h1 come to the center.
Add a closing brace } to #under_banner
the title is centered in relation to body but <section id="under_banner"></section> = width: 1100px; is larger than the body is not.
you can put body {width: 1100px;} and greatest #title will be centered
<body>
<section id="under_banner"></section>
<section id="main_pic"></section>
<h1 id="title">The Adventures of Chris Wakeling!</h1>
</body>
css
/* Basic Underlay */
body {
background-color: #03113D;
}
#under_banner {
border-radius: 5px;
//background-image: url("images/sydney.jpg");
background-color: red;
background-position: 0px -180px;
background-size: cover;
margin: 0px auto;
height: 350px;
width: 1100px;
z-index: -1;
}
#main_pic {
background-color: #000;
width: 550px;
height: 600px;
}
#title {
text-align: center;
color: white;
width: 550px;
margin: 0 auto;
border: 1px solid #999;
background-color: #000;
}
Take a look here for some layout modifications. I think this is what you are likely looking to achieve.
JSFiddle
<body>
<section id="under_banner">Under Banner</section>
<div id="wrapper">
<section id="main_pic">Main Picture Section</section>
<section id="title">
<article>
<h1>The Adventures of Chris Wakeling!</h1>
</article>
</section>
</div>
The problem is, unless you give a frame of reference such as a width to center to, it keeps the block only as big as it is needed. Adding a wrapper around elements that need to stay contained (I notice your banner was expected wide) can help you keep a reference to revert to.
First of here is what I'm trying to achieve :
http://img801.imageshack.us/img801/1516/sitelayout.png
I just cant get the content div working as I would like it, when you get too the page the div should stretch too the bottom if there isn't enough content too fill it, if there is too much content it should push down the footer. Here's what I have so far:
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>site</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="headerBG"></div>
<div id="header"></div>
<div id="content">
<div id="contentTop"></div>
<div id="contentCenter"></div>
</div>
<div id="footerBG"></div>
</div>
</body>
</html>
CSS
html,body{ height: 100%; margin: 0; padding: 0; }
body{
background-image:url('images/bg.png');
background-repeat:repeat;
}
#container{
position: absolute;
background-color: green;
height: 100%;
width: 100%;
}
#headerBG{
position: absolute;
background-image:url('images/header_bg.png');
background-repeat:repeat-x;
height: 297px;
width: 100%;
}
#header{
position: relative;
margin-left: auto;
margin-right: auto;
background-color: black;
width: 780px;
height: 200px;
}
#content{
position:relative;
margin-left: auto;
margin-right: auto;
width:780px;
height:70%;
}
#contentTop{
width:780px;
height:30px;
background-image:url('images/content_top.png');
background-repeat: no-repeat;
}
#contentCenter{
width:780px;
height:100%;
background-image:url('images/content_bg.png');
background-repeat: repeat-y;
}
#footerBG{
position: absolute;
bottom:0px;
background-image:url('images/footer_bg.png');
background-repeat:repeat-x;
width: 100%;
height: 144px;
}
Sorry if its a bit unclear, I've been tinkering with it a lot so this code might be a bit disorganized. I've been staring it to death and its starting to get blurry in my head >_<
Anyway, I would really appreciate any insights you might have.
yay Coming back to html+css after a year or two yay
for ease i'd just look in to Faux Columns
set the #content to have a background image that resembles the effect you want.
you'll also probably want to look in to a sticky footer
See if this works for you: http://jsfiddle.net/brianflanagan/jhvBt/ IE mileage may vary (with the min-height property). If you absolutely need the footer positioned exactly at the bottom of the browser window and the content div stretched, I'd recommend using a JS solution to calculate assorted heights as needed.