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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Images moving when zooming in and out

    Hey everyone, first post!

    Hope to have a nice long relationship of learning with this forum so here goes my first question!

    I am coding out a little website for myself ( first of many) and I noticed that in all browsers, when I zoom out my images start to pull out of the body. For example, My website does get smaller but the images and divs do not stay in position. Is there a coding trick I should learn to keep this from happening?

    Code:
     <!DOCTYPE html>
    <!-- corcomputers.html By Michael Corseri http:// -->
    <html lang="en">
    <head>
    	<meta charset="UTF-8" />
    	<title> COR Computers </title>
    	<link rel="stylesheet" type="text/css" href="main.css">
    </head>
    
    <body>
    <div id="container">
    	<div id="topbar">
    	</div> <!-- end topbar -->
    	<div id="header">
    		<div id="logo">
    		<img src="/Users/michaelcorseri/Desktop/CORComputers/CORCOMPUTERS/Website/Main Files/images/logo-mini.png" style="position: absolute; top: 11%; left: 11%;"/> 
    		</div>		
    		<div id="banner">
    		</div>
    		<div id="navbar">
    		</div>
    	</div> <!-- end header -->
    	<div id="main">
    		<div id="content">
    		</div>
    		<div id="sidebar">
    		</div>
    	</div> <!-- end main -->	
    	<div id="footer">
    		<div id="footnav">
    		</div>
    		<div id="contact">
    		</div>
    		<div id="network">
    		</div>
    	</div> <!-- end footer -->	
    </div> <!-- end of container -->	
    </body>
    
    
    </html>
    and the css

    Code:
    html {
    	height: 100%;
    	width: 100%;
    }
    body {
    	margin: 0px;
    }
    #wrapper {
    	width: 1024px;
    	margin-left: auto;
    	margin-right: auto;
    }
    #container {
    	font-family: "Century Gothic", Century Gothic
    	font-size: 12px;
    	color: #fff;
    	background-color: #2F3738;
    	text-align: left;
    	padding: 0px;
    	height: auto;
    	width: 1024px;
    	min-width: 1024px;
    	margin-right: auto;
    	margin-left: auto;
    }
    #topbar {
    	background-color: #2F3738;
    	padding: 0px;
    	height: 40px;
    	margin-right: auto;
    	margin-left: auto;
    }
    #header {
    	background-color: #9FBCBF;
    	padding: 0px;
    	height: 200px;
    	margin-right: auto;
    	margin-left: auto;
    }
    #main {
    	background-color: #2F3738;
    	padding: 0px;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: auto;
    	margin-left: auto;
    	position: relative;
    	min-height: 550px;
    }
    #footer {
    	background-color: #9FBCBF;
    	padding: 0px;
    	height: 75px;
    }
    Thanks for the help!
    -Tantrik

  • #2
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    edit :: The wrapper was used and it did not work. It is removed from my code at the moment

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,623
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Quote Originally Posted by Tantrik View Post
    Is there a coding trick I should learn to keep this from happening?
    Yes: Don’t use absolute positioning unless you know exactly what you are doing and how and why it behaves like it behaves.
    For the logo image it should suffice to use margins.

  • #4
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Could you give me an example of how you would use margins to position that? I am not too familiar. Thanks
    -Tantrik

    Quote Originally Posted by VIPStephan View Post
    Yes: Don’t use absolute positioning unless you know exactly what you are doing and how and why it behaves like it behaves.
    For the logo image it should suffice to use margins.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,623
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Code:
    #logo img {
      margin-left: ??px;
      margin-top: ??px;
    }

  • Users who have thanked VIPStephan for this post:

    Tantrik (04-18-2014)

  • #6
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    Code:
    #logo img {
      margin-left: ??px;
      margin-top: ??px;
    }
    Ah it was as easy as I thought, this is perfect thank you very much! Although when I used margin-top it would extend my entire header so I had to use padding-top to move it around. Still works how I need it to though thanks again!

    -Tantrik


  •  

    Posting Permissions

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