Html Moving When Resizing Browser
Solution 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.
Solution 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><divclass="images"><divclass="row row1 full"><divid="home1"></div></div><divclass="row narrow-strip"><divid="home2"></div><divid="home3"></div><divid="home4"></div></div><divclass="row row3 full"><divid="home5"></div></div><divclass="row narrow-strip"><divid="home6"></div><divid="home7"></div><divid="home8"></div></div><divclass="row row5 full"><divid="home9"></div></div><divclass="row narrow-strip"><divid="home10"></div><divid="home11"></div><divid="home12"></div></div><divclass="row row7 full"><divid="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;
}
.imagesdiv {
padding:0;
margin:0;
}
.images.row {
width:1360px;
}
.images.rowdiv {
float:left;
display:inline-block;
height:100%;
}
.images.row.fulldiv {
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;
}
Post a Comment for "Html Moving When Resizing Browser"