Gelöst: Menü - Navigation - anpassen

Für Fragen und Diskussionen zum Layout und Design, Templates und Stylesheets sowie Themes
Post Reply
AL-d82

Gelöst: Menü - Navigation - anpassen

Post by AL-d82 »

Gelöst:
Dank dem TIPP von owr_bgld VIELEN DANK  :-X
habe ich mein CSS modiviziert und nun ist es gelungen ;o)

Code: Select all

#nav ul li {
      float: left;
	display: inline;
	line-height: 16px;
	list-style: none;
floating : left;
        float: left;
        margin: 0 0 0 -40px;

Ursprüngliche Frage:

___________________________________________________________

Hallo, vielleicht kann mir einer von euch helfen ;o)

http://volleyball.al-d82.net/vbcms/index.php

Habe folgendes Problem:

Mein Menü ist zu weit rechts :o(

Wie bekomme ich es hin, dass die Navigation so weit links anfängt wie "TEST TEST"

Menü wird

Code: Select all

<div id="nav">
               {menu collapse="1"}
             </div>
angebunden

CSS dazu

Code: Select all


#nav {
	padding-bottom: 40px;
	width: 190px;
}
/* leave the padding-bottom in the #nav if you want some space between the navigation and the photos in the left column */
#nav ul li {
	display: inline;
	line-height: 16px;
	list-style: none;
}
#nav ul li a {
	border-bottom: 1px solid #c9dcea;
	color: #fff;
	display: block;
	padding: 5px;
	text-decoration: none;
	width: 190px;
}
/* remove the 'text-decoration: underline;' in #nav li a:hover if you don't want the links in the left nav menu to be underlined when the user hovers over them with their mouse */
#nav li a:hover {
	background: #c9dcea url(uploads/tgoffenau/selector.gif) center right no-repeat;
	color: #000;
}
/* the following 3 rules are for the submenu, if you removed the submenu remove these rules as well */
#nav ul ul li {
	line-height: 10px;
	border-bottom: none;
        background: #FD9898;
}
#nav ul ul li a {

        border-bottom: 1px dashed #ffffff;
        background: #FD9898;
	color: #FE0000;
	text-indent: 10px;
}
#nav ul ul li a:hover {
	color: #000000;
	background-image: url(uploads/tgoffenau/selector_sub.gif);
}

#nav ul ul ul li {
	line-height: 15px;
	border-bottom: none;
        background: #FFB8B7;
}
#nav ul ul ul li a {
        border-bottom: 1px dotted #ffffff;
        background: #FFB8B7;
	color: #FE0000;
	text-indent: 15px;
}
#nav ul ul ul li a:hover {
	color: #000000;
	background-image: url(uploads/tgoffenau/selector_sub.gif);
}

#nav ul ul ul ul li {
	line-height: 18px;
	border-bottom: none;
        background: #FFE1E1;
}
#nav ul ul ul  ul li a {
        border-bottom: 1px dotted #ffffff;
        background: #FFE1E1;
	color: #FE000;
	text-indent: 18px;
}
#nav ul ul ul ul li a:hover {
	color: #000000;
	background-image: url(uploads/tgoffenau/selector_sub.gif);
}
Gruß AL
Last edited by AL-d82 on Fri Mar 12, 2010 2:12 pm, edited 1 time in total.
User avatar
Morpheus1968
Forum Members
Forum Members
Posts: 86
Joined: Mon Mar 08, 2010 11:49 am

Re: Menü - Navigation - anpassen

Post by Morpheus1968 »

ich denke mal das padding muss auf 0px

oder floating : left einstellen
owr_bgld

Re: Menü - Navigation - anpassen

Post by owr_bgld »

mir persönlich fehlt im css das #nav ul - damit kannst du das gesamte ul positionieren, da ja (fast?) jeder Browser bei einem ul von haus aus nach rechts verschiebt:

Code: Select all

#menu_vert ul {
/* remove any bullets */
	list-style: none;
/* margin/padding set in li */
	margin: 0 0 0 10px; /* Werte für oben rechts unten links */
	padding: 0px;
        border: 1px solid transparent;
}
Das ist das ul aus Simple - Vertical (welches beim Core schon mit drauf war). Mit linker Wert 0 anstatt 10px sollte die gesamte Liste eigentlich in einer Linie mit TestTest angezeigt werden. Wenn es noch um einige Pixel zu weit rechts ist, kannst du es mit einem negativen margin (z.B. -2px) versuchen.

Aber ein eventueller anderer Tipp, da ich mir schon den Quelltext angesehen habe - du hast ziemlich viel mit Tabelle und div verschachtelt. Wenn dein Template so einfach bleiben soll würde ich nur auf Anzeige via div wechseln und die Tabellen entsorgen.
AL-d82

Re: Menü - Navigation - anpassen

Post by AL-d82 »

Morpheus1968 wrote: ich denke mal das padding muss auf 0px

oder floating : left einstellen
hab padding alles auf 0 gesetzt dann wird nur die Zeile von der Höhe schmäler .

Hab hab floatüberall auf left gesetzt.

Leider immer noch so weit rechts :-(
AL-d82

Re: Menü - Navigation - anpassen

Post by AL-d82 »

owr_bgld wrote: mir persönlich fehlt im css das #nav ul - damit kannst du das gesamte ul positionieren, da ja (fast?) jeder Browser bei einem ul von haus aus nach rechts verschiebt:

Code: Select all

#menu_vert ul {
/* remove any bullets */
	list-style: none;
/* margin/padding set in li */
	margin: 0 0 0 10px; /* Werte für oben rechts unten links */
	padding: 0px;
        border: 1px solid transparent;
}
Das ist das ul aus Simple - Vertical (welches beim Core schon mit drauf war). Mit linker Wert 0 anstatt 10px sollte die gesamte Liste eigentlich in einer Linie mit TestTest angezeigt werden. Wenn es noch um einige Pixel zu weit rechts ist, kannst du es mit einem negativen margin (z.B. -2px) versuchen.

Aber ein eventueller anderer Tipp, da ich mir schon den Quelltext angesehen habe - du hast ziemlich viel mit Tabelle und div verschachtelt. Wenn dein Template so einfach bleiben soll würde ich nur auf Anzeige via div wechseln und die Tabellen entsorgen.

Danke für den Tipp. ich schau mir gleich mal die Einstellungen an ;)

Leider bin ich nicht so Fit in sachen Layout über zu definieren :-(
Deswegen benutze ich die Tabellen ;-)
owr_bgld

Re: Menü - Navigation - anpassen

Post by owr_bgld »

ist zwar etwas offtopic, aber ich kann dir die Seite wärmstens empfehlen: http://www.css4you.de/wslayout1/index.html

Ein gutes Beispiel sind auch die templates die schon dabei sind bei cmsms samt deren stylesheets
Last edited by owr_bgld on Fri Mar 12, 2010 2:11 pm, edited 1 time in total.
cyberman

Re: Menü - Navigation - anpassen

Post by cyberman »

owr_bgld wrote: ist zwar etwas offtopic, aber ich kann dir die Seite wärmstens empfehlen: http://www.css4you.de/wslayout1/index.html
Tipps auf gute Einsteiger-Seiten sind hier immer willkommen :) ...
owr_bgld

Re: Gelöst: Menü - Navigation - anpassen

Post by owr_bgld »

Schön, dass es funktioniert hat, nur hätte ich die Frage, ob du auch versucht hast das ul mittels css und margin: zu formatieren oder gleich nur das ul li ,it dem negativen margin bearbeitet hast.

Und nochmal der Tipp mit den Tables und divs: Versuch das template wirklich nur mit divs aufzubauen, denn mit den Einstellungen xhml 1.0 und den tabellen hast du ziemlich viele Validierungsfehler. Auch wenn alles richtig angezeigt wird.

http://validator.w3.org/check?uri=http% ... Findex.php

Hauptproblem sind die Tabellen - am besten mach eine zweite Seite, die genau aufgebaut ist wie die Startseite, gib bei menü das häckchen weg und nimm in der Auswahl ein anderes Template. Mit diesem kannst du dann üben was das Zeug hält, denn dann wird das originale das jetzt ja zumindest vom Aussehen her funktioniert nicht geändert. Und du kannst dir die Seite ja durch direkteingabe in der Adressleiste immer wieder anschauen.

Einige kleinere Fehler sind auch noch drinnen: div id="content" ist zweimal vorhanden, dürfte jedoch nur einmal sein (id darf immer nur einmalig vorkommen)

tags, die kein Endtag haben müssen mit /> enden.
z.B. (da gibts mit einen endtag, der browser weiß also genau wo aufhört)
da es da ja kein gibt muss vor der > ein / rein.
Post Reply

Return to “Layout und Design”