Contao-Camp 2024
Ergebnis 1 bis 8 von 8

Thema: Darstellungsprobleme mit der Top Navigation nach Update von 3.5 auf 4.4.39

  1. #1
    Contao-Nutzer
    Registriert seit
    20.06.2009.
    Ort
    Winterberg, Sauerland
    Beiträge
    72

    Standard 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;
    }

  2. #2
    Contao-Fan Avatar von Fehrmann
    Registriert seit
    04.07.2009.
    Ort
    Wismar
    Beiträge
    580
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hi,

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

    Viele Grüße
    Software-Entwickler Backend/Frontend

  3. #3
    Contao-Nutzer
    Registriert seit
    20.06.2009.
    Ort
    Winterberg, Sauerland
    Beiträge
    72

    Standard

    Hatte vergessen die CSS-ID/Klasse anzugeben.

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

  4. #4
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.273

    Standard

    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
    Geändert von Kahmoon (20.05.2019 um 18:08 Uhr)

  5. #5
    Contao-Nutzer
    Registriert seit
    20.06.2009.
    Ort
    Winterberg, Sauerland
    Beiträge
    72

    Standard

    @ 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;
    }

  6. #6
    Contao-Nutzer
    Registriert seit
    20.06.2009.
    Ort
    Winterberg, Sauerland
    Beiträge
    72

    Standard SubNav unterschiede

    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;
    }
    Angehängte Grafiken Angehängte Grafiken
    Geändert von Sauerwald (28.05.2019 um 14:42 Uhr)

  7. #7
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.273

    Standard

    Sieht bei beiden Links OK aus!?

  8. #8
    Contao-Nutzer
    Registriert seit
    20.06.2009.
    Ort
    Winterberg, Sauerland
    Beiträge
    72

    Standard

    Ja jetzt hat es geklappt.

    vielen Dank

    Gruß

    Markus

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •