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. #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. #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    9,666
    Thanks
    6
    Thanked 1,143 Times in 1,114 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. #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. #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    9,666
    Thanks
    6
    Thanked 1,143 Times in 1,114 Posts
    Code:
    #logo img {
      margin-left: ??px;
      margin-top: ??px;
    }

  6. Users who have thanked VIPStephan for this post:

    Tantrik (04-18-2014)

  7. #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
  •