放大/缩小时如何阻止div在浏览器中移动？

时间：2014-01-24 23:43:30

标签： css html browser navbar

在浏览器中放大和缩小时，如何阻止我的div在页面上移动？另外，如何停止导航栏下拉创建导航栏的第二行？

另一件事是当我将鼠标悬停在导航栏上时，为什么我会从中间标签和第一个子标签中获得一个小块？

我很高兴知道我似乎哪里出错了，我对创建功能齐全的网站相对较新，这是布局的主页想法。

感谢您的帮助，我真的很感激。

HTML：

  <!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">
  <head>
 <title>Welcome</title>
  <link rel="stylesheet" href="index.css" type="text/css" />
  <style type="text/css">
  body {
background-color: #ccffcc;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div style="position: absolute; width: 83px; top: 7px; height: 51px; left: 199px; color: #F7EEEE;";>
  <div id="flag-header">
    <p> <img src="images/header/flag.gif" width="70" height="42" alt=""/></p>
  </div>
 <div style="position: absolute; top: 45px; width: 95px; height: 17px; left: 8px; color: #Fff;">
  <p><strong>MADE IN</strong></p>
  <p><strong> ENGLAND</strong></p>
</div>
<div style="position: absolute; left: 139px; top: 29px; width: 227px; height: 23px;"><strong>Telephone no.</strong></div>
 <div style="position: absolute; left: 388px; top: 8px; width: 169px;"><div id="logo-header"><img src="images/header/logo3.png" width="155" height="57"  alt=""/></div> 
  <div style="position: absolute; left: 185px; top: 21px; width: 242px;"><a href="mailto:email@email.co.uk" style="text-decoration:none;"><strong style="color: #FFFDFD; text-decoration:none;">Email: email@email.co.uk</strong></a></div>
  <div style="position: absolute; ><div id=; left: 437px; top: -10px; width: 108px; height: 75px;"badge-header"><img src="images/badge-header.png" width="104" height="75" alt=""/></div>
 </div>
  </div>
  <div class="clear">
  </div>
  </div>
    <div id="nav">
    <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">About us</a></li>
   <li><a href="#">Quality</a></li>
   <li><a href="#">Processes</a></li>
   <li><a href="#">Markets</a></li>
   </ul>
   <ul>
   <li><a href="#">Products</a>
   <ul>
   <li><a href="#">Product information</a></li>
   <li><a href="#">Product number one submenu</a></li>
   <li><a href="#">Product number two submenu</a></li>
   <li><a href="#">Product 3</a></li>
   <li><a href="#">Product 4</a></li>
   <li><a href="#">Product num 5</a></li>
   <li><a href="#">Products 6, more & products</a></li>
   <li><a href="#">Prod numb Seven</a></li>
   <li><a href="#">More products eight</a></li>
   <li><a href="#">More prods, prods and products</a></li>
   <li><a href="#">prod Stock List</a></li>
   </ul>
    </li>
    </ul>
    <ul>
   <li><a href="#">News</a>
   <ul>
   <li><a href="#">Latest news</a></li>
   <li><a href="#">Case Studies</a></li>
   <li><a href="#">Testimonials</a></li>
   </ul>
   </li>
   </ul>
   <ul>
   <li><a href="#">Contact</a>
   <ul>
   <li><a href="#">Contact us</a></li>
    <li><a href="#">Directions</a></li>
   </ul>
   </li>
   </ul>
   </div>
   <div id="body">
  <div class="sidebar2">
<ul>
<li>
<h4><span>Top products</span></h4> 
<ul class="block list"> 
                    <li><a href="#">Product 1</a></li>
                    <li><a href="#">product 2</a></li>
                    <li><a href="#">product 3</a></li>
             </ul>
                <h4>Links</h4>
               <ul>
                  <li><a href="index.html" title="link 1"><strong>link 1</strong></a>link 1</li>
                  <li><a href="index.hmtl" title="link 2"><strong>link 2</strong></a>link 2</strong></li>
                  <li><a href="index.html" title="link 3"><strong>Link 3</strong></a>Link three</li>
             </ul>
               <p>Â </p>
              <ul>
                <li>
                   <form method="get" class="searchform" action="" >
                     <p>
                       <input name="s" type="text" class="s" size="22" />
                     </p>
                     <p>
                       <input type="submit" class="searchsubmit formbutton" formmethod="GET" value="GO" />
                     </p>
                   </form>   
                 </li>
              </ul>
            </li>
       </ul> 
     </div>
     <div id="content">
        <h1><strong>Welcome to ....</strong></h1>
      <div class="box">
        <p><img src="images/.jpg" width="514" height="161"  alt=""/></p>
        <p>Â </p>
         <p>Content will be placed in this middle div, it will state when coming were established and who its run by and what products they make.</p>
    <p>Â </p>
    <p>Â </p>
    <p>Â </p>
    <p>Â </p>
    <p>Â </p>
    <p>Â </p>
    <p>Â </p>
    <p>Â </p>
    <p>Â </p>
    <p>Â </p>
    <p>Â </p>
    <p>Â </p>
    <p>Â </p>
    <p>Â </p>
    <p>Â </p>
    <p>Â </p>
    <p>Â </p>
    <p>Â </p>
    <p>Â </p>
    <p>Â </p>
    <p>Â </p>
    <p>Â </p>
        <p>Â </p>
      </div>
    </div>
    <div class="sidebar">
      <ul>
       <li>
 <h4><strong>LATEST NEWS</strong></h4>
                 </li>
     </ul>
    <p> <img src="images/resources/thumbs/.jpg" width="100" height="100" alt=""/></p>
    <p>Â </p>
    <p><a href="#">News Title here</a></p>
  <p>Â </p>
  <p style="text-align: center">A short summary of the news would be written in this section .... <a href="#">more</a></p>
     <p style="text-align: center">Â       </p>
     <ul>
       <li>
        <h4><strong>Follow us</strong></h4></li>
       <li>
      <div class="social-buttons" id="social-buttons">
        <div align="center"></div></div></li> </ul>
       <p>Â </p>
        <p>Â </p>
     <ul>
      <li>
      <h4><strong>Contact Us</strong></h4>
      </li>
      <li>          <a href="mailto:email@email.co.uk" class="myButton"> email@email.co.uk</a></li>
     </ul>
     </ul> 
    </div>
      <div class="clear"></div>
  </div>
  <div id="footer">
         <p>Copyright © 2014 company name   Tel:    Fax:    <a href="mailto:email@email.co.uk">email@email.co.ul.co.uk</a></p>
  </div>
</div>
</div>

的CSS：

          body {
     background: #333;
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 13px;
    color: #000;
}

* {
padding: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 10px;
margin-top: 0;
float: none;
text-align: center;
list-style-image: none;
list-style-type: none;
}


 /** element defaults **/

  code, blockquote {
   display: block;
   border-left: 5px solid #222;
   padding: 10px;
   margin-bottom: 20px;
}

 code {
    background-color: #222;
   color:#ccc;
  border: none;
}

blockquote {
    border-left: 5px solid #222;
}

blockquote p {
    font-style: italic;
    font-family: Georgia, "Times New Roman", Times, serif;
   margin: 0;
   color: #333;
   height: 1%;
 }

fieldset {
    display: block;
    border: none;
   border-top: 1px solid #ccc;
}

fieldset legend {
    font-weight: bold;
    font-size: 13px;
    padding-right: 10px;
    color: #333;
}

fieldset form {
    padding-top: 15px;
}

fieldset p label {
    float: left;
    width: 150px;
}

    form input, form select, form textarea {
    padding: 5px;
  color: #333333;
  border: 1px solid #ddd;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

form input.formbutton {
    border: none;
    background: #333;
    color: #ffffff;
    font-weight: bold;
   padding: 5px 10px;
   font-size: 12px;
   font-family: Tahoma, Geneva, sans-serif;
   letter-spacing: 1px;
   width: auto;
   overflow: visible;
}

form.searchform p {
    margin: 5px 0;
    text-align: left;
}

span.required {
    color: #ff0000;
}

h1, #content .box h1 {
 color: #000;
 font-size: 35px;
 font-family: Arial, Helvetica, sans-serif;
 padding: 0;
 background: none;
 border-bottom: none;
 text-transform: none;
 line-height: 1.0em;
 padding: 0 0 5px;
}

 h2 {
 color: #000;
 font-family: 'Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,Sans-Serif;
 font-size: 22px;
  letter-spacing: 0px;
 font-weight: normal;
 padding: 0 0 5px;
 margin: 0;
}

 h3 {
   color: #555;
   font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    font-family: Arial, Helvetica, sans-serif;
   }

    h4 {
    padding-bottom: 10px;
    font-size: 15px;
    color: #999;
   }  

   h5 {
  padding-bottom: 10px;
  font-size: 13px;
  color: #999;
  }

   ul, ol {
   padding: 0px;
   margin-top: 0;
   margin-right: 0;
   margin-bottom: 35px;
   margin-left: 35px;
    }

   li {
   padding-bottom: 5px;
   list-style-type: none;
   }

    li ol, li ul {
   font-size: 1.0em;
   margin-bottom: 0;
    padding-top: 5px;
     }

    #container {
    width: 960px;
    margin: 0 auto;
    padding: 0;
    background-color: #000000;
       overflow:hidden;
    }

    #header {
    padding: 0px 15px;
   background: #08A036 url('images/header3.jpg') repeat-x scroll top left;
   margin: 0 auto;
   height: 90px;
   }

   #flag-header {
   height:80px;
  width:116px;
   }

   #logo-header{
   width:155px;
   height:57px;    
   }

   #header h1 a {
   color: #fff;
   padding-top: 40px;
   font-size: 40px;
   font-weight: normal;
   text-transform: uppercase;
   text-decoration: none;
   letter-spacing: -3px;
     float: left;
   }

   #header h2 {
   color: #366E30;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
