Hi guys, I’m pretty new to CSS (been doing it a week or two).
Anyways, I’m making a personal site for my sister and I seem to have run into a problem.
The layout she wants is basically a main center bar with her name on it in cursive and a photo to the left. She wants the cursive to overlap over the bar a bit. My main problem is I am on a 1920x1200 monitor. She is on a 1024x768. When I coded the site, it looked great. Then I saw it on her computer and it’s all smashed. I guess this is because of the resolution difference. With my current setup, I’m using divs set at the height/width of the image and using the image as a background.
My question is: Is it possible to put an image into a div, and have the div and the image re-size based on the dimensions of the browser? I know how to make it so the image re-sizes with a max-width setting, but that doesn’t at all help the image from moving on the bar as you resize the window.
I know this may be a bit confusing, but any help would be sorely appreciated I’m at a complete loss.
My CSS is probably pretty ugly, so if you have any pointers with that too, I’ll accept any input. My main issue is trying to get this layout working, though.
Thanks for the input, I’m going to try playing around with it a little more today to see if I can get it to work a bit better.
I was playing with another example where I got the image to resize in a <div><p><img></p></div> with a min-width setting. The main problem I’m still suffering from is it isn’t staying flush on the bottom of the div and overlapping like I’d like it do.
I’d post an example but it seems like my previous link posted is unviewable? Let me know and I’ll try to find somewhere else to post it.
That can be aided by giving the parent div position: relative and the child position: absolute and placing it at the bottom, or even using some negative margins.
I’d post an example but it seems like my previous link posted is unviewable?
Yes. If you place the image into the HTML, you can give it a % width, in which case it will always have a width proportional to the viewport. However, images sized like that can look a bit rough in some browsers (or one browser ).
One other option would be to leave the images as background images and set a minimum width on the mid_bar div, which would prevent the overlap on narrower screens. But I think the images are too large at the moment, as you will get a scroll bar on narrower viewports (most are not as wide as yours).
A mock up image may help to better describe what your after, as for the link i get taken to a 000webhost admin review page so I’m a little unsure exactly what you want, is the image a background image or just an image within the page?
I’m at a complete loss.
).