manit44
شنبه 04 بهمن 1393, 21:30 عصر
سلام بر دوستان
من سایتم رو در جهت ارتفاع کاملا ریسپانسیو کردم اما هر کاری میکنم که در جهت عرض هم به درستی ریسپانسیو بشه نمیشه کدهای css و html هم به شکل زیر است:
اگه دوستان کمک کنند ممنون میشم:
CSS:
body {
overflow-x: hidden;
overflow-y: hidden;
margin:0 !important;
}
#main {
position: fixed;
top:23%;
bottom:21%;
/*margin-left:67%;*/
}
#vertical {
box-shadow: -5px 0px 5px #ccc;
width: 19%;
height: 270%;
position: absolute;
display: none;
}
#pic {
height: 35%;
margin-left: 10%;
display: none;
width: 120px;
height: 120px;
}
#menu {
position: absolute;
top:42%;
left: -9%;
}
#tbl {
margin-top: initial;
display: none;
}
.li {
color: gray;
font-size: 1em;
text-align: left;
cursor: pointer;
font-family: 'Myriad Pro';
height: 0;
}
.menu {
color: black;
font-size: 12pt;
text-align: left;
cursor: pointer;
font-family: 'Myriad Pro';
}
.li:hover {
color: #a00f0f;
}
audio {
display: none;
}
span {
color: black;
cursor: pointer;
}
.layers {
position: absolute;
}
.layers img {
position: fixed;
height: 270%;
}
.btnUK {
z-index: 0;
position: absolute;
width: 40px;
height: 40px;
}
.btnIR {
z-index: 0;
position: absolute;
width: 40px;
height: 40px;
}
در کد بالا مد نظرم کلاس layers. هست که میخوام عمل ریسپانسیو روی اون انجام بشه.
کد HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/jQueryRotate.js"></script>
<script type="text/javascript" src="js/scan.js"></script>
<script type="text/javascript" src="js/sound.js"></script>
<link rel="stylesheet" type="text/css" href="css/Style.css" media="all" />
</head>
<body>
<div style="width:100%; height:100%; position:absolute">
<div style="width:100%; height:100%;position:absolute; top:-85.5%">
<div class="layers" style="width:100%; height:100%; position:absolute;">
<img id="1" src="layers/1.png" />
<img id="3" src="layers/3.png" />
<img id="5" src="layers/5.png" />
<img id="7" src="layers/7.png" />
<img id="9" src="layers/9.png" />
<img id="11" src="layers/11.png" />
<img id="13" src="layers/13.png" />
<img id="15" src="layers/15.png" />
<img id="2" src="layers/2.png" />
<img id="4" src="layers/4.png" />
<img id="6" src="layers/6.png" />
<img id="8" src="layers/8.png" />
<img id="10" src="layers/10.png" />
<img id="12" src="layers/12.png" />
<img id="14" src="layers/14.png" />
<img id="16" src="layers/16.png" />
</div>
<div id="main">
<audio id="aud" controls="controls" preload="auto">
<source src="audio/tick.mp3" />
</audio>
<div id="menu">
<table id="tbl" dir="ltr">
<tr>
<td>
<ul id="li">
<li id="li_home" class="li" type="square">
<a style="text-decoration: none" href="MainEN.html">
<span>Home</span>
</a>
</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li id="li_sculptures" class="li" type="square">
<a style="text-decoration: none" href="#">
<span>Sculptures</span>
</a>
</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li id="li_articles" class="li" type="square">
<a style="text-decoration: none" href="#">
<span>Articles</span>
</a>
</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li id="li_books" class="li" type="square">
<a style="text-decoration: none" href="#">
<span>Books</span>
</a>
</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li id="li_AboutMe" class="li" type="square">
<a style="text-decoration: none" href="#">
<span>About me</span>
</a>
</li>
</ul>
</td>
</tr>
</table>
</div>
<canvas id="vertical"></canvas>
<img src="images/name.png" id="pic" />
</div>
</div>
<div style="width:100%; height:23%; position:absolute; background-color:#FFF;"></div>
<div style="width:100%; height:23%; bottom:0; position:absolute;background-color:#FFF;"></div>
</div>
<table>
<tr>
<td>
<br />
<a href="MainFA.html"><img class="btnIR" src="images/Iran.png" title="فارسی" /></a>
</td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
</html>
با تشکر از دوستان.
من سایتم رو در جهت ارتفاع کاملا ریسپانسیو کردم اما هر کاری میکنم که در جهت عرض هم به درستی ریسپانسیو بشه نمیشه کدهای css و html هم به شکل زیر است:
اگه دوستان کمک کنند ممنون میشم:
CSS:
body {
overflow-x: hidden;
overflow-y: hidden;
margin:0 !important;
}
#main {
position: fixed;
top:23%;
bottom:21%;
/*margin-left:67%;*/
}
#vertical {
box-shadow: -5px 0px 5px #ccc;
width: 19%;
height: 270%;
position: absolute;
display: none;
}
#pic {
height: 35%;
margin-left: 10%;
display: none;
width: 120px;
height: 120px;
}
#menu {
position: absolute;
top:42%;
left: -9%;
}
#tbl {
margin-top: initial;
display: none;
}
.li {
color: gray;
font-size: 1em;
text-align: left;
cursor: pointer;
font-family: 'Myriad Pro';
height: 0;
}
.menu {
color: black;
font-size: 12pt;
text-align: left;
cursor: pointer;
font-family: 'Myriad Pro';
}
.li:hover {
color: #a00f0f;
}
audio {
display: none;
}
span {
color: black;
cursor: pointer;
}
.layers {
position: absolute;
}
.layers img {
position: fixed;
height: 270%;
}
.btnUK {
z-index: 0;
position: absolute;
width: 40px;
height: 40px;
}
.btnIR {
z-index: 0;
position: absolute;
width: 40px;
height: 40px;
}
در کد بالا مد نظرم کلاس layers. هست که میخوام عمل ریسپانسیو روی اون انجام بشه.
کد HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/jQueryRotate.js"></script>
<script type="text/javascript" src="js/scan.js"></script>
<script type="text/javascript" src="js/sound.js"></script>
<link rel="stylesheet" type="text/css" href="css/Style.css" media="all" />
</head>
<body>
<div style="width:100%; height:100%; position:absolute">
<div style="width:100%; height:100%;position:absolute; top:-85.5%">
<div class="layers" style="width:100%; height:100%; position:absolute;">
<img id="1" src="layers/1.png" />
<img id="3" src="layers/3.png" />
<img id="5" src="layers/5.png" />
<img id="7" src="layers/7.png" />
<img id="9" src="layers/9.png" />
<img id="11" src="layers/11.png" />
<img id="13" src="layers/13.png" />
<img id="15" src="layers/15.png" />
<img id="2" src="layers/2.png" />
<img id="4" src="layers/4.png" />
<img id="6" src="layers/6.png" />
<img id="8" src="layers/8.png" />
<img id="10" src="layers/10.png" />
<img id="12" src="layers/12.png" />
<img id="14" src="layers/14.png" />
<img id="16" src="layers/16.png" />
</div>
<div id="main">
<audio id="aud" controls="controls" preload="auto">
<source src="audio/tick.mp3" />
</audio>
<div id="menu">
<table id="tbl" dir="ltr">
<tr>
<td>
<ul id="li">
<li id="li_home" class="li" type="square">
<a style="text-decoration: none" href="MainEN.html">
<span>Home</span>
</a>
</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li id="li_sculptures" class="li" type="square">
<a style="text-decoration: none" href="#">
<span>Sculptures</span>
</a>
</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li id="li_articles" class="li" type="square">
<a style="text-decoration: none" href="#">
<span>Articles</span>
</a>
</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li id="li_books" class="li" type="square">
<a style="text-decoration: none" href="#">
<span>Books</span>
</a>
</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li id="li_AboutMe" class="li" type="square">
<a style="text-decoration: none" href="#">
<span>About me</span>
</a>
</li>
</ul>
</td>
</tr>
</table>
</div>
<canvas id="vertical"></canvas>
<img src="images/name.png" id="pic" />
</div>
</div>
<div style="width:100%; height:23%; position:absolute; background-color:#FFF;"></div>
<div style="width:100%; height:23%; bottom:0; position:absolute;background-color:#FFF;"></div>
</div>
<table>
<tr>
<td>
<br />
<a href="MainFA.html"><img class="btnIR" src="images/Iran.png" title="فارسی" /></a>
</td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
</html>
با تشکر از دوستان.