XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)
-   -   Strich über dem Menü bei hover und active (http://xhtmlforum.de/showthread.php?t=62363)

Jeanny 12.09.2010 22:44

Strich über dem Menü bei hover und active
 
Liste der Anhänge anzeigen (Anzahl: 1)
Hallo,
ich bin neu bei CSS & Co., und möchte ein Menü wie im Anhang gezeigt darstellen.
Das Menü steht, nur der Strich über dem Text der gesetzt werden soll, bei hover und active macht mir Probleme.
Ich habe auch schon im Forum, Internet gesucht, nur liegt es wahrscheinlich daran, dass ich nich weiß wie ich so etwas umsetze, somit such ich auch nicht nach den richtigen Begriffen.
Eine Grafik geht wohl eher nicht bei dem Menü, da der Text unterschiedlich lang sein kann. Und border-top kann man nicht kürzen, dass z.B. nur 80% der Länge angezeigt wird. Und ein Überstrich über den Text ist zu schmal. Wäre dankbar, wenn mir jemand einen Tipp geben könnte, wie man so etwas löst.
Danke im Voraus
Herzliche Grüße
Jeanny

heiko_rs 12.09.2010 23:01

Du kannst die vertikalen Trennlinien per Grafik kommen lassen, und dann den hover-Effekt per border (a bekommt dafür display: block).

Jeanny 12.09.2010 23:06

O.k., danke für den Hinweis mit der vertikalen Trennlinie.

Hast Du auch einen Tipp für mich für die horizontale Linie? Die über dem Text?
Jeanny

heiko_rs 12.09.2010 23:21

Wie gesagt, per border.

Jeanny 12.09.2010 23:33

Liste der Anhänge anzeigen (Anzahl: 1)
Hallo,
danke für Deine Antwort, das hatte ich schon versucht, nur ist dann die Linie über dem Wort "Leistungsumfang" (siehe Anhang) zu lang, diese sollte ca. 80% ihrer jetzigen Länge haben und zentriert sein, sorry wenn ich mich undeutich ausgedrückt habe...Ich finde keinen Befehl, um die Linie zu kürzen, wenn sie so wie jetzt an den linken und rechten vertikalen border anstösst, sieht das aus wie eine Box, und das sollte nicht sein.
Hier mein Code:

#header ul li a:hover,#header ul li a:active,#header ul li a:focus
{
background:#fff;
color:#3A7307;
font-weight:bold;


border-top: solid 3px #3A7307;

/* border-top-width: 1px; */
}

heiko_rs 12.09.2010 23:44

Wenn li ohne width floatet und seitl. padding hat, hat a mit diplay: block; exakt die Breite des enthaltenen Wortes, und damit auch border-top (genau wie auf Deiner ersten Grafik).

Jeanny 14.09.2010 21:19

Liste der Anhänge anzeigen (Anzahl: 1)
Hallo, ich hab mir das Beispiel aus "Little Boxes, Teil 1" genommen, und Deinen Vorschlag leider ohne Erfolg ausprobiert.
Ich habe mit:
padding: 5px 5px 5px 5px; /* von mir*/
/* display: block; */
border-top: 1px solid black;
rumgespielt, aber display: block hilft auch nicht....
Das Ergebnis ist, dass der border-top immer der Rand der box ist.
Anbei die CSS, weiter unten die HTML, wäre froh wenn Du einen Blick drauf werfen könntest, irgendwie muss das doch gehen, und sorry dass ich Dir Löcher in den Bauch frage...
Danke im Voraus.
Grüße
Jeanny

heiko_rs 14.09.2010 21:26

a darf kein seitl. padding haben, und die Box wird durch li erzeugt. Falls die anklickbare Fläche breiter sein soll als das Wort, brauchst Du span innerhalb von a.

Jeanny 16.09.2010 00:10

Hey, danke, es klappt, ich poste das hier, falls jemand die Lösung interessiert.

Code:


/* ===============================================
Stylesheet für die Übungsseiten aus "Little Boxes, Teil 1"
Stand: Kontaktformular (fertig)
Datei: bildschirm.css
Datum: 2009-04-17
Autor: Peter Müller
Aufbau: 1. Kalibrierung und Restauration
2. Allgemeine Styles
3. Styles für Layoutbereiche
4. Sonstige Styles
================================================ */

/* ======================================
1. Kalibrierung und Restauration
====================================== */
/* Reset - alle Abstände auf NULL */
* { padding: 0; margin: 0; }
/* optional: erzwingt Scrollbar im Firefox */
html { height: 100%; margin-bottom: 1px; }
h2, p, ul, ol { margin-bottom: 1em; }
ul ul { margin-bottom: 0; }
li { margin-left: 1em ; }
/* hier ggfs. Abstände für weitere Elemente restaurieren */

/* ======================================
2. Allgemeine Styles
====================================== */
body {
background-color: #8c8c8c;
color: white;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
}
h1 { font-size: 150%; }
h2 { font-size: 130%; }
address {
text-align: center;
font-size: 80%;
font-style: normal;
letter-spacing: 2px;
line-height: 1.5;
}
a {
text-decoration: none;
/* outline: none; */ /* nur wenn es Sie wirklich stört */
}
a:link { color: #d90000; }
a:visited { color: #cc6666; }
a:hover,
a:focus {
border-bottom: 1px solid #d90000;
}
a:active {
color: white;
background-color: #d90000;
}
/* Allgemeine Klassen und IDs */
img#logo {
background-color: white;
color: black;
padding: 10px;
border: 10px solid #d9d9d9;
}

/* ======================================
3. Styles für die Layoutbereiche
====================================== */
#wrapper {
background-color: white;
color: black;
width: 720px;
margin: 10px auto;
}
#kopfbereich {
background: #ffe574 url(farbverlauf.jpg) repeat-y left top;
color: black;
padding: 10px 20px 0 20px;
}
#kopfbereich p {
padding: 5px 0 5px 0;
margin-bottom: 0;
}
div#kopfbereich p span {
color: #d90000;
}
#navibereich {
text-align: right;
color: black;
background: #ffe574 url(farbverlauf.jpg) repeat-y left top;
padding: 5px 10px 4px 10px;
border-bottom: 1px solid #8c8c8c;
}
#navibereich ul { margin-bottom: 0; }
#navibereich li {
display: inline;
list-style-type: none;
margin: 0;
}
#navibereich a ,
#navibereich strong {
color: black;
background-color: #ffeda0;
padding: 0 0 4px 0;
border: 1px solid #8c8c8c;
}
#startseite #navi01 a,
#kontaktseite #navi02 a {
color: black;
background-color: white;
border-bottom-color: white;
border-top: 2px solid green;
}

