Problem mit CSS-Galerie und abgeschnittenem Beitrag

gold.beere

Hallo,

nachdem ich jetzt schon ne ganze Weile versuche, mein Problem zu lösen, versuche ich es einfach mal hier und hoffe, hier weiß jemand, wie ich mein Problem lösen kann.

Also Folgendes:
Ich habe mir eine CSS-Galerie gebastelt, die oben Thumbnails anzeigt und über einen mouse-over Effekt wir das Bild darunter vergrößert. Das funktioniert auch prima, solange ich es auf dem Server liegen habe. Auch zusammen mit meinem Text kein Problem.

Sobald ich es aber in Wordpress als Beitrag im Code einfüge, funktioniert es nicht mehr. Zunächst erkennt Wordpress ewig den CSS-Teil nicht, erst nachdem ich 2-3 mal wiederholt den Doctype einfüge, wird der CSS-Teil erkannt.
In der visuellen Ansicht ist dann auch alles, wie es sein soll. Wenn ich aber die Vorschau öffne, ist alles verhunzt. Das Platzhalterbild der Galerie (also wenn die Maus über keinem Thumbnail ist) wird dann mitten im Text angezeigt und sonst nichts - keine Thumbnails und sonst auch nichts des CSS-Teils. Auch ist mein Beitragstext einfach abgeschnitten.

Ich weiß da einfach nicht mehr weiter - wenn ich erst die Galerie einfüge und darunter den Text, wird die Galerie prima erkannt, aber dann fehlt der gesamte Text, auch einfach abgeschnitten.
Hier mal ein Bild von ersterem Szenario:

Weiß zufällig jemand, was das Problem sein könnte?
Vielen Dank im Voraus!
Viele Grüße
Goldbeere

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

flipps

Hallo,

poste uns bitte die URL zu deiner Seite, ohne den Quelltext dahinter können wir nicht helfen. Auch verstehe ich den Begriff CSS-Galerie nicht ganz. Heißt das, du fügst in einen Beitrag Bilder ein und bestimmst dann mittels CSS Befehlen das Aussehen? Wo hast du den CSS Code eingefügt? Ich hoffe in der css Datei deines Themes, oder?

VG
Philip

gold.beere

Hallo,
nein in einem entsprechend gekennzeichneten Teil im Code des Beitrags. Das ganze sieht folgendermaßen aus:

HTML

<!DOCTYPE html> 
<html>


<head>
<title>Zwischen Leberwurst und gr&uuml;nen Knackern</title>
</head>


<body>


<font face="Georgia" size="+1">
<div align="left">


bla bla (Beitrag)


</div>
</font>




</div>
<div id="container">
<ul>
    <li><a class="gallery slidea" href="#nogo">
<span>
<img alt="" src="/Images/Blog/Leberwurst/Leberwurst1.jpg" />
</span>
</a></li>
    <li><a class="gallery slideb" href="#nogo">
<span>
<img alt="" src="/Images/Blog/Leberwurst/Leberwurst2.jpg" />
</span>
</a></li>
    <li><a class="gallery slidec" href="#nogo">
<span>
<img alt="" src="/Images/Blog/Leberwurst/Leberwurst3.jpg" />
</span>
</a></li>
    <li><a class="gallery slided" href="#nogo">
<span>
<img alt="" src="/Images/Blog/Leberwurst/Leberwurst4.jpg" />
</span>
</a></li>
    <li><a class="gallery slidee" href="#nogo">
<span>
<img alt="" src="/Images/Blog/Leberwurst/Leberwurst5.jpg" />
</span>
</a></li>
    <li><a class="gallery slidef" href="#nogo">
<span>
<img alt="" src="/Images/Blog/Leberwurst/Leberwurst6.jpg" />
</span>
</a></li>
    <li><a class="gallery slideg" href="#nogo">
<span>
<img alt="" src="/Images/Blog/Leberwurst/Leberwurst7.jpg" />
</span>
</a></li>
    <li><a class="gallery slideh" href="#nogo">
<span>
<img alt="" src="/Images/Blog/Leberwurst/Leberwurst8.jpg" />
</span>
</a></li>
    <li><a class="gallery slidei" href="#nogo">
<span>
<img alt="" src="/Images/Blog/Leberwurst/Leberwurst9.jpg" />
</span>
</a></li>
    <li><a class="gallery slidej" href="#nogo">
<span>
<img alt="" src="/Images/Blog/Leberwurst/Leberwurst10.jpg" />
</span>
</a></li>
    <li><a class="gallery slidek" href="#nogo">
<span>
<img alt="" src="/Images/Blog/Leberwurst/Leberwurst11.jpg" />
</span>
</a></li>
    <li><a class="gallery slidel" href="#nogo">
