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.
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.
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 ;-)
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 }
Code:
<div class="divcontainer">
<ul class="standard-list">
<li>blablabla</li>
</ul>
</div>
So etwa meinte ich dies.
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>
Hast eine PN von mir bekommen.
PS: Korrigiere zuerst einmal deine Navigation, dann sehen wir weiter.
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;
}
}
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) {
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?
Nicht wirklich. Da Du bereits Bootstrap eingebunden hast, steuerst Du dies via @Media Grössen.