SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: A div moving

  1. #1
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    A div moving

    Hi.

    Take a look at http://www.kwpwebdesign.se

    If you zoom out as much as you can you can see that a column is moving, that's #col2.
    How do I prevent that so it stays in the same position?

    HTML:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/demo.css"></head>
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    	<link rel="stylesheet" href="css/anythingslider.css">
        
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
        
        	<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
    
    	<script>
    		// DOM Ready
    		$(function(){
    			$('#slider').anythingSlider();
    		});
    	</script>
    
    	<script src="js/jquery.anythingslider.js"></script>
    
    
    
    <body>
    
    
    <div id="upper">
    
    <div id="bgupper"><div id="iupper"><img id="logo" src="images/logo.png" width="142" height="126" /></div></div>
    
    
    
    
    </div>
    
    <div id="header-wrapper">
      <div class="wrapper">
    		  <ul class="nav">
    		    <li class="navigation"><a href="#home">WBM-Fleninge</a></li>
    				<li class="navigation"><a href="#about">ATV</a></li>
    				<li class="navigation"><a href="#blog">Sortiment</a></li>
    
    				<li class="navigation"><a href="#credits">AC</a></li>
                    <li class="navigation"><a href="#credits">Finanser</a></li>
                       <li class="navigation"><a href="#credits">Begagnat</a> </li>
                       
                          <li class="navigation"><a href="#credits">Service</a></li>
                    
                    <li class="navigation"><a href="#credits">Kartor</a></li>
    
    		  </ul>
      </div>
    </div>
    
    
    
    <div id="wrapper">
    
    
    <div id="slider1">
    <ul id="slider">
    
    
    	<li><img src="images/Test1.png" width="980" height="300px" /></li>
    		<li><img src="images/Test.png" width="980" height="300px" /></li>
            
                	<li><img src="images/Test2.png" width="980" height="300px" /></li>
    
    
    </ul></div>
    
    <div id="om">
    
    <div id="col1">
    
    <h1 class="inledning">Välkommen till WBM!</h1><br /><br />
    
    <p class="text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi,<br /><br /> id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.<br />
      <br />
    "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.<br /><br /> Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. <br /><br />Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias<br /><br /> 
    consequatur aut perferendis doloribus asperiores repellat.</p>
    
     <div class="pics"></div>
      <div class="pics2"></div>
       <div class="pics3"></div>
    
     </div>
     
     
     
     
    
    <div id="col2">
    
    
    <div id="öppettider">
    <p class="oppet">Öppettider</p><br />
    
    <p class="text">Mån-fre: 11:00-18:00<br><br>
    Telefon: 0521-25 52 52<br><br>
    Fax: 0521-25 52 57
    </p>
    
    </div>
    
    
    
    <img id="ar" src="images/samarbete_40ar.png" width="200" height="150" />
    <div id="öppettider">
      
      
      <p class="text">
    </p>
    
    </div>
    
    </div>
    </div>
    
    </div>
    
    
    </div>
    
    
    <div id="footer">
    
    <div id="footeri">
    <div class="footercol"><p class="överskrift">KONTAKT</p>
    
    <p class="para">Mobil. 070 123 123 123<br />
      <br />
    E-post: abm-fleninge@hotmail.com<br />
    <br />
    Kontaktperson Abm Fleninge<br />
    <br />
    </p><br />
    
    
    
    
    
    </div>
    <div class="footercol">
      <p class="överskrift">HITTA OSS</p>
    
    <iframe width="300" height="170" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.se/maps?f=q&amp;source=s_q&amp;hl=sv&amp;geocode=&amp;q=Fleningev%C3%A4gen,+Helsingborg&amp;aq=0&amp;oq=FLENINGE&amp;sll=61.606396,21.225586&amp;sspn=37.146142,135.263672&amp;ie=UTF8&amp;hq=&amp;hnear=Fleningev%C3%A4gen,+260+35+%C3%96d%C3%A5kra,+Sk%C3%A5ne+l%C3%A4n&amp;t=m&amp;z=14&amp;ll=56.108623,12.79027&amp;output=embed"></iframe><br />
    </div>
    <div class="footercol">
     <p class="överskrift">SORTIMENT</p>
     
     <img src="images/Untitled-3 copy.png" width="272" height="167" />
     
     
     
     
     </div>
    
    
    </div>
    
    
    
    
    </div>
    
    
    
    </body>
    </html>


    CSS:

    Code:
    body {background-color:#000017}
    
    #wrapper {width:980px; margin:0 auto; margin-top:6px;  }
    
    #upper {height:200px;background-color:#000000; margin:0 auto;}
    #iupper {width:980px; height:200px; margin:0 auto; }
    
    #bgupper { height:200px; margin:0 auto; background-image:url(../images/Slider1.jpg) }
    
    #slider1 {height:300px; width:980px; clear:both  }
    
    #col1 {
    	float:left;
    	width:680px;
    	margin-top: 30px;
    	padding-right: 30px;
    	border-right-width: thin;
    	border-right-style: solid;
    	border-right-color: #333;
    
    
    }
    
    #ar {display:block; margin-left:30px; margin-top:30px; }
    
    
    #öppettider {width:238px; margin-left:30px; }
    
    #random {width:238px; margin-left:30px; margin-top:40px;  }
    
    .oppet { color:#ccc; font-family: Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold; }
    
    #om {width:980px; overflow:hidden }
    
    .överskrift {color:#000; font-size:25px; text-transform:uppercase; font-family:oswald; font-weight:300; margin-top:20px; margin-bottom:20px;}
    
    #col2 {
    	float:left;
    	width:268px;
    	margin-top:50px;
    	float:right
    	
     
    }
    
    #logo {margin-top:30px;  margin-left:20px;}
    .inledning {color:#fff; font-weight:bold; font-size:30px; font-family:Open Sans; margin-top:20px; }
    
    .text {color:#ccc; font-family: Arial, Helvetica, sans-serif; font-size:14px;  }
    
    #footer {
    	height:250px;
    	background-color:#FFFFFF;
    	margin-top:70px;
    	border-top-width: 7px;
    	border-top-style: solid;
    	border-top-color: #666666;
    	clear:both
    }
    
    #footeri { width:980px; height:250px;  margin: 0 auto; }
    
    .footercol {
    	float:left;
    	height:250px;
    	width:315px;
    }
    
    .pics { width:210px; height:170px; float:left;margin-top:30px; background-image:url(../images/mini1.jpg)}
    .pics2 { width:210px; height:170px;  float:left;margin-top:30px; margin-left:25px; background-image:url(../images/mini2.jpg) }
    .pics3 { width:210px; height:170px;  float:right ;margin-top:30px; background-image:url(../images/mini3.jpg) }
    
    
    
    
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I'm not seeing that happen. Can you post pictures? One of it zoomed out preferably (showing the issue). I zoomed all the way out (as far as Chrome goes) and didn't see anything bad.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Look here: http://i.imgur.com/3dUuA.png



    Quote Originally Posted by RyanReese View Post
    I'm not seeing that happen. Can you post pictures? One of it zoomed out preferably (showing the issue). I zoomed all the way out (as far as Chrome goes) and didn't see anything bad.

  4. #4
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,345
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    I use Firefox and normally have it set to zoom text only, which doesn't cause any problem. If I set it to zoom everything then yes, at maximum zoom out I see the same issue. However, the text is utterly unreadable at that size. I can't imagine any circumstances in which somebody would zoom out to that extent and still be trying to use the site, so I wouldn't worry about it. Just my opinion.

  5. #5
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    True, but I gotta be doing something wrong, and I hate doing a site thats not as it should really. But I think ill let it go, since nobody basically will zoom out that much.

    But if somebody can recognize the problem, please tell me.
    Quote Originally Posted by TechnoBear View Post
    I use Firefox and normally have it set to zoom text only, which doesn't cause any problem. If I set it to zoom everything then yes, at maximum zoom out I see the same issue. However, the text is utterly unreadable at that size. I can't imagine any circumstances in which somebody would zoom out to that extent and still be trying to use the site, so I wouldn't worry about it. Just my opinion.


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
  •