margin-left: 20px;
margin-top: 48px;
padding-left: 4px;
letter-spacing: 0;
}

#nav {
padding:0px;
margin:0px;
width:960px;
height:37px;
margin-right:auto;
margin-left:auto;
background-color:#31D549;
border:none;
}

#nav ul{
padding:0;
margin:0;
background:#666;
list-style:none;
width:auto;
}

#nav li ul{
width:200px;
}

#nav li{
float:left;
}

#nav li li{
display:block;
float:none;
width:200px;
margin:0px;
padding:0px;
} 

#nav ul li{
background-color: #31D549;
float: left;
position: relative;
list-style-type: none;
width: auto;
}

#nav ul li a{
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-size:12px;
font-color:#fff;
font-style:normal;
text-decoration:none;
display:block;
line-height:35px;
width:90px;
height:32px;
text-align:left;    
font-weight:bold;
padding:0px 5px 0px 5px;
}

#nav ul ul li {
 display:block;
float:none;
width:225px;
white-space:nowrap;
}

#nav ul ul {
position:absolute;
visibility:hidden;
width:auto;
}

#nav ul li:hover ul{
visibility:visible;
}

#nav ul li:hover{
background-color:#2AC523;
}

#nav a {
display:block;
width:200px;
text-align:center;
}

