Web pages messed up when i zoom out

Question

dhani09 3 Newbie Poster

10 Years Ago

I have the following css style for a div

#central_content {
    float:left;
    width:697px;
    margin:-5px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    position:relative;
    }

Everything displays perfectly on 100% zoom in Google chrome. When i zoom out the contents within this div get messed up, aligning themselves to the left of the page instead of the middle where they were. I'm confused. How do i fix this? Thanks

css web-design zoom

2 Contributors
7 Replies
767 Views
5 Hours Discussion Span
Latest Post 10 Years Ago Latest Post by dhani09

All 7 Replies

JorgeM 958 Problem Solver

10 Years Ago

Is this site online so that we can take a look at the rest of the code?

JorgeM 958 Problem Solver

10 Years Ago

Sorry, based on the code above, your content is aligned to the left already... zooming in and out doesnt seem to shift the contents as you are indicating.

Its likely due to the fact that you have other PHP code that generates HTML not included above.

What you may want to do is run access your page via a browser... then you would provide the HTML code that you can access via "View Source". There would not be any PHP code included, only pure HTML that was generated.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

dhani09 3 Newbie Poster · Answer 1 · 2013-06-12T13:34:30+00:00

no its not online. but i paste the rest of the code.

<div id = "main" > 

<div id = "heading_text">
<span>Post a New Product</span><br/>
<span style="font-style:italic; font-family:Arial, Helvetica, sans-serif; font-size:12px">you can display an unlimited number of products. <a href="displayhelp.php">Learn more about product display</a></span>
</div>

<div class="top_horizontal_bar" style="margin-top:60px;"></div>
<br/>

<div class="menu_block"> 

      <!-- BEGIN categories menu -->
       <div class="hc" id="cat_menu_button"><a href="">Categories</a></div>
      <?php require_once('sidebar2.php') ?>

      <!-- END categories menu --> 

      <!--BEGIN featured form -->


      <!--END featured form -->
 </div> 

 <div id="productdisplay_content">
 <div class="category_select ">Please select a product category and a sub category and click NEXT
 </div>


 <div id="central_content">// the div that gets messed up on zoom out

 <form action="display-product.php" method="post">
 <div class="form_left">
 <div class="check_label">Category:</div>
          <div style="padding:7px 0 0 0;"></div>

    <select id="categoriesSelect" >

    </select>
    <br/><br/>
    <div style="padding:17px 0 0 0;"></div>
          <div class="check_label">Sub Category:</div>
          <div style="padding:7px 0 0 0;"></div>

    <select id="subcatsSelect" onChange="getData()">

    </select>
    </div>
     <input value="Next" class="edit_account" name="submitcat" type="submit" style="float:right; margin-top:250px"/>

          </form>
          <div class="selectedproduct">
<div class="here">You selected:</div>
<!--THIS IS THE DIV TO OUTPUT THE SELECTED ITEM -->
      <div class="product_directory blue" id="div1">
      <!--<div class="product_directory arrows">»</div>
      <div class="product_directory blue" ><!--output should be shown here as well for second select box </div>-->
      <div style="margin:0 0 -10px 0;"></div>

      </div>

</div>

</div>

</div>
<?php require_once('includes/footer.php') ?> 
</div>
</div>

</body>
</html>

I also removed most of the PHP code

dhani09 3 Newbie Poster · Answer 2 · 2013-06-12T15:34:31+00:00

this is the code from view source.

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

<!-- BEGIN html -->

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en" xml:lang="en" xmlns:fb="http://www.facebook.com/2008/fbml">

<!-- BEGIN head -->
<head>

<!-- Meta Tags -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- Title -->
<meta name="description" content="My Clean Web Store" />

</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript" src="js/social_js/footer-facebook-code.js"></script> 
<!-- End Facebook Box code --> 

<!-- BEGIN  #main -->
<div id = "main" > 

<div id="header"> 

    <!-- BEGIN  logo and slogan -->
    <div class="logoright">  
    <div class="logoright_bar"></div>
    <div id="pages_menu"><a href="howtobuy.php">Buying</a>

       </div>

      <div class="logoright_bar"></div>



 <div id="productdisplay_content">
 <div class="category_select ">Please select a product category and a sub category and click NEXT
 </div>


 <div id="central_content">

 <form action="display-product.php" method="post">
 <div class="form_left">
 <div class="check_label">Category:</div>
          <div style="padding:7px 0 0 0;"></div>





    <select id="categoriesSelect" >

    </select>
    <br/><br/>
    <div style="padding:17px 0 0 0;"></div>
          <div class="check_label">Sub Category:</div>
          <div style="padding:7px 0 0 0;"></div>

    <select id="subcatsSelect" onChange="getData()">

    </select>
    </div>
     <input value="Next" class="edit_account" name="submitcat" type="submit" style="float:right; margin-top:250px"/>

          </form>
          <div class="selectedproduct">
