...

View Full Version : Image moves upon resize of browser window



baxterthegreat
08-05-2011, 08:40 PM
I am writing my first website for my dad's company. In the header we have the logo image and then an image containing the contact info, followed by a bottom border and a horizontal menu. My problem is that I have the contact info png file positioned where I want it to be but when I shrink the browser window it will move horizontally. I have tried using position absolute but that makes the image sit on top of the logo image. If I add enough padding to make it be where I want it to be, the DIV that contains it covers the logo and the link to the home page that the logo image has doesn't work. I have attached the code I currently am using which positions it correctly unless it moves, if needed I can post an example of the other code that stops the moving issue but causes the logo link to stop working. Your help is greatly appreciated.

HTML:


<div id="HeaderWrapper"> <!-- HEADER -->

<div id="logo"> <!-- /logo -->
<a href="Default.aspx"><img src="Images/packetiq_logo_w_slogan.jpg" alt="Packet IQ Logo"
style="
height: 80%;
width: 80%;
float: left;
position: absolute;
"/>
</a>
</div>
<div id="contactinfo"> <!-- contactinfo -->
<a href="Contact.aspx"><img src="Images/contactinfo.png"
style="
float:right;
padding-top: 70px;
padding-right: 10px;
"/></a>
</div>
</div>

CSS:

#HeaderWrapper
{
padding: 10px 0 0 0;
width: 100%;
max-width: 1000px;
height: 110px;
background-color: #ffffff;
border-bottom: 1px solid #000000;
}


#logo
{
width: 570px;
height: 103px;
float: left;
padding-left: 5px;
position: absolute;
padding-top: 10px;

}
#contactinfo
{

}


As you can see I have the CSS coding that directly involves the images in with HTML. I have found that it makes no difference whether my CSS coding for my images is in with the images or on my stylesheet. Also as I said this is my first website ever so I am quite ignorant and I hope you guys can be of some help and I am not making some simple bumbling mistake. Thanks again!

nandahosting
08-05-2011, 10:44 PM
could you post the link to your website? thanks

Mooseman
08-05-2011, 10:48 PM
any CSS float will move with the browser window. It also changes depending on the screen size. I often create a centered div of defined width, and place my content inside.

nandahosting
08-05-2011, 10:54 PM
Yes I agree with Mooseman, also if you want your images to be e.g 50% width of the header and not the browser window, you would have to add "position: relative" to the header(wrapper).

Hope this helps

baxterthegreat
08-05-2011, 11:21 PM
The website is not live yet, I am developing it in ASP.NET at the moment.

Here is a screenshot of the results
http://www.tumblr.com/photo/1280/8530260732/1/tumblr_lph7e34K7c1qjwse5

Is there anyway to align the image to the right besides float?
Thanks for your replies.

baxterthegreat
08-05-2011, 11:42 PM
So I figured out at least a cheap trick to make it work. I am still using a padding setting to keep it pushed over to the right but I changed the div that the image is in's height to it's smallest and used a padding-top setting to make it stay where I want it. This seems to keep it in place while still allowing the Logo to link to the homepage. I have yet to try it on a different resolution computer but I am doing that now and I assume it will work as well as before. Thanks for your help everyone, your idea's helped me stumble across this solution!

Mooseman
08-05-2011, 11:54 PM
Try creating a div to 'wrap' the content. It would be the width of the menu bar. Then the image, as a child element, could have float: right and stay where you want it to.

baxterthegreat
08-05-2011, 11:57 PM
Try creating a div to 'wrap' the content. It would be the width of the menu bar. Then the image, as a child element, could have float: right and stay where you want it to.

That's what I have already, if you look at my code I think I included the code for the "headerwrapper" and it kept everything in place but the contact info image. So far this solution is working but I do have a feeling that I am using a cheap trick that may result in problems down the road.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum