![\"div_ohne_class\"](\"http:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2017\/02\/div_ohne_class.jpg\")
div_ohne_class<\/p><\/div>\n
Entsprechend spartanisch ist auch das Ergebnis, das sieht noch gar nichts gleich:<\/p>\n
![\"div_ohne_class_ausgabe\"](\"http:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2017\/02\/div_ohne_class_ausgabe-300x254.jpg\")
div_ohne_class_ausgabe<\/p><\/div>\n
Das geht aber auch h\u00fcbscher!<\/h2>\n
„des hamma glei“, das haben wir gleich, wie das auf bairisch hei\u00dft. Wir ordnen der Div eine CSS-Klasse zu, im \u00f6ffnenden div-Tag, mit einem sch\u00f6nen sprechenden Namen:<\/p>\n
echo „<div class=’div_sparta‘>“;<\/em><\/p>\n Mit der neuen Klasse div_sparta begeben wir uns jetzt in die style.css unseres Child Themes und tragen hier erstmal folgendes ein:<\/p>\n .div_sparta {<\/em> Das sieht doch schon wesentlich besser aus:<\/p>\n div_sparta_ausgabe<\/p><\/div>\n Hier sieht man \u00fcbrigens gleich, wo jemand geschlampert hat und das Beitragsbild fehlt! Das sind die leeren wei\u00dfen Stellen.<\/p>\n Der wichtigste Punkt ist float: left<\/em>, der teilt unserer Div mit, da\u00df sie sich im Dokumentenflu\u00df nach links begeben soll, damit neben ihr auch noch jemand Platz hat. Die Anmerkung:<\/strong> aus dem PHP-Code kann jetzt die width-Anwesung aus dem img src Tag raus, das Bild wird automatisch in die Div eingepa\u00dft.<\/p>\n Ich hab jetzt mit Absicht mal ein bi\u00dfchen zuviel rumgestylt, damit man mal eine Vorstellung von den M\u00f6glichkeiten bekommt. Ich habe der Div eine neue Klasse evisdiv verpa\u00dft, die sieht so aus:<\/p>\n .evisdiv{<\/em> Und hier das Ergebnis:<\/p>\n evisdiv_ausgabe<\/p><\/div>\n Soll ich jetzt echt im Einzelnen erkl\u00e4ren, was ich gemacht habe? Na sch\u00f6n, dies eine Mal, meine Anmerkungen in fett<\/strong>:<\/p>\n .evisdiv{<\/em> Falls sie sich wundern, da\u00df bei einer width von 20 % jetzt doch nur 4 Bilder nebeneinander Platz haben: das liegt an dem margin (\u00e4usseren Abstand) den ich eingestellt habe damit die Divs nicht zusammenkleben, der wird zur Div-Gr\u00f6\u00dfe dazugerechnet. Das wars jetzt aber, genug geschafft f\u00fcr diesmal… jetzt darf jeder selber spielen. Hab ich schon gesagt, da\u00df CSS echt Laune macht? \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":" Die erste Div, noch ganz spartanisch Wo waren wir stehengeblieben? Die f\u00fcr den Besucher uninteressanten Datenbankfelder fliegen raus, haben wir gesagt. Wir behalten nur den Beitragstitel, den Link zum Beitrag und das Beitragsbild, und packen diese in eine Div, und das sieht dann erstmal ganz spartanisch so aus: Entsprechend spartanisch ist auch das Ergebnis, das […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[9,10,11,2],"tags":[],"_links":{"self":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/116"}],"collection":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/comments?post=116"}],"version-history":[{"count":3,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/116\/revisions"}],"predecessor-version":[{"id":123,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/116\/revisions\/123"}],"wp:attachment":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/media?parent=116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/categories?post=116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/tags?post=116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n\u00a0\u00a0 \u00a0float:left;<\/em>
\n\u00a0\u00a0 \u00a0heigth: 300px;<\/em>
\n\u00a0\u00a0 \u00a0width: 25%;<\/em>
\n\u00a0\u00a0 <\/em>}<\/em><\/p>\n![\"div_sparta_ausgabe\"](\"http:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2017\/02\/div_sparta_ausgabe-1024x601.jpg\")
Was haben wir gemacht?<\/h2>\n
\nheight kann man nach Geschmack w\u00e4hlen, aber die width<\/em> ist noch wichtig, die hab ich mal auf 1\/4 der Seitenbreite gestellt, das sind die 25%. So haben 4 Divs nebeneinander Platz. Man kann f\u00fcr 3 Divs nebeneinander 33,333% einstellen, f\u00fcr 5 Divs nebeneinander 20%, usw., da kann jeder selber rumprobieren.<\/p>\nNoch mehr CSS: ich \u00fcbertreibs mal ein bi\u00dfchen<\/h2>\n
\n\u00a0\u00a0 \u00a0background-color: #fc6; <\/em>
\n\u00a0\u00a0 \u00a0float: left; <\/em>
\n\u00a0\u00a0 \u00a0height: 330px; <\/em>
\n\u00a0\u00a0 \u00a0width: 20%; <\/em>
\n\u00a0\u00a0 \u00a0overflow: hidden;<\/em>
\n\u00a0\u00a0 \u00a0border: 1px solid blue;<\/em>
\n\u00a0\u00a0 \u00a0border-radius: 20px;<\/em>
\n\u00a0\u00a0 \u00a0margin: 10px;<\/em>
\n\u00a0\u00a0 \u00a0padding: 10px;<\/em>
\n\u00a0\u00a0 \u00a0box-shadow: 5px 5px 3px #888<\/em>
\n\u00a0 <\/em>
\n}<\/em><\/p>\n![\"evisdiv_ausgabe\"](\"http:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2017\/02\/evisdiv_ausgabe-1024x600.jpg\")
\n\u00a0\u00a0 \u00a0background-color: #fc6; Hintergrundfarbe orange <\/strong><\/em>
\n\u00a0\u00a0 \u00a0float: left; Linksb\u00fcndig<\/strong><\/em>
\n\u00a0\u00a0 \u00a0height: 330px; absolute H\u00f6he in Pixel<\/strong><\/em>
\n\u00a0\u00a0 \u00a0width: 20%; <\/em>relative Breite in Prozent<\/strong>
\n\u00a0\u00a0 \u00a0overflow: hidden; Zu gro\u00dfe Bilder werden auf die Div-Umrandung zugeschnitten<\/strong><\/em>
\n\u00a0\u00a0 \u00a0border: 1px solid blue; Rahmen blau<\/strong><\/em>
\n\u00a0\u00a0 \u00a0border-radius: 20px; Rahmenecken abgerundet<\/strong><\/em>
\n\u00a0\u00a0 \u00a0margin: 10px; \u00c4usserer Abstand vom Rahmen 10 PIxel<\/strong><\/em>
\n\u00a0\u00a0 \u00a0padding: 10px; Innerer Abstand vom Rahmen 10 Pixel<\/strong><\/em>
\n\u00a0\u00a0 \u00a0box-shadow: 5px 5px 3px #888 Schatten<\/strong><\/em>
\n\u00a0 <\/em>
\n}<\/em><\/p>\n
\nAusserdem habe ich unserem post_title im PHP-Code noch ein <h1>-Tag verpa\u00dft, damit er sch\u00f6n gro\u00df rauskommt wie es einem Beitragstitel geb\u00fchrt, der echo sieht jetzt so aus:<\/p>\necho \"<h1>\".$einpost->post_title.\"<\/h1>\";<\/pre>\n