#navibereich a:hover,
#navibereich a:focus {
color: black;
background-color: white;
border-bottom-color: white;
border-top: 2px solid green;
}
#navibereich a:active {
color: black;
background-color: white;
border-bottom-color: white;
border-top: 2px solid green;
}

#textbereich {
padding: 20px 10px 20px 20px;
}
#textbereich a {
border-bottom: 1px dotted #cc0000;
}
#textbereich a:hover,
#textbereich a:focus {
border-bottom: 1px solid #d90000;
}
#fussbereich {
padding: 10px 20px 20px 20px;
border-top: 1px solid #8c8c8c;
margin-top: 0;
}
/* ======================================
4. Sonstige Styles
====================================== */
/* Das Kontaktformular */
form {
background-color: #eee;
width: 370px;
padding: 20px;
border: 1px solid #8c8c8c;
}
label {
display: block;
cursor: pointer; /* Mauszeiger wird zur Hand */
}
input#absender,
textarea {
width: 300px;
border: 1px solid #8c8c8c;
margin-bottom: 1em;
}
textarea {
height: 7em;
}
input:focus,
textarea:focus {
background-color: #d9d9d9;
}

/* =======================================
E N D E D E S S T Y L E S H E E T S
======================================= */


HTML-Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Startseite - Little Boxes (Webseiten gestalten mit HTML und CSS)</title>
  <link href="bildschirm.css" rel="stylesheet" type="text/css" media="screen" />
  </head>
<body id="startseite">
<div id="wrapper">

<div id="kopfbereich">
<h1><img src="logo.gif" id="logo" alt="Little Boxes" width="222" height="32" /></h1>
<p>Webseiten gestalten mit HTML und CSS. <span>Grundlagen</span></p>
</div> <!-- Ende kopfbereich -->

<div id="navibereich">
<ul>
  <li id="navi01"><a href="index.html">Startseite</a></li>
  <li id="navi02"><a href="kontakt.html">Kontakt</a></li>
</ul>
</div> <!-- Ende navibereich -->

<div id="textbereich">
<h2>Startseite</h2>

