Um schreiben oder kommentieren zu können, benötigen Sie ein Benutzerkonto.
Sie haben schon ein Benutzerkonto? Melden Sie sich hier an.
Jetzt anmeldenHier können Sie ein neues Benutzerkonto erstellen.
Neues Benutzerkonto erstellen
Abend,
Ich möchte die Navigationsleiste so gestalten, dass die einzelnen Worte in den Zeile mit einer Linie abgetrennt sind. Wenn man über ein Wort fährt soll dann ein Mouseover Effekt das ganze hervorheben, also die ausgewählte Leiste und nicht nur das Wort ansich.
Meine Fragen wäre also:
1. Wie erstelle ich am leichtesten diese Trennlinien?
2. Wie erstelle ich dafür dann den Mouseover Effekt?
Hallo!
Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.
Das wird in der style.css definiert und ist bei jedem Theme anders.
Es gibt unwahrscheinlich viele Möglichkeiten für einen schicken MouseOver.
Wenn du kreativ bist und CSS verstehst dürfte es soweit keine Probleme geben.
Wenn nicht poste doch mal einen Link zu einem Effekt deiner Wahl und/oder deiner Seite/Theme :)
Prinzipiell sollen die einzelnen Menüpunkte mit einer Linie getrennt werden und wenn man mit der Maus herüberfährt, sollte sich der hellgraue Hintergrund verfärben.
Zur Veranschaulichung habe ich einen Screen angehängt.
Hier noch die Style.css. Evtl. könnt ihr mir sagen wo ich was einfügen sollte.
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background: #3A6F66;
color: #395127;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 0.8em;
text-align: center;
}
a:link,
a:visited {
color: #000;
background: inherit;
text-decoration:none;
}
a:hover,
a:active,
a:focus {
color:#f0f6f3;
background: inherit;
}
input, textarea {
color: #100719;
background: #100719;
border: 1px solid #100719;
padding: 1px;
margin:0px 3px 3px 0px;
}
input:hover,
textarea:hover {
color: #161A1A;
background: #100719;
border: 1px solid #100719;
}
textarea {
overflow: auto;
margin-bottom: 20px;
}
.absenden {
cursor: pointer;
background: #f4f5eb;
color: inherit;
}
.absenden:hover {
color:inherit;
background: #100719;
}
.zentrieren {
text-align: center;
}
.clear {
clear: both;
}
/*---| Kopfbereich |---*/
#wrapper {
max-width: 1024px;
background: #262626;
color: inherit;
margin:0 auto;
border: 1px solid #e9ecd9;
text-align: left;
}
#kopf {
background: url(images/header.jpg) repeat-x;
height: 164px;
border-bottom: 1px solid #e9ecd9;
}
#kopf h1 {
font-size: 2.0em;
text-align: center;
padding-top: 70px;
}
#kopf a:link,
#kopf a:visited {
color: #25321e;
background: inherit;
display: block;
}
#kopf a:hover,
#kopf a:active,
#kopf a:focus {
color: #a8bb8b;
background: inherit;
}
#blogtitel {
background: #7e9d58;
color: #395127;
height: 25px;
text-align: center;
letter-spacing: 1px;
word-spacing: 2px;
margin: 0px 160px;
border-left: 1px solid #395127;
border-right: 1px solid #395127;
}
#blogtitel p {
padding-top: 5px;
color: #e9ecd9;
background: inherit;
}
/*----| Sidebar |---*/
#links {
position: relative;
background: #A8A8A8;
color: inherit;
display: inline;
margin-top: -25px;
padding-top: px;
width: 160px;
overflow:hidden;
text-align: center;
}
#rechts {
position: relative;
background: #2F4F4F;
color: inherit;
display: inline;
margin-top: -190px;
padding-top: px;
width: 160px;
overflow:hidden;
text-align: center;
}
#links {
float: left;
}
#rechts {
float: right;
}
#links h2,
#rechts h2 {
font-size: 0.8em;
color: #fff;
border-bottom: 1px solid #fff;
padding-bottom: 3px;
margin: 0 auto;
}
#links ul,
#rechts ul {
text-align:left;
padding: 3px;
overflow: hidden;
}
#links li,
#rechts li {
list-style: none;
line-height: 1.5em;
}
#rechts form,
#links formm {
text-align: center;
}
/*--- | Inhalt |---*/
#content {
margin: 0 160px;
line-height: 1.3em;
background: #e9ecd9 url(images/content.jpg) no-repeat right bottom;
border: 1px solid #395127;
color: inherit;
padding: 15px;
}
#content a:link,
#content a:visited {
color: #7e9d58;
background: inherit;
text-decoration:none;
}
#content a:hover,
#content a:active,
#content a:focus {
color: #395127;
background: inherit;
}
#content ul,
#content ol {
margin-left: 1.8em;
}
#content h2 {
font-size: 1.3em;
}
#content h3 {
font-size: 1.1em;
}
#content h4 {
font-size: 1.0em
}
#content h2,
#content h3,
#content h4,
#content h5,
#content h6,
#content blockquote,
#content pre,
#content p,
#content ul,
#content ol {
margin-bottom: 0.6em;
}
#content blockquote {
background: #f0f2e4 url(images/bquote.gif) no-repeat;
color: #395127;
margin-left: 5px;
padding: 10px 10px 10px 40px;
border: 1px dashed #a8bb8b;
}
#content q {
font-style: oblique;
}
#content code,
#content pre {
font-size: 1.2em;
}
#content acronym,
#content abbr {
border-bottom: 1px dashed #395127;
cursor: help;
}
#content table {
border-collapse: collapse;
margin: 0 auto 0.8em auto;
font-size: 100%;
}
#content caption {
font-weight: bold;
margin-bottom: 5px;
}
#content th {
background: #a8bb8b;
color: #545d45;
border: 1px solid #545d45;
padding: 2px;
}
#content td {
color: #1f2522;
background: #f4f5eb;
border: 1px solid #a8bb8b;
padding: 2px;
}
/*---| Beitr�ge und Kommentare |---*/
#content .post {
padding-top: 10px;
overflow: hidden;
}
#content .post h2 {
background: url(images/posth3.gif) no-repeat;
padding-left: 28px;
font-size: 1.1em;
color: #7e9d58;
}
#content .entrytext {
}
#content .entrytext a:link,
#content .entrytext a:visited {
text-decoration: underline;
}
#content .entrytext a:hover,
#content .entrytext a:active,
#content .entrytext a:focus {
text-decoration: underline;
}
#content .post h2 a:link,
#content .post h2 a:visited {
background: transparent;
color: #7e9d58;
text-decoration: none;
}
#content .post h2 a:hover,
#content .post h2 a:active,
#content .post h2 a:focus {
text-decoration: underline;
}
#content .postmetadata {
border-top: 1px dotted #1f2522;
font-size: 0.8em;
line-height: 1.2em;
}
.commentlist li {
padding: 5px 10px 5px 5px;
margin: 0 0 10px 0;
}
.kommentar {
color: #1f2522;
background: #f4f5eb;
border: 1px solid #a8bb8b;
}
.autor_kommentar {
color: inherit;
background: #f9f9f5;
border: 1px solid #bbc9a3;
}
/*---| Seitennavigation |---*/
.navigation {
padding: 0 10px;
margin-bottom: 10px;
}
.prev {
float: right;
text-align: right;
font-size: 0.8em;
width: 50%;
}
.next {
float: left;
text-align: left;
font-size: 0.8em;
width: 50%;
}
/*---| Fu� |---*/
#fuss {
clear: both;
background: #758c60;
color: #d3ddc5;
text-align: center;
font-size: 0.9em;
padding: 10px 0;
line-height: 1.4em;
border-top: 1px solid #e9ecd9;
}
#fuss a:link,
#fuss a:visited {
color: #fff;
background: inherit;
text-decoration:none;
}
#fuss a:hover,
#fuss a:active,
#fuss a:focus {
color:#a8bb8b;
background: inherit;
}
/*---| Suchen |-----*/
#searchform input {
color: #1f2522;
background: #a8bb8b;
border:0;
font-weight: bold;
cursor: pointer;
font-size: 0.95em;
margin-bottom: 10px;
}
#searchform input:hover {
color: #303030;
background: #a8bb8b;
border: 0;
}
#searchform #s {
margin: 10px 0px 3px 0px;
padding: 3px;
background: #fff;
color: #1f2522;
border: 1px solid #1f2522;
cursor: default;
}
#searchform #s:hover {
background: #e9ecd9;
color: #1f2522;
border: 1px solid #1f2522;
}
/*---| Kalender |---*/
#wp-calendar {
border-collapse: collapse;
font-size: 0.8em;
border: 1px solid #1f2522;
line-height: 1.4em;
margin: 0 auto 10px auto;
}
#wp-calendar th {
background: #7e9d58;
color: #fff;
border: 1px solid #395127;
text-align: center;
}
#wp-calendar table.nav,
#wp-calendar th,
#wp-calendar td {
padding: 1px 2px;
}
#wp-calendar td {
color: #1f2522;
background:#e9ecd9;
border: 1px solid #1f2522;
text-align: center;
}
#wp-calendar #next a {
padding-left: 1px;
text-align: right;
}
#wp-calendar #prev a {
padding-right: 1px;
text-align: left;
}
#wp-calendar a {
display: block;
text-decoration: none;
}
#wp-calendar caption {
color: #1f2522;
background: inherit;
text-align: center;
font-weight: bold;
padding:5px 0;
margin: 0 auto;
}
#wp-calendar tbody td a {
color: #c73119;
background: inherit;
}
#wp-calendar tbody td a:hover {
background:inherit;
color: #7e9d58;
}
#wp-calendar #today {
background: #7e9d58;
color: #fff;
}
#wp-calendar #today a {
background:#7e9d58;
color: #c73119;
}
#wp-calendar #today a:hover {
background: #7e9d58;
color: #fff;
}
#wp-calendar tfoot td {
border: 0;
color: #fff;
background: #7e9d58;
}
#wp-calendar tfoot td a {
color: #fff;
background: #7e9d58;
}
#wp-calendar tfoot td a:hover {
color: #000;
background: #7e9d58;
}
/*-----Widgets-----*/
.textwidget {
margin: 8px 0;
}
/*-----nicht anzeigen-----*/CSS deiner ganzen Sidebar. Könnte so klappen, Link zur Seite bitte :D
/*----| Sidebar |---*/
#links {
position: relative;
background: #A8A8A8;
color: inherit;
display: inline;
margin-top: -25px;
padding-top: px;
width: 160px;
overflow:hidden;
text-align: center;
}
#rechts {
position: relative;
background: #2F4F4F;
color: inherit;
display: inline;
margin-top: -190px;
padding-top: px;
width: 160px;
overflow:hidden;
text-align: center;
}
#links {
float: left;
}
#rechts {
float: right;
}
#links h2,
#rechts h2 {
font-size: 0.8em;
color: #fff;
border-bottom: 1px solid #fff;
padding-bottom: 3px;
margin: 0 auto;
}
#links a:hover,
#links a:active,
#links a:focus {
color: #F0F6F3;
background: #B8B8B8;
}
#links ul,
#rechts ul {
text-align:left;
padding: 3px;
overflow: hidden;
}
#links li,
#rechts li {
list-style: none;
line-height: 1.5em;
border-bottom: 1px solid #111
}
#rechts form,
#links formm {
text-align: center;
}PM ist raus.
Schön üben und weiterlesen! :)
/*
Theme Name: Nature
Theme URI: http://www.gabis-wordpress-templates.de/
Description: 3-spaltiges Schmucktemplate, halbfluid, Fenstergroesse ab 800x600, widget-faehig, ab WP Version 1.5.2
Version: 1.0
Author: Gabriele von der Ohe
Author URI: http://www.gabis-wordpress-templates.de/
*/
/*---| Dateiweite Einstellungen |---*/
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background: #3A6F6;
color: #395127;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 0.8em;
text-align: center;
}
a:link,
a:visited {
color: #000;
background: inherit;
text-decoration:none;
}
a:hover,
a:active,
a:focus {
color:#f0f6f3;
background: inherit;
}
input, textarea {
color: #100719;
background: #100719;
border: 1px solid #100719;
padding: 1px;
margin:0px 3px 3px 0px;
}
input:hover,
textarea:hover {
color: #161A1A;
background: #100719;
border: 1px solid #100719;
}
textarea {
overflow: auto;
margin-bottom: 20px;
}
.absenden {
cursor: pointer;
background: #f4f5eb;
color: inherit;
}
.absenden:hover {
color:inherit;
background: #100719;
}
.zentrieren {
text-align: center;
}
.clear {
clear: both;
}
/*---| Kopfbereich |---*/
#wrapper {
max-width: 1024px;
background: #262626;
color: inherit;
margin:0 auto;
border: 1px solid #e9ecd9;
text-align: left;
}
#kopf {
background: url(images/header.jpg) repeat-x;
height: 164px;
border-bottom: 1px solid #e9ecd9;
}
#kopf h1 {
font-size: 2.0em;
text-align: center;
padding-top: 70px;
}
#kopf a:link,
#kopf a:visited {
color: #25321e;
background: inherit;
display: block;
}
#kopf a:hover,
#kopf a:active,
#kopf a:focus {
color: #a8bb8b;
background: inherit;
}
#blogtitel {
background: #7e9d58;
color: #395127;
height: 25px;
text-align: center;
letter-spacing: 1px;
word-spacing: 2px;
margin: 0px 160px;
border-left: 1px solid #395127;
border-right: 1px solid #395127;
}
#blogtitel p {
padding-top: 5px;
color: #e9ecd9;
background: inherit;
}
/*----| Sidebar |---*/
#links {
position: relative;
background: #A8A8A8;
color: inherit;
display: inline;
margin-top: -25px;
padding-top: px;
width: 160px;
overflow:hidden;
text-align: center;
}
#rechts {
position: relative;
background: #2F4F4F;
color: inherit;
display: inline;
margin-top: -190px;
padding-top: px;
width: 160px;
overflow:hidden;
text-align: center;
}
#links {
float: left;
}
#rechts {
float: right;
}
#links h2,
#rechts h2 {
font-size: 0.8em;
color: #fff;
border-bottom: 1px solid #fff;
padding-bottom: 3px;
margin: 0 auto;
}
#links a:hover,
#links a:active,
#links a:focus {
color: #F0F6F3;
}
.menu li {
border-bottom: 1px solid #111;
}
.menu li:hover {
background: #b8b8b8;
}
#links ul,
#rechts ul {
text-align:left;
padding: 3px;
overflow: hidden;
}
#links li,
#rechts li {
list-style: none;
line-height: 1.5em;
}
#rechts form,
#links formm {
text-align: center;
}
/*--- | Inhalt |---*/
#content {
margin: 0 160px;
line-height: 1.3em;
background: #e9ecd9 url(images/content.jpg) no-repeat right bottom;
border: 1px solid #395127;
color: inherit;
padding: 15px;
}
#content a:link,
#content a:visited {
color: #7e9d58;
background: inherit;
text-decoration:none;
}
#content a:hover,
#content a:active,
#content a:focus {
color: #395127;
background: inherit;
}
#content ul,
#content ol {
margin-left: 1.8em;
}
#content h2 {
font-size: 1.3em;
}
#content h3 {
font-size: 1.1em;
}
#content h4 {
font-size: 1.0em
}
#content h2,
#content h3,
#content h4,
#content h5,
#content h6,
#content blockquote,
#content pre,
#content p,
#content ul,
#content ol {
margin-bottom: 0.6em;
}
#content blockquote {
background: #f0f2e4 url(images/bquote.gif) no-repeat;
color: #395127;
margin-left: 5px;
padding: 10px 10px 10px 40px;
border: 1px dashed #a8bb8b;
}
#content q {
font-style: oblique;
}
#content code,
#content pre {
font-size: 1.2em;
}
#content acronym,
#content abbr {
border-bottom: 1px dashed #395127;
cursor: help;
}
#content table {
border-collapse: collapse;
margin: 0 auto 0.8em auto;
font-size: 100%;
}
#content caption {
font-weight: bold;
margin-bottom: 5px;
}
#content th {
background: #a8bb8b;
color: #545d45;
border: 1px solid #545d45;
padding: 2px;
}
#content td {
color: #1f2522;
background: #f4f5eb;
border: 1px solid #a8bb8b;
padding: 2px;
}
/*---| Beitr�ge und Kommentare |---*/
#content .post {
padding-top: 10px;
overflow: hidden;
}
#content .post h2 {
background: url(images/posth3.gif) no-repeat;
padding-left: 28px;
font-size: 1.1em;
color: #7e9d58;
}
#content .entrytext {
}
#content .entrytext a:link,
#content .entrytext a:visited {
text-decoration: underline;
}
#content .entrytext a:hover,
#content .entrytext a:active,
#content .entrytext a:focus {
text-decoration: underline;
}
#content .post h2 a:link,
#content .post h2 a:visited {
background: transparent;
color: #7e9d58;
text-decoration: none;
}
#content .post h2 a:hover,
#content .post h2 a:active,
#content .post h2 a:focus {
text-decoration: underline;
}
#content .postmetadata {
border-top: 1px dotted #1f2522;
font-size: 0.8em;
line-height: 1.2em;
}
.commentlist li {
padding: 5px 10px 5px 5px;
margin: 0 0 10px 0;
}
.kommentar {
color: #1f2522;
background: #f4f5eb;
border: 1px solid #a8bb8b;
}
.autor_kommentar {
color: inherit;
background: #f9f9f5;
border: 1px solid #bbc9a3;
}
/*---| Seitennavigation |---*/
.navigation {
padding: 0 10px;
margin-bottom: 10px;
}
.prev {
float: right;
text-align: right;
font-size: 0.8em;
width: 50%;
}
.next {
float: left;
text-align: left;
font-size: 0.8em;
width: 50%;
}
/*---| Fu� |---*/
#fuss {
clear: both;
background: #758c60;
color: #d3ddc5;
text-align: center;
font-size: 0.9em;
padding: 10px 0;
line-height: 1.4em;
border-top: 1px solid #e9ecd9;
}
#fuss a:link,
#fuss a:visited {
color: #fff;
background: inherit;
text-decoration:none;
}
#fuss a:hover,
#fuss a:active,
#fuss a:focus {
color:#a8bb8b;
background: inherit;
}
/*---| Suchen |-----*/
#searchform input {
color: #1f2522;
background: #a8bb8b;
border:0;
font-weight: bold;
cursor: pointer;
font-size: 0.95em;
margin-bottom: 10px;
}
#searchform input:hover {
color: #303030;
background: #a8bb8b;
border: 0;
}
#searchform #s {
margin: 10px 0px 3px 0px;
padding: 3px;
background: #fff;
color: #1f2522;
border: 1px solid #1f2522;
cursor: default;
}
#searchform #s:hover {
background: #e9ecd9;
color: #1f2522;
border: 1px solid #1f2522;
}
/*---| Kalender |---*/
#wp-calendar {
border-collapse: collapse;
font-size: 0.8em;
border: 1px solid #1f2522;
line-height: 1.4em;
margin: 0 auto 10px auto;
}
#wp-calendar th {
background: #7e9d58;
color: #fff;
border: 1px solid #395127;
text-align: center;
}
#wp-calendar table.nav,
#wp-calendar th,
#wp-calendar td {
padding: 1px 2px;
}
#wp-calendar td {
color: #1f2522;
background:#e9ecd9;
border: 1px solid #1f2522;
text-align: center;
}
#wp-calendar #next a {
padding-left: 1px;
text-align: right;
}
#wp-calendar #prev a {
padding-right: 1px;
text-align: left;
}
#wp-calendar a {
display: block;
text-decoration: none;
}
#wp-calendar caption {
color: #1f2522;
background: inherit;
text-align: center;
font-weight: bold;
padding:5px 0;
margin: 0 auto;
}
#wp-calendar tbody td a {
color: #c73119;
background: inherit;
}
#wp-calendar tbody td a:hover {
background:inherit;
color: #7e9d58;
}
#wp-calendar #today {
background: #7e9d58;
color: #fff;
}
#wp-calendar #today a {
background:#7e9d58;
color: #c73119;
}
#wp-calendar #today a:hover {
background: #7e9d58;
color: #fff;
}
#wp-calendar tfoot td {
border: 0;
color: #fff;
background: #7e9d58;
}
#wp-calendar tfoot td a {
color: #fff;
background: #7e9d58;
}
#wp-calendar tfoot td a:hover {
color: #000;
background: #7e9d58;
}
/*-----Widgets-----*/
.textwidget {
margin: 8px 0;
}
/*-----nicht anzeigen-----*/Danke, hat geklappt. ;)
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!