<span>
<img alt="" src="/Images/Blog/Leberwurst/Leberwurst12.jpg" />
</span>
</a></li>
    <li><a class="gallery slidem" href="#nogo">
<span>
<img alt="" src="/Images/Blog/Leberwurst/Leberwurst13.jpg" />
</span>
</a></li>
    <li><a class="gallery sliden" href="#nogo">
<span>
<img alt="" src="/Images/Blog/Leberwurst/Leberwurst14.jpg" />
</span>
</a></li>
    <li><a class="gallery slideo" href="#nogo">
<span>
<img alt="" src="/Images/Blog/Leberwurst/Leberwurst15.jpg" />
</span>
</a></li>
    <li><a class="gallery slidep" href="#nogo">
<span>
<img alt="" src="/Images/Blog/Leberwurst/Leberwurst16.jpg" />
</span>
</a></li>
    <li><a class="gallery slideq" href="#nogo">
<span>
<img alt="" src="/Images/Blog/Leberwurst/Leberwurst17.jpg" />
</span>
</a></li>
    <li><a class="gallery slider" href="#nogo">
<span>
<img alt="" src="/Images/Blog/Leberwurst/Leberwurst18.jpg" />
</span>
</a></li>
    <li><a class="gallery slides" href="#nogo">
<span>
<img alt="" src="/Images/Blog/Leberwurst/Leberwurst19.jpg" />
</span>
</a></li>
    <li><a class="gallery slidet" href="#nogo">
<span>
<img alt="" src="/Images/Blog/Leberwurst/Leberwurst20.jpg" />
</span>
</a></li>
    <li><a class="gallery slideu" href="#nogo">
<span>
<img alt="" src="/Images/Blog/Leberwurst/Leberwurst21.jpg" />
</span>
</a></li>
</ul>
</div>


<style type="text/css">


/* choose a suitable font and center the #container div in Internet Explorer */
body {
   text-align:center; 
   font-family: georgia; arial, sans-serif; 
   font-size:76%; 
   letter-spacing:0.05em;
   }
   
/* The containing box for the gallery. */
#container {
    position:relative; 
    width:650px; 
    height:750px; 
    margin:5px auto 0 auto; 
    border:1px solid #aaa; 
    }


/* Removing the list bullets and indentation */
#container ul {
    padding:0; 
    margin:0; 
    list-style-type:none; 
    }


/* Remove the images and text from sight */
#container a.gallery span {
    position:absolute; 
    width:1px; 
    height:1px; 
    top:-1px; 
    left:-1px; 
    overflow:hidden; 
    background:#fff;
    }


/* Adding the thumbnail images */
#container a.gallery, #container a.gallery:visited {
    display:block; 
    color:#000; 
    text-decoration:none; 
    border:1px solid #000; 
    margin:1px 2px 1px 2px; 
    text-align:left; 
    cursor:default;
    }
#container a.slidea {
    background:url(/Images/Blog/Leberwurst/Leberwurst1_thumb.jpg); 
    height:60px; 
    width:80px;
    }
#container a.slideb {
    background:url(/Images/Blog/Leberwurst/Leberwurst2_thumb.jpg); 
    height:60px; 
    width:80px;
    }
#container a.slidec {
    background:url(/Images/Blog/Leberwurst/Leberwurst3_thumb.jpg); 
    height:60px; 
    width:45px;
    }
#container a.slided {
    background:url(/Images/Blog/Leberwurst/Leberwurst4_thumb.jpg); 
    height:60px; 
    width:80px;
    }
* html #container a.slided {
    width:91px; 
    w\idth:93px;
    }
#container a.slidee {
    background:url(/Images/Blog/Leberwurst/Leberwurst5_thumb.jpg); 
    height:60px; 
    width:80px;
    }
#container a.slidef {
    background:url(/Images/Blog/Leberwurst/Leberwurst6_thumb.jpg); 
    height:60px; 
    width:80px;
    }
* html #container a.slidef {
    width:91px; 
    w\idth:93px;
    }
#container a.slideg {
    background:url(/Images/Blog/Leberwurst/Leberwurst7_thumb.jpg); 
    height:60px; 
    width:80px;
    }
#container a.slideh {
    background:url(/Images/Blog/Leberwurst/Leberwurst8_thumb.jpg); 
    height:60px; 
    width:80px;
    }
#container a.slidei {
    background:url(/Images/Blog/Leberwurst/Leberwurst9_thumb.jpg); 
    height:60px; 
    width:80px;
    }
#container a.slidej {
    background:url(/Images/Blog/Leberwurst/Leberwurst10_thumb.jpg); 
    height:60px; 
    width:80px;
    }