<p>Webseiten bestehen aus <strong>rechteckigen Kästchen</strong>, die über-, neben- und ineinander gestapelt werden. Alles Runde ist entweder Trick, Grafik oder beides.</p>

<p>Die folgenden Schritte zeigen den Weg vom Zusammenbauen der <em>Kisten</em> bis zur fertig gestalteten <em>Webseite</em>:</p>

<ul>
  <li>So funktioniert HTML</li>
  <li>Wichtige HTML-Elemente
  <ul>
    <li>Überschriften</li>
    <li>Absätze und Listen</li>
    <li>Links und Grafiken</li>
  </ul>
  </li><!-- beginnt VOR "Wichtige HTML-Elemente"-->
  <li>Gestalten mit CSS</li>
</ul>

<p>Besuchen Sie <a href="http://little-boxes.de/" title="little-boxes.de - mit Infos zum Buch">die Website zum Buch</a> für weitere Informationen.</p>

</div> <!-- Ende textbereich -->

<div id="fussbereich">
<address>
Little Boxes · Kästchenweg 12 · 01234 Boxberg
<br />
Tel: 01234 567890 · Fax: 01234 567891
</address>
</div> <!-- Ende fussbereich -->

</div> <!-- Ende wrapper -->
<br /><div style="z-index:3" class="smallfont" align="center"><!-- google_ad_section_start(weight=ignore) -->Search Engine Friendly URLs by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.3.2<!-- google_ad_section_end --></div>
</body>
</html>


Jeanny 22.09.2010 23:16

Noch die Sub-Menüs
 
Liste der Anhänge anzeigen (Anzahl: 1)
Hallo, könntet Ihr mir noch einen Tipp bezüglich der Sub-Menüs geben? Diese sollen nur den grünen Strich über dem Menü-Text erhalten, wenn man mit der Maus drüber fährt. Ich krieg das einfach nicht hin, danke im Voraus. (Der Code ist im nächsten Fenster gepostet)
Viele Grüße J.

Manfred62 23.09.2010 08:08

Bitte bitte... die code Tags benutzen!!
Hab schon Muskelkater im Finger, vom scrollen.... 8)

Gruß Manfred

Jeanny 23.09.2010 08:42

Sorry, hier mit Tags:
Und hier nochmals die Frage:
Hallo, könntet Ihr mir noch einen Tipp bezüglich der Sub-Menüs geben? Diese sollen nur den grünen Strich über dem Menü-Text erhalten, wenn man mit der Maus drüber fährt. Ich krieg das einfach nicht hin, danke im Voraus.
Viele Grüße J.
Hier das HTM und CSS:

Code:


/*** ESSENTIAL STYLES ***/
/*richtet es auf Null aus */


.sf-menu, .sf-menu * {
        margin:                        0;
        padding:                0;
        list-style:                none;
}

/**/
.sf-menu {
        line-height:        1.0;
}

.sf-menu ul {
        position:                absolute;
        top:                        -999em;
        width:                        10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
        width:                        100%;
}

.sf-menu li:hover {
        visibility:                inherit; /* fixes IE7 'sticky bug' */
}

.sf-menu li {
        float:                        left;
        position:                relative;

}


.sf-menu a {
        display:                block;
        position:              relative;

}

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
        left:                        0;
        top:                        2.5em; /* match top ul list item height */
        z-index:                99;
}

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
        left:                        0;
        top:                        2.5em; /* match top ul list item height */
        z-index:                99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
        top:                        -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
        left:                        10em; /* match ul width */
        top:                        0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
        top:                        -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
        left:                        10em; /* match ul width */
        top:                        0;
}



/*** DEMO SKIN ***/
.sf-menu {
        float: left;
        margin-bottom: 1em;  /* vergrößert Abstand zw. Navi und breadcrumb*/
}
.sf-menu a {
      /* border-left:        1px solid green;  /* IEM hier muss der linke Rand definiert werden!*/
      /* IEM 02.09.2010 IEM geändert border-top:                1px solid #CFDEFF;  */
        padding: 5px 5px 0 5px;    /* IEM  .75em 1em; */
        text-decoration:none;
}

.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
        color:#3A7307;  /*IEM #13a */
}
/*
.sf-menu a span, .sf-menu a:visited span  { /* IEm n.B.  visited pseudo selector so IE6 applies text colour
        border-top: solid 2px pink;  /*IEM n.B. funktoiniert nicht! malt alles an!!! */

