| Autor |
Nachricht |
wysiwyg
Threadersteller
Dabei seit: 02.03.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 29.06.2010 11:46
Titel "Tab-Navi" in Wordpress |
  |
|
Hallo zusammen,
ich möchte eine Art Tab-Navi in Wordpress erstellen, bei der es zwei Tabs gibt, wobei das inaktive im Hintergrund steht.
Hier ein Screenshot zur Verdeutlichung:
Der derzeitige CSS-Code für die Navi sieht so aus:
| Code: | #access a { /*nicht aktives Tab*/
display:block;
text-decoration:none;
color:#CCC;
border: 1px solid #CCC;
border-bottom:none;
padding: 5px 15px;
}
#access ul li.current_page_item > a { /*aktives Tab */
color: #003366;
border: 1px solid #003366;
border-bottom:none;
} |
Die lange Linie wird hierdurch definiert:
| Code: | #access {
margin: 0 auto;
width: 940px;
display:block;
float:left;
margin: 15px 0 0 0;
border-bottom: 1px solid #003366;
} |
Code in der header.php:
| Code: | div id="access" role="navigation">
<?php ?>
<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'rryl' ); ?>"><?php _e( 'Skip to content', 'rryl' ); ?></a></div>
<?php ?>
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
</div> |
Mein Problem ist nun, dass beim aktiven Tab die untere Linie weg soll, damit es auch wie ein Tab aussieht. Wie muss ich da vorgehen?
Lieben Dank für Eure Antworten!
|
|
| |
  |
 |
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: 
|
Verfasst Di 29.06.2010 12:18
Titel
|
|
|
Eine von vielen Möglichkeiten wäre, padding-bottom des betreffenden Links um 1px zu erhöhen und durch margin-bottom: -1px; auszugleichen, dann liegt der Link über der border von ul und verdeckt sie durch seinen Hintergrund (der IE < 7 braucht dabei noch pos. rel. für den betr. Link).
Zuletzt bearbeitet von heiko_rs am Di 29.06.2010 12:19, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
wysiwyg
Threadersteller
Dabei seit: 02.03.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 29.06.2010 12:37
Titel
|
|
|
| heiko_rs hat geschrieben: | | Eine von vielen Möglichkeiten wäre, padding-bottom des betreffenden Links um 1px zu erhöhen und durch margin-bottom: -1px; auszugleichen, dann liegt der Link über der border von ul und verdeckt sie durch seinen Hintergrund (der IE < 7 braucht dabei noch pos. rel. für den betr. Link). |
Lieben dank für die Antwort. Leider hat das Ergebnis nicht zum Ziel geführt. Hier ein Screenshot (zur Verdeutlichung mit jeweils 3px):
Und hier der Code:
| Code: | lange Linie:
#access {
background: #fff;
margin: 0 auto;
width: 940px;
display:block;
float:left;
margin: 15px 0 0 0;
border-bottom: 1px solid #003366;
}
aktiver Tab:
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
color: #003366;
border: 1px solid #003366;
border-bottom:none;
padding-bottom:3px;
margin-bottom:-3px;
position:relative;
}
nicht aktiver Tab:
#access a {
display:block;
text-decoration:none;
color:#CCC;
border: 1px solid #CCC;
border-bottom:none;
padding: 5px 15px;
} |
Bin für jeden weiteren Vorschlag dankbar!
//edit:
damit klar wird, was was ist:
Zuletzt bearbeitet von wysiwyg am Di 29.06.2010 12:53, insgesamt 2-mal bearbeitet
|
|
| |
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Di 29.06.2010 12:48
Titel
|
|
|
|
Du hast es völlig verdreht - lies meinen Post nochmal genau.
|
|
| |
|
|
wysiwyg
Threadersteller
Dabei seit: 02.03.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 29.06.2010 12:52
Titel
|
|
|
| heiko_rs hat geschrieben: | | Du hast es völlig verdreht - lies meinen Post nochmal genau. |
Stimmt, der gepostete Code ist falsch (wird gleich editiert). Ich hab Deine und die gepostete Variante probiert, beides ohne Erfolg.
|
|
| |
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Di 29.06.2010 13:05
Titel
|
|
|
Dein editierter Code ist genauso verquer wie der vorige, was versuchst Du denn da immer? Die normalen Links haben padding-bottom: 5px;, was ist so schwer daran, diesen Wert für den aktiven Tab um 1px auf 6px zu erhöhen und die Deklaration margin-bottom: -1px; hinzuzufügen?
Zuletzt bearbeitet von heiko_rs am Di 29.06.2010 13:06, insgesamt 1-mal bearbeitet
|
|
| |
|
|
wysiwyg
Threadersteller
Dabei seit: 02.03.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 29.06.2010 13:32
Titel
|
|
|
| heiko_rs hat geschrieben: | | Dein editierter Code ist genauso verquer wie der vorige, was versuchst Du denn da immer? Die normalen Links haben padding-bottom: 5px;, was ist so schwer daran, diesen Wert für den aktiven Tab um 1px auf 6px zu erhöhen und die Deklaration margin-bottom: -1px; hinzuzufügen? |
Ich glaub, ich hab heute einen neben mir stehen. Sorry!
Was jetzt klappt ist, dass bei beiden Tabs keine untere Linie mehr zu sehen ist. Allerdings soll ja beim inaktiven Tab eine Linie sein. Kannst du mir da noch einen Tipp geben?
Danke!!
|
|
| |
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Di 29.06.2010 13:38
Titel
|
|
|
Auch das schrieb ich bereits: Nur der aktive Tab bekommt besagte Änderungen nicht beide.
Zuletzt bearbeitet von heiko_rs am Di 29.06.2010 13:38, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
CSS UL LI NAVI
Horizontale ul-Navi
Bilder Navi
navi gesucht
Farbe der Navi
IE Problem mit CSS Navi
|
|
Willkommen auf dem Portal für Mediengestalter
