Wie setze ich dieses Menü um

crephix · 18.10.2013

Hey,
habe wieder eine Frage zur Umsetzung eines Designs in Html/CSS. Undzwar möchte ich quasi ein Menü erstellen mit einem kleinen Satz zu jedem Menüpunkt. Dummerweise bekomme ich es nicht hin, diesen kleinen Satz unter dem jeweiligen Menüpunkt gescheit zu realisieren.

Nunja wie es aussehen SOLLTE seht ihr hier: http://abload.de/img/tsdesignssliceynu7c.jpg

Was ich bisher geschafft habe:

Würde mich über Hilfe, sowie Verbesserungsvorschläge sehr freuen. Wenn es geht bitte ausführlich beschreiben, wie ich das ganze umsetze, das ich auf dem Gebiet recht neu bin.

Danke im voraus.

Grüße

cythux · 18.10.2013

AW: Wie setze ich dieses Menü um

dafür kannst du das element span benutzen

http://css-tricks.com/video-screencasts/100-lets-write-semantic-markup/

Raphale · 19.10.2013

Hi crephix,
ich würde die CSS 3 Psydoelemente vorschlagen. Kommt dann aber darauf an ob es Abwärtskompatible sein soll oder nicht.

Hab gerade gesehen das dein Code nicht gerade sauber ist hier ein paar kleinigkeiten überarbeitet..:

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<!--/*hier kommt inline css, kannste wieder extern einbinden */-->
<style>
* {
    padding: 0;
    margin: 0;
}
body {
    background-color: #e9e9e9;    
}

#wrapper {
    color: #fff;
}

.greyBar {
    background: url(../img/headBg.png) repeat-x;
    min-width: 1000px;
    width: 100%;
    margin-top: 40px;
    height: 160px;
}

.pageHead {
    background: url(../img/logo.png) no-repeat 19px 40px;
    width: 1000px;
    height: 160px;
    margin: 0 auto;
}

#wrapper .pageHead ul.navi{
    width: 925px;
    font-family: Times New Roman;
    list-style: none;
    float: left;
    padding: 0;
    margin: 56px 0px 0px 75px;
}

#wrapper .pageHead li a{
    color: #ececec;
    text-decoration: none;
    float: left;
    font-size: 23pt;
    font-weight: bold;
    margin: 0;
    margin-left: 72px;
    text-shadow: 0 -1px #222222, 1px 0 #222222, 0 1px #222222, -1px 0 #222222;
}

#wrapper .pageHead li a:hover{
    color: #e5b93e;
}
/* aktive Seite gelb markieren */
#wrapper .pageHead li.active a{
    color: #e5b93e;
}
</style>
</head>

<body>

<div id="wrapper">
    <div class="greyBar">
        <div class="pageHead">
            <ul class="navi">
                <li>
                    <a href="#">Home</a>
                 </li>
                <li>
                    <a href="#">Tutorials</a>
                </li>
                <li>
                    <a href="#">Client</a>
                </li>
                <li>
                    <a href="#">Downloads</a>
                </li>
            </ul>    
        </div>
    </div>
</div>

</body>
</html>

du hast auf deine <a> tags soviel CSS gehauen das du Theoretisch keine liste mehr brauchst

Bei den Klassen und IDs ist zu beachten das du IDs nur einmal vergibst und classen kannste so oft wie du willst mit der gleichen Einstellung. Wichtig du musst auf das hier achten class="deinclassName" !. Klassen solltest du dir aufheben für andere Dinge

du kannst einfach so css schreiben:

Code:

.navi {..}
.navi ul {..}
.navi ul li {..}
.navi ul li a {..}

viel Erfolg und LG

cythux schrieb:
dafür kannst du das element span benutzen

apropro genau das ist hier im Video 8:25 nochmal schön semantisch erklärt (einfaches englisch) :lol:

crephix · 19.10.2013

Wow cythux du hast ja das perfekte Video dazu, welches genau die selbe Sache umsetzt, danke dafür!

Raphale auch vielen Dank dafür, dass du dir den Quellcode nochmal genauer angeschaut hast. Ich habe es wie du gepostet hast übernommen und konnt edie Klasse "menue" somit löschen. Die Klasse active habe ich belassen, da diese dafür sorgen soll, dass der Menüpunkt, der zur Zeit angeschaut wird gelb gefärbt angezeigt werden soll. Laut anderen Threads ist dafür eine eigene Klasse notwendig, da a:active nur der Eventhandler für die Zeit während des herunterdrücken der Maustaste ist.

Also nochmal danke und ich werde jetzt das Ganze aus dem Video versuchen nach zu vollziehen

Also das Video war wirklich sehr interessant und ich konnte einiges lernen

. Leider leider leider wurde der entsprechende CSS-Teil dazu überhaupt nicht gezeigt und gerade da hapert es bei mir.

Ich habe die Seite soweit bearbeitet und den Span tag ebenfalls eingebaut. Allerdings frage ich mich welche CSS-Eigenschaften ich für den Span tag einfügen muss, damit er auch wirklich unter dem Menüpunkt so angezeigt wird, wie ich das gerne hätte. Aktueller Stand ist weiterhin unter:

Keiner eine Idee wie ich das am besten machen sollte ?

SWFP · 19.10.2013

AW: Wie setze ich dieses Menü um

Versuche mal das hier in #wrapper .pageHead spanzu ergänzen:

Code:

margin-left: -75px;
margin-top: 30px;

Das müsste klappen.

crephix · 19.10.2013

AW: Wie setze ich dieses Menü um

SWFP schrieb:
Versuche mal das hier in #wrapper .pageHead spanzu ergänzen:

Code:

margin-left: -75px; margin-top: 30px;

Das müsste klappen.

Funktioniert leider nicht. Margin-top wirkt sich irgendwie garnicht aus. Ergebnis ist geupdatet unter: www.entropie-fm.de/inwork

cebito · 19.10.2013

AW: Wie setze ich dieses Menü um

Du musst erstens die li floaten, und diese Eigenschaft beim a entfernen!

Code:

.pageHead ul li {
    float: left;
    margin-left: 72px;
}

Dann gibst du dem span noch ein display:block mit.

Code:

.pageHead a span {
    color: #BAC1C1;
    display: block;
}

Das funktioniert so aber nur (a span) wenn du den span auch IN das a-Element packst (wie im Video auch) und somit einen gesamt anklickbaren Menüpunkt erschaffst.

crephix · 19.10.2013

AW: Wie setze ich dieses Menü um

Super, hat funktioniert. Vielen dank!