#container a.slidek {
    background:url(/Images/Blog/Leberwurst/Leberwurst11_thumb.jpg); 
    height:60px; 
    width:80px;
    }
* html #container a.slidek {
    width:91px; 
    w\idth:93px;
    }
#container a.slidel {
    background:url(/Images/Blog/Leberwurst/Leberwurst12_thumb.jpg); 
    height:60px; 
    width:45px;
    }
#container a.slidem {
    background:url(/Images/Blog/Leberwurst/Leberwurst13_thumb.jpg); 
    height:60px; 
    width:45px;
    }


#container a.sliden {
    background:url(/Images/Blog/Leberwurst/Leberwurst14_thumb.jpg); 
    height:60px; 
    width:80px;
    }
#container a.slideo {
    background:url(/Images/Blog/Leberwurst/Leberwurst15_thumb.jpg); 
    height:60px; 
    width:80px;
    }
#container a.slidep {
    background:url(/Images/Blog/Leberwurst/Leberwurst16_thumb.jpg); 
    height:60px; 
    width:45px;
    }
* html #container a.slidep {
    width:91px; 
    w\idth:93px;
    }
#container a.slideq {
    background:url(/Images/Blog/Leberwurst/Leberwurst17_thumb.jpg); 
    height:60px; 
    width:80px;
    }
#container a.slider {
    background:url(/Images/Blog/Leberwurst/Leberwurst18_thumb.jpg); 
    height:60px; 
    width:80px;
    }
#container a.slides {
    background:url(/Images/Blog/Leberwurst/Leberwurst19_thumb.jpg); 
    height:60px; 
    width:45px;
    }
#container a.slidet {
    background:url(/Images/Blog/Leberwurst/Leberwurst20_thumb.jpg); 
    height:60px; 
    width:80px;
    }
* html #container a.slidet {
    width:91px; 
    w\idth:93px;
    }
#container a.slideu {
    background:url(/Images/Blog/Leberwurst/Leberwurst21_thumb.jpg); 
    height:60px; 
    width:80px;
    }


/* set the size of the unordered list to neatly house the thumbnails */
#container ul {
    width:650px; 
    height:300px;
    }
#container li {
    float:left;
    }


/* move the thumbnails into the correct position */
#container ul {
    margin:5px; 
    float:none;
    }


/* change the thumbnail border color */
#container a.gallery:hover {
    border:1px solid #fff; 
    }


/* styling the :hover span */
#container a.gallery:hover span {
    position: absolute;
    top: 200px;
    left: 0px;
    color: rgb(0, 0, 0);
    background: none repeat scroll 0% 0% rgb(255, 255, 255);
    width: 650px;
    height: 750px;
    }


#container a.gallery:hover img {
    border: 1px solid rgb(255, 255, 255);
    margin: 0 auto;
    display: block;
    }
    
#container {
    background:#fff url(Images/Blog/Leberwurst/LeberwurstTitel.jpg) 75px 230px no-repeat;
    }


</style>
</body>
</html>

Alles anzeigen

Also zunächst "normales" HTML und daraufhin folgend der style-Anteil für CSS.

Viele Grüße
Gold.beere

flipps

Wieso fügst du den css Code in den Beitrag ein und nicht in deine css Datei? Das würde sicher einige Probleme beheben.

VG
Philip

gold.beere

Hm ok, ich war mir nicht im Klaren, dass ich eine Galerie extern speichern kann.
Wie sieht das Ganze denn dann in der HTML-Datei aus? Dass ich im Header einzelne Informationen
aus einer CSS-Datei abrufen kann, ist mir bewusst, aber im body-Teil eine Datei einbinden?

Viele Grüße
Gold.beere

flipps

Du hast die Grundlagen von Wordpress und eines Themes nicht verstanden. Dein Theme enthält eine css Datei, hier müssen alle css Befehle hinein. Diese css Datei wird über den <head> Bereich bereits in deine Seite eingebunden. Genauso wenig gehört eigentlich, bis auf in Ausnahmefällen, html Code in einen Beitrag. Das gehört alles in die Theme Dateien.

Etwas zu diesem Thema gibt es hier zu lesen:
http://codex.wordpress.org/Theme_Development

Ich kann dir das von Grund auf jetzt nicht erklären da mir dazu einfach die Zeit fehlt und das hier den Rahmen sprengen würde.

Falls du lediglich eine Bildergalerie willst, dann schau dir mal die Wordpress eigene Galerie Funktion an. Eventuell kannst du per css diese so anpassen dass deine Funktionen auch hier funktionieren.

VG
Philip

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Problem mit CSS-Galerie und abgeschnittenem Beitrag

Jetzt mitmachen!