SO,
Я ищу некоторую помощь, сделав довольно простую страницу более мобильным/планшетом, как в настоящее время на некоторых мобильных устройствах, она выглядит довольно уродливой: S
Я попытался правильно позиционировать вещи и использовал пиксели, а не проценты, потому что я только делаю вещи в каждом углу (верхний и нижний столбцы), и я попытался включить некоторое масштабирование, а также код, чтобы сделать изображения не отображение на определенной ширине экрана
Может кто-нибудь помочь исправить мой html/css, чтобы он полностью совместим, поскольку он никогда не работает, когда я вношу изменения.
HTML:
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="true" name="HandheldFriendly" />
<meta content="width=device-width" name="viewport" />
<meta content="width=device-width,initial-scale=0.75" name="viewport" />
<title>Website.com</title>
<link href="testing.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header_container">
<div id="header">
<div class="headimage">
<a href="#" onclick="location.href='http://website.com/'; return false;" target="_blank">
<img alt="" class="headimager" src="http://placehold.it/350x95/" />
</a>
</div>
<select class="class-selector">
<option value="">- Testing Dropdown -</option>
</select>
<div class="classcycler"><a href="javascript: void(0);" id="NextPage"><font color="#EFEFEF">Next Page</font></a> <font color="red">|</font> <a href="javascript: void(0);" id="PreviousPage"><font color="#EFEFEF">Previous Page</font></a>
</div>
<div class="classcycler2"><a class="downclass" href="javascript: void(0);"><font color="#EFEFEF">Scroll Down</font></a> <font color="red">|</font> <a class="upclass" href="javascript: void(0);"><font color="#EFEFEF">Scroll Up</font></a>
</div>
<div class="headright"><a class="TOPJS" href="javascript: void(0);"><font color="#EFEFEF">Up to Top</font></a>
<br/> <a class="KEYJS" href="javascript: void(0);"><font color="#EFEFEF">Down to Bot</font></a>
</div>
</div>
</div>
<div id="container">
<table id="gradient-style" summary=""> <tbody><thead><tr><th colspan="30">Data>>>>>Test>>>>>123>>>>>Please>>>>>Help>>>>>Stackoverflow>>>>>Testing>>>>>Here>>>>>Data>>>>>Test>>>>>123>>>>>Please>>>>>Help>>>>>Stackoverflow>>>>>Testing>>>>>Here>>>>>Data>>>>>Test>>>>>123>>>>>Please>>>>>Help>>>>>Stackoverflow>>>>>Testing>>>>>Here>>>>>Data>>>>>Test>>>>>123>>>>>Please>>>>>Help>>>>>Stackoverflow>>>>>Testing>>>>>Here>>>>></th></tr></thead></tbody></table>
</div>
<div id="footer_container">
<div id="footer">
<div class="footimage">
<a href="#" onclick="location.href='http://website.com/'; return false;" target="_blank">
<img alt="" class="footimager" src="http://placehold.it/350x95/" />
</a>
</div>
<div class="footleft">
<a class="def" href="javascript: void(0);"></a>
</div>
<div class="footright">
<a class="abc" href="javascript: void(0);"></a>
</div>
</div>
</div>
</body>
</html>
CSS
body {
background: #F0F0F0;
line-height: 1.6em;
margin: 0;
overflow-x: scroll;
padding: 0;
}
#header_container {
background: url(gradhead.png) repeat-x #111625;
border: 0 solid #666;
height: 80px;
left: 0;
position: fixed;
top: 0;
width: 100%;
}
#footer .headimage {
position: relative;
}
#header .headright {
font-size: 20px;
position: fixed;
right: 10px;
text-align: right;
top: 15px;
}
#header .class-selector {
left: 10px;
position: fixed;
top: 5px;
}
#header .classcycler {
font-size: 20px;
left: 10px;
position: fixed;
top: 30px;
}
#header .classcycler2 {
font-size: 20px;
left: 10px;
position: fixed;
top: 50px;
}
#container {
margin: 0 auto;
padding: 80px 0;
width: 100%;
}
#footer_container {
background: url(gradhead.png) repeat-x #111625;
border: 0 solid #666;
bottom: 0;
height: 80px;
left: 0;
position: fixed;
width: 100%;
}
#footer .footleft {
font-size: 20px;
left: 10px;
position: absolute;
top: 10px;
}
#footer .footright {
font-size: 20px;
position: absolute;
right: 10px;
top: 10px;
}
#footer .footimage {
position: relative;
top: -13px;
}
#footer .footleft a {
background: url(http://placehold.it/60x60/) no-repeat;
display: block;
height: 60px;
width: 60px;
}
#footer .footleft a:hover {
background: url(http://placehold.it/60x60/000) no-repeat;
}
#footer .footright a {
background: url(http://placehold.it/60x60/) no-repeat;
display: block;
height: 60px;
width: 60px;
}
#footer .footright a:hover {
background: url(http://placehold.it/60x60/000) no-repeat;
}
#header,#footer {
color: #ECECEC;
height: 100%;
margin: 0 auto;
position: relative;
text-align: center;
width: 100%;
}
@media screen and max-width 600px {
.headimager {
display: none;
}
}
@media screen and max-width 450px {
.footimager {
display: none;
}
}
Причина отсутствия ссылки jsfiddle заключается в том, что она не позволяет помещать метатеги.
JavaScript
$("a.def").click(function () {
$('body').animate({
"scrollLeft": "-=404"
}, 200);
});
$("a.abc").click(function () {
$("body").animate({
"scrollLeft": "+=404"
}, 200);
});