Menü und class Probleme

[GrafAlucard]

Hallo alle zusammen,

ich habe 2 Probleme.
1. ich habe für 4 Bereiche auf meiner Seite das gleiche Design für den Rahmen:
border-left-width: 6px;
border-left-style: ridge;
border-color: silver;
border-right-width: 6px;
border-right-style: groove;
border-color: silver;
border-top-width: 6px;
border-top-style: ridge;
border-color: silver;
border-bottom-width: 6px;
border-bottom-style: groove;
border-color: silver;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;

leider bin ich noch nicht so erfahren, und komme noch nicht klar damit die Syntax hintereinander zu schreiben, deswegen alles einzeln^^
Kann mri einer vllt zeigen wie ich es platzsparender schreiben kann? und vllt als class definieren kann, um diese dann bei den Elementen angeben zu können?

2. Problem. Ich habe ein Menü erstellt. Das sieht auch echt gut aus und funktinoert auf der 1. Ebene saber. Leider in der 2. Ebene aber nicht. Abwohl ich lu und li seperat definiert habe, gelten die einstellungen immer für beide. So ist es mir nicht möglich, zb die breite für lu auf 140px zu stellen und für li auf 80px. Desweiteren sieht es in der 2. Ebene nicht so berauschend aus. Leider hab ich aber keine richtige Vorstellung und Kenntnisse wie ich es besser machen kann.

Ich würde mich freuen wenn mir jemand helfen könnte. Bin auch im Skype oder sonst wie gerne für gespräche bereit:)

Gruß Graf

http://nerdrecords.com/reiten/http://nerdrecords.com/reiten/

 

[Tar]

Hallo.

Dein CSS zu komprimieren ist recht einfach:
Du hast jede border-Eigenschaft für jede Seite der vier Seiten definiert. Allerdings ist fast jede Eigenschaft auf jeder Seite gleich. Also kannst du statt border-left.., border-right.., border-top.., border-bottom... einfach nur border-... schreiben:

border-width:6px;
border-style:ridge groove ridge groove;
border-color:silver;

Im Prinzip kann man einfach gleiche Attributswerte zusammenfassen. Beim Style gibt man 4 Werte an (oben rechts unten links, Uhrzeigersinn) wenn man verschiedene Werte hat.

Dies kannst du jetzt noch weiter verkleinern, indem du es "hintereinander" angibst:

border: 6px ridge silver;

(Reihenfolge: Width Style Color)

Jetzt haben wir nur noch zwei Ausnahmen: Der Style für rechts und unten ist nicht ridge sondern groove:

border-right-style:groove;
border-bottom-style:groove;

Für den border-radius gilt das selbe: Er ist bei dir in allen vier Ecken gleich, also kannst du ihn einfach "zusammenfassen":

border-radius:20px

So werden aus 16 Zeilen 4 Zeilen!


Dein zweites Problem habe ich noch nicht ganz verstanden. Ich vermute aber mal, dass du mit anderen CSS Selektoren dein Problem lösen kannst. Außerdem habe ich auf deiner Seite gesehen, dass die Syntax für eine verschachtelte Navigation nicht stimmt. Die ist wie folgt:

<ul id="navi">
    <li><a href="http://www.html.de/css/css/css/..">Punkt 1</a>
        <ul>
            <li><a href="http://www.html.de/css/css/css/..">Unterpunkt 1.1</a></li>
            <li><a href="http://www.html.de/css/css/css/..">Unterpunkt 1.2</a></li>
        </ul>
    </li>
    <li> Punkt 2
        <ul>
            <li><a href="http://www.html.de/css/css/css/..">Unterpunkt 2.1</a></li>
        </ul>
    </li>
</ul>

Die "erste Ebene" kannst du jetzt über

#navi > li 
und
#navi > li a

ansprechen (> bedeutet direktes Kindelement).

Ebene 2 geht dann über

#navi > li ul li
und 
#navi > li ul li a

So kannst du für beide Ebenen unterschiedliches CSS verwenden.

 

[GrafAlucard]

ok das mit dem zusammenführen verstehe ich.
aber das mit dem menü nicht wirklich. ich hab dir per skype ne mail geschickt. wäre nett wenn du mir da etwas helfen könntest.

gruß graf

 

[Tar]

Mh. Skype genutze ich seit geraumer Zeit nichtmehr, habe wohl vergessen den Accountnamen hier aus dem Profil zu löschen. Kannst du versuchen dein Problem nochmal genauer zu schildern?

 

[mermshaus]

Am Rande: Du bist nicht der Erste, der ein Dropdown-Menü erstellen möchte. Es existieren getestete Lösungen, die du nur noch an deinen Einsatzzweck anzupassen brauchst. Suche etwa nach „css dropdown menu“.

Besonders als Anfänger muss man bei so was nicht zwingend das Rad neu erfinden. So ganz trivial ist das einfach nicht.

 

[GrafAlucard]

hallo,

leider gelingt mir das mit dem anpassen nicht wirklich. das was ich jetzt habe, hatte ich auch gefunden und angepasst, aber wenn man nicht weis wie es richtig sein müsste, weis man nicht ob das was man verwendet sauber ist. denn wie er sagte ist das nicht gerade sauber was ich ahbe, und das hatte ich auch so gefunden.

 

[mermshaus]

Ganz solide ist sicherlich dieses:

- Suckerfish Dropdowns - Vertical (simpel, CSS-only + JS-Fix für IE)
(- Superfish - Suckerfish on 'roids Empfehlung eines Bekannten)