#decoration extend a bit outside of #wrapper. The problem is that if the browser viewport is 910px a vertical scroll bar appears.
How do I make it so that #decoration to not occupy space so the vertical scroll bar do not appear.
EDIT:
Check out this link to see what I want. Just in such a way no vertical scroll bar is there.
http://jsfiddle.net/HLqwN/
Using overflow:hidden will clip part of #decoration so that do not work.
<head>
<style>
#wrapper {
width: 900px;
position: relative;
}
#decoration {
position: absolute;
width: 542px;
height: 126px;
top: 0;
left: 660px;
}
</style>
</head>
<body>
<div id="wrapper">
<img id="decoration" src="/images/decoration.png" alt="" title="" />
<div id="content">
Some content
</div>
</div>
</body>
You could set overflow: hidden as the other answers are suggesting.
However, a "decoration" image should not be an <img>, it should be a CSS background-image.
Like this:
#wrapper {
height: 126px;
background: #ccc url(http://dummyimage.com/542x126/f0f/fff) 660px 0 no-repeat
}
See: http://jsfiddle.net/rdSJH/
if it is a decorative image, perhaps you should use it as a background image on the wrapper rather than in HTML source, you can still position it 660px left and it will not then cause a content scroll bar as it's not content.
#wrapper {
width: 900px;
position: relative;
background: url(background.png) no-repeat 660px 0;
}
[update after your clarification]
OK so you want the decoration to overlap the wrapper if there's space available to do so, like a pop-out?
is so try this, fiddle
notes: the span holding the background image should be outside the wrapper, no width on the span use your left co-ordinate and right: 0; or whatever margin from the right you might like, and still use the image as a background image. the span can sit down the bottom of your HTML out of the way
You could use overflow: hidden; on your wrapper
You might want to wrap a div around the decoration image and set overflow:hidden on that. Setting overflow:hidden on your wrapper might cause other content to be clipped depending on your layout.
If it's just a decoration you should try doing it with a background image though, then you don't have to worry about the clipping.
Related
I have 2 images - one is the main image and the other is like a picture frame that I'd like to position over the top of the main image.
The picture frame image is a png with a transparent center so the main image shows through.
The dimensions of the images are important - the inner main image has to be smaller than the frame so it is only visible through the center:
main.jpg = 367 x 550
frame.png = 405 x 597
I thought I had it with the following code...
<div style="background-image:url('/main.jpg') no-repeat scroll center center transparent;">
<img style="width:100%; max-width:100%;" src="/frame.png">
</div>
...which works great until you see the screen on a mobile phone; the frame.png stretches because I've given the width as 100% but the background main.jpg doesn't stretch along with it.
I need the design to be fluid, so I need the images to stretch.
Is there a way to make sure the background stretches the same as the main image?
I've tried all kinds of different methods to get this working, absolutely positioning the frame in a div floating over the main image, etc but I couldn't get the main image to appear centered horizontally and vertically when I did that.
Is there any way to achieve what I want without resorting to javascript?
The reason I'm using 2 images by the way is because of file size. I need the main image to be jpg so I can keep it small, but I also need the transparency on the frame so that has to be png :(
I usually use this:
HTML:
<div id="frame">
<img id="myImg" src="main.jpg">
</div>
CSS:
#frame {
position: relative;
width: 597px;
height: 405px;
background-image: url(frame.png);
background-position: center;
background-size: cover; }
#myImg {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: block;
margin: auto; }
This works for all images and other elements with fixed dimensions, or a set max-width and max-height.
I hope this works for you :)
I've created a fiddle for you.
http://jsfiddle.net/avrahamcool/4VQzP/
in my fiddle, the frame is just a black background, and the img is just a red background. as you can see, no need for transparent frame (because the img is above it)
instead of centering the frame above the img, I'm centering the img above the frame.
(if I understood correctly, this also serves your purpose)
HTML:
<div id="Frame">
<span class="Centerer"></span><img src="http://i.imgur.com/CbcmRLC.jpg"/>
</div>
CSS:
#Frame
{
width: 405px;
height: 597px;
background: url('http://i.imgur.com/uRvKrNR.jpg') no-repeat;
text-align: center;
}
.Centerer
{
display: inline-block;
height: 100%;
vertical-align: middle;
}
#Frame > img
{
vertical-align: middle;
}
I generally use another image absolute positioned as background. like:
<div>
<img class="background-img" width="100%" height="100%" style="position:absolute; top:0; left:0">
<img class="second-img" width="100%" height="100%" />
<!-- Then do the positioning with classes -->
</div>
Give it a shot, hope it works as you want
If you set the image as absolute; it is going to lift out of it's container.
Floating may do the same.
What about z-index:1; and x-index:2; with margin:auto; ?
Basically, image is centered(I cant use absolute positioning because everyone has different screen resolutions and the image is centered) and I want my text to be 20 pixels down from top and 10 pixels right from left. How do I do it ? I have searched but got nothing. Probably due to my typing.
You have a couple of options. You're going to need to use a div the size of your image and center that. Then you can either set the image as the background of that div, or you can make the div position: relative and add an <img> tag that is positioned absolutely.
Here's an example of the first approach.
HTML:
<div id="imageContainer">
Some text that's overlaying the image.
</div>
CSS:
#imageContainer {
width: 275px;
height: 95px;
background: url('https://www.google.com/images/srpr/logo4w.png');
margin: 0 auto;
left: 0;
right: 0;
padding: 20px 0 0 10px;
}
And a JSFiddle to show it working: http://jsfiddle.net/VD34W/
Edit:
Since you want the text to be overlay you can use a hack using position: relative on the wrapping element and position: absolute on the inner ones. This allows you to position inside the wrapping element as long as the wrapping element has a width and height;
http://jsfiddle.net/FcBmd/1/
Irrelavent Text From Previous Answer: Something maybe using text-align: center
http://jsfiddle.net/FcBmd/
Take a look at this: http://css-tricks.com/float-center/.
Basicly it's only possible to align left and right but you can 'somehow' fake it.
you can try using the padding.
Try this:
HTML
<div id="theDiv">
<p>Some text here</p>
</div>
CSS
#theDiv {
background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvT90hfqXnsPUsrySmYtU2Hj1ypEwCq0muzSCKdxOSmUnZqp_Z);
width: 300px;
height: 300px;
}
#theDiv p {
padding-top: 20px;
padding-left: 10px;
}
Demo
Good question.
Basically you say how far down from the top and how far left.
position:relative;
left:10px;
top:-20
Tip: put both the picture and text inside a div so that the text is relative to the div.
Also checkout: http://www.w3schools.com/css/css_positioning.asp
I've created a JSFiddle here:
http://jsfiddle.net/AsHW6/
What I'm attempting to do is get the down_arrow.png's centered in their containing divs. I was able to center the up_arrow.png's using auto margins. I'm using the fixed property to use them as footers, as I want them to be at the bottom of the div regardless of resolution.
My question is what is the best way to center a bottom fixed image within the width of its containing div?
Some code from the fiddle (I'm having trouble with the StackOverflow formatting):
.scroll-arrow-down {
position: fixed;
bottom:0;
}
I should add that I don't care about IE hacks/workarounds at all, this application will not be targeting IE in any way.
Any comments and answers are appreciated.
If you used fixed position it will be fixed to the viewport (which I don't think you want). Using absolute positioning will position the images in reference to the item that contains them.
I added a left:45%; which pretty much centers things, but depending on the width of your arrows that may need to be updated.
.scroll-arrow-down {
position: absolute;
bottom:0;
left: 45%;
}
http://jsfiddle.net/AsHW6/1/
You can wrap the arrow-down images in a div that gets aligned to the bottom. The div can then be set to have its content centered.
Wrapping in HTML:
<div id="list1">
<img src="image/up_arrow.png" class="scroll-arrow-up">
<p class="list-title" id="list-title1">Autonomous Behaviors</p>
<div class=".scroll-arrow-down">
<img src="image/down_arrow.png">
</div>
</div>
and the css:
.scroll-arrow-down {
position: absolute;
bottom: 0;
background-color: red;
width: 100%;
text-align: center;
}
I have a middle container that takes up whatever vertical space is left on the screen. In it, I placed a Jquery scroller that is currently set to 200px:
.scroll-pane
{
width: 100%;
height: 200px;
overflow: auto;
}
.horizontal-only
{
height: auto;
max-height: 100%;
}
However, if I set .scroll-pane height to 100%, it just removes the scrollbar and stretches the whole page.
See JsFiddle here
How can I stop this? Thanks!
Here is my solution to this problem (jsfiddle). It uses markup like this:
<div id="top">...</div>
<div id="wrapper">
<div id="middle">...</div>
</div>
<div id="bottom">...</div>
The top and bottom divs are position absolutely at the top and bottom, with a width of 100%. The wrapper div has height: 100%, box-sizing: border-box, and top and bottom padding equal to the height of the top and bottom divs, respectively. This causes it to fill the viewport but have padding underneath the top and bottom divs. The middle div has a height of 100% so it fills the content box of the wrapper (i.e., 100% minus the top and bottom paddings). It has position: relative, which leaves you free to use height: 100% on both interior boxes.
Lastly, middleleft is positioned absolutely and middleright has a left margin equal to its width, which causes it to fill the remaining horizontal space.
height: 100% never works like you want it to. The CSS specifications dictate that it must equal the height of the browser window, or the closest parent block-level element with an absolute height specified. That means that this code will should not work as expected:
<!DOCTYPE html>
<html>
<head>
<title>Want the body to fill the page? Too bad!</title>
<style type="text/css">
html, body {
height: 100%;
}
.page {
padding-top: 50px;
box-sizing: border-box;
height: 100%;
}
.header {
margin-top: -50px;
height: 50px;
}
.body {
height: 100%;
background: gray;
}
</style>
</head>
<body>
<div class="page">
<div class="header">
<h1>Too bad!</h1>
</div>
<div class="body">
<p>Hello cruel world...</p>
</div>
</div>
</body>
</html>
However, that works fine in Chrome. Why? I can only assume that Google decided to specifically go against web standards because in this case, the standards make no sense. Why would I want something to be the exact height of the browser window? The only time is a <div> wrapping the whole page; in this case a simple "height is relative to the parent block" rule works just fine without breaking expectations elsewhere.
There is a way around this, though. At least, that's what I wanted to say before I tried this in Firefox too. Another way to get height: 100% (with some restrictions) is with position: absolute. However, it would seem that Firefox isn't respecting position: relative on a display: table-cell element - probably those pesky standards again. Here's the code for this technique anyway, if you are interested:
#wrapper > div > #middleleft {
position: relative;
}
.scroll-pane {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
So what can you do? Well, unfortunately, I don't yet know the answer to that. A kludgy solution would be to have Javascript set the height to an absolute pixel value, and attach an event to window resizing in order to update that height. I'll get back to you if I find a better way.
I'm not sure exactly what your trying to do, but another method would be to set body height to 100%, then set scrollpane to "height: auto". Then for the "top" and "bottom" div's used fixed positioning, plus margin equal to top/bottom height.
body {
height: 100%;
}
.top {
position: fixed;
top: 0;
height: 100px;
}
.middle {
height: auto;
margin: 100px auto;
}
.bottom {
position: fixed;
bottom: 0;
height: 100px;
}
<div class="top">content</div>
<div class="middle">content</div>
<div class="bottom">content</div>
Try that...
I am building a blog and have a large header image with the goal of filling the top of the screen (unless on monitor larger than 1500px)- however the scroll bar goes far beyond the header content and displays white space.
When viewed on an Ipad it zooms out and shows the extra space on the side of the content. Why is the width significantly larger than the image?
Here is the site: http://beautyintheweeds.com/
Here is the HTML and CSS:
<?php wp_head(); ?>
</head>
<div id="container" class="group">
<div class="outer"><div class="inner"><img src="http://theshalomimaginative.com/weeds/wp- content/themes/journalist/images/longtop.jpg"/></div></div>
div.inner img { position: relative; left:-50%; }
div.outer {width: 900px; margin: 0 auto; overflow: visible;}
div.inner {display: inline-block; position:relative; right: -50%;}
This code worked to center the header beyond the container and my hope was that it would always fill the top of the screen unless the monitor was too large. Any ideas why it is creating extra scroll space beyond the image?
Thanks.
It's the element with class="inner" that takes up the space. It gets its size from the image inside it, but then you use relative positioning to display the image to the left of the element.
If you want to use that method to center the elements, put a div around it all, that has overflow: hidden; and no width set so that it uses the default width: auto which will make it take up all the available width.
Try this
#container {
width: 911px;
margin: 0 auto;
position: relative;
padding: 0 0 0 140px;
overflow: hidden;
}
I would pull them out of the container. Move div.outer above div.container in the markup, remove all css for div.outer, div.inner then add a text-align: center; to div.outer and remove div.inner completely.
http://jsfiddle.net/pWDrD/
You will see if you increase the width of the fiddle box then the image automatically increases width without having any scroll bar. Do you understand how i did that? Let me know. If not i will explain. Simply put, when you want an image to go to 100% of the monitor then you need to put it into a container with width as 100% and margin auto, not fixed width and no position at all.