[gelöst] Menüplatzierung in Safari

[elle]

Ich brauche doch nochmal eure Hilfe für meine WEbseite...hoffentlich das letzte Mal, dass ich hier das ganze Forum beanspruche!
Ich komme mit der Platzierung meines einen Untermenüs einfach nicht klar.

http://web18.server23.campusspeicher.de/cmsmadesimple/index.php?page=work-2

Das linke Menü sollte eigentlich weiter links unter PORT-E sitzen. In Firefox sieht es richtig aus, aber bei Safari stimmt irgend etwas nicht. Im Anhang ist nochmal ein Screenshot.

Ich bin den Quelltext jetzt mehrmals durchgegangen und finde das Problem einfach nicht.
Dass Stylesheet sieht wie folgt aus:

Code: Select all

div #menu_projekte{
margin-left:0px;
padding: 0px;
}

div#menu_projekte ul {
list-style-type: none;
list-style-position: outside;
}

div#menu_projekte ul li a {
color: #fff;
font-weight: 100;
display: block;
border-bottom: 1px dotted #666;
letter-spacing: 0.1em;
font-size: 0.9em;
padding: 10px 0px 10px 5px;
text-align: left;
margin: 0px;
} 


/* hover state for links */
div#menu_projekte li a:hover {
color: #bcd774;
}

div#menu_projekte a.activeparent:hover {
   color: #bcd774;

}

div#menu_projekte ul h3 {
   display: block; 
   color: #bcd774;                     
  font-size: 0.9em;
 letter-spacing: 0.1em;
border-bottom: 1px dotted #666;
font-weight: 100;
margin: 0px;       
padding: 10px 0px 10px 5px; }

Der Seitenquelltext ist so:

Code: Select all

<div id="wrapper">
<div id="links">
<div id="header">
<h1><a href="http://web18.server23.campusspeicher.de/cmsmadesimple/" title="Home Page, shortcut key=1">port-e</a></h1>
</div>

     <div id="sidebar">
       
            <div id="menu_projekte">
 

                    <ul><li> 

<ul>

<li><a href="http://web18.server23.campusspeicher.de/cmsmadesimple/index.php?page=architektur"><dfn>2.1: </dfn>Architektur</a>


</li>

<li><a href="http://web18.server23.campusspeicher.de/cmsmadesimple/index.php?page=fotografie"><dfn>2.2: </dfn>Fotografie</a>


</li>

<li><a href="http://web18.server23.campusspeicher.de/cmsmadesimple/index.php?page=webdesign"><dfn>2.3: </dfn>Webdesign</a>


</li>
</ul>
</li></ul>

      </div>
            </div>
</div>

Wo könnte nur das Problem liegen?
LG elle

[cyberman]

Und wie siehts mit der CSS für div.sidebar aus?

PS: Mit

Code: Select all

* {
margin: 0;
padding: 0;
}

am Anfang einer CSS setzt du so ziemlich alle Abstände einer Seite auf 0 .

[NaN]

Hab jetzt grade leider keinen Mac zur Hand.
Aber wenn ich mir den HTML Code etwas genauer anschaue, dann dann macht mich eines stutzig:

Das Menü oben quer und das "Untermenü" links sind in ein und derselben Liste 

Da muss man ja ganz schön hart mit CSS formatieren um das so hinzukriegen.
Und dann ist klar, dass da dann einige Browser nicht mitmachen.
Wieso verwendest Du nicht zwei separate Menüs?
Eins für die Links in der ersten Ebene und eins für die Links in der zweiten ebene.
Also im Template für das erste Menü:

{cms_module module=menuManager number_of_levels=1}

und für das zweite

{cms_module module=menuManager start_element="1.1" show_root_siblings="1" collapse="0"}

[elle]

Und wie siehts mit der CSS für div.sidebar aus?

Code: Select all

body {
   background-color: #333;
   color: #fff;
  margin: 0px;}

/* center wrapper, min max width */
div#wrapper {
   margin: 0 auto;     /* this centers wrapper */
   width: 870px; /* IE wont understand these, so we will use javascript magick */
 
}

div#links {
float: left;
width: 250px;
margin: 0px;
}

div#rechts {
float: right; 
width: 620px;
margin: 0px;
}




