Antworten auf deine Fragen:
Neues Thema erstellen

Wie setze ich dieses Menü um

C

crephix

Guest

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
 

Raphale

angehender Webentwickler

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 ;)

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:
 
Zuletzt bearbeitet von einem Moderator:
C

crephix

Guest

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 ? :(
 
Zuletzt bearbeitet von einem Moderator:

SWFP

SWFP Mitglied

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.
 

cebito

undefined

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.
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.474
Mitglieder
67.558
Neuestes Mitglied
StarsMan
Oben