css Hilfe bitte!!

irmen

Hallo, ich habe auf der Seite:

http://goo.gl/h8eIwC
eine aktuelle WP-Version laufen.

Dort wird der Mp3 Player eingebunden.
(Da ich ein childtheme erstellt habe und auch noch viel Kram im css steht,
den ich erst noch löschen muss, wenn ich ihn nicht brauche, ist das css etwas überladen nd unübersichtlich)

Mein Problem:
der playerwird falsch dargestellt (im backend sieht es noch gut aus, aber im Frontend geht da was schief)
es wird irgendwie der Player über seinem container dargestellt.
Ich habe mit firebug und auch mit chorme-Werkzeugen probiert und finde einfach nicht, was sich da in die Quere kommt.

Meine Bitte:
kann mir bitte jemand helfen, herauszufinden, welche Styles sich da in die Quere kommen?

Vielen Vielen Dank!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Frau_Braun

Dies hier funktioniert:

Aus der style.css alle Angaben zu "mejs" rauslöschen. Im Stylesheet wp-mediaelement.css im oberen Bereich die drei obersten Angaben rauslöschen. Statt dessen folgenden Code reinschreiben:

CSS

.mejs-container {
    clear: both;
}
.mejs-container * {
    font-family: Helvetica, Arial;    
}


.mejs-container,
.mejs-embed,
.mejs-embed body,
.mejs-container .mejs-controls {
 
    background: #ccc none repeat scroll 0 0 !important;
    background: #222;
    height: 0px;
    padding-top: 1px;
    padding-bottom: 1px;   
}

Alles anzeigen

Aber Vorsicht. Offenbar gehört der Code zu einem Plugin, und bei einem Update könnte die wp-mediaelemetn.css überschrieben werden. Also vielleicht sind diese Codesnippets doch besser in der style.css aufgehoben. Keine Ahnung, wie das geregelt ist. Mit diesem Code sehen die Audioplayer jedenfalls auch gut in der mobilen Version aus.

Noch eine Sache: im obersten Block sind in der Beschriftung ersten und zweiten Satz zusätzliche <p>-Tags hineingeraten, die es bei den anderen Beschriftungen nicht gibt. Die müssen da irgendwie raus, damit alles einheitlich aussieht.

irmen

Vielen Dank Frau Braun,
es ging allerdings erst, nachdem ich die Höhe auf 15px und important sowie margin-top:20px; gesetzt hatte.

mejs-container,
.mejs-embed,
.mejs-embed body,
.mejs-container .mejs-controls {
background: #ccc none repeat scroll 0 0 !important;
height: 15px !important;
padding-top: 1px;
padding-bottom: 1px;
margin-top:20px;

Finde ich alles sehr seltsam!!

Weißt du warum in jeden Player eine Höhe von 30px geschrieben wird?
Bei dieser Seite ist das so.
<div id="mep_0" class="mejs-container svg wp-audio-shortcode mejs-audio" aria-label="Audio Player" role="application" tabindex="0" style="width: 100%; height: 30px;">

dann wird der eigentliche Player irgendwie obendrüber an gezeigt ...

Weiß jemand, wo das hier falsch läuft?

Denn jetzt geht es zwar - vielen Dank an Frau Braun, aber es ist ja flickgeschustert.
Ich hätte gern gewusst, was da nicht passt.

Vielen Dank, wenn jemand mich aufklären kann!!

Irmen

Frau_Braun

[COLOR=#333333]"...dann wird der eigentliche Player irgendwie obendrüber an gezeigt ..." Ist mir auch aufgefallen.
[/COLOR]Was ist es denn eigentlich? Ein Plugin? Oder ist es der WordPress-eigene Shortcode? Wie kommt der Code für den Media-Player in die style.css? Es sieht aus, als ob sich vorher schon mal jemand dran versucht hat.

Vielleicht empfiehlt es sich, den Medien-Teil noch mal völlig neu aufzusetzen, um das ganze Code-Gemurkse zu bereinigen? :-)

[COLOR=#333333]Hier ist eine Beschreibung, die erklärt, wie alles ohne Plugin funktioniert:

[/COLOR][COLOR=#333333]http://drwp.de/video-und-audi…ress-einbinden/
[/COLOR]Videos, Links zu Soundcloud oder Bandcamp: http://www.blog.digimedial.de/wordpress-video-sound-einbinden/

irmen

Hallo Frau Braun,
ich habe allen von mir in die styles.css geschriebenen code rausgelöscht.
Und dann deine reinkopiert. Nachdem das irgendwie nicht ganz ging hab ich die vn mir beschriebenen Änderungen eingefügt.

Ja es ist die wp eigene function und ich habe die musik genau wie Dr.Web eingebunden.

Aber der Fehler scheint ja davon zu kommen, daß da diese 30px höhe in jedes Player-element reingeschrieben wird.

Ich könnte natürlich alle von mir benutzten plugins ausschalten und dann schauen, ob der fehler vielleicht daher rührt.
Denn im Css überschreibe ich ja nur die "falsche" Höhe.

Was meinst du?

Irmen

irmen

ich habe jetzt entdeckt, daß mein
div{position:relative;}
den Fehler verursacht hat.

nachdem ich das rausgenommen hatte, wurde der Player richtig dargestellt.

Frau Braun, herzlichen Dank für deine Hilfe, auch wenn ich es nun doch anders gemacht habe, es gibt mir immer Mut, wenn mir jemand hilft!!!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

css Hilfe bitte!!

Jetzt mitmachen!