CMS Made Simple Forums

Content management as it is meant to be
https://forum.cmsmadesimple.org/

Gelöst: Menü - Navigation - anpassen

https://forum.cmsmadesimple.org/viewtopic.php?t=42302

Page 1 of 1

Gelöst: Menü - Navigation - anpassen

Posted: Fri Mar 12, 2010 12:06 pm
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

Re: Menü - Navigation - anpassen

Posted: Fri Mar 12, 2010 12:43 pm
by Morpheus1968
ich denke mal das padding muss auf 0px

oder floating : left einstellen

Re: Menü - Navigation - anpassen

Posted: Fri Mar 12, 2010 1:09 pm
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.

Re: Menü - Navigation - anpassen

Posted: Fri Mar 12, 2010 1:15 pm
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 :-(

Re: Menü - Navigation - anpassen

Posted: Fri Mar 12, 2010 1:17 pm
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 ;-)

Re: Menü - Navigation - anpassen

Posted: Fri Mar 12, 2010 2:06 pm
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

Re: Menü - Navigation - anpassen

Posted: Sun Mar 14, 2010 11:59 am
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 :) ...

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

Posted: Sun Mar 14, 2010 12:48 pm
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.
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited