1. 首頁
  2. 問答
  3. 影響填充的Div邊框

影響填充的Div邊框

2010-03-01 221 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

相關問題

 相關問題