SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Page Distortion during Zoom In/Out Action

    Before I begin to discuss my situation, I'd like to say thank you. my page seems to distort and stretch during zoom out. the page will on get wider by decreasing its height. However when paid careful attention to www.microsoft.com You see that when zoomed out you see 33% margins on each side and page stays intact in respect to how it looks when zoomed in. Since all codes are separated into external sheets. I'm still a newbie, but learn the fun encountering all sort of situations, how else to learn? This is my css code:


    Code CSS:
    #container {
        width: 	99%;
        margin: auto;
        text-align: left;
        position: absolute;
        border: 1px none white;
        z-index: 1;
     }
     
     
    .logo {
    		margin-left: 150px;
    		min-width:10%;
     
     
     
     
     
    }
     
     
     
    .menu {
    	top: 72px;
    	left: 0px;
      margin: auto;
        min-width: 500px;
        width: 100%;
        position: absolute;
        height: 36px;
        font-size: 16px;
        font-family: Tahoma, Geneva, sans-serif;
        font-weight: bold;
        text-align: center;
        text-shadow: 3px 2px 3px #333333;
       	background-color: rgba(0,0,0,0.5);
         border-radius: none;
         z-index: 2;
     
     
     
    }
     
    .menu ul {
        height: auto;
        padding: 4px 0px;
        margin: auto;
     
    }
     
    .menu li { 
        display: inline-block; 
        padding: 1px; 
     
     
    }
     
    .menu a {
        text-decoration: none;
        color: #FFFFFF;
        padding: 8px 8px 8px 8px;
     
    }
     
    .menu a:hover {
        color: #F90;
        background-color: #FFF;
    }
     
     .frontimage {
     
      min-height: 50%;
      min-width: 500px;
     
     
     
      width: 100%;
      height: 300px;
      margin: auto;
     
      position: absolute;
      top: 73px;
      left: 0;
     
      clear: both;
     
    }
     
     
     
     
     
     
     
    .footer {
      min-width: 1024px;
      min-height: 10%;
     
      width: 100%;
      height: 190px;
     
      margin: auto;
      left: -20px;
      right: -20px;
     
     
     
     
    	position: absolute;
      top: 763px;
     
      background-color: black;
      float: none;
      color: white;
     
     
     
    }
    #footer-end {
      position: absolute;
      top: 953px;
      background-color: gray;
      color: white;
      height: 30px;
      text-align: center;
     
      min-width: 1024px;
      width: 100%;
      min-height: 2.5%;
      left: 0px;
     
     
     
     
    }
    Last edited by Mittineague; Feb 27, 2014 at 12:50. Reason: reformatting bbcode tags

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    We will need some html to go along with that CSS but preferably a link to the page in action so we can see what you are experiencing.

    Your css code does seem to be littered with absolute positioning which is not usually the best approach, however it all depends on the html concerned. Absolute positioning in small doses is ok but for main page containers you would rarely use absolute positioning.


Bookmarks

Posting Permissions

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