div#header {
   height: 160px; /* adjust according your image size */
   background: #333;           
margin:0px;
width: 250px;
}

div#header h1 a {
/* you can set your own image here */
   background: #333 url(uploads/images/logo.gif) no-repeat; 
   display: block;
   margin-top: 107px;
   height: 53px;             /* adjust according your image size */
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

div#menu {
background: url(uploads/images/menuhg.gif) repeat-x;
height: 160px;
width: 100%;
margin: 0px;
}


div#sidebar{
padding: 30px 0px 0px 0px;
width: 250px;
}

Das Menü oben quer und das "Untermenü" links sind in ein und derselben Liste 

Stimmt. Ich hab Webdesign/Architektur/Fotografie es als Unterpunkte von Work in den Seitenübersichtsliste von CMSMS gemacht. Ich hab es einfach irgendwie nicht besser gewusst, wie. Ich versuch es mal mit deinen Tags.

Code: Select all

 <div id="sidebar">
       
            <div id="menu_projekte">
 

                    <ul><li> 

<ul>

<li><a href="http://..page=architektur"><dfn>2.1: </dfn>Architektur</a>


</li>

<li><a href="http://...page=fotografie"><dfn>2.2: </dfn>Fotografie</a>


</li>

<li><a href="http://...page=webdesign"><dfn>2.3: </dfn>Webdesign</a>


</li>
</ul>
</li></ul>

      </div>
            </div>
</div>

<div id="rechts">
<div id="menu">
			<ul id="imap">

<li id="button_2" class="selected"><a class="selected"  id="a64" href="...p?page=work-2">Work</a>

			<ul>

	
		<li id="button_2.1"><a href="http://...page=architektur">Architektur</a></li>

	
		<li id="button_2.2"><a href="http://...page=fotografie">Fotografie</a></li>

	
		<li id="button_2.3"><a href="http://..page=webdesign">Webdesign</a></li></ul></li>
	
		<li id="button_3"><a href="http:/...page=blog">Away</a></li>

	
		<li id="button_4"><a href="http://...page=work">About</a></li>
			</ul>

</div>

[elle]

Noch eine Frage:
jetzt verwende ich im Template: {menu template='port-e navigation'} für die Hauptnavigation - kann ich das einfach mit {cms_module module=menuManager number_of_levels=1} ersetzten. Für das Untermenü steht jetzt {menu template='menu_projekte' start_level='2' collapse='1'}. Verweis ich also zum menuManager statt zu meinem Template?

[NaN]

Ähm, nee, sorry, das mit dem Template habe ich weggelassen, weil ich nicht wusste welches Template Du verwendest.
Das Template muss da schon noch mit rein.
Du kannst sowohl {cms_module module=MenuManager ... } als auch {menu ... } verwenden.
Letzteres soll etwas schneller sein.
Also:

{menu number_of_levels=1 template='port-e navigation'}

bzw.

{menu template='menu_projekte' start_level='2' collapse='1'}

oder

{menu start_element="1.1" show_root_siblings="1" collapse="1"}

Das mit dem Parameter start_level hatte bei mir anfangs nicht funktioniert (weiß der Geier warum). Daher habe ich da noch eine andere Möglichkeit gezeigt.

Mit zwei getrennten Menüs kannst Du meiner Meinung nach jedes Menü besser formatieren.
Du könntest sogar rein theoretisch das gleiche Template für beide Menüs nutzen.
Wenn Du jedes Menü in ein eigenes DIV mit einer eigenen ID packst, dann kannst Du sie auch getrennt formatieren.

[elle]

Wow - dein Tipp hat echt alle Probleme gelöst! Vielen Vielen Dank, dahinter wäre ich alleine echt nicht gekommen.

LG elle

[NaN]

Ich bin immer wieder verblüfft wie ein paar Kleinigkeiten das Gesamtbild einer Seite verbessern können.
Jetzt brauchst Du Dich nur noch um den Internet Explorer und die Galerie (siehe Bild im Anhang; Seite "Architektur") kümmern und viollá!

Eines noch: Wenn der Inhalt links (Menü usw.) auch oben mit dem Hauptinhalt auf einer Linie wäre, könnte es vielleicht perfekt sein