#nav ul li a:hover{
font-color:#fff;
}

#nav li a{
color:#ffffff;
display:block;
font-weight:normal;
text-decoration:none;
}

#body {
background: none;
margin: 0 auto;
padding: 20px 12px;
width: 960px;
background-color: #ccffcc;
float: none;
min-width:750px;
max-width:960px;
}

#content {
float: left;
padding: 0px;
width: 540px;
}

#content h1 {
color: #fff;
font-family: Lucida, "Lucida Sans", Geneva, Arial, sans-serif;
font-size: 13px;
letter-spacing: -0.5px;
border-bottom: 1px solid #090;
text-transform: uppercase;
margin: 0;
line-height: 1.9em;
padding: 5px;
font-weight: bold;
background: #50A145 url('images/header.jpg') repeat-x center;
text-align: center;
}

.box {
margin: 0;
padding: 10px;
background-color: #ccffcc;
text-align: left;
}

.box p{
text-align:left;
}

.sidebar {
width: 186px;
padding: 0;
float: right;
background-color:#ccffcc;
}

.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
color: #090303;
}

.sidebar ul li {
margin-bottom: 20px;
line-height: 30px;
}

.sidebar li ul {
padding: 10px;
background-color: #fff;
}

.sidebar li ul li {
display: block;
border-top: none;
padding: 6px 2px;
margin: 0;
line-height: 24px;
font-size: 13px;
border: none;
text-align: left;
}

.sidebar li ul li a {
font-weight: normal;
color: #222;
}
.sidebar li ul li a:hover {
 color: #000;
}

.sidebar li ul.blocklist li {
padding: 0;
display: inline;
}

.sidebar li ul.blocklist li a {
display: block;
border-bottom:1px solid #e0e0e0;
padding: 6px 5px;
text-decoration: none;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}