.sf-menu li {
        background: #FFF;                /* IEM #BDD2FF; */
}

.sf-menu li li {
        background:#FFF;                /* IEM #AABDE6;  */
}
.sf-menu li li li {
        background:#FFF;                /* #9AAEDB;  */
}

.sf-menu li:hover a span, .sf-menu li.sfHover span,
.sf-menu a:focus span, .sf-menu a:hover span, .sf-menu a:active span  {
  border-top: solid 2px #3A7307;  /*IEM n.B.*/
}

.sf-menu ul:first-child {
margin-left: 0;
padding-left: 0;

}
.sf-menu li:first-child, .sf-menu li.first-child {
margin-left: 0;
padding-left: 0;
}

/* .sf-menu li:last-child, .sf-menu li.last-child {
}
20100901 IEM: CSS-Fehler: Unbekanntes Pseudoelement oder Pseudoklasse: :last-child
*/

.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
        /* background:                #CFDEFF;  */
        outline:                0;
}
.sf-menu li .separator {
        display: block;
        border-left:        1px solid #fff;
        border-top:                1px solid #CFDEFF;
        padding:                .75em 1em;
        text-decoration:none;
}

/*** arrows **/

.sf-menu a.sf-with-ul {
        padding-right:        2.25em;
        min-width:                1px; /* trigger IE7 hasLayout so spans position accurately */
        text-decoration:none;  /*IEM n.B.*/
}

/* IEM Raus damit
.sf-sub-indicator {
        position:                absolute;
        display:                block;
        right:                        .75em;
        top:                        1.05em; /* IE6 only
        width:                        10px;
        height:                        10px;
        text-indent:        -999em;
        overflow:                hidden;
      /* IEM 02.09.2010 background:                url('../images/arrows-ffffff.png') no-repeat -10px -100px;  */ /* 8-bit  indexed alpha png. IE6 gets solid image only
}

a > .sf-sub-indicator {  /* give all except IE6 the correct values
        top:                        .8em;
        background-position: 0 -100px; /* use translucent arrow for modern browsers
}


/* apply hovers to modern browsers
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
        background-position: -10px -100px; /* arrow hovers for modern browsers
}
*/


/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
        background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
        background:        url('../images/shadow.png') no-repeat bottom right;
        padding: 0 8px 9px 0;
      /*  -moz-border-radius-bottomleft: 17px; IEM 20100901 css Fehler :Die Eigenschaft -moz-border-radius-bottomleft existiert nicht : 17px  17px
        -moz-border-radius-topright: 17px;
        -webkit-border-top-right-radius: 17px;
        -webkit-border-bottom-left-radius: 17px; */
}
.sf-shadow ul.sf-shadow-off {
        background: transparent;
}

.sf-menu .active {
        background: #ccc;
}

.sf-menu #current2 {
        background: #fff; /* IEM #aaa*/

}
.sf-menu #current2 span {
        border-top: solid 2px #3A7307;  /*IEM n.B. markiert den geklickten Menüpunkt*/

}

.superfish_clear {
        clear: both !important;
        height: 1px !important;
        overflow: hidden !important;
        font-size: 1px !important;
        margin: 0 !important;
        padding: 0 !important;
}

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HTML lang="de-de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" dir="ltr">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="robots" content="index, follow">
  <meta name="keywords" content="joomla, Joomla">
  <meta name="title" content="Seite merken">
  <meta name="author" content="Administrator">
  <meta name="description" content="Joomla! - dynamische Portal-Engine und Content-Management-System">
  <meta name="generator" content="Joomla! 1.5 - Open Source Content Management">
<title>
Seite merken
</title>
  <link href="/joomla15/templates/nun/favicon.ico" rel="shortcut icon" type="image/x-icon">
  <link rel="stylesheet"  href="http://localhost/joomla15/plugins/content/sexybookmarks/style.css?ver=1.1.0"  type="text/css">
  <link rel="stylesheet" href="http://localhost/joomla15/components/com_tag/css/tagcloud.css" type="text/css">
  <link rel="stylesheet"  href="http://localhost/joomla15/modules/mod_superfishmenu/tmpl/css/superfish.css"  type="text/css">
