0

ページのサイズを変更すると、ナビゲーション バーのアイテムが重なって歪んでしまいます。レイアウトをそのままにして静止させるか、重ならないように整然とした状態でサイズを変更したいです。この一部には、画面サイズの変更に応じて検索バーのサイズを変更することが含まれますが、その方法はわかりません。助けてください！笑 ありがとう！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Website</title>
<style>
html {
    height:100%; /* fix height to 100% for IE */
    max-height:100%; /* fix height for other browsers */
    padding:0; /*remove padding */
    margin:0; /* remove margins */
    border:0; /* remove borders **/
    background:#fff; /*color background - only works in IE */
    /* hide overflow:hidden from IE5/Mac */

    overflow:hidden; /*get rid of scroll bars in IE */
    /* */
}
body { 
    height:100%;
    max-height:100%; 
    overflow-y:scroll; 
    padding:0;
    margin:0;
    border:0;
    font: 13px/1.5 Helvetica Neue,Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif;
    font-weight:bold;

 }
#content {
    display:block;
    height:100%;
    max-height:100%;
    overflow:auto;
    padding-left:100px;
    position:relative;
    z-index:3;
    word-wrap:break-word;
    top:45px;
}
#head {
    position:absolute;
    margin:0;
    top:0;
    display:block;
    width:100%;
    height:40px;
      -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    background:#333333;
    background: -moz-linear-gradient(center top , #333333, #111111) repeat scroll 0 0                transparent;
}
#settings {
left:75%;
position:fixed;
width:40px;
height:40px;
color:red;
}
#home {
left:85%;
position:fixed;
width:40px;
height:40px;
color:blue;
}

#logo a {
    background: url(logo.gif) no-repeat scroll 20px 9px;
    color: #ffffff;
    display: block;
    height: 35px;
    margin-right: 5px;
    outline: medium none;
    text-indent: -9999px;
    width: 140px;
    float:left;
 }
.searchbox{
    -moz-border-radius: 4px 4px 4px 4px;
    -moz-box-shadow: 0 1px 0 #444444;
    background: none repeat scroll 0 0 #666666;
    border: 1px solid black;
    color: #CCCCCC;
    font: 13px Arial,sans-serif;
    padding: 6px 25px 4px 6px;
    width: 215px;
    border-radius:15px;
float:right;

position:relative;
top:-33px;
left:-275px; 


}

.searchbox:focus {
    background: none repeat scroll 0 0 #eeeeee;
    border: 1px solid #999999;
}
#news a { margin:30px; padding-left:25%; }
.nav {  display:inline;}
.nav a { padding-left:20px;  color:#BABABA; text-decoration:none; font-size:24px;}
.nav a:hover { color:#FFFFFF;  }

</style>
</head>
<body>
 <div id="head">
   <div id="logo">
    <a href="#"></a>
   </div>
   <div class="nav" id="news"><a href=#">News</a>
   </div>
   <div class="nav" id="settings"><a href="#" title="Settings"><img src="redbox.gif" />  </a>
   </div>
   <div class="nav" id="home"><a href="#" title="Home"><img src="bluebox.gif" /></a> 
   </div>


       <form>
        <input class="searchbox" type="text"/>
       </form>
  </div>
 </body>

 </html>
4

1 に答える 1

0

重なってはいけないすべてのコンテンツを含む div にまとめて配置し、そのコンテナーで min-height/min-width を使用して、レイアウトの一部 (浮動小数点数? 固定位置?) が下にスライドしたり、互いに重なり合ったりしないようにすることをお勧めします。

于 2013-05-23T20:23:53.383 に答える