1. 首頁
  2. 問答
  3. 顯示Div的邊框而不是父級的

顯示Div的邊框而不是父級的

2010-03-02 60 views
0

這是此主題的延續：Div Borders Affecting Padding。我有對準像我想要的文字，但現在我需要隱藏的黑線，是Active標籤下方 - 這樣http://i.imgur.com/jYMhP.png顯示Div的邊框而不是父級的

來源：

<!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. 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> 

    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%; 
     border-bottom: solid 1px black; 

     } 

    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; 
     padding-right:15px; 
     /*border-bottom: dotted 1px black;*/ 
     /*border-top: solid 1px #EEE;*/ 
     text-align:left; 
border-top: solid 1px transparent; border-right: solid 1px transparent; border-left: solid 1px transparent; 

     } 


    ul#nav li.about-active { 

     border-left: solid 1px black; 
     border-top: solid 1px black; 
     border-right: solid 1px black; 
     border-bottom: solid 1px white; 
     background-color:white; 
     } 


    ul#nav li.process-active { 

     border-left: solid 1px black; 
     border-top: solid 1px black; 
     border-right: solid 1px black; 
     background-color:white; 
     border-bottom: solid 1px white; 
     height:22px; 

     } 

    ul#nav li.projects-active { 


     border-left: solid 1px black; 
     border-top: solid 1px black; 
     border-right: solid 1px black; 
     background-color:white; 
     border-bottom: solid 1px white; 
     height:22px; 
     } 

    ul#nav li.contact-active { 

     border-left: solid 1px black; 
     border-top: solid 1px black; 
     border-right: solid 1px black; 
     background-color:white; 
     border-bottom: solid 1px white; 
     height:22px;   
     } 

    ul#nav li.about { 

     /*border-bottom: solid 1px black;*/ 
     } 

    ul#nav li.process { 
     /*width:110px;*/ 

    /* border-bottom: solid 1px black;*/ 

     } 

    ul#nav li.projects { 
     /*width:110px;*/ 

    /* border-bottom: solid 1px black;*/ 
     } 

    ul#nav li.contact { 
     /*width:110px;*/ 

     /*border-bottom: solid 1px black;*/ 
     } 

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

     } 

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



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

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

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

來源

2010-03-02 jriggs

回答

2

類似於F.Aquino's answer，幾乎可以肯定的是，最簡單的解決方案是移動你的.about-active以覆蓋邊界。我個人做這種方式，雖然：

.about-active { 
    padding-bottom: 1px; 
    margin-bottom: -1px; 
}

的padding-bottom一個像素（你想覆蓋邊框的寬度，以及margin-bottom: -1px;拉迫使.about-active元素了內的文本形狀由1px的下降的想法是這樣的文本保持其與其餘列表元素水平對齊方式。

但無論哪種方式將工作一樣好。

來源

2010-03-02 14:59:12

+0

ty先生！有時候css非常令人沮喪，我甚至沒有提到搜索，每天都在學習。 – jriggs 2010-03-02 15:17:42

+0

你會到達那裏;使用CSS的訣竅是找出盒式模式的使用Firebug或Chrome的開發工具，IE開發人員工具欄（我認爲...）或Opera的Dragonfly，然後開始變得更有意義。首先爲一個理智的瀏覽器編碼，並且不要在*完成IE瀏覽器之後（至少當天，至少...）=） – 2010-03-02 15:24:00

0 
.about-active 
{ 
    position: relative; 
    bottom: -1px; 
}

來源

2010-03-02 14:53:53

+0

你好，這工作，但隨後重新創建我只是解決了這一問題 - 它推文向下1個像素時，鏈接處於活動狀態，然後在單擊下一個鏈接時彈出備份。我如何解決這個問題？ – jriggs 2010-03-02 14:59:00

+0

啊，@jriggs，看到我發佈的答案，因爲您一定已經輸入了評論... =） – 2010-03-02 14:59:40

3

要添加Ø n to ricebowl的回答，

您可以將這4個選擇器合併爲一個。

將每個菜單標籤li的類屬性從'menuName-active'更改爲'menuName active'。使用空格而不是 - 給元素一個'menuName'類和一個'active'類。元素將不再具有'menuName-active'類。

由於每個菜單標籤使用相同的樣式，你可以用這一個選擇：

ul#nav li.active{ 
    background-color:white; 
    border-color:black black white; 
    border-style:solid; 
    border-width:1px; 
    height:22px; 
    margin-bottom:-1px; 
    padding-bottom:1px; 
}

來源

2010-03-02 15:05:07 SomewhereThere

+0

這是一個很好的觀點，但是，當我投票時，回答（歡迎來到Stackoverflow！），我會提供OP可能已經使用此表單的原因。 – 2010-03-02 15:08:59

+0

其實，我從頭開始編寫css是一個很新的東西，所以我甚至沒有意識到這是一個選項 - 它的命名非常有趣。現在我正在解析uri（php）並使用腳本邏輯來設置類。如果我能得到它的工作，這個方法可能會更好（更高效）。當我學習新技術時，我非常欣賞這樣的指針。 – jriggs 2010-03-02 15:21:49

+0

我試過這種方法沒有快樂，可以擴展一下，謝謝 – jriggs 2010-03-02 15:41:23

相關問題

 相關問題