24 Replies Latest reply: Nov 24, 2011 11:17 AM by Tony404 RSS

    CSS Logo position problem

    Tony404 Community Member

      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.

        • 1. Re: CSS Logo position problem
          MurraySummers ACP/MVPs

          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.

          • 2. Re: CSS Logo position problem
            Ben M MVP

            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;

            • 3. Re: CSS Logo position problem
              MurraySummers ACP/MVPs

              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.

              • 4. Re: CSS Logo position problem
                Tony404 Community Member

                Hi Thanks so much for the reply.

                 

                I want to add more information.

                 

                This is the css:

                 

                 

                body {

                    margin: 0;

                    padding: 0;

                    background: url(images/img01.jpg) repeat-x left top;

                    font-family: Arial, Helvetica, sans-serif;

                    font-size: 12px;

                    color: #66665E;

                }

                 

                h1, h2, h3 {

                    margin: 0;

                    text-transform: uppercase;

                    font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;

                    font-weight: normal;

                    color: #0C95C9;

                }

                 

                h1 { font-size: 44px; }

                 

                h2 { font-size: 18px; }

                 

                h3 { }

                 

                p, ul, ol {

                    margin-top: 0;

                    line-height: 240%;

                    text-align: justify;

                }

                 

                ul, ol { }

                 

                blockquote { }

                 

                a { color: #0C95C9; }

                 

                a:hover { text-decoration: none; }

                 

                a img {

                    border: none;

                }

                 

                img.left {

                    float: left;

                    margin: 7px 30px 0 0;

                }

                 

                img.right {

                    float: right;

                    margin: 7px 0 0 30px;

                }

                 

                hr { display: none; }

                 

                .list1 {

                }

                 

                .list1 li {

                    float: left;

                    line-height: normal;

                }

                 

                .list1 li img {

                    margin: 0 30px 30px 0;

                }

                 

                .list1 li.alt img {

                    margin-right: 0;

                }

                 

                #wrapper {

                }

                 

                /* Header */

                 

                #header-wrapper {

                }

                 

                #header {

                    width: 920px;

                    height: 45px;

                    margin: 0 auto;

                }

                 

                /* Menu */

                 

                #menu {

                    float: left;

                    width: 640px;

                    height: 45px;

                }

                 

                #menu ul {

                    margin: 0;

                    padding: 10px 0px 0px 5px;

                    list-style: none;

                    line-height: normal;

                }

                 

                #menu li {

                    display: block;

                    float: left;

                }

                 

                #menu a {

                    display: block;

                    float: left;

                    margin-right: 3px;

                    padding: 3px 25px 2px 25px;

                    text-decoration: none;

                    text-transform: capitalize;

                    font-family: Arial, Helvetica, sans-serif;

                    font-size: 12px;

                    color: #FFFFFF;

                }

                 

                #menu a:hover { text-decoration: underline; }

                 

                #menu .current_page_item a {

                    height: 20px;

                    background: #FEC200 url(images/img02.jpg) repeat-x left top;

                    color: #FFFFFF;

                }

                 

                #menu .first {

                    background: none;

                }

                /* Search */

                 

                #search {

                    float: right;

                    width: 250px;

                    height: 45px;

                }

                 

                #search form {

                    float: right;

                    margin: 0;

                    padding: 12px 30px 0 0;

                }

                 

                #search fieldset {

                    margin: 0;

                    padding: 0;

                    border: none;

                }

                 

                #search input {

                    float: left;

                    font: 12px Georgia, "Times New Roman", Times, serif;

                    border: none;

                }

                 

                #search-text {

                    width: 135px;

                    height: 18px;

                    padding: 3px 0 0 5px;

                    border: 1px solid #333333;

                    background: #ECF9E4;

                    color: #000000;

                }

                 

                #search-submit {

                    height: 25px;

                    margin-left: 10px;

                    padding: 1px 10px;

                    background: #C0C0C0 url(images/bg_grey.jpg);

                    color: #000000;

                   

                }

                 

                /* Page */

                 

                #page {

                    width: 920px;

                    margin: 0 auto;

                }

                 

                #page-bgtop {

                    padding-top: 30px;

                   

                }

                 

                    /** LOGO */

                 

                #logo {

                    width: 920px;

                    height: 90px;

                    margin: 0 auto;

                 

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

                }

                 

                #logo h1, #logo p {

                    margin: 0px;

                    line-height: normal;

                    text-transform: lowercase;

                    font-weight: normal;

                    color: #FFFFFF;

                }

                 

                #logo p {

                    text-transform: lowercase;

                    font-size: 10px;

                }

                 

                #logo h1 {

                    padding-top: 54px;

                    font-size: 34px;

                   

                }

                 

                #logo a {

                    text-decoration: none;

                    color: #FFFFFF;

                }

                 

                /* Content */

                 

                #content {

                    float: center;

                    width: 920px;

                    height: 800px;

                    padding-top: 0px;

                    padding-right: 0px;

                   

                }

                 

                /* Post */

                 

                .post {

                    background: url(images/img07.jpg) repeat-x left bottom;

                    margin-bottom: 25px;

                }

                 

                .post .title {

                    height: 30px;

                    color: #549900;

                }

                 

                .post .title a {

                    text-decoration: none;

                    color: #585D60;

                }

                 

                .post .date {

                }

                 

                .post .meta {

                    margin-top: -10px;

                    padding: 2px 30px 2px 16px;

                    background: url(images/img03.gif) no-repeat left 8px;

                    font-family: Arial, Helvetica, sans-serif;

                    font-weight: normal;

                    font-size: 10px;

                    color: #66665E;

                }

                 

                .post .meta span {

                    display: block;

                    margin-top: -10px;

                }

                 

                .post .meta a { }

                 

                .post .entry {

                    padding: 10px 0;

                }

                 

                .post .links {

                    margin: 0 250px 0 0;

                    padding: 0 0 0 0px;

                }

                 

                .post .links .comments {

                }

                 

                .post .links .permalink {

                    padding-left: 17px;

                }

                 

                /* Sidebar */

                 

                #sidebar {

                    float: left;

                    width: 177px;

                    padding-left: 22px;

                    font-family: Arial, Helvetica, sans-serif;

                    font-size: 11px;

                    color: #585D60;

                }

                 

                #sidebar ul {

                    margin: 0;

                    padding: 0;

                    list-style: none;

                    line-height: normal;

                }

                 

                #sidebar li {

                    margin-bottom: 30px;

                    padding: 0 0 10px 0px;

                }

                 

                #sidebar li ul {

                }

                 

                #sidebar li li {

                    margin: 0;

                    padding: 7px 10px 10px 7px;

                    background: url(images/img07.jpg) repeat-x left bottom;

                }

                 

                #sidebar p {

                    margin: 0;

                    padding: 0px 10px;

                }

                 

                #sidebar h2 {

                    height: 26px;

                    margin: 0 0 10px 0px;

                    padding: 12px 0 2px 7px;

                    text-transform: capitalize;

                    font-size: 18px;

                    font-weight: normal;

                    color: #464F54;

                }

                 

                 

                #sidebar p {

                    line-height: 200%;

                }

                #sidebar a {

                    text-align: left;

                    text-decoration: none;

                    font-weight: normal;

                    color: #585D60;

                }

                 

                /* Calendar */

                 

                #calendar {

                }

                 

                #calendar caption {

                    padding-bottom: 5px;

                    font-weight: bold;

                }

                 

                #calendar table {

                    width: 100%;

                    border-collapse: collapse;

                    border-bottom: 1px solid #24130F;

                    border-left: 1px solid #24130F;

                    border-right: 1px solid #24130F;

                }

                 

                #calendar thead th {

                    padding: 5px 0;

                    text-align: center;

                    border-top: 1px solid #24130F;

                    border-left: 1px solid #24130F;

                    background: #24130F;

                }

                 

                #calendar tbody td {

                    padding: 5px 0;

                    text-align: center;

                    border-top: 1px solid #24130F;

                    border-left: 1px solid #24130F;

                    border-bottom: 1px solid #24130F;

                }

                 

                #calendar tfoot td {

                    padding: 5px;

                    border-left: 1px solid #24130F;

                    border-bottom: 1px solid #24130F;

                }

                 

                #calendar tfoot #next {

                    border-top: 1px solid #24130F;

                    text-align: right;

                }

                 

                #calendar tfoot #prev {

                    border-top: 1px solid #24130F;

                }

                 

                #calendar .pad {

                    border-bottom: 1px solid #24130F;

                }

                 

                #calendar #today {

                    background: #24130F;

                }

                 

                /* Footer */

                 

                #footer {

                    width: 920px;

                    height: 49px;

                    margin: 0 auto;

                    padding-top: 50px;

                }

                 

                #footer-bgcontent {

                    margin: 0px;

                    padding: 0px;

                    height: 99px;

                    background: #394144;

                }

                 

                #footer p {

                    margin: 0;

                    text-align: center;

                    line-height: normal;

                    text-transform: uppercase;

                    font-size: 10px;

                    color: #FFFFFF;

                }

                 

                #footer a {

                    color: #E5FFC4;

                }

                 

                 

                This is the Mainpage:

                 

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

                <html xmlns="http://www.w3.org/1999/xhtml">

                <head>

                <meta http-equiv="content-type" content="text/html; charset=utf-8" />

                <title>Uimodo</title>

                <meta name="keywords" content="" />

                <meta name="description" content="" />

                <link href="../style/style.css" rel="stylesheet" type="text/css" media="screen" />

                <script type="text/javascript" src="jquery/jquery-1.4.3.min.js"></script>

                 

                 

                </head>

                <body>

                <div id="wrapper">

                    <div id="logo">

                   

                  </div>

                  <hr />

                    <!-- end #logo -->

                    <div id="header">

                      <div id="menu">

                        <ul>
                          <li><a href="Vidmin.php" class="first">Home</a></li>

                      

                          <li><a href="Other.php">Other</a></li>

                        </ul>

                      </div>

                      <!-- end #menu -->

                      <div id="search">

                        <form method="get" action="">

                          <fieldset>

                            <input type="button" id="search-submit" onclick="window.location.href='now.php'" value="UPLOAD NOW" />

                          </fieldset>

                        </form>

                      </div>

                      <!-- end #search -->

                  </div>

                    <!-- end #header -->

                    <!-- end #header-wrapper -->

                    <div id="page">

                    <div id="page-bgtop">

                        <div id="content">

                          <table width="920" border="0" align="center"  cellpadding="4">

                            <tr>

                              <td height="42" valign="top"><table width="415" height="41" align="right">

                                <tr>

                                  <td width="215" height="35" align="center"> </td>

                                  <td width="60" align="center"><a href="" target="_blank"><img src="../Logo/fblogo.png" alt="" width="34" height="33" /></a></td>

                                  <td width="124"><a href="" target="_blank"><img src="../Logo/twitlogo.png" alt="" width="34" height="33" /></a></td>

                                </tr>

                              </table></td>

                            </tr>

                            <tr>

                              <td height="72" valign="top" align="center"><table width="859" height="72" border="0">

                                <tr>

                                  <td width="293" height="49"><div align="center"><font size="5" color="#333333">Signup</font></div></td>

                                  <td width="14"> </td>

                                  <td width="296"><div align="center"><font size="5" color="#333333">Login</font></div></td>

                                </tr>

                                <tr>

                                  <td height="17"><div align="center" id="register"></div></td>

                                  <td> </td>

                                  <td><div align="center" id="loginstatus"></div></td>

                                </tr>

                              </table></td>

                            </tr>

                            <tr>

                              <td height="269" valign="top" align="center"><table width="908" height="291" border="0" align="center" cellpadding="3" bgcolor="#CCCCCC">

                                <tr>

                                  <td width="401" height="287" align="center" valign="top"><form id="register_form" method="post" action="">

                                    <table width="300" height="291" >

                                      <tr>

                                        <td height="23" colspan="2"> </td>

                                        </tr>

                                      <tr>

                                        <td width="85" height="36"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Username :</font> <br />

                                          </div></td>

                                        <td width="203"><input name="realname" id="realname" type="text" size="30" value='<?Php echo $profile['displayName'];?>'/></td>

                                        </tr>

                                      <tr>

                                        <td height="45"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Email :</font> <br />

                                          </div></td>

                                        <td><div align="left">

                                          <input name="email" id="email" type="text" size="30" value='<?Php echo $profile['email'];?>'/>

                                          <input name="propic" id="propic" type="hidden" size="30" value='<?Php echo $profile['photo'];?>'/>

                                          </div></td>

                                        </tr>

                                      <tr>

                                        <td height="81"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Security :</font> <br />

                                          </div></td>

                                        <td><div align="center"><img src="CaptchaSecurityImages.php?width=150&amp;height=40&amp;characters=8" alt="captcha"/></div>

                                          <p>

                                            <input name="security_code" id="security_code" type="text" size="30" />

                                            </p></td>

                                        </tr>

                                      <tr>

                                        <td height="45"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Password:</font> <br />

                                          </div></td>

                                        <td><div align="left">

                                          <input name="password" id="password" type="text" size="30" />

                                          </div></td>

                                        </tr>

                                      <tr>

                                        <td height="45"> </td>

                                        <td><div align="left">

                                          <input type='submit' name="submit" id="submit" value='Sign Up'/>

                                          </div></td>

                                        </tr>

                                      </table>

                                    </form></td>

                                  <td width="6" align="center"></td>

                                  <td width="475" align="center" valign="top"><form method='post' id='login_form'>

                                    <table width="300" height="176" >

                                      <tr>

                                        <td height="19" colspan="2"> </td>

                                        </tr>

                                      <tr>

                                        <td height="36"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif" >Email :</font> <br />

                                          </div></td>

                                        <td><div align="left">

                                          <input name='emailenter' type='text' id='emailenter'  size="25" />

                                          </div></td>

                                        </tr>

                                      <tr>

                                        <td height="45"><div align="right"><font color="#333333" size="3" face="Arial, Helvetica, sans-serif">Password :</font> <br />

                                          </div></td>

                                        <td><div align="left">

                                          <input name='passcode' type='password' id='passcode' maxlength='15' size="25" />

                                          </div></td>

                                        </tr>

                                      <tr>

                                        <td height="45"> </td>

                                        <td><div align="left">

                                          <input type='submit' name='submit' value='Login'/>

                                          <a href="ForgotPassword.php">Forgot Password?</a></div></td>

                                        </tr>

                                      </table>

                                    </form></td>

                                </tr>

                              </table></td>

                            </tr>

                            <tr>

                              <td height="23" valign="top" align="center" > </td>

                            </tr>

                          </table>

                       

                           

                </div>

                        <!-- end #content -->

                       

                       

                        <div style="clear: both;"> </div>

                    </div>

                    </div>

                    <!-- end #page -->

                    <div id="footer-bgcontent">

                    <div id="footer">

                        <p>Copyright (c) . </p></div>

                    </div>

                    <!-- end #footer -->

                </div>

                </body>

                </html>

                 

                 

                Please just focus on the logo div. It suddenly moves to the middle on different screen size etc. Hope you can help.

                • 5. Re: CSS Logo position problem
                  MurraySummers ACP/MVPs

                  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.

                  • 6. Re: CSS Logo position problem
                    Tony404 Community Member

                    Hi

                     

                    Thank you so much for the reply: I have uploaded a link of the design. The logo part is in green. Which is the logo element in the css.

                     

                    When the page is viewed on another screen size. The logo part seems to move in the middle for some reason.

                     

                    http://www.expishare.com/interactive/Tryout.php

                     

                    Thanks.

                    • 7. Re: CSS Logo position problem
                      Nancy O. MVP

                      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

                      • 8. Re: CSS Logo position problem
                        Tony404 Community Member

                        Hi

                         

                        Thank you so much for the help. Is they anything I could do on the css code to rectify the problem. Or Is they a way I can modify the main page design so I don`t

                        get the issue.

                         

                        Thanks.

                        • 9. Re: CSS Logo position problem
                          Nancy O. MVP

                          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

                          • 10. Re: CSS Logo position problem
                            Tony404 Community Member

                            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.

                             

                            I am so grateful for your help. This is what css looks like now.

                             

                             

                            body {

                                margin: 0;

                                padding: 0;

                                background: url(images/img01.jpg) repeat-x left top;

                                font-family: Arial, Helvetica, sans-serif;

                                font-size: 12px;

                                color: #66665E;

                            }

                             

                            h1, h2, h3 {

                                margin: 0;

                                text-transform: uppercase;

                                font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;

                                font-weight: normal;

                                color: #0C95C9;

                            }

                             

                            h1 { font-size: 44px; }

                             

                            h2 { font-size: 18px; }

                             

                            h3 { }

                             

                            p, ul, ol {

                                margin-top: 0;

                                line-height: 240%;

                                text-align: justify;

                            }

                             

                            ul, ol { }

                             

                            blockquote { }

                             

                            a { color: #0C95C9; }

                             

                            a:hover { text-decoration: none; }

                             

                            a img {

                                border: none;

                            }

                             

                            img.left {

                                float: left;

                                margin: 7px 30px 0 0;

                            }

                             

                            img.right {

                                float: right;

                                margin: 7px 0 0 30px;

                            }

                             

                            hr { display: none; }

                             

                            .list1 {

                            }

                             

                            .list1 li {

                                float: left;

                                line-height: normal;

                            }

                             

                            .list1 li img {

                                margin: 0 30px 30px 0;

                            }

                             

                            .list1 li.alt img {

                                margin-right: 0;

                            }

                             

                            #wrapper {

                            margin: 0 auto;

                                   

                            }

                             

                            /* Header */

                             

                            #header-wrapper {

                            margin: 0 auto;   

                            }

                             

                            #header {

                                width: 920px;

                                height: 45px;

                                margin: 0 auto;

                            }

                             

                            /* Menu */

                             

                            #menu {

                                float: left;

                                width: 640px;

                                height: 45px;

                            }

                             

                            #menu ul {

                                margin: 0;

                                padding: 10px 0px 0px 5px;

                                list-style: none;

                                line-height: normal;

                            }

                             

                            #menu li {

                                display: block;

                                float: left;

                            }

                             

                            #menu a {

                                display: block;

                                float: left;

                                margin-right: 3px;

                                padding: 3px 25px 2px 25px;

                                text-decoration: none;

                                text-transform: capitalize;

                                font-family: Arial, Helvetica, sans-serif;

                                font-size: 12px;

                                color: #FFFFFF;

                            }

                             

                            #menu a:hover { text-decoration: underline; }

                             

                            #menu .current_page_item a {

                                height: 20px;

                                background: #FEC200 url(images/img02.jpg) repeat-x left top;

                                color: #FFFFFF;

                            }

                             

                            #menu .first {

                                background: none;

                            }

                            /* Search */

                             

                            #search {

                                float: right;

                                width: 250px;

                                height: 45px;

                            }

                             

                            #search form {

                                float: right;

                                margin: 0;

                                padding: 12px 30px 0 0;

                            }

                             

                            #search fieldset {

                                margin: 0;

                                padding: 0;

                                border: none;

                            }

                             

                            #search input {

                                float: left;

                                font: 12px Georgia, "Times New Roman", Times, serif;

                                border: none;

                            }

                             

                            #search-text {

                                width: 135px;

                                height: 18px;

                                padding: 3px 0 0 5px;

                                border: 1px solid #333333;

                                background: #ECF9E4;

                                color: #000000;

                            }

                             

                            #search-submit {

                                height: 25px;

                                margin-left: 10px;

                                padding: 1px 10px;

                                background: #C0C0C0 url(../Users/Expishare/NEW%20EXPISHARE/Style/images/bg_grey.jpg);

                                color: #000000;

                               

                            }

                             

                            /* Page */

                             

                            #page {

                                width: 920px;

                                margin: 0 auto;

                            }

                             

                            #page-bgtop {

                                padding-top: 30px;

                               

                            }

                             

                                /** LOGO */

                             

                            #logo {

                                width: 900px;

                                height: 90px;

                                margin: 0 auto;

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

                            }

                             

                            #logo h1, #logo p {

                                margin: 0px;

                                line-height: normal;

                                text-transform: lowercase;

                                font-weight: normal;

                                color: #FFFFFF;

                            }

                             

                            #logo p {

                                text-transform: lowercase;

                                font-size: 10px;

                            }

                             

                            #logo h1 {

                                padding-top: 54px;

                                font-size: 34px;

                               

                            }

                             

                            #logo a {

                                text-decoration: none;

                                color: #FFFFFF;

                            }

                             

                            /* Content */

                             

                            #content {

                                float: center;

                                width: 920px;

                                height: 800px;

                                padding-top: 0px;

                                padding-right: 0px;

                               

                            }

                             

                            /* Post */

                             

                            .post {

                                background: url(images/img07.jpg) repeat-x left bottom;

                                margin-bottom: 25px;

                            }

                             

                            .post .title {

                                height: 30px;

                                color: #549900;

                            }

                             

                            .post .title a {

                                text-decoration: none;

                                color: #585D60;

                            }

                             

                            .post .date {

                            }

                             

                            .post .meta {

                                margin-top: -10px;

                                padding: 2px 30px 2px 16px;

                                background: url(images/img03.gif) no-repeat left 8px;

                                font-family: Arial, Helvetica, sans-serif;

                                font-weight: normal;

                                font-size: 10px;

                                color: #66665E;

                            }

                             

                            .post .meta span {

                                display: block;

                                margin-top: -10px;

                            }

                             

                            .post .meta a { }

                             

                            .post .entry {

                                padding: 10px 0;

                            }

                             

                            .post .links {

                                margin: 0 250px 0 0;

                                padding: 0 0 0 0px;

                            }

                             

                            .post .links .comments {

                            }

                             

                            .post .links .permalink {

                                padding-left: 17px;

                            }

                             

                            /* Sidebar */

                             

                            #sidebar {

                                float: left;

                                width: 177px;

                                padding-left: 22px;

                                font-family: Arial, Helvetica, sans-serif;

                                font-size: 11px;

                                color: #585D60;

                            }

                             

                            #sidebar ul {

                                margin: 0;

                                padding: 0;

                                list-style: none;

                                line-height: normal;

                            }

                             

                            #sidebar li {

                                margin-bottom: 30px;

                                padding: 0 0 10px 0px;

                            }

                             

                            #sidebar li ul {

                            }

                             

                            #sidebar li li {

                                margin: 0;

                                padding: 7px 10px 10px 7px;

                                background: url(images/img07.jpg) repeat-x left bottom;

                            }

                             

                            #sidebar p {

                                margin: 0;

                                padding: 0px 10px;

                            }

                             

                            #sidebar h2 {

                                height: 26px;

                                margin: 0 0 10px 0px;

                                padding: 12px 0 2px 7px;

                                text-transform: capitalize;

                                font-size: 18px;

                                font-weight: normal;

                                color: #464F54;

                            }

                             

                             

                            #sidebar p {

                                line-height: 200%;

                            }

                            #sidebar a {

                                text-align: left;

                                text-decoration: none;

                                font-weight: normal;

                                color: #585D60;

                            }

                             

                            /* Calendar */

                             

                            #calendar {

                            }

                             

                            #calendar caption {

                                padding-bottom: 5px;

                                font-weight: bold;

                            }

                             

                            #calendar table {

                                width: 100%;

                                border-collapse: collapse;

                                border-bottom: 1px solid #24130F;

                                border-left: 1px solid #24130F;

                                border-right: 1px solid #24130F;

                            }

                             

                            #calendar thead th {

                                padding: 5px 0;

                                text-align: center;

                                border-top: 1px solid #24130F;

                                border-left: 1px solid #24130F;

                                background: #24130F;

                            }

                             

                            #calendar tbody td {

                                padding: 5px 0;

                                text-align: center;

                                border-top: 1px solid #24130F;

                                border-left: 1px solid #24130F;

                                border-bottom: 1px solid #24130F;

                            }

                             

                            #calendar tfoot td {

                                padding: 5px;

                                border-left: 1px solid #24130F;

                                border-bottom: 1px solid #24130F;

                            }

                             

                            #calendar tfoot #next {

                                border-top: 1px solid #24130F;

                                text-align: right;

                            }

                             

                            #calendar tfoot #prev {

                                border-top: 1px solid #24130F;

                            }

                             

                            #calendar .pad {

                                border-bottom: 1px solid #24130F;

                            }

                             

                            #calendar #today {

                                background: #24130F;

                            }

                             

                            /* Footer */

                             

                            #footer {

                                width: 920px;

                                height: 49px;

                                margin: 0 auto;

                                padding-top: 50px;

                            }

                             

                            #footer-bgcontent {

                                margin: 0px;

                                padding: 0px;

                                height: 99px;

                                background: #394144;

                            }

                             

                            #footer p {

                                margin: 0;

                                text-align: center;

                                line-height: normal;

                                text-transform: uppercase;

                                font-size: 10px;

                                color: #FFFFFF;

                            }

                             

                            #footer a {

                                color: #E5FFC4;

                            }

                            • 11. Re: CSS Logo position problem
                              osgood_ MVP

                              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;

                              }

                              • 12. Re: CSS Logo position problem
                                MurraySummers ACP/MVPs

                                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.

                                • 13. Re: CSS Logo position problem
                                  osgood_ MVP

                                  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.

                                  • 14. Re: CSS Logo position problem
                                    MurraySummers ACP/MVPs

                                    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.

                                    • 15. Re: CSS Logo position problem
                                      MurraySummers ACP/MVPs

                                      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.

                                      • 16. Re: CSS Logo position problem
                                        Tony404 Community Member

                                        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.

                                        • 17. Re: CSS Logo position problem
                                          osgood_ MVP

                                          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.

                                          • 18. Re: CSS Logo position problem
                                            osgood_ MVP

                                            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;

                                            }

                                            • 19. Re: CSS Logo position problem
                                              Tony404 Community Member

                                              Hi

                                               

                                              Sorry for the late reply. I have removed margin: 0 auto; from #logo.  But still no luck I added some text to the page so you can see what

                                              happens when the screen size changes. A way to see this is when you got to the http://www.expishare.com/interactive/Tryout.php 

                                              click on you browses edge drag it to the middle and see what happens. The text modifies but logo stays still. Hope you

                                              can help.

                                              • 20. Re: CSS Logo position problem
                                                MurraySummers ACP/MVPs

                                                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?

                                                • 21. Re: CSS Logo position problem
                                                  Tony404 Community Member

                                                  Thanks for the reply:

                                                   

                                                  I think I tried that that: Heres the css for verification. Thanks:

                                                   

                                                   

                                                  body {

                                                      margin: 0;

                                                      padding: 0;

                                                      background: url(images/img01.jpg) repeat-x left top;

                                                      font-family: Arial, Helvetica, sans-serif;

                                                      font-size: 12px;

                                                      color: #66665E;

                                                  }

                                                   

                                                  h1, h2, h3 {

                                                      margin: 0;

                                                      text-transform: uppercase;

                                                      font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;

                                                      font-weight: normal;

                                                      color: #0C95C9;

                                                  }

                                                   

                                                  h1 { font-size: 44px; }

                                                   

                                                  h2 { font-size: 18px; }

                                                   

                                                  h3 { }

                                                   

                                                  p, ul, ol {

                                                      margin-top: 0;

                                                      line-height: 240%;

                                                      text-align: justify;

                                                  }

                                                   

                                                  ul, ol { }

                                                   

                                                  blockquote { }

                                                   

                                                  a { color: #0C95C9; }

                                                   

                                                  a:hover { text-decoration: none; }

                                                   

                                                  a img {

                                                      border: none;

                                                  }

                                                   

                                                  img.left {

                                                      float: left;

                                                      margin: 7px 30px 0 0;

                                                  }

                                                   

                                                  img.right {

                                                      float: right;

                                                      margin: 7px 0 0 30px;

                                                  }

                                                   

                                                  hr { display: none; }

                                                   

                                                  .list1 {

                                                  }

                                                   

                                                  .list1 li {

                                                      float: left;

                                                      line-height: normal;

                                                  }

                                                   

                                                  .list1 li img {

                                                      margin: 0 30px 30px 0;

                                                  }

                                                   

                                                  .list1 li.alt img {

                                                      margin-right: 0;

                                                  }

                                                   

                                                  #wrapper {

                                                  margin: 0 auto;

                                                         

                                                  }

                                                   

                                                  /* Header */

                                                   

                                                  #header-wrapper {

                                                  margin: 0 auto;   

                                                  }

                                                   

                                                  #header {

                                                      width: 920px;

                                                      height: 45px;

                                                      margin: 0 auto;

                                                  }

                                                   

                                                  /* Menu */

                                                   

                                                  #menu {

                                                      float: left;

                                                      width: 640px;

                                                      height: 45px;

                                                  }

                                                   

                                                  #menu ul {

                                                      margin: 0;

                                                      padding: 10px 0px 0px 5px;

                                                      list-style: none;

                                                      line-height: normal;

                                                  }

                                                   

                                                  #menu li {

                                                      display: block;

                                                      float: left;

                                                  }

                                                   

                                                  #menu a {

                                                      display: block;

                                                      float: left;

                                                      margin-right: 3px;

                                                      padding: 3px 25px 2px 25px;

                                                      text-decoration: none;

                                                      text-transform: capitalize;

                                                      font-family: Arial, Helvetica, sans-serif;

                                                      font-size: 12px;

                                                      color: #FFFFFF;

                                                  }

                                                   

                                                  #menu a:hover { text-decoration: underline; }

                                                   

                                                  #menu .current_page_item a {

                                                      height: 20px;

                                                      background: #FEC200 url(images/img02.jpg) repeat-x left top;

                                                      color: #FFFFFF;

                                                  }

                                                   

                                                  #menu .first {

                                                      background: none;

                                                  }

                                                  /* Search */

                                                   

                                                  #search {

                                                      float: right;

                                                      width: 250px;

                                                      height: 45px;

                                                  }

                                                   

                                                  #search form {

                                                      float: right;

                                                      margin: 0;

                                                      padding: 12px 30px 0 0;

                                                  }

                                                   

                                                  #search fieldset {

                                                      margin: 0;

                                                      padding: 0;

                                                      border: none;

                                                  }

                                                   

                                                  #search input {

                                                      float: left;

                                                      font: 12px Georgia, "Times New Roman", Times, serif;

                                                      border: none;

                                                  }

                                                   

                                                  #search-text {

                                                      width: 135px;

                                                      height: 18px;

                                                      padding: 3px 0 0 5px;

                                                      border: 1px solid #333333;

                                                      background: #ECF9E4;

                                                      color: #000000;

                                                  }

                                                   

                                                  #search-submit {

                                                      height: 25px;

                                                      margin-left: 10px;

                                                      padding: 1px 10px;

                                                      background: #C0C0C0 url(../Users/Expishare/NEW%20EXPISHARE/Style/images/bg_grey.jpg);

                                                      color: #000000;

                                                     

                                                  }

                                                   

                                                  /* Page */

                                                   

                                                  #page {

                                                      width: 920px;

                                                      margin: 0 auto;

                                                  }

                                                   

                                                  #page-bgtop {

                                                      padding-top: 30px;

                                                     

                                                  }

                                                   

                                                      /** LOGO */

                                                   

                                                  #logo {

                                                      width: 900px;

                                                      height: 90px;

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

                                                  }

                                                   

                                                  #logo h1, #logo p {

                                                      margin: 0px;

                                                      line-height: normal;

                                                      text-transform: lowercase;

                                                      font-weight: normal;

                                                      color: #FFFFFF;

                                                  }

                                                   

                                                  #logo p {

                                                      text-transform: lowercase;

                                                      font-size: 10px;

                                                  }

                                                   

                                                  #logo h1 {

                                                      padding-top: 54px;

                                                      font-size: 34px;

                                                     

                                                  }

                                                   

                                                  #logo a {

                                                      text-decoration: none;

                                                      color: #FFFFFF;

                                                  }

                                                   

                                                  /* Content */

                                                   

                                                  #content {

                                                      float: center;

                                                      width: 920px;

                                                      height: 800px;

                                                      padding-top: 0px;

                                                      padding-right: 0px;

                                                     

                                                  }

                                                   

                                                  /* Post */

                                                   

                                                  .post {

                                                      background: url(images/img07.jpg) repeat-x left bottom;

                                                      margin-bottom: 25px;

                                                  }

                                                   

                                                  .post .title {

                                                      height: 30px;

                                                      color: #549900;

                                                  }

                                                   

                                                  .post .title a {

                                                      text-decoration: none;

                                                      color: #585D60;

                                                  }

                                                   

                                                  .post .date {

                                                  }

                                                   

                                                  .post .meta {

                                                      margin-top: -10px;

                                                      padding: 2px 30px 2px 16px;

                                                      background: url(images/img03.gif) no-repeat left 8px;

                                                      font-family: Arial, Helvetica, sans-serif;

                                                      font-weight: normal;

                                                      font-size: 10px;

                                                      color: #66665E;

                                                  }

                                                   

                                                  .post .meta span {

                                                      display: block;

                                                      margin-top: -10px;

                                                  }

                                                   

                                                  .post .meta a { }

                                                   

                                                  .post .entry {

                                                      padding: 10px 0;

                                                  }

                                                   

                                                  .post .links {

                                                      margin: 0 250px 0 0;

                                                      padding: 0 0 0 0px;

                                                  }

                                                   

                                                  .post .links .comments {

                                                  }

                                                   

                                                  .post .links .permalink {

                                                      padding-left: 17px;

                                                  }

                                                   

                                                  /* Sidebar */

                                                   

                                                  #sidebar {

                                                      float: left;

                                                      width: 177px;

                                                      padding-left: 22px;

                                                      font-family: Arial, Helvetica, sans-serif;

                                                      font-size: 11px;

                                                      color: #585D60;

                                                  }

                                                   

                                                  #sidebar ul {

                                                      margin: 0;

                                                      padding: 0;

                                                      list-style: none;

                                                      line-height: normal;

                                                  }

                                                   

                                                  #sidebar li {

                                                      margin-bottom: 30px;

                                                      padding: 0 0 10px 0px;

                                                  }

                                                   

                                                  #sidebar li ul {

                                                  }

                                                   

                                                  #sidebar li li {

                                                      margin: 0;

                                                      padding: 7px 10px 10px 7px;

                                                      background: url(images/img07.jpg) repeat-x left bottom;

                                                  }

                                                   

                                                  #sidebar p {

                                                      margin: 0;

                                                      padding: 0px 10px;

                                                  }

                                                   

                                                  #sidebar h2 {

                                                      height: 26px;

                                                      margin: 0 0 10px 0px;

                                                      padding: 12px 0 2px 7px;

                                                      text-transform: capitalize;

                                                      font-size: 18px;

                                                      font-weight: normal;

                                                      color: #464F54;

                                                  }

                                                   

                                                   

                                                  #sidebar p {

                                                      line-height: 200%;

                                                  }

                                                  #sidebar a {

                                                      text-align: left;

                                                      text-decoration: none;

                                                      font-weight: normal;

                                                      color: #585D60;

                                                  }

                                                   

                                                  /* Calendar */

                                                   

                                                  #calendar {

                                                  }

                                                   

                                                  #calendar caption {

                                                      padding-bottom: 5px;

                                                      font-weight: bold;

                                                  }

                                                   

                                                  #calendar table {

                                                      width: 100%;

                                                      border-collapse: collapse;

                                                      border-bottom: 1px solid #24130F;

                                                      border-left: 1px solid #24130F;

                                                      border-right: 1px solid #24130F;

                                                  }

                                                   

                                                  #calendar thead th {

                                                      padding: 5px 0;

                                                      text-align: center;

                                                      border-top: 1px solid #24130F;

                                                      border-left: 1px solid #24130F;

                                                      background: #24130F;

                                                  }

                                                   

                                                  #calendar tbody td {

                                                      padding: 5px 0;

                                                      text-align: center;

                                                      border-top: 1px solid #24130F;

                                                      border-left: 1px solid #24130F;

                                                      border-bottom: 1px solid #24130F;

                                                  }

                                                   

                                                  #calendar tfoot td {

                                                      padding: 5px;

                                                      border-left: 1px solid #24130F;

                                                      border-bottom: 1px solid #24130F;

                                                  }

                                                   

                                                  #calendar tfoot #next {

                                                      border-top: 1px solid #24130F;

                                                      text-align: right;

                                                  }

                                                   

                                                  #calendar tfoot #prev {

                                                      border-top: 1px solid #24130F;

                                                  }

                                                   

                                                  #calendar .pad {

                                                      border-bottom: 1px solid #24130F;

                                                  }

                                                   

                                                  #calendar #today {

                                                      background: #24130F;

                                                  }

                                                   

                                                  /* Footer */

                                                   

                                                  #footer {

                                                      width: 920px;

                                                      height: 49px;

                                                      margin: 0 auto;

                                                      padding-top: 50px;

                                                  }

                                                   

                                                  #footer-bgcontent {

                                                      margin: 0px;

                                                      padding: 0px;

                                                      height: 99px;

                                                      background: #394144;

                                                  }

                                                   

                                                  #footer p {

                                                      margin: 0;

                                                      text-align: center;

                                                      line-height: normal;

                                                      text-transform: uppercase;

                                                      font-size: 10px;

                                                      color: #FFFFFF;

                                                  }

                                                   

                                                  #footer a {

                                                      color: #E5FFC4;

                                                  }

                                                  • 22. Re: CSS Logo position problem
                                                    MurraySummers ACP/MVPs

                                                    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;

                                                    }

                                                    • 23. Re: CSS Logo position problem
                                                      osgood_ MVP

                                                      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

                                                      • 24. Re: CSS Logo position problem
                                                        Tony404 Community Member

                                                        Hi

                                                         

                                                        I just upload the modified css but no luck. In a reply to osgood. I would like the div logo to stay in postion when browse or screen size reduced..

                                                        I am thankful for all your help. Could they be some other part of the css causing this. I am also trying other stuff.

                                                         

                                                        So if any one got ideas please assist.