CSS-Problem mit Navigation

bernhard2 · 06.01.2012

Hallo Zusammen,

nach langem probieren und Suchen nach einer Lösung stehe ich mit meinem Wissen an:

So sollte das Ergebnis fertig aussehen, hier der Photoshop-Entwurf:

Das ist mein Ergebnis, "ähnlicher" habe ich es nicht geschafft:

CSS-Code für die Navigation:

PHP:

.menu_footer {   
  width: 679px;    
  height:95px; 
  float:left;     
  font-size:9px;
 } 

.menu_footer {   
  width:709px;  
  overflow:hidden; 
 }
 .menu_footer ul { 
/* all lists */  
  list-style: none; } 

 .menu_footer ul li {  
   float:left;
 } 
 .menu_footer li a {   
 font-family:Arial, Helvetica, sans-serif;  
  text-decoration:none;  
  color:#000066;   
  text-align:left;  
  font-weight:bold;  
  display:block;
 }  
.menu_footer ul li ul a {  
   font-family:Arial, Helvetica, sans-serif;  
   text-decoration:none;  
   color:#000066;  
   text-align:left;  
   list-style:none;  
   background-color:red;  
   font-weight:normal;

EDIT: Ich sehe gerade, dass der Code in einer langen Schlange angezeigt wird. Gibts einen Trick den hier besser einzubinden?

Ich würde mich sehr über Hilfestellungen freuen, ein Blick von Außenstehenden kann ja manchmal wirklich Wunder wirken.

MfG
Bernhard

simonpicos · 06.01.2012

AW: CSS-Problem mit Navigation

Ja gibt es: Zeilenumbrüche hier im Editor einfügen

Zu deinem Problem: Auf den beiden Bildern kann man nichts erkennen. Lade sie bitte in besserer Auflösung hoch. Zu deinem Versuch: Lad ihn am besten irgendwo hoch, da isteine Problemanalyse für uns deutlich leichter

bernhard2 · 06.01.2012

AW: CSS-Problem mit Navigation

Danke für den Tipp mit den Zeilenumbrüchen, habe den Post oben angepasst.

Eine Online-Demo habe ich unter hochgeladen.

So sollte lt. PSD das Endprodukt aussehen:

simonpicos · 06.01.2012

AW: CSS-Problem mit Navigation

Hi bernhard, ist schon vieel besser mit der livedemo

Ich verstehe aber nicht so genau wo es bei dir hakt. Auf den ersten Blick sieht es doch im Grunde genommen so aus wie im Entwurf..

Sorry, falls ich gerade einfach nur zu doof bin es zu sehen

//

Sorry, ich blindfisch, danke an xuLLix

xuLLix · 06.01.2012

AW: CSS-Problem mit Navigation

Unten der Footer ist gemeint...

Leider fuchs ich mich auch gerade erst in die Welt von CSS und sehe den fehler nicht

manfred_hst · 06.01.2012

AW: CSS-Problem mit Navigation

hallo bernhard2,
ich habe mal den quelltext (html) etwas bearbeitet,

HTML:

<ul class="menu">
    <li class="item-103 current active deeper parent">
    <a href="/" >Home</a>
        <ul>
            <li class="item-108">
            <a href="/index.php/erster-inhalt/about-us" >About us</a>
            </li>
        </ul>
        <ul>
            <li class="item-110">
            <a href="/index.php/erster-inhalt/contact" >Contact</a>
            </li>
        </ul>
        <ul>
            <li class="item-111">
            <a href="/index.php/erster-inhalt/publications" >Publications</a>
            </li>
        </ul>
        <ul>
            <li class="item-162">
            <a href="/index.php/erster-inhalt/login" >Login</a>
            </li>
        </ul>
    </li>
    <li class="item-104 deeper parent">
    <a href="/index.php/team" >Team</a>
        <ul>
            <li class="item-112 parent">
            <a href="/index.php/team/faculty" >Faculty</a>
            </li>
        </ul>
        <ul>
            <li class="item-113">
            <a href="/index.php/team/associated-faculty" >Associated Faculty</a>
            </li>
        </ul>
        <ul>
            <li class="item-114">
            <a href="/index.php/team/fellows" >Fellows</a>
            </li>
        </ul>
        <ul>
            <li class="item-115 parent">
            <a href="/index.php/team/staff" >Staff</a>
            </li>
        </ul>
        <ul>
            <li class="item-116 parent">
            <a href="/index.php/team/students" >Students</a>
            </li>
        </ul>
    </li>
    <li class="item-105 deeper parent">
    <a href="/index.php/2011-12-13-23-18-46" >Research Programme</a>
        <ul>
            <li class="item-117">
            <a href="/index.php/2011-12-13-23-18-46/representations-and-data-models" >Representations and Data Models</a>
            </li>
        </ul>
        <ul>
            <li class="item-118">
            <a href="/index.php/2011-12-13-23-18-46/time-and-process-models" >Time and Process Models</a>
            </li>
        </ul>
        <ul>
            <li class="item-119">
            <a href="/index.php/2011-12-13-23-18-46/spatialization-media-and-society" >Spatialization, Media and Society</a>
            </li>
        </ul>
    </li>
    <li class="item-106 deeper parent">
    <a href="/index.php/2011-12-13-23-23-04" >Education Programme</a>
        <ul>
            <li class="item-121">
            <a href="/index.php/2011-12-13-23-23-04/seminars" >Seminars</a>
            </li>
        </ul>
        <ul>
            <li class="item-122">
            <a href="/index.php/2011-12-13-23-23-04/courses" >Courses</a>
            </li>
        </ul>
        <ul>
            <li class="item-123">
            <a href="/index.php/2011-12-13-23-23-04/special-efforts" >Special Efforts</a>
            </li>
        </ul>
        <ul>
            <li class="item-124">
            <a href="/index.php/2011-12-13-23-23-04/thesis" >Thesis</a>
            </li>
        </ul>
    </li>
    <li class="item-107 deeper parent">
    <a href="/index.php/2011-12-13-23-23-23" >Application</a>
        <ul>
            <li class="item-125">
            <a href="/index.php/2011-12-13-23-23-23/fwf-funded-students" >FWF funded Students</a>
            </li>
        </ul>
        <ul>
            <li class="item-126">
            <a href="/index.php/2011-12-13-23-23-23/associated-students" >Associated Students</a>
            </li>
        </ul>
    </li>
</ul>
da muss jedes <li> mit einem <ul> eingeschlossen werden.
und ein wenig die css

.menu_footer ul li ul a {
    font-family:Arial, Helvetica, sans-serif;
    text-decoration:none;
    color:#000066;
    text-align:left;
    list-style:none;
    background-color:red;
    font-weight:normal;
    margin-left: -40px;
    margin-right: 60px;
    }

damit die menupunkte untereinander stehen.
ich hoffe, das hilft.
MfG
Manfred

xuLLix · 06.01.2012

AW: CSS-Problem mit Navigation

Ach genau..der Fehler liegt in HTML

Manfred, wenn du auf Erweitert klickts, hast du die Möglichkeit, Code/HTML/PHP in Boxen dazustellen. Sieht besser aus und stört nicht so beim lesen

bernhard2 · 06.01.2012

AW: CSS-Problem mit Navigation

Erstmal danke euch dreien, dass ihr mir so schnell weiterhelft!

Ich hatte vorher leider vergessen zu erwähnen, dass der HTML-Code von Joomla generiert wird. Also es handelt sich um ein eigens erstelltelltes Template.
Werde nun versuchen die Code-Ausgabe zu beeinflussen.

sokie · 07.01.2012

AW: CSS-Problem mit Navigation

erstmal sollte der code output von Joomla alle möglichkeiten zum stylen offenlassen.
schau dir mal dein css etwas genauer an, das sind ein paar ungereimtheiten drin... zB

PHP:

.menu_footer ul li ul a {
    font-family:Arial, Helvetica, sans-serif;
    text-decoration:none;
    color:#000066;
    text-align:left;
    list-style:none;
    background-color:red;
    font-weight:normal;
    
    }

da setzt du stylings ein die nur für li gelten, sitzt mit dem selector aber auf dem a element.
wenn du den list items da in dem bereich tatsächlich eine breite gibst, sieht das ganze gleich sehr viel besser aus.

markusn9516 · 07.01.2012

AW: CSS-Problem mit Navigation

Das mit Joomla habe ich mir bereits beim betrachten gedacht

Das Problem warum diese nicht untereinander sind, liegt daran, dass du hier die selbe Klasse bei den Listen verwendest wie im Header bei der Menüzeile. Diese Klasse ordnet aber die Elemente in einer Liste so wie oben, waagrecht an

Ich hoffe ich konnte dir den theoretischen Teil erklären, warum das so und nicht so aussieht, damit ich dir das richtig stelle, habe ich momentan leider zu wenig Zeit, da ich sehr unter Stress stehe

bernhard2 · 07.01.2012

AW: CSS-Problem mit Navigation

Danke für euren Input, da mus ich noch etwas umbauen.

Dass mir hier eine fix und fertige Lösung auf dem Sibertablett geboten wird, das wäre zu viel des guten. Mit den Hinweisen ist mir schon gut geholfen.
Danke dafür!