Horizontales CSS Menü

Deutschsprachiger Support für CMS Made Simple
Post Reply
geisi
New Member
New Member
Posts: 6
Joined: Wed Oct 04, 2006 7:33 pm

Horizontales CSS Menü

Post by geisi »

Hallo bin mit meiner Seite mittlerweile ein bißchen fortgeschritten, leider bin ich aber mit CSS noch nicht so ganz vertraut.
Das was ich nicht ganz kapiere, bzw nicht weiß ob es möglich ist, ist ob die Untermenüs eine andere Hintergrundfarbe haben können als das Hauptmenü.  ???

mfg
geisi
zulaut78
Forum Members
Forum Members
Posts: 20
Joined: Tue Aug 22, 2006 2:06 pm

Re: Horizontales CSS Menü

Post by zulaut78 »

Hallo geisi,

weiss ja nicht inwiefern du dich mit dem Aufbau des CMS auskennst. Es gibt die Möglichkeit im Adminbereich unter Layout -> Stylesheets die Stylesheets zu editieren. In deinem Fall wäre das Nav - Horizontal Stylesheet.

Code: Select all

/* A CSS Framework by Mike Stenhouse of Content with Style, adapted to CMSMS by Daniel Westergren */

[color=Red]/* NAV */

    * html div#menu_horiz {
        /* hide ie/mac \*/
        height: 1%;
        /* end hide */
    }
    div#menu_horiz {
      background-color: #ECECEC;
      width: 100%;
      margin: 0;
      text-align: center;
    }
    div#menu_horiz ul {
        margin: 0;
        padding: 0;
        list-style: none;
        border-bottom: 1px solid #C0C0C0;
        border-left:  1px solid #C0C0C0;
    }
    div#menu_horiz li {
        float: left;
        display: inline;
        list-style: none;
        margin: 0 ;
        border-right: 1px solid #C0C0C0;
    }
    div#menu_horiz li a {
        border-right: none;
    }
    div#menu_horiz a,
    div#menu_horiz a:link,
    div#menu_horiz a:active,
    div#menu_horiz a:visited {
        display: block;
        padding: 5px 10px; 

        /* hide from ie/mac \*/
        display: block;
        /* end hide */

        text-decoration: none;
        margin: 0;
        color: #18507C;
        background: #ECECEC;
    }
div#menu_horiz li a:hover {
	background-color: #abb0b6;
}
    div#menu_horiz .activeparent {
        display: inline-block;

        /* hide from ie/mac \*/
        display: block;
        /* end hide */
        
	background-color: #abb0b6;
    }

    div#menu_horiz .current a,
    div#menu_horiz .current a:link,
    div#menu_horiz .current a:active,
    div#menu_horiz .current a:visited,
    div#menu_horiz .current a:hover,
    div#menu_horiz .activeparent a,
    div#menu_horiz .activeparent a:link,
    div#menu_horiz .activeparent a:active,
    div#menu_horiz .activeparent a:visited,
    div#menu_horiz .activeparent a:hover 
{
	background-color: #abb0b6;
    }
/* END NAV */[/color]

Dieser Bereich des Stylesheets greift auf die Navigation und deren Unterpunkte.
Da das Menue eigentlich eine ganz normale Liste ist und per Javascript umformatiert wird, solltest du die Bereiche li (Liste) und ul (untergeordneter Listenpunkt) bearbeiten und die Menuepunkte anders gestalten können.

Vorsicht.. um nichts zu zerschießen solltest Du während Du in dem Stylesheet arbeitest eine Sicherungskopie erstellen..

Bei Fragen einfach nochmal Posten..

mfg Marco
geisi
New Member
New Member
Posts: 6
Joined: Wed Oct 04, 2006 7:33 pm

Re: Horizontales CSS Menü

Post by geisi »

Das mit den stylesheets hatte ich schon gewußt, aber es ist extrem umständlich, wenn man nicht genau weiß was man sucht etwas zu ändern, speichern, schauen was hat sich verändert, usw
Aber ich hab hier im Forum etwas weitergelesen, und bin dabei dann auf das Firefox Plugin Web Developer gestoßen, und muß sagen : Das ist echt ein Hammer wie einfach das ganze mit dem dann geht.

Die Homepage ist somit bis auf ein paar Kleinigkeiten fertig, und das ganze dank eines super CMS  ;) ;D
Post Reply

Return to “German - Deutsch”