[falcao1010]

Hallo,
ich habe das große Problem, dass ein mobiles Theme (Mybb Go Mobile) für die Navigation CSS-Listen nutzt und dadurch meine diversen UL-Listen auf eigenen Seiten nicht mehr funktionieren (sie erscheinen gar nicht mehr). Was kann ich bloß tun???

Habe momentan folgendes versucht - leider ohne Erfolg. Kann mir bitte jemand helfen ???

A) CSS:
ul.standard-list {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 10px;
}

ul.standard-list li {
display: list-item;
}


B) HTML der eigenen Seite (im Template)

<ul class="standard-list">
<li>Text </li>
...

Funktioniert wie erwähnt nicht.

PS: In der Diskussion zum Plugin hatte ich dies auch schonmal thematisiert und dachte zunächst, eine Lösung gefunden zu haben. Das hat sich als Fehler erwiesen.

[MrBrechreiz]

Ist davor ein td oder ein div mit einer Klasse definiert ? Wenn ja, kannst Du die Klasse davor stellen. Sollte etwa so aussehen.

div.diedivklasse ul.standard-list { ...... }

oder

td.dietdklasse ul.standard-list { ...... }

Gleiche gilt dann für die Listen.

Somit kann man seine ul und li aus den Standard Definitionen abkapseln und seine eigenen Definitionen setzen.

[falcao1010]

Ich dachte, dass ich auf diese Weise Klassen definiert habe. Falsch gedacht :-)

Also muss ich dann wie folgt vorgehen?

A) CSS:

.dieklasse_ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 10px;
}

ul.standard-list {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 10px;
}

.dieklasse_li {
display: list-item;
}

ul.standard-list li {
display: list-item;
}


B) HTML

<div dieklasse_ul>
<div dieklasse_li>

<ul class="standard-list">
<li>Text </li>
...
</ul>
</div>
</div>


PS: Sorry für die dummen Fragen ;-)

[MrBrechreiz]

Nein nein ^^

Also, ich kenne dein Tpl nicht, daher rate ich.

CSS (nur als Beispiel)

Code:

div.divcontainer { hier alle Definitionen des Container reinpacken }

div.divcontainer ul.standard-list { hier alle Definitionen des ul reinpacken }

div.divcontainer ul.standard-list li { hier alle Definitionen des li reinpacken }

HTML

Code:

<div class="divcontainer">
 <ul class="standard-list">
   <li>blablabla</li>
 </ul>
</div>

So etwa meinte ich dies.

[falcao1010]

Erste Inhalte werden erkennbar, aber nur auf dem Tablet. Code momentan:

CSS:
div.divcontainer {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 10px;
}

div.divcontainer ul.standard-list {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 10px;
}

div.divcontainer ul.standard-list li {
display: list-item;
}


HTML:
<div class="divcontainer">
<ul class="standard-list">
<ul style="list-style-image: url(../images/li-blue.png);">
<li> ...</li>

[MrBrechreiz]

Hast eine PN von mir bekommen.

PS: Korrigiere zuerst einmal deine Navigation, dann sehen wir weiter.

[falcao1010]

So, umgesetzt. Jetzt funktioniert die Absicht auf dem Handy mit Chrome ganz gut (Ausnahme: Links*). :-)

auf dem Tablet (auch mit Browser Chrome) sieht es aber weiterhin übel aus, er wirft vieles durcheinander.

*Bei den Links das Problem: Sie sind auch in der Navigations-Theme definiert, so dass er diese CSS ebenfalls auf den eigenen Seiten ansetzt :-(

Auszug CSS aus dem mobilen Theme (global.css):


ul.standard-list {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}

ul.standard-list li {
display: list-item;
}


body {
background: none repeat scroll 0 0 #EEE !important;
width: auto;
color: #000;
text-align: center;
margin: 0;
-webkit-text-size-adjust: none;
font-family: "Noto Sans",sans-serif !important;
font-size: 13px;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}

li {
display: inline-block;
float: left;
margin-right: 0;
}

li a {
display: block;
min-width: 140px;
height: 20px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
color: #fff;
text-decoration: none;
}

li:hover a {
background: silver;
}

li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}

li ul {
display: none;
}

li ul li {
display: block;
float: none;
}

li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}

ul li a:hover + .hidden,.hidden:hover {
display: block;
}

.show-menu {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
text-decoration: none;
color: #fff;
background: #243D54;
text-align: center;
padding: 10px 0;
display: none;
}

input[type=checkbox] {
display: none;
}

input[type=checkbox]:checked ~ #menu {
display: block;
}

@media screen and (max-width : 760px) {
ul {
position: static;
display: none;
}

li {
margin-bottom: 0;
}

ul li,li a {
width: 100%;
}

ul a {
background: #324454;
}

.show-menu {
display: block;
}
}

[MrBrechreiz]

Moin.

Versuch mal folgendes.

Suche in deiner global.css nach

Code:

@media screen and (max-width: 768px) {

und mach daraus dies

Code:

@media screen and (min-width: 320px) and (max-width: 1940px) {

[falcao1010]

Ok, teste ich später.

Wie bekomme ich denn mein CSS für Links aus meinem Desktop-Theme auch in den Listen der mobilen Theme zum Laufen?

CSS der Desktop-Theme:

a:link, a:visited {
color: #026cb1;
text-decoration: none;
}

a:hover, a:active {
color: #026cb1;
text-decoration: underline;
}

Ich vermute, dass ich im mobilen Theme eine Klasse brauche, damit dies läuft. Also:

.linkmobil.a:link, linkmobil.a:visited {
color: #026cb1;
text-decoration: none;
}

.linkmobil.a:hover, .linkmobil.a:active {
color: #026cb1;
text-decoration: underline;
}

Dann im Link über class=linkmobil" aufrufen. Könnte das klappen?

Oder kann / sollte diese Link-Formatierung mit in den divcontainer bzw. die class standard-list aufgenommen werden?

[MrBrechreiz]

Nicht wirklich. Da Du bereits Bootstrap eingebunden hast, steuerst Du dies via @Media Grössen.