Skip navigation
Currently Being Moderated

CSS Logo position problem

Nov 2, 2011 5:47 AM

Tags: #cs4 #cs5 #cs3 #css

Hello

 

I have been recently working on a web project. In the project I have a css file Thats suppose to position the logo image.

 

This is the css code:

 

/** LOGO */

#logo {
width: 830px;
height: 90px;
margin: 0 auto;
margin-top: 10px;
margin-left: 200px;
background: url(images/img04.jpg) no-repeat left top;
}

 

Margin-top moves the logo down and margin-left moves the logo in alignment. The problem is that when I view the

page on different screen sizes margin-left makes the logo image automatically move to the middle of the page.

 

Instead of staying in the required position.

 

 

Can any one help.

 

Thanks.

 
Replies
  • Currently Being Moderated
    Nov 2, 2011 5:54 AM   in reply to Tony404

    We would need to see the page itself to examine not only the movement of the logo but also the underlying HTML code, not just for the logo but for the rest of the page.  You will have to upload the page and its dependent files to some webspace you control and then post a link for us to use.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 2, 2011 5:57 AM   in reply to Tony404

    Margin 200px does not center anything.  Imagine a sheet of paper, you use legal size 11x17 and you put the logo 6.5" from the left.  Then print that same document, with measurements unchanged to an 8.5x11 sheet of paper.  Now instead of being near the center it is near the right margin of the page.

     

    If you want the logo to move to the center, you only need to do this:

     

    margin: 10px auto 0;

     

    10 is the top, auto is the sides and 0 is the bottom.  Currently what you have says:

     

    -Eliminate the top and bottom margin (margin: 0 auto)

    -My bad, change that top margin to 10px (margin-top:10px;)

    -I don't know what I want today let's add a left margin (margin-left:200px;)

     

    So what you ended up with was: margin: 10px 200px 0 0;

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 2, 2011 7:27 AM   in reply to SnakEyez02

    It all depends on the HTML/CSS context of the logo, though.  Clearly we don't have all the information since the observation is that the logo is behaving in an unexpected way (i.e., not staying 200px from the left margin of the viewport).  The obwervation means that the logo itself is contained in some moving element - and we need to know what that is.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 5, 2011 7:49 AM   in reply to Tony404

    I see nothing in the code that pops out as causing this to happen.  Are you seeing it on all browsers or only one?  Also, if you could upload this page and its images to some webspace that you control, and then post a link to it, then we could see this happening too.  That would help us help you alot.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 12, 2011 12:11 PM   in reply to Tony404

    This is how centered layouts work.  In viewports wider than 920px, your #header's logo is centered on screen.  In viewports narrower than 920px, your logo is flush with the left side of browser viewport. 

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 13, 2011 10:30 AM   in reply to Tony404

    To make your page flush left (not centered), remove margin:0 auto from your #header.

    To make your entire page layout centered, add margin:0 auto to your #wrapper.

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 18, 2011 5:26 AM   in reply to Tony404

    Tony404 wrote:

     

    Hi

     

    Sorry for the late reply.  #header I guess you mean #logo because #header aligns fine. I have added margin: 0 auto to #wrapper but no luck the #logo

    keeps moving when displayed on smaller screen.

     

     

    Having read the entire thread I am still no clearer as to where you want your logo image to be positioned?

     

    Do you want it to be aligned left and not to move towards the center of the screen when the broswer view port is widened?

     

    Whats confusing is you say the logo moves to the center when viewed on smaller screens when I think you mean on screens with a higher resolution set which would cause the logo to move towards the center of the screen being that the design would appear smaller at higher resolution screen sizes.

     

    remove margin: 0 auto; from the css below.

     

    #logo {

        width: 830px;

        height: 90px;

        margin: 0 auto;

        background: url(images/img04.jpg) no-repeat left top;

    }

     

    That will result in the logo not moving away from the left hand side of the brower window.

     

    However as you have margin: 0 auto; set on your header and page css they will still continue to center themselves within the browser window, so I doubt you would want you logo sticking to the left side of the browser window?

     

    #header {

        width: 920px;

        height: 45px;

        margin: 0 auto;

    }

     

    #page {

        width: 920px;

        margin: 0 auto;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 18, 2011 5:27 AM   in reply to osgood_

    Whats confusing is you say the logo moves to the center when viewed on smaller screens when I think you mean on screens with a higher resolution set which would cause the logo to move towards the center of the screen being that the design would appear smaller at higher resolution screen sizes.

     

    But resolution alone would not affect the rendering of the page.  To do that you would have to change the viewport dimensions.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 18, 2011 5:32 AM   in reply to MurraySummers

    Murray *ACP* wrote:

     

    Whats confusing is you say the logo moves to the center when viewed on smaller screens when I think you mean on screens with a higher resolution set which would cause the logo to move towards the center of the screen being that the design would appear smaller at higher resolution screen sizes.

     

    But resolution alone would not affect the rendering of the page.  To do that you would have to change the viewport dimensions.

     

    Sure you would but I don't know what habits people have. I pull on the browers bars of my mac browers habitally to adjust the dimensions. I think its a bit different on PC's isn't it - they are kind of 'locked' to a size arent they?

     

    When I say 'locked' I don't actually mean locked what I mean is browsers in the Mac envirnoment seem a lot looser.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 18, 2011 5:54 AM   in reply to osgood_

    I think its a bit different on PC's isn't it - they are kind of 'locked' to a size arent they?

     

    When I say 'locked' I don't actually mean locked what I mean is browsers in the Mac envirnoment seem a lot looser.

     

    I've never seen any difference in how they behave (Mac vs. PC).  Both allow easy resizing by pulling the bottom, right-hand corner, or left/right margins.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 18, 2011 5:56 AM   in reply to MurraySummers

    Actually, neither Opera nor Safari nor FF on Mac allow resizing by pulling the left/right margins, but FF and IE do on my PC.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 18, 2011 7:18 AM   in reply to MurraySummers

    Murray *ACP* wrote:

     

    Actually, neither Opera nor Safari nor FF on Mac allow resizing by pulling the left/right margins, but FF and IE do on my PC.

     

    Sure do on my Mac. I dont have a left margin to pull but the right one readjusts the size of the browsers viewport. I do it constantly because I find the window somehow just gets wider and wider so I need to get it back into a size format which I guess my eyes feel comfortable with.

     

    Should clarify that. It's not the actually margin you pull its the little square at the bottom right corner of the broswer window.

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 18, 2011 7:16 AM   in reply to Tony404

    Tony404 wrote:

     

    Hi

     

    So the logo is fine on big screen it appears on the top left side as represented by  http://www.expishare.com/interactive/Tryout.php

    But if you openned the same page on a smaller screen/ diffrent screen. The #logo moves to the middle instead of staying on the top left like

    the other screen.

     

    Hope you can help and if any more questions please ask.

     

    Thanks.

     

    Remove margin: 0 auto; from the css below, upload the page again, and tell us what happens

     

    #logo {

        width: 830px;

        height: 90px;

        margin: 0 auto;

        background: url(images/img04.jpg) no-repeat left top;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 24, 2011 7:02 AM   in reply to Tony404

    The page is behaving exactly the way I would expect.  What is it that you WANT that page to do as the viewport size is changed?

     

    Perhaps removing the "margin-left:200px" from the #logo rule will get you what you want?

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 24, 2011 8:40 AM   in reply to Tony404

    Please - no need to continue posting the entirety of the code.  The page to which you linked previous has this CSS rule -

     

    #logo {

        width: 830px;

        height: 90px;

        margin: 0 auto;

        margin-top: 10px;

        margin-left: 200px;

        background: url(images/img04.jpg) no-repeat left top;

    }

     

    change it to this -

     

    #logo {

        width: 830px;

        height: 90px;

        margin: 0 auto;

        margin-top: 10px;

        background: url(images/img04.jpg) no-repeat left top;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 24, 2011 8:53 AM   in reply to MurraySummers

    Very difficult to work out what this poster needs. First they say they want the logo left so I said remove margin: 0 auto; from the css as it was then. Now 200px left margin appears....hummmm

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points