Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Image moves upon resize of browser window

    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:
    Code:
    <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:
    Code:
     #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!

  • #2
    Regular Coder
    Join Date
    Jun 2011
    Posts
    241
    Thanks
    16
    Thanked 2 Times in 2 Posts
    could you post the link to your website? thanks

  • #3
    Regular Coder Mooseman's Avatar
    Join Date
    Sep 2010
    Posts
    123
    Thanks
    7
    Thanked 3 Times in 3 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Jun 2011
    Posts
    241
    Thanks
    16
    Thanked 2 Times in 2 Posts
    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

  • #5
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The website is not live yet, I am developing it in ASP.NET at the moment.

    Here is a screenshot of the results


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

  • #6
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    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!

  • #7
    Regular Coder Mooseman's Avatar
    Join Date
    Sep 2010
    Posts
    123
    Thanks
    7
    Thanked 3 Times in 3 Posts
    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.

  • #8
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Mooseman View Post
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •