When I resize the window too small, the image slides off the left of the page. There is no way to even scroll over to it. What can I do to prevent the image from sliding off the page? The problem is absolute divs but I don't know how to get it to work without them.
The code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
.chart {
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
}
</style>
</head>
<body>
<div class="chart">
<img src="Resources/chart.png" width="432" height="256" style="display: block; position: absolute; top: 50%; margin-top: -128px; right: 0;"/>
</div>
</body>
</html>
1: http://www.freeimagehosting.net/image.php?11b1fcb689.png>http://www.freeimagehosting.net/uploads/th.11b1fcb689.png
Position it with:
.chart {position: relative; }
position:absolute; takes it out of the document's flow, so it's not accounted for with scrollbars. position: relative; keeps the element in the flow, so you can still scroll to it.
Edit
In response to Michael's comment:
I'd like it to be centered vertically. Is it possible with relative positioning?
Yes, it is. And it involves a little jiggery-pokery, but I'm using FF3.0.11/Ubuntu 8.04, so the weirdness may be platform dependant.
First define the top-left corner of the positioned element:
.chart {position: relative;
width: 50%;
left: 50%; /* 50% works for left-position, but wouldn't for 'top' */
margin: 25% 0 0 -25%;
}
To explain the margins:
I tried initially to use the same positioning I'd use with position: absolute; (top: 50%; left: 50%;), but that didn't work. I'm not sure why, exactly, though I suspect that it's related to how the height of the percentage is calculated. Still, trial and error (and this is why I noted my browser/platform above) found that 25% seemed to place the origin (top left corner of .chart) in the right place.
The 25% then represents only my best-guess of vertically-centre. The -25% is easier to understand, it's the usual 'horizontal-center minus half the element-width' thing. Although you could maybe more-easily just use width: 50%; margin: 0 auto; to achieve the same thing.
I don't understand why positioning with the usual top: 50% didn't work, but I am using a css-reset stylesheet (specifically Eric Meyer's 'reset reloaded' stylesheet, found here: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/)
It's worth noting that the page appears consistently-with-Firefox in Midori (which, I think, uses the Webkit rendering engine), and I'll be uploading the demo page shortly (to: http://www.davidrhysthomas.co.uk/so/rel-pos-centre.html) for public ridicule review for differences.
And also, if anyone could help out and explain the weirdness in having to vertical-position with margins rather than top: xx that'd be appreciated.
Related
I have been having trouble with my code and I don't know why. The site allows me to scroll to the right, like I have some image or something there, but I don't. Why is this happening?
I have looked into margin but I don't find anything.
body {
background-image: url('icon/background.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: 1439px 851px;
margin-top: 850px;
}
div.relative {
position: relative;
left: 255px;
bottom: 805px;
}
<body>
<div class="relative">
<img src="icon/folder.png">
</div>
</body>
The div is width: auto so when it is rendered, it takes up as much space as is available horizontally.
It is also position: relative and left: 255px, so it is offset by 255 pixels from the left. This does not affect its size (which is determined before the positioning is applied).
Since it is sticking almost 255 pixels out of the side of the document, a scrollbar is added so the user can see it.
If you want to give an element a left margin, then give it a left margin. Don't mess around with positioning.
Relative positioning is almost never useful when combined with left, top, etc. It is mostly useful for providing a context for the absolute positioning of an element's descendants.
It's because you have the left property set to 255px
div.relative {
position: relative;
left: 255px;
bottom: 805px;
}
It's moving the div over 255px, so it's creating the scroll.
So, I set "width: 20px" to the class and it fixed, try it
div.relative {
position: relative;
left: 255px;
bottom: 805px;
width: 20px;
}
I'm working on this page and trying to get the slideshow to display correctly at tablet and mobile widths with media queries. However, all of the slider container elements are setting their height to 590px and this is creating a large gap beneath the slider and its content. I don't belive any of the elements have a fixed height set, but I have used some max-height:590px here and there. Any thoughts on how to get rid of that gap and force the containers to resize correctly?
Slider uses Cycle2.
Some HTML code
<div id="slider" class="cycle-slideshow" data-cycle-pager="#adv-custom-pager" data-cycle-slides="> div" data-cycle-timeout="7000">
<div class="singleSlide">
<!-- content goes in here -->
</div>
And some CSS that I think is important:
#homeslider {
height: auto;
}
#homeslider, #slider img {
width: 100%;
height: auto;
}
#homeslider {
width: 1090px;
margin: 0px auto;
max-height: 590px;
}
For reference, this slideshow is the expected behavior.
ETA: Added some of the code that I think is important?
In your .slidercaption you have a top:-200px which is causing the issue. Unlike margin, elements with position:relative won't physically move when you set a top or left style. That means the occupied space for that element will still remain on that position.
So to fix that, remove top: -200px and replace with margin-top: -200px instead.
From this:
.slidercaption {
position: relative;
top: -200px;
}
To this:
.slidercaption {
margin-top: -200px
}
Take note, in your css there's a margin:0 set in that element. Make sure your update will override that existing style.
Update:
A far better solution is to use position:absolute instead, since having a negative margin or position is more likely to get an issue with that huge value.
So...
From:
.slidercaption {
position: relative;
top: -200px;
}
To:
.slidercaption {
position: absolute;
bottom:0;
}
Then what was causing the below elements to go up is because of this:
#sliderNav {
margin-top: -190px;
}
Change that to:
#sliderNav {
position: absolute;
bottom: 168px;
z-index: 99;
width: 100%;
margin: 0;
}
When you came to a point where you are using large negative values, you can use position:absolute instead which is very helpful and less likely to have some issues if used properly.
Actually this is a problem I encountered during the developing of blogger.
I want to write a navbar on my own, but the width of parent elements limit the style width:100%, even if I set the float properties to it.
Please see the image above. Only nav's HTML/JS/CSS are configurable. So how can I configure the CSS Style of class nav to archive this goal?
Or, If you have relevent experience in developing blogger, please tell me.
Thanks a lot!
use position absolute for your nav. Look at this FIDDLE
html :
<div class="first">0</div>
<div>
1
<div class="nav">NAV</div>
</div>
<div>2</div>
css :
div { background: grey; width: 75px; height: 50px; margin: 20px auto; }
.first { margin-top: 75px; }
.nav { background: red; position: absolute; top: 10px; left: 0px; width: 100%; margin: 0; }
EDIT
Your nav is in a position:relative; well you can append your nav to your body with that jquery (HERE THE FIDDLE UPDATED):
$(".nav").appendTo("body");
To achieve that kind of 'layering' you probably need to use absolute positioning, especially if your options are limited. This has the obvious caveat of taking it out of the page's flow, so you'll need to ensure your page is never too short for it to be visible. It won't affect other elements around it either.
So, something like:
nav {
left: 0;
position: absolute;
top: 400px;
width: 100%;
}
Hopefully one of its parents has a position: relative; so the nav knows where to use as an origin point when positioning absolutely, otherwise it'll use the top left of the browser pane.
You may also need a z-index value if you want your nav to appear behind the content.
Not sure if this is what you are searching for, but you can try giving your naviation position: absolute; and width: 100%;. This will get the navigation element out of the flow of the document.
i have created a website but now i am having 1 issue. i am unable to do click even on link and navigation.
you can take a look:
http://www.cambridgekitty.com/business-directory/
to check the real codes.
HTML
<div id="main-bg">
<div id="left-side-logo"></div>
</div>
CSS
#wrap {
padding: 0;
position: relative;
width: 100%;
}
#main-bg {
background: url("../img/kittybg2-h.png") no-repeat scroll right top transparent;
margin: 0 auto;
min-height: 733px;
position: relative;
width: 100%;
z-index: -9999;
}
just add a logo on left side
#left-side-logo {
background: url("../img/norwichkitty-final-logo-bg-02.png") no-repeat scroll 0 0 transparent;
height: 500px;
left: -150px;
opacity: 0.8;
position: absolute;
top: -60px;
width: 500px;
z-index: -1;
}
and add
position: relative;
to #wrap. and add
z-index: -9999;
to #main-bg.
but after doing this ... i am unable to click on logo or even navigation links.
please let me know why i am casusing this issue.
thank you
Don't use a negative z-index if you don't know exactly what you're doing. Use a positive value and just set #left-side-logo's z-index to a value even higher.
Since #wrap has a negative z-index, it's placed behind the content of #inner-wrapper in the latter's stacking index.
See also:
W3C: CSS2.1: 9 Visual formatting model (Section z-index)
If I were you, I would simple change the elements I apply the different background images to. Give #inner-wrapper the city image background, and #main-bg the logo background. Then use the background-position property to position the logo background (currently the two zeroes in your background rule). Also, if you want opacity for that logo you can achieve that by simply setting it in Photoshop or whatever editor you prefer.
This solution means you don't have to deal with the z-index issues and makes for more hack-free and semantic mark-up, although you do have a few containers. Hope this helps :)
I have an iframe which I want to fill all of an area on the page specified by the bottom, right, left, and top css styles. However, when I do the method I would expect to work, it does not:
HTML:
<iframe id="example_frame" src="http://example.com"></iframe>
CSS:
#example_frame {
position: absolute;
top: 1em;
left: 1em;
right: 1em;
bottom: 1em;
}
This results in a little box with the web page about 100x100 pixels
I think because iframes are replaced elements, you can't just set any combination of top, right, bottom, and left. Should you be able to? Absolutely. But you can't. Instead, you can set one vertical property (top or bottom), one horizontal property (left or right), and then set both height and width to 100%.
To achieve the effect you are going for where there's a 1em space around the iframe, simply wrap the iframe in another non-replaced element like a div.
<div class="abs-frame-container">
<iframe id="example_frame" src="http://example.com"></iframe>
</div>
The CSS that produces the effect you're going for is:
.abs-frame-container {
position: absolute;
top: 1em;
left: 1em;
right: 1em;
bottom: 1em;
}
.abs-frame-container iframe {
position: absolute;
top: 0;
left: 0;
border: 0;
height: 100%;
width: 100%;
}
Also look out for issues where setting border: 0 in CSS won't work in all browsers.
Absolute positioning works with one x and one y coordinate at a time. I'm guessing the browser is ignoring one set of your coordinates.
Also, since you haven't specified a with or a height for the iframe, it is defaulting to 100 x 100.
Try something like:
#example_frame {
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
}
I don't know for sure, but don't you have to define the iframe as position: absolute to be able to set a size in terms of the browser window;? I'd imagine it's display:block by default?
Edited in response to comment from OP.
What doctype are you using? Does the problem occur in all browsers/platforms you can test on? Are you successfully calling the stylesheet? Are you using inline styles, styles in the head or an external sheet?
If you're not using inline-styles, try using them, just for a moment, to see if they work inline, or not.