내 웹 사이트 배너의 로고 이미지는 브라우저 크기가 조정될 때마다 그대로 유지되지 않습니다. 예상되는 배너의 중앙에 바로 있지만 브라우저의 너비를 축소하기 시작하자마자 위로 올라 가기 시작합니다. 왜 이런거야? 누군가이 문제를 해결하도록 도와 주시겠습니까?
아래는 내가 사용중인 html 및 css 코드입니다.
HTML :
<HTML>
<HEAD>
<TITLE>BLB</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no"/>
<LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="STYLE1.CSS">
<link rel="stylesheet" type="text/css" href="mobile.css" media="screen and (max-width: 1000px)"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".TYPEHERE").fadeToggle();
});
});
</script>
</HEAD>
<BODY>
<div id="page-wrap">
<h1>
<div id="logo"><img src="images/blb2.png"></div>
<div class="cart"><img src="images/cart3.png"></div>
<a href="http://www.facebook.com" target="_blank"><div id="fb"><img src="images/fb.png"></div>
<a href="http://www.instagram.com" target="_blank"><div id="insta"><img src="images/insta.png"></div>
<a href="http://www.twitter.com" target="_blank"><div id="twitter"><img src="images/twitter.png"></div>
<a href="http://www.youtube.com" target="_blank"><div id="tube"><img src="images/tubee.png"></div>
<ul id="nav">
<li class="active"><a href="home.html">Home</a></li>
<li><a href="about.html">Store</a></li>
<li><a href="blog.html">Articles</a></li>
<li><a href="store.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</h1>
<div id="footer">
<tfooter>©2014 Blacklipbastard.com All Rights Reserved.</tfooter>
</div>
</div>
</BODY>
</HTML>
CSS :
html { overflow-y: scroll;}
body { font: 62% helvetica, sans-serif; width: 100%; background: url(images/bg1.jpg); background-size: 200%; }
h1 {background-color: #000; background-size: 100%; position: absolute; height: 18%; width: 100%; left: 0%; top: -1.8%; border-style: solid; border-color: gray; border-radius: 20px 20px 0 0; padding-top: 0%; background-repeat: no repeat; border-width: 2px;}
#logo { position: absolute; top: -140%; left: 22%; width: 50%;}
img {max-width: 100%;}
.cart {position: relative; top: 50%; left: 94%;}
.cart img {width:5%; height:30%;}
#nav {background:url(images/nav2.jpg) ; position: absolute; border-style: solid; left:0%; top:73%; width: 96%; height:19%; border-right: 2px solid #000000;}
#nav li {position: relative; list-style-type: none; float: left; width: 10%; top: 20%; border-right: 2px groove #000; padding: 0 10px;}
#nav a{text-decoration: none; color: white; font-size: 20px; position: relative;}
#nav a:hover{background: url(images/nav.jpg); color: silver;}
#fb {position: absolute; top: 40%; width: 3.5%; top: 89.5%; left: 80%; height: 15%; z-index: 1}
#insta { position: absolute; left: 85%; width: 2.8%; top: 89.5%; height: 13%; z-index: 1}
#twitter { position: absolute; width: 3.5%; top: 89.5%; left: 95%; height: 15%; z-index: 1}
#tube { position: absolute; top: 89.5%; width: 3.5%; left: 90%; height: 15%; z-index: 1}
#fb img{ Width:95%; Height:110%;}
#insta img{ Width:95%; Height:110%;}
#twitter img{ Width:95%; Height:110%;}
#tube img{ Width:95%; Height:110%;}
#footer { position: absolute; font: verdana #fff; left: 2.8%; bottom: 3%; border-top-style: double; border-color: #E8E8E8 ; padding: 0 48%; }
tfooter {position: absolute; left: 3%}
#page-wrap{
width: 80%;
height: 150%;
margin: 8.5%;
background: #fff;
padding: 20px;
position: relative;
top: -7%;
border-radius: 20px;
background: rgb(255, 255, 255) transparent;
background: rgba(255, 255, 255, 0.90);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)";}
이미지 너비가 100 %이기 때문입니다. 브라우저 크기를 조정하면 자동으로 확장됩니다. 로고에 최대 너비를 추가해보세요. :)
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다