<div class="here">You selected:</div>
<!--THIS IS THE DIV TO OUTPUT THE SELECTED ITEM -->
      <div class="product_directory blue" id="div1">
      <!--<div class="product_directory arrows">»</div>
      <div class="product_directory blue" ><!--output should be shown here as well for second select box </div>-->
      <div style="margin:0 0 -10px 0;"></div>

      </div>

</div>

</div>

</div>
 <!-- BEGIN  #footer -->

    <div id="footer">
      <div class="horizontal_bar" style="margin:0;"></div>
      <div class="footer_sbox">
      <!--begin about emusale-->
        <div class="footer_time"> <img src="styles/Images/timeicon.png" class="timeicon" alt="time" />
          <div class="hc footer-title">About emusale</div>
          <div style="clear:both; margin:0; padding:0;"></div>
          <ul id="category_menu">
          <li><a href="aboutpage.php"><span><span>What is EMUsale</span></span></a></li>
          <li><a href="contact-page.php"><span><span>Contact Us</span></span></a></li>
          <li><a href="help.php"><span><span>Help Center</span></span></a></li>
          </ul>
          <div class="boxcontainer"> 
        </div>
        </div>
         <!-- about emusale-->

          <!--begin  Buying-->
        <div class="footer_twitter"><img src="styles/Images/magic_b.gif" class="timeicon" alt="twittericon"/>
          <div class="hc footer-title">Buying</div>
          <div style="clear:both;"></div>
          <ul id="category_menu">
          <li><a href="browsecategories.php"><span><span>Browse Categories</span></span></a></li>
          <li><a href="howtobuy.php"><span><span>How to Buy</span></span></a></li>
          <li><a href="displayhelp.php"><span><span>Product Display Tips</span></span></a></li>
          </ul>
          <div class="boxcontainer">

          </div>
        </div>
        <!--  Buying-->

        <!--begin  Selling-->
        <div class="footer_facebook"><img src="styles/Images/magic_ss.gif" class="timeicon" alt="facebookicon"/>
          <div class="hc footer-title">Selling</div>
          <div style="clear:both;"></div>
          <ul id="category_menu">
          <li><a href="display-product.php"><span><span>Display Products</span></span></a></li>
          <li><a href="manage-products.php"><span><span>Manage Products</span></span></a></li>
          <li><a href="howtosell.php"><span><span>How to Sell</span></span></a></li>
          </ul>
          <div class="boxcontainer"> 

        </div>
      </div>
      <!--begin  Selling-->
      <div style="clear:both;"></div>
      <div class="horizontal_bar" style="margin:0; padding:14px 0 1px 0;"></div>

      <!-- BEGIN  copyright  -->
      <div class="copyright">© 2012 <b>Emusale</b> - Buy and Sell</div>

      <!-- END  copyright  --> <!-- BEGIN  #footer_menu  -->
      <ul id="footer_menu">
        <li><a href="aboutpage.php" target="_blank">About EMUsale</a><span class="footer_lilbar"></span></li>
        <li><a href="http://emu.edu.tr" target="_blank">EMU</a><span class="footer_lilbar"></span></li>
        <li><a href="http://stdportal.emu.edu.tr" target="_blank">Student Portal</a><span class="footer_lilbar"></span></li>
        <li><a href="contact-page.php">Contact Us</a></li>
        <!-- END  #footer_menu  -->
      </ul>

      <!-- Credits  -->
     <div id="credits">Credits by </div>

      <!-- END  #footer --> 
    </div> 
</div>
</div>

</body>
</html>

I cut out some of the irrelevant code.

dhani09 3 Newbie Poster · Answer 3 · 2013-06-12T16:01:43+00:00

dhani09 3 Newbie Poster

10 Years Ago

Here are screen shots of 100% zoom and 75% zoom

JorgeM 958 Problem Solver Team Colleague Featured Poster · Answer 4 · 2013-06-12T18:07:29+00:00

Sorry... it doesnt look like I've been much help. The last set of code you posted has no styles (internal/external styles) associated with it so it doesnt render for me as it does in your picture.

I suspect that the issue is related to the use of the float property.

There's no way I can go through your examples to try to figure this out.

dhani09 3 Newbie Poster · Answer 5 · 2013-06-12T18:58:47+00:00

dhani09 3 Newbie Poster

10 Years Ago

Okay..Thank you.

Web pages messed up when i zoom out

Recommended Answers Collapse Answers

All 7 Replies

Recommended Answers