Antworten auf deine Fragen:
Neues Thema erstellen

CSS-Problem mit Navigation

bernhard2

Noch nicht viel geschrieben

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
 
Zuletzt bearbeitet:

simonpicos

Mod | Forum

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

Noch nicht viel geschrieben

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

Mod | Forum

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 :D

//

Sorry, ich blindfisch, danke an xuLLix
 
Zuletzt bearbeitet:

xuLLix

Dr. der Blödsinnologie

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 :)
 
Zuletzt bearbeitet:

manfred_hst

Nicht mehr ganz neu hier

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
 
Zuletzt bearbeitet von einem Moderator:

xuLLix

Dr. der Blödsinnologie

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

Noch nicht viel geschrieben

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

Mod | Web

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

Noch nicht viel geschrieben

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

Noch nicht viel geschrieben

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!
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.615
Beiträge
1.538.352
Mitglieder
67.527
Neuestes Mitglied
Christian Eidelloth
Oben