부모 대신에 Div의 국경 표시

이것은이 스레드의 연속입니다 : Div Borders Affecting Padding. ,부모 대신에 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

마찬가지로 F.Aquino's answer에이 http://i.imgur.com/jYMhP.png

소스처럼 - 내가 원하는처럼 정렬 텍스트를 가지고 있지만, 지금은 활성 탭 아래에있는 검은 선을 숨길 필요 가장 간단한 해결책은 거의 확실하게 국경을 덮기 위해 .about-active을 움직이는 것입니다. 그래도, 이런 식으로 할 개인적 것 :

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

가 padding-bottom 하나 개의 픽셀 (당신이 포함하려는 테두리의 폭과 margin-bottom: -1px; 당긴에 의해.about-active 요소 내부의 텍스트를 강제로 아래 1 x 1 픽셀 크기로 모양 는 생각은 텍스트가 남아있는 목록 요소를 수평 정렬을 유지하는이 방법 있다는 것.

그러나 어느 쪽이든 그냥 잘 작동.

출처

2010-03-02 14:59:12

ty sir! CSS는 때로는 너무 초조해합니다. 매일 언급하면서 이것에 대해서도 언급하지 않았습니다. – jriggs

거기에 도착합니다. CSS의 트릭은 Firebug 나 Chrome의 개발자 도구, IE 웹 개발자 도구 모음 (Opera ...) 또는 Opera의 잠자리를 사용하는 상자 모델을 작성한 다음 더 이해하기 시작하는 것입니다. 정상적인 브라우저를위한 코드를 작성하고 * IE *를 마친 후에는 마시지 마십시오. (당일, 적어도 ...) =) –

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

출처

2010-03-02 14:53:53

안녕하세요이 작품을하지만, 그때는 그냥 고정 된 문제를 다시 생성 - 그것은 텍스트를 할 때 아래로 1 개 픽셀을 밀어 링크가 활성화 된 후 다음 링크를 클릭하면 다시 팝업됩니다. 어떻게 수정해야합니까? – jriggs

아, @jriggs, 코멘트를 타이핑 했으므로 내 게시 된 답변을보십시오 ... =) –

추가하려면 오 n to ricebowl의 답변,

이러한 선택기를 모두 하나로 합칠 수 있습니다.

각 메뉴 탭 li의 클래스 속성을 'menuName-active'에서 'menuName active'로 변경하십시오. 대신에 공백을 사용하면 요소에 'menuName'클래스와 '활성'클래스가 제공됩니다. 이 요소에는 더 이상 '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

좋은 지적이지만, 투표를하는 동안 답변 (Stackoverflow에 오신 것을 환영합니다!), 나는 OP가 이유 때문에이 양식을 사용했을 수도 있다고 제안 할 것입니다. –

사실, 나는 처음부터 CSS를 코딩하는 것에 아주 익숙하다. 그래서 나는 이것이 선택 사항이라는 것을 깨닫지 못했다. 이름 짓기가 얼마나 까다로운 지 재미있다. 지금은 uri (php)를 파싱하고 스크립트 로직을 사용하여 클래스를 설정합니다. 이 방법이 효과적 일 수 있다면 더 좋을 것입니다. 나는 새로운 tehniques를 배울 때 이것 같이 포인터를 진짜로 평가한다. – jriggs

나는 기쁨이 방법을 시도, 조금 확장 할 수 있습니까, 감사합니다 Logged – jriggs

부모 대신에 Div의 국경 표시

답변

관련 문제