0
웹 사이트에 문제가 있습니다. 모든 것을 시도했지만 여전히 해결책을 찾지 못했습니다.큰 화면에서 웹 사이트가 엉망이고 작은 화면에 스크롤 막대가 표시됩니다.
웹 사이트를 모든 컴퓨터 화면 크기에서 거의 동일하게 보이게하고 싶습니다. 큰 화면에서 테스트하면 바닥 글과 나머지 페이지 내용 사이에 간격이 표시됩니다. 작은 화면에서 테스트 할 때 괜찮아 보이지만 세로 및 가로로 스크롤해야합니다.
<!DOCTYPE HTML>
<html>
<head>
<title>Royal Scottish Country Dance Society</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="CSS/general.css">
<link rel="stylesheet" type="text/css" href="CSS/index.css">
<style>
@font-face {
font-family: 'Myriad Pro Regular';
src: url('../Fonts/MyriadPro-Regular.otf');
}
@font-face {
font-family: 'Myriad Pro Bold';
src: url('Fonts/MyriadPro-Bold.otf');
}
p {font-size:65%; text-align:left; padding-right:18%;}
h2 {
font-size:98%;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="header">
<h1 class="alignleft"> RSCDS <span style="font-size:30%">Royal Scottish Country Dance Society</span></h1>
<h1 class="alignright"> Call us on <span>07459107891</span><br/>
for any further details </h1>
</div>
<div id="vmenu">
<ul>
<li><a href="index.html"><span class="current">Home</span></a></li>
<li><a href="confweek.html">Conference<br>
Weeekend</a></li>
<li><a href="danceprog.html">Dance<br>
Program</a></li>
<li><a href="teachers.html">Teachers</a></li>
<li><a href="travel.html">Travel</a></li>
<li><a href="stay.html">Where to Stay</a></li>
<li><a href="join.html">Join Us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="vmenu2"></div>
<img id="pattern2" src="Patterns/im4.jpg"/> <img id="pattern" src="Patterns/Pattern_1.jpg"/>
<div id="pagewrap">
<h2>Welcome to the royal scottish country<br>
dance society</h2>
<p> The youth groups of the RSCDS run a weekend conference every year. The event runs from Friday evening to Sunday lunchtime, and is a mixture of Scottish country dance and other classes for all levels of dancers from beginners to advanced along with meetings, evening dances and other social events. Young dancers in each area take it in turns to host the event and it is anticipated that the event will be held in Glasgow in 2015. Join us for a totally unique dance experience. With three days of performances, classes, advice and fun, RSCDS is your chance to design your perfect day of dance. <br>
<br>
There's plenty to choose from no matter your ability level. </p>
<h2>WHOEVER YOU ARE, WHEREVER YOU ARE <br/> FROM, COME DANCE WITH US!</h2>
</div>
<div id="footer"> </div>
</div>
</body>
</html>
body {
margin: 0 auto;
height: 100%;
width: 100%;
}
div#header {
margin: 0;
padding: 0;
width: 100%;
height: 85px;
min-height: 9.5%;
background: #4F4F50;
position: relative;
}
div#footer {
margin: 0;
background: #4F4F50;
width: 100%;
height: 50px;
bottom: 0;
padding: 0;
position: fixed;
min-height: 5.5%;
}
div#pagewrap {
padding: 1.77% 20% 0% 15.5%;
font-family: "Myriad Pro Regular";
width: 27%;
}
div#vmenu {
margin: 0;
padding: 2% 1% 0% 0%;
background: #09051A;
width: 12%;
height: 672px;
float: left;
}
div#vmenu2 {
margin: 0;
padding: 0;
background: #09051A;
width: 12%;
height: 672px;
float: right;
}
div#vmenu ul {
margin: 0;
padding: 0;
list-style: none;
}
div#vmenu ul li {
margin: 0;
padding: 0;
list-style: none;
}
div#vmenu ul a:link {
margin: 0;
padding: 6% 8% 5% 0%;
text-align: right;
text-decoration: none;
font-family: 'Myriad Pro Regular';
color: #ffffff;
display: block;
width: 100%;
}
div#vmenu ul a:visited {
margin: 0;
text-decoration: none;
font-size: medium;
font-family: 'Myriad Pro Regular';
color: #ffffff;
}
div#vmenu ul li a:hover {
margin: 0;
text-decoration: none;
font-family: 'Myriad Pro Regular';
font-size: medium;
color: #289280;
}
img#pattern {
width: 31%;
padding: 3% 5.5% 3.5% 2%;
float: right;
}
img#pattern2 {
height: 668px;
padding: 0;
float: right;
width: 6.7%;
min-width: 100px;
min-height: 668px;
}
h1 span {
font-size: 180%;
}
h2 {
font-size: 110%;
width: 100%;
font-family: "Myriad Pro Bold";
}
h3 {font-size: 100%;
font-family: 'Myriad Pro Bold';
}
p a {
text-decoration: none;
color: #289280;
}
.wrapper {
margin: 0 auto;
width: 100%;
max-width: 1440px;
min-width: 1440px;
position: relative;
}
.alignleft {
margin: 0;
padding: 0;
color: #ffffff;
font-size: 400%;
font-family: 'Myriad Pro Bold';
padding: 0.7% 0% 0% 1.3%;
float: left;
position: absolute;
}
.alignright {
margin: 0;
color: #ffffff;
font-size: 80%;
font-family: 'Myriad Pro Bold';
padding: 1.2% 0% 1.3% 82.5%;
position: absolute;
}
.current {
color: #289280;
width: 100%;
}
@media 만 화면 예 : 4.resolution
및 (최대 장치 너비 : 480px) { // 여기에 스타일이 있습니다 .... \t} – kashinath
또한 중요한 점은 perticular 장치/화면의 데스크탑과 동일한 웹 사이트를 렌더링 할 수 없다는 점입니다. 당신은 당신의 웹 사이트를 반응 적으로 만들 필요가 있습니다. – kashinath
@kashinath ... 감사합니다 ... – Shardul