|
|||
Strich über dem Menü bei hover und active
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 |
Sponsored Links |
Sponsored Links |
|
||||
Wie gesagt, per border.
__________________
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.) |
|
|||
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; */ } |
|
||||
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).
__________________
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.) |
|
|||
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 Geändert von Jeanny (23.09.2010 um 22:17 Uhr) |
|
||||
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.
__________________
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.) |
|
|||
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> Geändert von Jeanny (23.09.2010 um 22:19 Uhr) |
Sponsored Links |
|
|||
Noch die Sub-Menüs
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. Geändert von Jeanny (23.09.2010 um 22:18 Uhr) |
Sponsored Links |
Stichwörter |
menue, strich über dem text |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |