Afficher la bordure de Div au lieu du parent

Ceci est une continuation de ce fil: Div Borders Affecting Padding. J'ai le texte aligné comme je veux, mais maintenant je dois cacher la ligne noire qui se trouve sous l'onglet actif - comme celui-ci http://i.imgur.com/jYMhP.png Afficher la bordure de Div au lieu du parent

Source:

<!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%; 
     }

Source

2010-03-02 jriggs

De même à F.Aquino's answer, la solution la plus simple est, presque certainement, de déplacer votre .about-active pour couvrir la frontière. Personnellement, je le fais de cette façon, si:

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

le padding-bottom force le texte à l'intérieur de l'élément .about-activejusqu'à par un pixel (la largeur de la frontière que vous essayez de couvrir, et les margin-bottom: -1px; tractions la forme vers le bas par 1px, l'idée étant que cette façon le texte maintient son alignement horizontal avec les autres éléments de la liste.

Mais de toute façon fonctionnerait tout aussi bien.

Source

2010-03-02 14:59:12

ty monsieur! css est tellement frustrant à certains moments, rien que j'ai cherché même mentionné, apprendre tous les jours. – jriggs

Vous y arriverez; l'astuce avec CSS est de travailler sur le modèle de boîte -utiliser Firebug, ou les outils de développement de Chrome, la barre d'outils du développeur web IE (je pense ...) ou Operafly Dragonfly- et ensuite il commence à faire plus de sens. Code pour un navigateur sain d'abord, et ne buvez pas jusqu'à * après * vous avez fini avec IE (pour la journée, au moins ...) =) –

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

Source

2010-03-02 14:53:53

Salut cela fonctionne, mais il recrée le problème que je viens fixe - Il pousse le texte en baisse de 1 pixel lorsque la Le lien est actif, puis il réapparaît lorsque le lien suivant est cliqué. Comment puis-je résoudre ce problème? – jriggs

Ah, @jriggs, voir ma réponse affichée car vous devez avoir tapé le commentaire ... =) –

Pour ajouter o n à la réponse de ricebowl,

Vous pouvez fusionner les 4 sélecteurs en un seul.

Modifiez l'attribut de classe pour chaque onglet de menu li de 'nom_menu-actif' à 'nom_menu actif'. Utiliser l'espace au lieu de - donne à l'élément une classe 'menuName' et une classe 'active'. L'élément n'aura plus de classe 'menuName-active'.

Comme chaque onglet du menu utilise les mêmes styles que vous pouvez utiliser ce un sélecteur:

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; 
}

Source

2010-03-02 15:05:07 SomewhereThere

C'est un bon point, mais, alors que je suis en train de voter le réponse (bienvenue à Stackoverflow!), je vais offrir que l'OP pourrait avoir utilisé ce formulaire pour une raison. –

En fait, je suis assez nouveau pour coder css à partir de zéro, donc je n'ai même pas réalisé que c'était une option - c'est drôle à quel point le nom est proche. En ce moment, je suis l'analyse de l'uri (php) et en utilisant la logique de script pour définir la classe. Cette méthode peut être préférable (plus efficace) si je peux le faire fonctionner. J'apprécie vraiment les pointeurs comme celui que j'apprends de nouvelles techniques. – jriggs

J'ai essayé cette méthode sans joie, pouvez-vous développer un peu, merci – jriggs

Afficher la bordure de Div au lieu du parent

Répondre

Questions connexes