I can't figure out how to make it so that when a window can't display the whole image, it cuts the image on the left.
This code always cuts the right side using:
img {
position:fixed;
}
You just need to add right:0; if you want to cut the left side on resize. Check this fiddle: http://jsfiddle.net/H3Vqc/1/ and test.
Further:
If you want to resize the image when you resize the browser then use width: 100%.
If you want to hide the right side set position: absolute; and left:0;
or u can simply apply dir="rtl" on the div the image is on this results on what you want
<div dir="rtl"><img src="yourImg.jpg"/>
</div>
Strictly assuming if you are using css background you can use the background-position property to position your image, and use width and height to get it to the right size
You likely want to set max-width: 100% to the <img>, like this: http://jsfiddle.net/H3Vqc/4/
Related
I have an iFrame that loads flash content. I want this content to take up whatever portion of the screen is left. So the frame has a height of 100%, but I noticed the bottom gets cut off a little bit, causing the some of the flash content to be cut off. How can I write some CSS to sort of calculate what 100% of the rest of the page is (I have some bootstrap buttons at the top of this interface that take up some space).
If you are using CSS3, you can use the calc function like this:
height: calc(100% - 30px);
Or whatever the height of you button bar.
Try positioning your flash box as absolute, don't set its width and height explicitly in CSS and just set the offset left, top, right, bottom like this:
div {
background:green;
position:absolute;
bottom:10px;
top:30px;
left:100px;
right:100px;
}
Fiddle
I have a div that I wish to position at the bottom of the webpage. I can achieve this using position:absolute. However, I don't want it to overlap the div above when the window is made smaller. This was achieved by changing it to position:relative however as expected it does not stay on the bottom of the page on bigger screens.
Is there a way in which this is possible?
Current CSS
position:relative;
bottom:0;
background-image:url('.......');
background-repeat:repeat-x;
background-position:bottom;
width:100%;
An example of what I was explaining.
As for me, the best idea is through creating a container DIV for all page content (stretch it to fit all screen using popular practices). Then you can put your footer to the bottom of this container by setting position: absolute and bottom: 0, and don't forget to set padding-bottom: height of your footer to the container. This will prevent overlapping your footer by content of the page.
Try giving min-height to DIV above footer DIV.
When the window becomes smaller, use media queries for that particular resolution or a resolution lesser than that and apply a display:none; to that div with the class that has a position absolute, if you do not want it to display or z-index:0; or z-index:-1; if you want to show it below the contents div.
Hope this helps.
You could set a margin-bottom of the height of the absolute element on the upper div. This way, your absolute positioned element will overflow with the margin instead of the element itself.
The way I see it, you should revert back to position: absolute, then try giving it a low z-index value, such as z-index: -1
I have some text that I display in a div with the following CSS:
.fixed-box {
position:fixed;
top:10px;
width: 270px;
}
This is so that when I scroll it always shows on the top of the screen. However when there is a lot of text the div gets cut off, because the position:fixed prevents it from scrolling down with the page it's on.
I was going to switch to an iframe, but is this really the best way to go?
Add overflow:auto; and set height property either to 100% or manually.
Here is code example http://jsfiddle.net/7ZVb8/
I am trying to place a image on the bottom right corner of my page and have it always be there. I have managed to do this but I have a problem when making the browser window smaller (which also is a problem while looking at it in different advices with smaller screens). When I make the browser smaller the image stays in the same size, and eventually overlaps over the other items (like my menu for example). Is there anyway to make that the image automatically becomes smaller together with the browser?
The css code I have used to place the image on the bottom right corner looks like this:
display:block;
float:right;
bottom:0;
right:0;
width:340px;
The image is a png image placed inside a div in my html.
I hope someone can understand what I mean and help me with this!
You can give the image a percentage for a width instead of a pixel width. It will then resize when you resize the window. Try setting width: 20% as a starting point and see what happens.
You can try this
<html>
<style>
img{
position:absolute;
bottom:0;
right:0;
max-width: 100%;
height: auto;
width: auto;
}
</style>
<body>
<img src="slide2.jpg"/>
</body>
</html>
resizing browser also resizes image, and is always at bottom.
Using % values for the width and height of the image should work.
Don't use floating for this case, your positioning should be absolute and don't set pixel-based sizes. If you want to set its size, you can do it by percentage, however, maybe the best solution would be to have separate themes for separate screen sizes.
I have a centered wrapper with following CSS:
div.wrapper {
width: 1170px;
padding-left:30px;
margin-top: 80px;
margin-bottom:20px;
margin-left: auto;
margin-right: auto;
position:relative;
background-color:black; }
inside i have a div with following css:
position:absolute;
top:-26px;
left:517px;
height:63px;
z-index:3;
inside of this div is an image which has 759px width, that makes the wrapper grow larger and makes the browser show a v-scrollbar on lower display resolutions.
what i want is to make the image go outside the wrapper but prevent the browser from showing the scrollbar, so that the right side of the image is only shown if your browser window is large enough and the wrapper keeps its 1200px width. i can't make it a background image because it goes over some of the other content.
something that is compatible with >= IE7 would be nice.
i uploaded a pic of the page to show what i mean:
http://img153.imageshack.us/img153/6070/hpx.jpg
the blue box is the wrapper, it has 1200px width and is ALWAYS centered in the window (unless then window is smaller than 1200px, then it scrolls)
the red box is the image (the green bar is not part of it)
You can set overflow: hidden to the wrapper so that content that exceeds the dimensions of wrapper will not be shown.
see overflow
You are looking for #your_div { overflow: hidden; }, if you want your content to be hidden. Or #your_div { overflow: visible; } if you want your content visible outside the div.
The only method that springs to mind given your requirements is to move the inner element out of that wrapper div and position it in relation to the entire window:
<body>
<div class="abs">the div with the image</div>
<div class="wrapper">the wrapper div</div>
</body>
Unfortunately, this probably means you can't position it very well. You may need to use Javascript to get the width/height of the page and/or the position of the wrapper div, and calculate the offset accordingly. (You'll find questions on Stack Overflow for these bits.)
The problem lies with the img being inline. Not tested but you should 'display:block' the image and then float it or absolutely position it.