Here's a fiddle with my current code, for context: http://jsfiddle.net/GgvLQ/
I have a client who wants a set of Facebook links to always stay aligned with the bottom of an image that is to the left of the links, no matter what size the image is. I tried wrapping everything but the image in a div, setting the min-height to the smallest possible image the client will use, and positioning the links absolute to the bottom of the wrapper (positioned relatively), but then the image just overlaps the links when the size is large. I'm not really sure what to do at this point.
Any ideas?
I positioned the like buttons right under your image. Then depending on image size, you position: absolute; then make adjustments.
Not sure how many you have to do, but here ya: http://jsfiddle.net/stillb4llin/GgvLQ/1/
If you aren't looking for this, let me know.
Related
I created this image gallery that an image is revealed on hovering but the revealed image is in a different place in every computer/browser i open it in but for the life of me I can't figure out why.
I just want the revealed image to appear in the middle without being on top of other images but when i get it to that setting on one computer it looks different on another.
I'm new to coding so I really hope someone helps. Here's the link to my codepen: image gallery
[1]: http://codepen.io/zenturtle/pen/ezDGC
For consistent placement, you need to give the #perimeter div position: relative, so that the positioning of the large images will always be in relation to the containing div, which has a fixed width. Otherwise, the positioning is in relation to the browser/viewport, meaning that it will be different depending on the size/width of the browser.
#perimeter {position: relative;}
You will probably have to adjust all of the large image coordinates now. There are more efficient ways to do this, though. You should be able to place all of those images with one CSS rule, rather than separate ones for each image.
I'm creating a webpage but I am having some problems with responsiveness.
Right under my logo, there is a large image. (1000 by 550 px) Over that image, I want to place a menu - and I think I've worked that out with position: absolute. However, I want to use an introduction text, and I cant figure out how to do that.
Could I just use a TextBox with absolute and z-index? Otherwise, how can I add the image as a background image and make it responsive?
background-size: 100%;
That would make your background image responsive. But only if the container itself is responisve though. A more exact answer would require a fiddle or at least some html and css.
I'm making a webpage where I have a div ("container") that is a parent to the div "rounded". For some odd reason, the webpage doesn't let me scroll down even though both of the divs' height are larger than the screen.
Here's a jFiddle with the components that aren't working out: http://jsfiddle.net/pmg92/19/
Any ideas as to why this isn't working?
You need to take the position:fixed off the .container so that it allows the page to be scrollable
EDIT
Check this out here http://jsfiddle.net/pmg92/23/ I think this is what you are looking for. I took out the non relevant css so don't just copy and paste to yours. I eliminated your background rounded image in place of using border-radius because by using a background image you can't really shrink or expand depending on content. This won't work on older browsers unless you use webkits and so on.
If you want to use an image I would suggest slicing the image between a top, bottom, and middle. The top would contain the top section with the radii. The middle would be 1px tall that repeats vertical as needed. The bottom would contain the bottom section with the radii.
The problem is that you have the position of the container fixed.
I am a new learner of html and jquery.
Please help me how I can create an overlay div which covers my whole screen, including the background image as well. I was able to create an overlay div but it does not covers my whole screen, instead it covers my container div and if i increase the width it stretches to right side but left part remains uncovered.I put my overlay div in the outer most div but still on increasing the width it gives extra width to right side only and left part remains uncovered.
.
My wrapper div has a background image for the whole screen but my overlay div is not able to cover left part of my container div. Please help me.
thanks
HP
take a look at the blockUI plugin
http://jquery.malsup.com/block/
lots of different styles available!
the page blocking example is what you need, it works with a div or a html string for the message while the overlay is shown.
I got the answer.
YOu can put margin:auto; Now, your browser will take care of it and it will occupy the whole screen.
I am trying to create a CSS layout where the page looks like it's in the middle of the forest. There is a left and right div with the background trees, some header divs that show the top of the page with various wildlife, and some footer divs that show the bottom with more wildlife that matches up with the left and right div background images, all of which is positioned using "position: fixed" in CSS.
Then there is content in the middle that is positioned normally and scrollable. That all works fine.
The problem I'm having is that the background forest layout is fixed at 1204x768 but of course some web browser windows may not be that large. Unfortunately while the content will scroll as intended, the fixed position elements will never be shown if they are outside the size of the browser window. Clearly not acceptable.
I've tried setting overflow: scroll and height: 768 on the .body and .html elements in the stylesheet but no luck.
Note that I am positioning everything with top: and left: values in the CSS. I know I could get around this by using bottom: and right: but the problem is that the footer images wouldn't line up.
This may just not be possible in which case I'll have to rework the graphic design, but if it is possible I'd love to know how!
of course some web browser windows may not be that large
Or indeed that small! The likelihood of the browser window actually being exactly the right size to put your decorations on the edges is quite small; that's always the problem with fixed layout.
I know I could get around this by using bottom: and right: but the problem is that the footer images wouldn't line up.
Yes, designing images that can alter their joins in response to page size changes is more work, but it's doable. You would have to export the ‘bird+foliage’ layer and the ‘squirrel+foliage’ layer as standalone transparent images, then lay them over the top of a longer side image.
To make the object edges nice and smooth would require PNG's 8-bit transparency, which would necessitate a PNG-rendering hack for IE6. Not the end of the world though.
Unfortunately while the content will scroll as intended, the fixed position elements will never be shown
Is that a problem? They are only decorational in nature.
I've tried setting overflow: scroll and height: 768 on the .body and .html elements
For this approach you would need to set ‘overflow: auto; height: 768px;’ on a wrapper <div> which holds both your #sidebar-left and your #content.
You could have two pictures: 1) a right that contains the right trees and the bottom footer image and 2) and left image with the left trees. Make the bottom footer much wider than it needs to be and the trees (left and right) much taller than they need to be.
Then set the right picture to bottom: and right: and set the left picture to bottom: left:. This will force the pictures to always be on the outsides of the page, no matter the browser size. Then set the z-index of the right picture to be just behind the left picture. It will then always look like the page will be bordered. Or you can set a firm width and height on the parent container, and they will always be on the border of the container. You can also set a min-width and -height if you need to have a certain minimum sizes.
As for things not being visible at a certain resolution, you're really not going to get around this. You could have two sets of pictures, one for normal resolutions, and one for smaller resolutions. Then you can get the width and height of the browser with $(window).height() and $(window).width() with jQuery, and load the appropriate pictures.
EDIT: After looking at your site, i'm pretty sure the second part of that (setting a fixed width for a container, then putting a bottom right picture and bottom left picture) will work for what you want. That will force the page to be a certain width, and thus have the entire border visible.