www.webdeveloper.com
Results 1 to 4 of 4

Thread: Why do my HTML elements separate when I zoom in/out?

  1. #1
    Join Date
    Jan 2011
    Posts
    1

    Why do my HTML elements separate when I zoom in/out?

    I've had this weird problem for a while now. It's really frustrating. My html elements seem to disband and separate when I zoom in or out in any browser. They won't stay where they are meant to except for one element.

    How it should look:

    http://img192.imageshack.us/img192/224/efsshould.jpg

    How it SHOULDN'T look:

    http://img535.imageshack.us/img535/4...sshouldnot.jpg

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>EFS Portfolio</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="miniTab.js"></script>
    </head>
    
    <body>
    	<div id="header">
    		<div class="container">
    		</div>
        <div id="main">
        	<div class="container">
            	<div id="header">
    				<ul id="miniflex">
    				  <li><a href="about.html">About Me</a></li>
    				  <li><a href="index.html">Home</a></li>
    				  <li><a href="photography.html">Photography</a></li>
    				  <li><a href="designblog.html">My Blog</a></li>
    				  <li><a href="portfolio.html">Portfolio</a></li>
    				  <li><a href="contact.html">Contact</a></li>
    				</ul>
    				<div id="logo">
    					</div>
    				</div>
                <div id="block_featured" class="block">
                	<span class="block_inside">
                    	<div class="image_block">
                        	<img src="images/deborahmockup.jpg" />
                        </div>
                        <div class="text_block">
                            <h2 style="font-family:Rockwell;">Hey, check this out!</h2>
    						<br />
                            <p style="font-family:Georgia,serif;font-size:14px;">My name is Everardo F. Silva but you can call me Frank. I am freelance web designer/developer living in the Chicagoland area. This is one of my designs that a team and I created for a professor at DePaul University. Stick around for a while and check out some of my work. </p>
                            <br />
                            <a href="" class="button">View Project</a>
                    	</div>
                    </span>
                </div>
    		        </div>
    		    </div>
    			<div id="block_portfolio">
    				<div id="portfolio_items">
    					<div class="mini_portfolio_item">
    						<div style="position:absolute;right:235px;"class="block_inside">
    							<img src="images/chauncesample.png" class="thumbnail" />
    							<h3 style="color:#FF3030;font-size:20px;font-family:Rockwell;">Game Storyboard</h3>
    							<p style="font-family:Georgia,serif;font-size:14px;">Written and designed by yours truly.</p>
    							<a href="#" class="button">View Series</a>
    						</div>
    					</div>
    					<div class="mini_portfolio_item">
    						<div style="position:absolute;top:875px;right:235px;"class="block_inside">
    						<img src="images/hermitage.png"class="thumbnail" />
    						<h3 style="color:#FF3030;font-size:20px;font-family:Rockwell;">My trip to Russia</h3>
    						<p style="font-family:Georgia,serif;font-size:14px;">The Hermitage Museum in St. Petersburg.</p>
    						<a href="#" class="button">View Photos</a>
    						</div>
    					</div>
    					<div class="mini_portfolio_item">
    						<div style="height:455px;width:150px;position:absolute;left:162px;"class="block_inside">
    							<h4 style="color:#FF3030;font-family: Rockwell;font-size:16px;">EFS Designs is looking for clients!</h4>
    							<p style="font-family:Georgia,serif;font-size:14px;">I specialize in web design & development. I offer services in English Y TAMBIEN EN ESPANOL.</p>
    							<p style="font-family:Georgia,serif;font-size:14px;">If you'd like to look at my work you can find it under my portfolio. Head over to my contact page if you'd be interested in a FREE QUOTE!</p>
    							<a href="#" class="button">Contact Info</a>
    						</div>
    					</div>
    				</div>
    			</div>
    		    <div id="footer">
    		    	<div class="container">
    		        	<div class="footer_column long">
    		        		</br>
    		        		<p style="color:#ffffff;font-size:12px;text-transform:uppercase;">You can read about my design influences & my various ramblings in my <a href="designblog.html">Design Blog</a>.
    		        		<p style="color:#FF3030;font-size:14px;text-transform:uppercase;">gowmarcusx@hotmail.com -- 708.714.0171</p>
    		        		<h5 style="font-size:14px;">Designed and Coded by Everardo F. Silva</h5>
    		        	</div>
    		        </div>
    		    </div>
    		</body>
    </html>
    Is this a problem with the HTML? Or the CSS?

    Thank you for any input. I'm really stumped on this one!

  2. #2
    Join Date
    Feb 2011
    Posts
    1

    Why do my HTML elements separate when I zoom in/out?

    I have checked your html codes and you have external css codes thats assigned to main html page although it seems you don't have an extra css code in your html page but according to my experience problems arise from you might have an extra css codes embedded in your html page for the same container as well as your external css codes. Just check your main html page and make sure if you have any extra css codes written by mistake. Good luck

  3. #3
    Join Date
    Feb 2011
    Location
    Chuluota, Florida
    Posts
    144
    well I really would like to see this external stylesheet of yours. If you are using any floats at all when you make the screen larger or smaller the elements are going to be affected. If you are using pixels to define the attributes such as height and width for any div containers it will be afffected when you make the screen larger or smaller. Percentages are pretty good at filling the whole real estate of the screen and keeping the elements liquid and resizable. Honestly I think there is conflicting issues in your css file that we need to see so we can point out what is going on.

  4. #4
    Join Date
    Feb 2011
    Location
    Chuluota, Florida
    Posts
    144
    Id also like to add after seeing your pictures, check your margins and padding as well.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles