Darstellungsprobleme mit der Top Navigation nach Update von 3.5 auf 4.4.39

Hallo Leute,

ich habe versucht die Seite der Freien Schwimmer Wuppertal von 3.5 auf 4.4.39 upzudaten.

Es hat soweit auch alles geklappt, aber bei der Top Navigation gibt es noch ein paar Probleme.

Hier die Seite in Contao 3.5 www.freie-schwimmer-wuppertal.de

Hier die Seite in Contao 4.4.39 neu.freie-schwimmer-wuppertal.de

Vielleicht hat einer eine Idee.

Vielen Dank für die Hilfe

Gruß

Markus

Hier ist der css Code für die Navigation.

Code:

---

Name:        fsw
Änderungsdatum:        24.05.2010 18:26
Medientypen:        all

    Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 51 erstellen

Main Navigation  level 1 hor
#nav {
    height:32px;
    background:#D7D7D7 url("files/fsw/layout/nav_bg.jpg") left top repeat-x;
    line-height:32px;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 52 erstellen

#nav ul {
    margin:0;
    padding:0;
    list-style-type:none;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 53 erstellen

#nav li {
    display:inline;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 54 erstellen

#nav a,
#nav span {
    float:left;
    display:block;
    padding-right:10px;
    padding-left:10px;
    border-right:1px solid #fff;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 55 erstellen

#nav a:link,
#nav a:visited {
    text-decoration:none;
    color:#333;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 56 erstellen

#nav a:hover,
#nav a:focus,
#nav a:active {
    background-image:url("files/fsw/layout/nav_bg_aktiv.jpg");
    background-position:left top;
    background-repeat:repeat-x;
    text-decoration:none;
    color:#fff;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 57 erstellen

#nav span.active {
    background-image:url("files/fsw/layout/nav_bg_aktiv.jpg");
    background-position:left top;
    background-repeat:repeat-x;
    text-decoration:none;
    color:#fff;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 58 erstellen

#nav .trail a:link,
#nav .trail a:visited,
#nav .trail a:hover,
#nav .trail a:focus,
#nav .trail a:active {
    background-image:url("files/fsw/layout/nav_bg_aktiv.jpg");
    background-position:left top;
    background-repeat:repeat-x;
    color:#fff;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 59 erstellen

#nav .trail a:hover,
#nav .trail a:focus,
#nav .trail a:active {
    text-decoration:underline;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 62 erstellen

#subnav {
    margin:36px 0 5px 10px;
    background-color:#fff;
    border-top:1px solid #D7D7D7;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 128 erstellen

#subnav .level_2 {
    margin:0 0 5px 10px;
    padding-left:10px;
    background-image:url("files/fsw/layout/subnav_bg.jpg");
    background-repeat:repeat-x;
    border-top:1px solid #D7D7D7;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 63 erstellen

#subnav ul {
    margin:0;
    padding:0;
    list-style-type:none;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 64 erstellen

#subnav li {
    padding-top:1px;
    border-bottom:1px solid #D7D7D7;
    line-height:29px;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 65 erstellen

#subnav a,
#subnav span.active {
    display:block;
    padding-left:10px;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 66 erstellen

#subnav a:link,
#subnav a:visited {
    text-decoration:none;
    color:#333;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 153 erstellen

#subnav a:hover {
    background-color:#b0afb3;
    background-position:left bottom;
    background-repeat:repeat-x;
    text-decoration:none;
    color:#000;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 67 erstellen

#subnav a:hover,
#subnav a:focus,
#subnav a:active {
    background-image:url("files/fsw/layout/subnav_bg.jpg");
    background-position:left bottom;
    background-repeat:repeat-x;
    text-decoration:none;
    color:#fff;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 68 erstellen

#subnav span.active {
    background-image:url("files/fsw/layout/subnav_bg_aktiv.gif");
    background-position:left bottom;
    background-repeat:repeat-x;
    border-left:4px solid #c00;
    text-decoration:none;
    color:#000;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 69 erstellen

#subnav .trail a:link,
#subnav .trail a:visited,
#subnav .trail a:hover,
#subnav .trail a:focus,
#subnav .trail a:active {
    background-image:url("files/fsw/layout/subnav_bg.jpg");
    background-position:left bottom;
    background-repeat:repeat-x;
    color:#fff;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 70 erstellen

* html #subnav a,
* html #subnav span.active {
    height:1%;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 71 erstellen

#subnav ul ul {
    padding-left:10px;
    border-top:1px solid #D7D7D7;
}

Formatdefinition bearbeiten Formatdefinition duplizieren Formatdefinition verschieben Formatdefinition löschen Sichtbarkeit ändern Formatdefinitionsdetails Neues Formatdefinition nach ID 72 erstellen

#subnav .level_2 li.last {
    border-bottom:0px;
}

---

Hi,

du sprichst im CSS die ID #nav an (3.5). Diese ID fehlt in der 4er Version scheinbar.

Viele Grüße

Hatte vergessen die CSS-ID/Klasse anzugeben.

Aber trotzdem ist es noch verschoben und die aktive Seite steht ganz rechts.

Edit:
Bei dir war noch von Contao 3 das span gestyled. Dein Link zu Contao 3 hat noch keine spans in der Navi (außer der aktive Punkt). C4 hat in jedem Element ein Span....und der aktive Punkt ist ein strong. Deshalb sieht dort die Navi komisch aus.

Entferne einfach das #nav span und ersetze es durch #nav strong.

Code:

---

#nav a, #nav span {
    float: left;
    display: block;
    padding-right: 10px;
    padding-left: 10px;
    border-right: 1px solid #fff;
}

---

Code:

---

#nav a, #nav strong{
    float: left;
    display: block;
    padding-right: 10px;
    padding-left: 10px;
    border-right: 1px solid #fff;
}

---

Gib deinem #nav ul display:flex und entferne display:inline bei #nav li. Dann springt der Punkt nicht mehr nach hinten.

Code:

---

#nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display:flex;
}

---

Sorry...20 mal editiert :-D

@ Kahmoon

vielen Dank. Das hat soweit geklappt.

Leider wird wenn man längere Menüpunkte auswählt der Punkt unsrere Kurse abgeschnitten.

Kann man das auch noch abstellen?

Gruß

Markus

Code:

---

Name:        fsw
Änderungsdatum:        24.05.2010 18:26
Medientypen:        all


Main Navigation  level 1 hor
#nav {
    height:32px;
    background:#D7D7D7 url("files/fsw/layout/nav_bg.jpg") left top repeat-x;
    line-height:32px;
}


#nav ul {
    margin:0;
    padding:0;
    list-style-type:none;
    display:flex;
}


#nav li {
}


#nav a,
#nav strong {
    float:left;
    display:block;
    padding-right:10px;
    padding-left:10px;
    border-right:1px solid #fff;
}


#nav a:link,
#nav a:visited {
    text-decoration:none;
    color:#333;
}


#nav a:hover,
#nav a:focus,
#nav a:active {
    background-image:url("files/fsw/layout/nav_bg_aktiv.jpg");
    background-position:left top;
    background-repeat:repeat-x;
    text-decoration:none;
    color:#fff;
}


#nav strong.active {
    background-image:url("files/fsw/layout/nav_bg_aktiv.jpg");
    background-position:left top;
    background-repeat:repeat-x;
    text-decoration:none;
    color:#fff;
}


#nav .trail a:link,
#nav .trail a:visited,
#nav .trail a:hover,
#nav .trail a:focus,
#nav .trail a:active {
    background-image:url("files/fsw/layout/nav_bg_aktiv.jpg");
    background-position:left top;
    background-repeat:repeat-x;
    color:#fff;
}


#nav .trail a:hover,
#nav .trail a:focus,
#nav .trail a:active {
    text-decoration:underline;
}


#subnav {
    margin:36px 0 5px 10px;
    background-color:#fff;
    border-top:1px solid #D7D7D7;
}


#subnav .level_2 {
    margin:0 0 5px 10px;
    padding-left:10px;
    background-image:url("files/fsw/layout/subnav_bg.jpg");
    background-repeat:repeat-x;
    border-top:1px solid #D7D7D7;
}


#subnav ul {
    margin:0;
    padding:0;
    list-style-type:none;
}


#subnav li {
    padding-top:1px;
    border-bottom:1px solid #D7D7D7;
    line-height:29px;
}


#subnav a,
#subnav span.active {
    display:block;
    padding-left:10px;
}


#subnav a:link,
#subnav a:visited {
    text-decoration:none;
    color:#333;
}


#subnav a:hover {
    background-color:#b0afb3;
    background-position:left bottom;
    background-repeat:repeat-x;
    text-decoration:none;
    color:#000;
}


#subnav a:hover,
#subnav a:focus,
#subnav a:active {
    background-image:url("files/fsw/layout/subnav_bg.jpg");
    background-position:left bottom;
    background-repeat:repeat-x;
    text-decoration:none;
    color:#fff;
}


#subnav span.active {
    background-image:url("files/fsw/layout/subnav_bg_aktiv.gif");
    background-position:left bottom;
    background-repeat:repeat-x;
    border-left:4px solid #c00;
    text-decoration:none;
    color:#000;
}


#subnav .trail a:link,
#subnav .trail a:visited,
#subnav .trail a:hover,
#subnav .trail a:focus,
#subnav .trail a:active {
    background-image:url("files/fsw/layout/subnav_bg.jpg");
    background-position:left bottom;
    background-repeat:repeat-x;
    color:#fff;
}


* html #subnav a,
* html #subnav span.active {
    height:1%;
}


#subnav ul ul {
    padding-left:10px;
    border-top:1px solid #D7D7D7;
}


#subnav .level_2 li.last {
    border-bottom:0px;
}

---

EDIT

so im posten habe ich den Fehler gefunden!!!

Code:

---

#subnav a,
#subnav strong.active {
    display:block;
    padding-left:10px;
}

---

Habe ich glatt übersehen

@Kahmoon

Hallo Kahmoon,

ich benötige bitte noch mal Deine Hilfe.
Die Hauptnavigation habe ich soweit hinbekommen.
Leider hakt es noch etwas bei der subNavigation.

anbei 2 Grafiken
bei der einen in 3.5 wird das aktieve Feld komplett ausgefüllt, und unter der 4.4 nur der Text. kann man das ändern?

Danke für die Hilfe

Gruß

Markus

Hier der css Code für subnav

Code:

---

#subnav {
    margin:36px 0 5px 10px;
    background-color:#fff;
    border-top:1px solid #D7D7D7;
}


#subnav .level_2 {
    margin:0 0 5px 10px;
    padding-left:10px;
    background-image:url("files/fsw/layout/subnav_bg.jpg");
    background-repeat:repeat-x;
    border-top:1px solid #D7D7D7;
}


#subnav ul {
    margin:0;
    padding:0;
    list-style-type:none;
}


#subnav li {
    padding-top:1px;
    border-bottom:1px solid #D7D7D7;
    line-height:29px;
}


#subnav a,
#subnav span.active {
    display:block;
    padding-left:10px;
}


#subnav a:link,
#subnav a:visited {
    text-decoration:none;
    color:#333;
}

#subnav a:hover {
    background-color:#b0afb3;
    background-position:left bottom;
    background-repeat:repeat-x;
    text-decoration:none;
    color:#000;
}


#subnav a:hover,
#subnav a:focus,
#subnav a:active {
    background-image:url("files/fsw/layout/subnav_bg.jpg");
    background-position:left bottom;
    background-repeat:repeat-x;
    text-decoration:none;
    color:#fff;
}


#subnav strong.active {
    background-image:url("files/fsw/layout/subnav_bg_aktiv.gif");
    background-position:left bottom;
    background-repeat:repeat-x;
    border-left:4px solid #c00;
    text-decoration:none;
    color:#000;
}


#subnav .trail a:link,
#subnav .trail a:visited,
#subnav .trail a:hover,
#subnav .trail a:focus,
#subnav .trail a:active {
    background-image:url("files/fsw/layout/subnav_bg.jpg");
    background-position:left bottom;
    background-repeat:repeat-x;
    color:#fff;
}


* html #subnav a,
* html #subnav span.active {
    height:1%;
}

#subnav ul ul {
    padding-left:10px;
    border-top:1px solid #D7D7D7;
}


#subnav .level_2 li.last {
    border-bottom:0px;
}

---

Sieht bei beiden Links OK aus!?

Ja jetzt hat es geklappt.

vielen Dank

Gruß

Markus