.sidebar h4 {
color: #fff;
font-family: Lucida, "Lucida Sans", Geneva, Arial, sans-serif;
font-size: 13px;
letter-spacing: -0.5px;
border-bottom: 1px solid #090;
text-transform: uppercase;
margin: 0;
line-height: 30px;
padding: 5px;
font-weight: bold;
background: #50A145;
text-align: center;
}

.sidebar li ul.blocklist li {
padding: 0;
display: inline;
}

 .myButton {
 -moz-box-shadow: 0px 10px 14px -7px #3dc21b;
 -webkit-box-shadow: 0px 10px 14px -7px #3dc21b;
 box-shadow: 0px 10px 14px -7px #3dc21b;
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #44c767), color-stop(1, #5cbf2a));
 background:-moz-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
 background:-webkit-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
 background:-o-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
 background:-ms-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
 background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#44c767', endColorstr='#5cbf2a',GradientType=0);
 background-color:#44c767;
 border:1px solid #18ab29;
 display:inline-block;
 cursor:pointer;
 color:#ffffff;
 font-family:arial;
  font-size:13px;
 font-weight:bold;
 padding:11px 11px;
 text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}

.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));
background:-moz-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-webkit-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-o-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-ms-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cbf2a', endColorstr='#44c767',GradientType=0);
background-color:#5cbf2a;
}
.myButton:active {
position:relative;
top:1px;
}
.clear {
clear: both;
}
.sidebar2 {
width: 190px;
float: left;
padding-bottom: 0;
padding-left: 0;
padding-right: 0px;
padding-top: 0;
}
.sidebar2 ul {
margin: 0;
padding: 0;
list-style:none;
}
.sidebar2 ul li {
margin-bottom: 20px;
line-height: 30px;
}

  .sidebar2 li ul {
   padding: 10px;
   background-color: #ccffcc;
   } 

  .sidebar2 li ul li {
   display: block;
   border-top: none;
   padding: 6px 2px;
   margin: 0;
   line-height: 24px;
  font-size: 13px;
    border: none;
   }
   .sidebar2 li ul li a {
    font-weight: normal;
   color: #222;
  }
   .sidebar2 li ul li a:hover {
  color: #000;
  }

  .sidebar2 li ul.blocklist li {
  padding: 0;
  display: inline;
   }

  .sidebar2 li ul.blocklist li a {
  display: block;
  border-bottom: 1px solid #e0e0e0;
  padding: 6px 5px;
  text-decoration: none;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  text-align: left;
  }

   .sidebar2 h4 {
   color: #fff;
   font-family: Lucida, "Lucida Sans", Geneva, Arial, sans-serif;
   font-size: 13px;
   letter-spacing: -0.5px;
   border-bottom: 1px solid #090;
   text-transform: uppercase;
   margin: 0;
   line-height: 30px;
   padding: 5px;
   font-weight: bold;
   background: #50A145;
   }

  .sidebar2 li ul.blocklist li {
   padding: 0;
   display: inline;
   }

   #footer {
   padding: 5px 13px 0;
   height: 30px;
   color:#000;
   }

   #footer p {
   color: #999;
   }

   #footer p a {
   color: #fff;
   font-weight: bold;
  }

3 个答案:

答案 0 :(得分：0)

我认为当用户放大/缩小浏览器显示时，它会自动使您的网站元素变得更大/更小。也许你需要重新设计你的网站。告诉我们您网站的设计类型。

*糟糕的语言，谷歌翻译

答案 1 :(得分：0)

我认为您的问题与使用像素进行定位和调整元素有关。当用户缩放时，浏览器会缩放文本但不缩放容器。

您应该使用em单元来扩展您的布局。

只需谷歌“px vs em”或“流畅布局”

答案 2 :(得分：0)

它会移动，因为您使用绝对定位来定位div项目，只在必要时才使用它。我不知道您的网站应该是什么样子，因为您没有提供任何屏幕截图或链接。另外我不明白你代码的这一部分：

    <ul>
    <li><a href="#">Products</a>
    <ul>

如果有一种方法可以在没有绝对定位的情况下定位元素，那么您应该这样做而不是进行绝对定位。您只在必要时使用它。请为我添加屏幕截图或链接，以了解网站的外观，我会看看我是否可以提供更多帮助！

相关问题
最新问题