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 21: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 22: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 22: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 22:21

Wie gesagt, per border.

Jeanny 12.09.2010 22: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 22: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 20: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 20: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 15.09.2010 23: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 22: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.


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:19 Uhr.

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

© Dirk H. 2003 - 2020