<script type="text/javascript" src="/joomla15/media/system/js/mootools.js">
</script>
<script type="text/javascript" src="/joomla15/media/system/js/caption.js">
</script>
<script type="text/javascript" src="http://localhost/joomla15/modules/mod_superfishmenu/tmpl/js/jquery.js">
</script>
<script type="text/javascript" src="http://localhost/joomla15/modules/mod_superfishmenu/tmpl/js/jquery.event.hover.js">
</script>
<script type="text/javascript" src="http://localhost/joomla15/modules/mod_superfishmenu/tmpl/js/superfish.js">
</script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function($){ $("ul.sf-menu").superfish({hoverClass:'sfHover',  pathClass:'active', pathLevels:0, delay:800, animation:{opacity:'show'},  speed:'def', autoArrows:1, dropShadows:1}) });
jQuery.event.special.hover.delay = 100;
jQuery.event.special.hover.speed = 100;

</script>
  <link rel="stylesheet" href="/joomla15/templates/nun/css/template.css" type="text/css">
  <link rel="stylesheet" href="/joomla15/templates/nun/css/position.css" type="text/css" media="screen,projection">
  <link rel="stylesheet" href="/joomla15/templates/nun/css/layout.css" type="text/css" media="screen,projection">
  <link rel="stylesheet" href="/joomla15/templates/nun/css/print.css" type="text/css" media="Print">
  <link rel="stylesheet" href="/joomla15/templates/nun/css/general.css" type="text/css">
<!--[if lte IE 6] >
< link href="/joomla15/templates/nun/css/ieonly.css" rel="stylesheet" type="text/css" / >
< ![endif]-->

<!--[if IE 7] >
< link href="/joomla15/templates/nun/css/ie7only.css" rel="stylesheet" type="text/css" / >
< ![endif]-->

<script type="text/javascript" src="/joomla15/templates/nun/javascript/md_stylechanger.js">
</script>
  <link type="text/css" rel="stylesheet"  id="webdeveloper-outline-current-element"  href="chrome://webdeveloper/content/stylesheets/outline_current_element.css">
</head>
<body style="font-size: 100%; outline: 1px solid rgb(255, 0, 0);">
<div id="all">
<div id="header">
<h1 id="logo">
  <img src="/joomla15/templates/nun/images/nun.png" alt="Logo " border="0" width="473" height="23">
</h1>
<ul>
<li>
<a href="#content" class="u2">
Skip to Content
</a>
</li>
<li>
<a href="#mainmenu" class="u2">
Jump to Main Navigation and Login
</a>
</li>
<li>
<a href="#additional" class="u2">
Jump to additional Information
</a>
</li>
</ul>
<h2 class="unseen">
Search, View and Navigation
</h2>
<div id="superfishmenu">
<ul class="menu sf-menu sf-horizontal sf-js-enabled sf-shadow">
<li class="first-child item63">
<a href="http://localhost/joomla15/">
<span>
Philosophie
</span>
</a>
</li>
<li class="item62">
<a  href="/joomla15/index.php?option=com_content&amp;view=category&amp  ;layout=blog&amp;id=39&amp;Itemid=62">
<span>
Leistungsumfang
</span>
</a>
</li>
<li class="parent item67">
<a class="sf-with-ul"  href="/joomla15/index.php?option=com_content&amp;view=article&amp;  id=62&amp;Itemid=67">
<span>
Referenzen
</span>
<span class="sf-sub-indicator">
»
</span>
</a>
<ul style="display: none; visibility: hidden;">
<li class="parent item68">
<a class="sf-with-ul"  href="/joomla15/index.php?option=com_content&amp;view=article&amp;  id=45&amp;Itemid=68">
<span>
Branchen
</span>
<span class="sf-sub-indicator">
»
</span>
</a>
<ul style="display: none; visibility: hidden;">
<li class="first-child item72">
<a href="/joomla15/index.php?option=com_content&amp;view=article&amp;  id=1&amp;Itemid=72">
<span>
Joomla Standard
</span>
</a>
</li>
<li class="item77">
<a href="/joomla15/index.php?option=com_content&amp;view=article&amp;  id=67&amp;Itemid=77">
<span>
Seite merken
</span>
</a>
</li>
<li class="last-child item78">
<a href="/joomla15/index.php?option=com_content&amp;view=article&amp;  id=65&amp;Itemid=78">
<span>
Subpunkt
</span>
</a>
</li>
</ul>
</li>
<li class="last-child item73">
<a href="/joomla15/index.php?option=com_content&amp;view=article&amp;  id=44&amp;Itemid=73">
<span>
Beitrag A
</span>
</a>
</li>
</ul>
</li>
<li class="item69">
<a href="/joomla15/index.php?option=com_content&amp;view=article&amp;  id=61&amp;Itemid=69">
<span>
Pressemitteilungen
</span>
</a>
</li>
<li class="item70">
<a href="/joomla15/index.php?option=com_content&amp;view=article&amp;  id=63&amp;Itemid=70">
<span>
Netzwerk
</span>
</a>
</li>
<li class="last-child item74">
<a href="/joomla15/index.php?option=com_contact&amp;view=contact&amp;  id=1&amp;Itemid=74">
<span>
Kontakt
</span>
</a>
</li>
</ul>
<form action="index.php" method="post" class="search">
<label for="mod_search_searchword">
Suchen
</label>
  <input name="searchword" id="mod_search_searchword" maxlength="20"  class="inputbox" size="100" value="Suchen..." onblur="if(this.value=='')  this.value='Suchen...';" onfocus="if(this.value=='Suchen...')  this.value='';" type="text">
  <input value="Suchen" class="button" src="/joomla15/images/M_images/searchButton.gif" type="image">
  <input name="option" value="com_search" type="hidden">
  <input name="task" value="search" type="hidden">
  <input name="Itemid" value="76" type="hidden">
