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

    Need Advice for html and css code, in respect to Zoom

    this is the the code i've begun writing. However something is not right. It looses structure when i zoom in our out. I tried correcting it with %s. However lets use a website like Microsoft Corporation for consideration. When you zoom in/out you see how it looks clean and keeps its structure. You see it looks like a "page or sheet" when zoomed out all the way. Mine just seems to stretch as i zoom out. How would I correct that?

    <--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;

    }

    <--HTML-->

    <div id="container">



    <div class="logo">
    <img src= "/Users/hello/Desktop/Swift Folder/Swift-none.png" width="300" height="50" alt="logo"/>
    </div>

    <div id="header">
    </div>
    </div>
    </div>


    <div class="menu">
    <ul>
    <li>
    <a href="Contact-Hello.html">
    Contacts
    </a>
    </li>

    <li>
    <a href="History.html">
    hello
    </a>
    </li>
    <li>
    <a href="Team.html">
    hello
    </a>
    </li>
    <li>
    <a href="team.html">
    hello
    </a>
    </li>
    <li>
    <a href="team.html">
    hello
    </a>
    </li>
    <li>
    <a href="hello.html">
    Home
    </a>
    </li>
    </ul>
    </div>



    <div id="content">

    <div class="frontimage">
    <img src= "/Users/hello/Desktop/Swift Folder/lights.jpg" width="100%" height="690" alt="front image"/>
    </div>
    </div>







    <div class= "footer-content">
    <div class= "footer">


    <form name="htmlform" method="post" action="html_form_send.php" >
    <table width="450px">
    </tr>
    <tr>
    <td valign="top">
    <label for="first_name" >
    Full Name *
    </label>
    </td>
    <td valign="top">
    <input type="text" name="first_name" maxlength="50" size="21" style="position: absolute; top: 5px; left: 120px;">
    </td>
    </tr>
    <tr>
    <td valign="top">
    <label for="email">
    Address *
    </label>
    </td>
    <td valign="top">
    <input type="text" name="email" maxlength="80" size="21" style="position: absolute; top: 28px; left: 120px;">

    </label>
    </td>

    </tr>
    <tr>
    <td valign="top">
    <label for="telephone">
    Phone Number*
    </label>
    </td>
    <td valign="top">
    <input type="text" name="telephone" maxlength="30" size="21" style="position: absolute; top: 51px; left: 120px;">
    </td>
    </tr>
    <tr>
    <td valign="top">
    <label for="comments">
    Comments *
    </label>
    </td>
    <td valign="top">
    <textarea name="comments" maxlength="1000" cols="21" rows="6" style="position: absolute; top: 73px; left: 120px;">
    </textarea>
    </td>

    </tr>
    <tr>
    <td colspan="3" style="text-align:right">
    <input type="submit" value="Submit" style="position: absolute; top: 140px; left: 288px;">

    </td>
    </tr>
    </table>
    </form>


    </div>
    </div>


    <div id="footer-end">

    <p class= "copyright">Copyright 2014 © Designed by Me<p>
    </div>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,721
    Thanks
    25
    Thanked 662 Times in 661 Posts
    @Newb116, you should use this site to validate your code. And you should do it often. The W3C Markup Validation Service
    You have 13 Errors, 6 warning(s). This is not a big deal, but most are you using HTML to have the browser interpret what should be CSS.
    Don't think it will fix the problem, but should be done to find a secure place to start looking.
    Next you have an extra </div> and </label> tag. May be more.
    When I ran your code I saw the submit button to the right of the form. Looks out of place.

    Suggest you fix you code and get it to validate before trying to fix zoom problems.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,444
    Thanks
    11
    Thanked 310 Times in 309 Posts
    It would be great if we could see your site live to test it out, rather than having to re-build it ourselves. I suspect your issue though is the use of all the absolute positioning. Absolute and relative positions should be sparingly used, and rarely for content divs. By not coding to the natural flow of blocks, I suspect you're not allowing the zoom to do what it needs.

  • #4
    New to the CF scene
    Join Date
    Feb 2014
    Location
    NY
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yes I will begin uploading it in the next 72 hours.

  • #5
    New to the CF scene
    Join Date
    Feb 2014
    Location
    NY
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank you tracknut and sunfighter. Both are good tips. Thank you again.


  •  

    Posting Permissions

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