html moving when resizing browser

2019-09-19 07:26发布

站内问答 / HTML/CSS
1155 2 6

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;
}

标签： html css resize
举报
2条回答
forever°为你锁心
2楼-- · 2019-09-19 07:49

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.

查看更多
0人赞 添加讨论(0) 举报
老娘就宠你
3楼-- · 2019-09-19 07:55

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;
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)