1. 首页
  2. 问答
  3. 影响填充的Div边框

影响填充的Div边框

2010-03-01 99 views
1

我正在研究链接的顶部 - 单击链接时，我更改了类，以便明确您正在浏览哪个页面。我非常确定这是导致这种情况的侧面和顶部边框 - 单击“联系人”链接并在两者之间的链接将几个像素移到侧面。另外，选定的链接文字是另一个下方1或2个像素。有什么建议么？影响填充的Div边框

这不是很明显，但我在这一点上的细节。

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>

来源

2010-03-01 jriggs

+2

有没有什么办法可以在这里发布相关的标记？否则，只要你解决这个问题，这个问题就变得对在搜索期间发现它的任何其他人完全没用。 – 2010-03-01 19:52:45

回答

2

我相信如果你加上：

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

到你的'div＃nav-links ul li'类，它可以解决这个问题。问题出现是因为您将1px边框添加到选定的li，这会将其他标签推到1px以上。如果他们已经有一个1px的边框，你所做的只是改变颜色。

来源

2010-03-01 20:09:18 Brett

+0

谢谢，这让我的垂直对齐 - 不能在所有的链接上使用边框，因为它会在其他地方的黑线上填充空白， – jriggs 2010-03-01 21:01:10

+0

'1px solid transparent'如果它不需要在ie6中工作，可能会更清洁。 – Jan 2010-11-21 17:48:40

0

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

我会建议保持所有边上的1px固体边界，但只需更改颜色使其“可见”或不。这样，他们的定位不会因选择而改变。

你可以看到如何通过W3Schools CSS Border Colors

来源

2010-03-01 19:48:34 NebuSoft

+0

或者只是使用'border-color：transparent;'为隐藏的边框... – Rob 2010-03-01 19:59:45

0

你是正确的有不同的边框两侧不同的颜色;这是因为边界。您必须调整所选标签的填充/边距或宽度/高度以进行补偿。

来源

2010-03-01 19:49:54

相关问题

 相关问题