zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Horizontales Menü im Bootstrap-Grid vertikal machen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 08.02.2017, 13:29
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.651
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

Das meinte ich mit meinem ersten Eintrag:
Zitat:
nav-stackable bedeutet, dass sie immer und nicht erst ab einer gewissen Größe untereinander sind.
Edit: Deine Kommentare lassen darauf schließen, dass du nicht die Webdeveloper-Tools der einzelnen Browser verwendest? Wenn nicht, dann ändere dies schleunigst, die zeigen dir exakt solche Probleme sofort auf.
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 08.02.2017, 14:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.02.2017
Beiträge: 12
Berndi befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
Deine Kommentare lassen darauf schließen, dass du nicht die Webdeveloper-Tools der einzelnen Browser verwendest? Wenn nicht, dann ändere dies schleunigst, die zeigen dir exakt solche Probleme sofort auf.
Du irrst.
Ich benutze das Tool in Chrome.
Nichtsdestotrotz muss man sich doch etwas durchhangeln, bis man den Fehler gefunden hat. Gerade dann, wenn mehr als eine Stylesheet geladen wird.
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 08.02.2017, 14:09
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.651
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

Verzeih die Annahme, aber die Anzahl an Stylesheets ist doch irrelevant für diese Tools? Da sieht man doch schnell, dass display: inline auf ein Element wirkt. Aber das war nur am Rande, wenn du diese verwendest dann ist es doch gut
Mit Zitat antworten
  #14 (permalink)  
Alt 08.02.2017, 18:23
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.02.2017
Beiträge: 12
Berndi befindet sich auf einem aufstrebenden Ast
Standard

Habe das Problem mir einem eigenen Template-override des mod_menu lösen können.

Leider bin ich jetzt auf das nächste Problem gestoßen:
Das Menü lässt sich nicht mehr zentrieren.

Hier ist jetzt der Code
Code:
<nav id="tgs-2ndnav" class="wrap navbar navbar-default tgs-2ndnav">
    <div class="container">
      <div class="col-xs-12">
        <div class="moduletable jmoddiv jmodinside" data-jmodediturl="https://tgschwalbach.de/joomla/index.php?option=com_config&amp;controller=config.display.modules&amp;id=363&amp;return=aHR0cHM6Ly90Z3NjaHdhbGJhY2guZGUvam9vbWxhL2luZGV4LnBocC9vdGhlci1wYWdlcy90dXJuZW4%3D" data-target="_self" data-jmodtip="<strong>Modul bearbeiten</strong><br />Abteilungsmenü - Turnen<br />Position: 2ndmenu">
	  <ul class="nav nav-****s">
            <li class="item-1203"><a href="/joomla/index.php/berichte-turnen">Berichte aus der Turnabteilung</a></li>
            <li class="item-1340"><a href="/joomla/index.php/abteilungsleitung-turnen">Abteilungsleitung</a></li>
          </ul>
        </div>
      </div>  
   </div>
 </nav>
..und so sieht es aus:



Die Einträge in der Stylesheeet
Code:
#tgs-2ndnav div {text-align: center;}
#tgs-2ndnav ul {width: 100%; margin: 0 auto;}
führen leider auch nicht zum Erfolg.
Mit Zitat antworten
  #15 (permalink)  
Alt 09.02.2017, 07:50
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.651
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

Verwende zum zentrieren Flexbox.
https://css-tricks.com/centering-css-complete-guide/
Mit Zitat antworten
  #16 (permalink)  
Alt 09.02.2017, 08:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.02.2017
Beiträge: 12
Berndi befindet sich auf einem aufstrebenden Ast
Standard

Leider handelt es sich weder um ein Inline-, noch um ein lock-Element.

Trotzdem danke.

Habe das UL-Element jetzt mit
Code:
#tgs-2ndnav ul {display: inline-table;}
formatiert.

Jetzt ist es so, wie ich es mir vorgestellt habe.

Danke Euch!

Geändert von Berndi (09.02.2017 um 08:32 Uhr)
Mit Zitat antworten
  #17 (permalink)  
Alt 09.02.2017, 08:48
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.651
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

Es gibt nur inline oder block Elemente, eines von beiden muss es also sein.

Und verwende nicht inline-table, verwende lieber flexbox, wie schon im vorigen Post geschrieben. Einfach den Teil mit "Can you use Flexbox" aufklappen. Oder gibt es einen Grund bei deiner Seite Flexbox nicht zu verwenden?
Mit Zitat antworten
  #18 (permalink)  
Alt 09.02.2017, 08:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.02.2017
Beiträge: 12
Berndi befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
Oder gibt es einen Grund bei deiner Seite Flexbox nicht zu verwenden?
Ja, denn es führt leider nicht zum gewünschten Ergebnis.

Habe es ausprobiert.
Mit Zitat antworten
  #19 (permalink)  
Alt 09.02.2017, 09:18
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.651
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

Gibt es außer "funktioniert nicht" auch eine bessere Fehlerbeschreibung? Flexbox ist vielleicht am Anfang etwas verwirrend, aber sollte hier der bevorzugte Weg sein. Auch, weil es funktioniert. Eventuell hast du die Flexbox dem falschen Container zugeordnet?
Hier noch ein Guide zu flexbox, das für mich am Anfang verwirrende bei Flexbox war die Unterscheidung zwischen "was muss ich dem Container und was muss ich den Kindelementen sagen" um das gewünschte Ergebnis zu erreichen.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

In deinem Fall muss display:flex und justify-content: center auf die ul angewandt werden.
Mit Zitat antworten
Sponsored Links
  #20 (permalink)  
Alt 09.02.2017, 09:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.02.2017
Beiträge: 12
Berndi befindet sich auf einem aufstrebenden Ast
Standard

Entschuldige bitte...

So sieht es aus, wenn die Seite auf großen Screens angezeigt wird.
Sowohl mit flexbox, als auch mit inline-table
... so weit so gut ...





Auf XS-Screens sieht die Flexbox allerdings so aus:




Die Menüpunkte erscheinen nicht mehr untereinander.

Mit inline-table aber schon:





(entschuldige die großen Buchstaben, aber wegen der Bilder musste ich eine größere Schriftart wählen...)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
horizontales Menü in horizontales Pulldown-Menü ändern Stephan1958 CSS 5 11.01.2012 13:37
Vertikales submenue in horizontales mainmenue einbinden susigeha CSS 7 25.02.2011 08:20
horizontales Menü mit Subemenü ohne Listenelemente aber mit Grafiken metalmarder CSS 4 21.02.2009 20:38
In horizontales Menü dropdown einbinden Star_Scream CSS 1 14.10.2008 13:45
[gelöst] Horizontales Dropdownmenu mit Unterordnern sui CSS 5 27.10.2005 18:51


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:09 Uhr.