Div边界影响填充

时间：2010-03-01 19:42:19

标签： html

我正在处理最顶层的链接 - 当点击一个链接时，我改变了这个类，这样就可以看出你所在的页面。我很确定这是导致这种情况的侧边和顶部边框 - 看到它点击“接触”链接并且两者之间的链接将一些像素移到侧面。所选链接文本也是另一个下方1或2个像素。有什么建议吗？

这不是很明显，但我现在已经了解了细节。

html,body{margin:0}

body {
    font-family: "Lucida Grande", Verdana, "Trebuchet MS", Helvetica, Arial, sans-serif;
    font-size: 100%;
    line-height: 140%;
    color: #333333;
    background-color: #eee;
    }

div.content {
    font-size: 80%;
    background-color: #FFFFFF;
    margin-left:200px;
    padding:15px;
    }

div.top-margin{
    height: 15px ;
    background-color:#000;
    }

div.top{
    /*border-bottom: 1px solid #000;*/ 
    width:100%;
    position: relative;
    }

div.left{
    float:left;
    width:200px;
    height:770px;
    border-right: 1px solid #000;
    font-size: 80%;
    padding-top:20px;
    }

div.body{
    height: 770px;
    background-color: #FFFFFF;
    /*margin: 5px 5px 5px 5px;*/
    padding: 6px;
    font-size: 90%;
    }

div.logo{
    height:125px;
    width:250px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    }

div.main{
    width: 1100px ;
    margin-left: auto ;
    margin-right: auto ;
    }

div.nav-links{
    float:right;
    position: absolute;
    bottom: 0;
  /*  margin-left:250px;*/
    margin-bottom: 0px;
    width:100%;
    }

div.header-link{
    display:inline;
    margin:0 30px 0 0;
    }

 .logo-link{
    border-style: none;
    }

div#nav-links ul li {
    float:left;
    overflow:hidden;
    position:relative;
    padding-left:15px;
    /*border-bottom: dotted 1px black;*/

    }


ul#nav li.about-active {
    /*width:110px;*/
    padding-right:19px;
    /*border-bottom: solid 1px black;*/
    border-left: solid 1px black;
    border-top: solid 1px black;
    border-right: solid 1px black;
    background-color:white;

    }


ul#nav li.process-active {
    /*width:110px;*/
    padding-right:19px;
    border-left: solid 1px black;
    border-top: solid 1px black;
    border-right: solid 1px black;
    background-color:white;

    }

ul#nav li.projects-active {
    /*width:110px;*/
    padding-right:19px;
    border-left: solid 1px black;
    border-top: solid 1px black;
    border-right: solid 1px black;
    background-color:white;

    }

ul#nav li.contact-active {
    /*width:110px;*/
    padding-right:19px;
    border-left: solid 1px black;
    border-top: solid 1px black;
    border-right: solid 1px black;
    background-color:white;

    }

ul#nav li.about {
    /*width:110px;*/
    padding-right:20px;

    border-bottom: solid 1px black;
    }

ul#nav li.process {
    /*width:110px;*/
    padding-right:20px;

    border-bottom: solid 1px black;
    }

ul#nav li.projects {
    /*width:110px;*/
    padding-right:20px;

    border-bottom: solid 1px black;
    }

ul#nav li.contact {
    /*width:110px;*/
    padding-right:20px;

    border-bottom: solid 1px black;
    }

    ul#nav li.filler-left { 
    border-bottom: solid 1px black;
    padding-left:311px;
    margin-left:210px;
    /*width:305px;*/

    }

    ul#nav li.filler {  
    padding-right:20px;
    border-bottom: solid 1px black;
    width:10%;
    }



ul#nav a {
    text-decoration: none;
    }

ul#nav a:hover {    
    text-decoration: none;
    color:blue;
    }

div.footer{
    float:right;
    font-size: 70%;
    }

<!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>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
    <meta name="generator" content="" />
    <title>
      NCB
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />

    <link type="text/css" rel="stylesheet" href="http://joe-riggs.com/chip/style.css" />

  </head>
  <body> 
    <div class="top-margin"></div>
    <div class="main">
      <div class="top">
        <div class="logo">
        <a href="http://joe-riggs.com/chip"><img class="logo-link" src="http://joe-riggs.com/chip/images/logo.jpg" alt="logo" height="125px" width="250px" /></a>

        </div>
        <div class="nav-links" id="nav-links">
          <ul id="nav">

            <li class="filler-left"><a href="#">&nbsp;</a>
            </li>
            <li class="about-active"><a href="http://joe-riggs.com/chip/">About</a>
            </li>
            <li class="process"><a href="http://joe-riggs.com/chip/process">Process</a>

            </li>
            <li class="projects"><a href="http://joe-riggs.com/chip/projects">Projects</a>
            </li>
            <li class="contact"><a href="http://joe-riggs.com/chip/contact">Contact</a>
            </li>
            <li class="filler"><a href="#">&nbsp;</a>
            </li>
          </ul>

        </div>
      </div>

      <div class="left">
        <ul>
            <li>Links</li>
        </ul>
      </div>
      <div class="content">

      <img src="images/architect.png" alt="me" style="float:left; padding-right:10px;" />
       So this is the main page - the first page people will see when they come
       to your page.  Maybe we could put a nifty pic of you doing something
       architect looking.  Also a general overview would be nice.  This text
       can go over top of a faded background picture too.
       <br />
      <br />
        Donec velit nibh, pellentesque in fringilla a, blandit id nibh. Class
        aptent taciti sociosqu ad litora torquent per conubia nostra, per
        inceptos himenaeos. Nam posuere mattis velit eget rhoncus. Maecenas
        bibendum tristique dolor, nec varius nulla porta eget. Aenean turpis
        ligula, ornare in consectetur vitae, aliquet id nulla. Vivamus bibendum
        sapien id neque lacinia vel viverra ante luctus. Sed lacinia velit id
        diam vulputate sollicitudin. Integer viverra libero vel enim dapibus
        rutrum. Praesent vel ipsum tortor. Pellentesque porttitor ante sed
        felis pretium nec rhoncus eros lacinia. Nam a massa nec sapien eleifend
        condimentum. Fusce ut augue id libero condimentum facilisis.<br />
        <br />
        Donec metus turpis, aliquet euismod tempor ut, vehicula condimentum
        odio. Morbi vulputate imperdiet nibh et porta. Etiam et nulla est, ut
        rhoncus nisi. Mauris eleifend lectus nunc, eu elementum odio. Aliquam
        erat volutpat. Morbi et dolor sit amet enim malesuada pretium sed quis
        odio. Vivamus convallis aliquam massa, blandit vehicula justo consequat
        in. Sed imperdiet rutrum volutpat. Nunc dignissim aliquet mattis. Lorem
        ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu quam,
        euismod ut porttitor non, lobortis vitae massa. Aliquam venenatis purus
        id mauris consequat vel luctus quam vulputate. Duis in neque libero.
        Aenean pretium pharetra justo vel dapibus. Donec risus felis, facilisis
        in vestibulum sit amet, tincidunt sit amet tellus. Donec ullamcorper
        euismod lacus id pulvinar.<br />
        <br />

        Donec metus turpis, aliquet euismod tempor ut, vehicula condimentum
        odio. Morbi vulputate imperdiet nibh et porta. Etiam et nulla est, ut
        rhoncus nisi. Mauris eleifend lectus nunc, eu elementum odio. Aliquam
        erat volutpat. Morbi et dolor sit amet enim malesuada pretium sed quis
        odio. Vivamus convallis aliquam massa, blandit vehicula justo consequat
        in. Sed imperdiet rutrum volutpat. Nunc dignissim aliquet mattis. Lorem
        ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu quam,
        euismod ut porttitor non, lobortis vitae massa. Aliquam venenatis purus
        id mauris consequat vel luctus quam vulputate. Duis in neque libero.
        Aenean pretium pharetra justo vel dapibus. Donec risus felis, facilisis
        in vestibulum sit amet, tincidunt sit amet tellus. Donec ullamcorper
        euismod lacus id pulvinar.
      </div>
    <div class="footer">
    <br />
    copyright &copy; 2010
    </div>
    </div><!--main-->
  </body>
</html>

3 个答案:

答案 0 :(得分：2)

我相信如果你添加：

border-top：solid 1px #FFF; border-right：solid 1px #FFF; border-left：solid 1px #FFF;

到你的'div＃nav-links ul li'课程，它可能会解决问题。出现问题是因为您为选定的li添加了1px边框，这将使其他标签超过1px。如果它们已经有1px边框，那么你所做的只是改变颜色。

答案 1 :(得分：0)

实际上看起来问题是由于边框（选中时为顶部，未选中时为底部）。边框实际上会影响页面上元素的高度/宽度。

我建议在所有侧面保持1px实线边框，但只需更改颜色即可使其“可见”。这样他们的定位不会因选择而改变。

您可以通过W3Schools CSS Border Colors

了解如何在不同的边框上使用不同的颜色

答案 2 :(得分：0)

你是对的;这是因为边界。您必须调整所选标签的填充/边距或宽度/高度以进行补偿。

相关问题
最新问题