zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Strich über dem Menü bei hover und active

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 23.09.2010, 08:08
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

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

Gruß Manfred
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 23.09.2010, 08:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.09.2010
Beiträge: 8
Jeanny befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 23.09.2010, 12:06
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Das wird sich hier kaum jemand zusammenbasteln, am besten lädst Du das irgendwo hoch (kein zip o.ä.).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #14 (permalink)  
Alt 23.09.2010, 22:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.09.2010
Beiträge: 8
Jeanny befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
  #15 (permalink)  
Alt 24.09.2010, 01:04
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Jeanny Beitrag anzeigen
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.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #16 (permalink)  
Alt 11.10.2010, 20:57
ist neu hier
neuer user
 
Registriert seit: 11.10.2010
Ort: Berlin
Beiträge: 18
Darkshot befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Antwort

Stichwörter
menue, strich über dem text

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
horizontales Bildernavi mit hover, active usw. ronjambo CSS 9 03.08.2010 00:25
Multi-Level Navigation mit Grafiken koncrete CSS 3 02.08.2008 03:28
Scrollbares Textfeld mit purem CSS Dancer CSS 6 24.01.2005 16:58
Kommentare nach "clear" unter dem Menü Knuddelkamel CSS 9 30.11.2004 23:23
image vor Link, wenn hover und active. Aber wie??? 18inch CSS 3 27.09.2004 04:07


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:55 Uhr.