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
  #1 (permalink)  
Alt 12.09.2010, 21:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.09.2010
Beiträge: 8
Jeanny befindet sich auf einem aufstrebenden Ast
Lächeln 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
Angehängte Grafiken
Dateityp: png Menue.png (6,0 KB, 18x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.09.2010, 22:01
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
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

Du kannst die vertikalen Trennlinien per Grafik kommen lassen, und dann den hover-Effekt per border (a bekommt dafür display: block).
__________________
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
Sponsored Links
  #3 (permalink)  
Alt 12.09.2010, 22:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.09.2010
Beiträge: 8
Jeanny befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 12.09.2010, 22:21
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
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

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.)
Mit Zitat antworten
  #5 (permalink)  
Alt 12.09.2010, 22:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.09.2010
Beiträge: 8
Jeanny befindet sich auf einem aufstrebenden Ast
Standard

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; */
}
Angehängte Grafiken
Dateityp: png Border.png (6,8 KB, 9x aufgerufen)
Mit Zitat antworten
  #6 (permalink)  
Alt 12.09.2010, 22:44
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
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

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.)
Mit Zitat antworten
  #7 (permalink)  
Alt 14.09.2010, 20:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.09.2010
Beiträge: 8
Jeanny befindet sich auf einem aufstrebenden Ast
Lächeln

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
Angehängte Grafiken
Dateityp: png MenuDi.png (25,0 KB, 5x aufgerufen)

Geändert von Jeanny (23.09.2010 um 21:17 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 14.09.2010, 20:26
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.854
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

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.)
Mit Zitat antworten
  #9 (permalink)  
Alt 15.09.2010, 23:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.09.2010
Beiträge: 8
Jeanny befindet sich auf einem aufstrebenden Ast
Standard

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 21:19 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 22.09.2010, 22:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.09.2010
Beiträge: 8
Jeanny befindet sich auf einem aufstrebenden Ast
Standard 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.
Angehängte Grafiken
Dateityp: png Menü_GrünerStrichNurBeiHover.png (44,1 KB, 9x aufgerufen)

Geändert von Jeanny (23.09.2010 um 21:18 Uhr)
Mit Zitat antworten
Sponsored Links
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 02.08.2010 23:25
Multi-Level Navigation mit Grafiken koncrete CSS 3 02.08.2008 02:28
Scrollbares Textfeld mit purem CSS Dancer CSS 6 24.01.2005 15:58
Kommentare nach "clear" unter dem Menü Knuddelkamel CSS 9 30.11.2004 22:23
image vor Link, wenn hover und active. Aber wie??? 18inch CSS 3 27.09.2004 03:07


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:40 Uhr.