nicht angemeldet
Hi Matthias,
Das kann dir niemand sagen (bis auf den Syntaxfehler
..), weil dazu die Kenntnis des HTML erforderlich ist.
Ich versuchs mal. Bisher hab ich:
/* Gesamtnavigation */
#tabnavigation {
padding: 20px; /* Abstand nach oben */
background: none;
border-width: 0px; /* Rahmen um Alles */
}
/* Hauptnavigation */
.maintab {
font-family:tahoma, verdana, arial;
font-size:11px;
font-weight:bold;
margin: 0px;
}
/* Subnavigation */
.subtab {
font-size: 80%;
font-weight:normal;
}
/* Hintergrund der Maintabs */
#tabnavigation .ui-tabs-nav {
padding-left: 0px;
background: transparent;
border-width: 0px 0px 1px 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
border-color: #000000;
}
/* Inhalt der Subtabs */
#tabnavigation .ui-tabs-panel {
background: #f5f3e5;
border-width: 0px 1px 1px 1px;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
padding-top: 5px; /* oben */
padding-right: 5px; /* rechts */
padding-bottom: 5px; /* unten */
padding-left: 5px; /* links */
}
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>UI Tab Navigation</title>
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./jquery-ui-1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="./jquery-ui-1.11.4/jquery-ui.css" type="text/css" media="all">
<style>
/* Gesamtnavigation */
#tabnavigation {
padding: 20px; /* Abstand nach oben */
background: none;
border-width: 0px; /* Rahmen um Alles */
}
/* Hauptnavigation */
.maintab {
font-family:tahoma, verdana, arial;
font-size:11px;
font-weight:bold;
margin: 0px;
}
/* Subnavigation */
.subtab {
font-size: 80%;
font-weight:normal;
}
/* Hintergrund der Maintabs */
#tabnavigation .ui-tabs-nav {
padding-left: 0px;
background: transparent;
border-width: 0px 0px 1px 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
border-color: #000000;
}
/* Inhalt der Subtabs */
#tabnavigation .ui-tabs-panel {
background: #f5f3e5;
border-width: 0px 1px 1px 1px;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
padding-top: 5px; /* oben */
padding-right: 5px; /* rechts */
padding-bottom: 5px; /* unten */
padding-left: 5px; /* links */
}
</style>
<script>
$(function() {
$('article.tabs').tabs({
collapsible: true
});
});
</script>
</head>
<body>
<article id="tabnavigation" class="tabs">
<ul>
<li><a class='maintab' href="#tabs-nohdr-1">Link 1</a></li>
<li><a class='maintab' href="#tabs-nohdr-2">Link 2</a></li>
<li><a class='maintab' href="#tabs-nohdr-3">Link 3</a></li>
<li><a class='maintab' href="#tabs-nohdr-1">Link 4</a></li>
</ul>
<div class='subtab' id="tabs-nohdr-1">
<p>Proin elit arcu.</p>
</div>
<div class='subtab' id="tabs-nohdr-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat.</p>
</div>
<div class='subtab' id="tabs-nohdr-3">
<p>Mauris eleifend est et turpis. </p>
</div>
</body>
</html>
Ich hätte es gerne in ein fiddle gepackt, aber ich komme mit dem neuen System dort nicht klar. Ich weiß nicht, wie man jquery und jquery ui einbindet. Das war früher selbsterklärend, heute weiß ich nicht, wie es gemacht wird :-(
Felixi
Matthias Apsel
Gunnar Bittersmann