html moving when resizing browser

2019-09-19 07:19发布

站内文章 / HTML/CSS
44 0 0

问题:

I'm having issues with parts of html moving when browsers is resized. I've tried all the solutions here but nothing seems to be working. I am new to this so maybe doing this wrong. Any guidance would be greatly appreciated!

here is my code html and css 

<!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>PUMPED|Building Your Best You</title>
<link href="master.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body onload="MM_preloadImages('images/home3_over.png','images/home8_over.png','images/home12_over.png')">
<div id="home1"></div>
<div id="home2"></div>
<div id="home3"> <a href="http://gum.co/Pumped" target="_blank"><img src="images/home3.png" width="262" height="63" id="Image1" onmouseover="MM_swapImage('Image1','','images/home3_over.png',1)" onmouseout="MM_swapImgRestore()" /></a></div>
<div id="home4"></div>
<div id="home5"></div>
<div id="home6"></div>
<div id="house7"> <a href="https://gumroad.com/l/Pumped" target="_blank"><img src="images/home7.png" width="202" height="64" id="Image2" onmouseover="MM_swapImage('Image2','','images/home8_over.png',1)" onmouseout="MM_swapImgRestore()" /></a></div>
<div id="home8"></div>
<div id="home9"></div>
<div id="home10"></div>
<div id="home11"> <a href="https://gumroad.com/l/Pumped" target="_blank"><img src="images/home11.png" width="262" height="64" id="Image3" onmouseover="MM_swapImage('Image3','','images/home12_over.png',1)" onmouseout="MM_swapImgRestore()" /></a></div>
<div id="home12"></div>
<div id="home13"></div>
<div id="container">
</div>
</body>
</html>

css

@charset "UTF-8";
#container {
    float: left;
    height: 500px;
    width: 1360;
    margin-right: auto;
    margin-left: auto;
}
#wrapper {
    margin-left: auto;
    margin-right: auto;
    min-width:960px;
}
#home1 {
    background-image: url(images/home1.png);
    margin: 0px;
    padding: 0px;
    float: left;
    height: 420px;
    width: 1360px;
}
#home2 {
    background-image: url(images/home2.png);
    margin: 0px;
    padding: 0px;
    float: left;
    height: 63px;
    width: 548px;
}
#home3 {
    background-image: url(images/home3.png);
    margin: 0px;
    padding: 0px;
    float: left;
    height: 63px;
    width: 262px;
}
#home4 {
    background-image: url(images/home4.png);
    margin: 0px;
    padding: 0px;
    float: left;
    height: 63px;
    width: 550px;
}
#home5 {
    background-image: url(images/home5.png);
    margin: 0px;
    padding: 0px;
    float: left;
    height: 492px;
    width: 1360px;
}
#home6 {
    background-image: url(images/home6.png);
    margin: 0px;
    padding: 0px;
    float: left;
    height: 64px;
    width: 560px;
}
#house7 {
    background-image: url(images/home7.png);
    margin: 0px;
    padding: 0px;
    float: left;
    height: 64px;
    width: 202px;
}
#home8 {
    background-image: url(images/home8.png);
    margin: 0px;
    padding: 0px;
    float: left;
    height: 64px;
    width: 598px;
}
#home9 {
    background-image: url(images/home9.png);
    margin: 0px;
    padding: 0px;
    float: left;
    height: 1549px;
    width: 1360px;
}
#home10 {
    background-image: url(images/home10.png);
    margin: 0px;
    padding: 0px;
    float: none;
    height: 64px;
    width: 860px;
}
#home11 {
    background-image: url(images/home11.png);
    margin: 0px;
    padding: 0px;
    float: left;
    height: 64px;
    width: 262px;
}
#home12 {
    background-image: url(images/home12.png);
    margin: 0px;
    padding: 0px;
    float: left;
    height: 64px;
    width: 238px;
}
#home13 {
    background-image: url(images/home13.png);
    margin: 0px;
    padding: 0px;
    float: left;
    height: 128px;
    width: 1360px;
}

回答1:

yes this would happen because your css is good for default browser view only but when u resize it will not be good.u cn either search google for "script for auto detection of UA".then u have to make different-2 css for different screen sizes.



回答2:

You have a design that is 1360 px wide and several of your images are 1360 px wide, or combinations of them are 1360 px wide this is OK if your target audience can support that but generally there are going to be some users for which this is going to be too wide.

You use float left for all your images and combinations of images. Typically when they are combined on a line some are going to start to drop onto the next line when your display width get below the total combined width that they would take up.

I've stripped out all your script and replaced the images with a solid background colour because I don't have any of your images.

But this works and does not move about and should give you a place to start from, for putting back your elements.

<body>
  <div class="images">
    <div class="row row1 full">
      <div id="home1"></div>
    </div>
    <div class="row narrow-strip">
      <div id="home2"></div>
      <div id="home3"></div>
      <div id="home4"></div>
    </div>
    <div class="row row3 full">
      <div id="home5"></div>
    </div>
    <div class="row narrow-strip">
      <div id="home6"></div>
      <div id="home7"></div>
      <div id="home8"></div>
    </div>
    <div class="row row5 full">
      <div id="home9"></div>
    </div>
    <div class="row narrow-strip">
      <div id="home10"></div>
      <div id="home11"></div>
      <div id="home12"></div>
    </div>
    <div class="row row7 full">
      <div id="home13"></div>     
    </div>
  </div>
</body>

and then you can clean out a lot of repetition from your CSS like this:

.images {
    margin: auto auto;
    width: 1360;
}
.images div {
    padding:0;
    margin:0;
}
.images .row  {
    width:1360px; 
}
.images .row div {
    float:left;
    display:inline-block;
    height:100%;
}
.images .row.full div {
    width:100%;
}
.images .row.narrow-strip {
    height:63px;
}
.images .row1  {
    height:420px; 
}
.images .row3  {
    height:492px; 
}
.images .row5  {
    height:1549px; 
}
.images .row7  {
    height:128px; 
}
#home1 {
    background-color:#EEE;
    height: 420px;
}
#home2 {
    background-color:#DDD;
    width: 548px;
}
#home3 {
    background-color:#CCC;
    width: 262px;
}
#home4 {
    background-color:#BBB;
    width: 550px;
}
#home5 {
    background-color:#AAA;
    height: 492px;
}       
#home6 {
    background-color:#999;
    width:560px;
}       
#home7 {
    background-color:#888;
    width:202px;
}       
#home8 {
    background-color:#777;
    width:598px;
}       
#home9 {
    background-color:#666;
    height: 1549px;
}       
#home10 {
    background-color:#777;
    width:860px;
}       
#home11 {
    background-color:#444;
    width:262px;
}       
#home12 {
    background-color:#333;
    width:238px;
}       
#home13 {
    background-color:#222;
    height: 128px;
}


标签： html css resize
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~