</form>
</div>
<div class="wrap">
&nbsp;
</div>
</div>
<!-- end header -->



</body>
</html>


heiko_rs 23.09.2010 12:06

Das wird sich hier kaum jemand zusammenbasteln, am besten lädst Du das irgendwo hoch (kein zip o.ä.).

Jeanny 23.09.2010 22:15

Zum anschauen
 
Hallo,
ich habe das jetzt mal online zur Verfügung gestellt:
rezeptkocher.de
Dort könnt Ihr das Menü finden, der grüne Strich sollte auch nach Klick auf den Menüpunkt noch vorhanden sein, leider geht das jetzt auch nicht mehr.
Die grünen Striche im Sub-Menü sollten nur erscheinen, wenn auch drauf geklickt wird.
Wäre echt froh wenn Ihr mir nochmals helfen könntet :)
Danke im Voraus
Jeanny

heiko_rs 24.09.2010 01:04

Zitat:

Zitat von Jeanny (Beitrag 475782)
Die grünen Striche im Sub-Menü sollten nur erscheinen, wenn auch drauf geklickt wird.

Mit dem Klick wird eine neue Seite aufgerufen, auf der Du den betr. Link durch strong ersetzen solltest, siehe FAQ 10. Dem strong kannst Du dann sagen, dass es die border haben soll.

Weiterhin musst Du Deklarationen, die nur für die erste Ebene gelten sollen, ggf. für die zweite Ebene zurücksetzen, wenn sie unerwünschterweise auch auf diese angewandt werden.

Darkshot 11.10.2010 20:57

Also ich kenne es nur so, so muesste es eigentlich gehen:


Code:

        a:hover
        {
        text-decoration: overline;
        }

Und wenn es überstrichen bleiben soll, erkläre ichs hier an einem beispiel:

So sieht z.B. die Seite "index" aus:
Code:

<ul id="navigation">
            <li class="naviLink"  id="aktiv"><a href="index.htm">Startseite</a></li>
            <li class="naviLink"><a href="deutschland.htm">Deutschland</a></li>
            <li class="naviLink"><a href="amerika.htm">Amerika</a></li>
            <li class="naviLink"><a href="frankreich.htm">Frankreich</a></li>
            <li class="naviLink"><a href="england.htm">England</a></li>
            <li class="naviLink"><a href="Videobase.htm">Videobase</a></li>
        </ul>

Und so die Seite "Deutschland":
Code:

<ul id="navigation">
            <li class="naviLink" ><a  href="index.htm">Startseite</a></li>
            <li class="naviLink"  id="aktiv"><a  href="deutschland.htm">Deutschland</a></li>
            <li class="naviLink"><a  href="amerika.htm">Amerika</a></li>
            <li class="naviLink"><a  href="frankreich.htm">Frankreich</a></li>
            <li class="naviLink"><a  href="england.htm">England</a></li>
            <li class="naviLink"><a  href="Videobase.htm">Videobase</a></li>
        </ul>

Siehst du den Unterschied? Gut, dann mach das CSS-Dokument so:
Code:

#aktiv
    {
    text-decoration: overline;
    }


Ich hoffe, ich konnte helfen.

lg.


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:14 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023