Das eingebettete Bild beschreibt mein Layout. Wie Sie sehen können, ist das Problem in meinem horizontalen Menü. Zuerst ist es richtig ausgerichtet und dann hat die ausgewählte Registerkarte keine untere Grenze (was einen Front-Paper-Effekt erzeugt). Wenn Sie die zweite Registerkarte auswählen würden, hätte die 2. li keinen unteren Rand und der Rest wäre verbunden.Benutzerdefiniertes horizont.Menu CSS bottom-border-trick? benötigt
Problem ist, wie dies zu erreichen? Die einzige Lösung, an die ich denken kann, ist a: hover img, die leer wäre, um den ausgewählten unteren Rand zu löschen.
Der Kodex bisher:
body
{
font:100% 'century gothic', Verdana, Arial, Helvetica, sans-serif;
color:#3F3F3F;
}
#wrapper
{
width:960px;
height:700px; /*temp*/
margin:0 auto;
background:#FFF;
}
#header /*not visible on the embedded layout*/
{
width:960px;
height:91px;
}
#nav-bar
{
width:960px;
height:50px;
border-bottom:#000070 1px solid;
/*
If only <ul> has bottom border then i wouldn't have the bottom border for
the whole #nav-right. But this is also a problem for the selected
tab that doesn't have any
*/
}
#nav-left
{
float:left;
width:73px;
height:50px;
border-right:1px #000070 solid;
}
#nav-right
{
float:left;
width:882px;
height:50px;
display:inline-block;
position:relative;
/*now i can use absolute on the <ul> for bottom-right positioning*/
}
#nav-right ul
{
list-style: none;
/*padding: ... ;*/
position:absolute;
bottom:0px;
right:5px;
border-top:1px solid #000070;
border-left:1px solid #000070;
border-right:1px solid #000070;
}
#nav-right li
{
display:inline-block;
/*padding: ...;*/
}
#nav-right li a
{
/*padding: ...;*/
text-decoration:none;
margin:0;
color:#CCC;
}
#nav-right li a:hover
{
color:#000070;
font-weight:bold;
}
#content
{
width:960px;
clear:both;
}
#con-left{/*...*/}
#con-right{/*...*/}
HTML STRUCTURE:
<body>
<div id="wrapper">
<div id="header"><img src="#" /></div>
<div id="nav-bar">
<div id="nav-left"></div>
<div id="nav-right">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Items</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div> <!--END: nav-bar-->
<div id="content">
<div id="con-left"></div>
<div id="con-right">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices semper orci in euismod. Proin sed justo at lectus dapibus <br>
interdum. Donec quis elit massa, id porttitor eros. Nullam vel consectetur diam. <br>
Phasellus bibendum, justo sed vehicula luctus, velit lectus rhoncus velit, at placerat nibh sapien quis felis. Mauris id aliquet. <br>
Integer mattis convallis luctus. Vivamus suscipit euismod sodales. Suspendisse cursus, erat eu egestas gravida, est mi semper ,<br>
quis sagittis purus mi sit amet nisl. Praesent adipiscing molestie sem. Mauris vitae arcu nibh, tristique laoreet nisi. Proin quis<br>
id sapien condimentum facilisis et at odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <br>
Morbi eget est elit, nec rutrum enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.<br>
</p>
</div>
</div>
</div><!--END: wrapper-->
Vorschläge, wie das ohne Boden-Grenzeffekt für ausgewählte Registerkarten zu erreichen?
Ich bin nicht so gut, kleine Grafiken zu machen, wenn es möglich ist, würde ich es gerne mit CSS machen. Es macht nichts, wenn es ein paar Divs oder so hinzufügen.
besser zu geben und Ihre HTML-Struktur. Auch ein Live-Beispiel auf jsbin.com oder Ihrem Testserver würde mehr helfen. – Sotiris
html in Frage hinzugefügt. http://jsbin.com/ujomi5/2 – PathOfNeo
Ich hatte das gleiche Problem und fand [diese Lösung] (http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/). –