In responsivem Template die Newsbox mit Plugin nutzen

[lck]

Hallo Michael,

Habe ich Dich richtig verstanden? So soll es sein?

es sollte schon max-width: 1500px; sein.

Wenn ich das so mache, verschiebt sich das Header-Bild um einen entsprechenden Versatz (siehe rechts) nach links.
Lasse ich das max-width: 1500px; dann ist dieser Versatz nicht da.
Ich habe auch gelesen, dass man 100% einstellen könne; dann ist der Versatz auch da. Aber in der Querformat-Darstellung des Tablets (und nur da!) macht sich weiterhin keine Änderung bemerkbar. Das Bild verschwindet weiterhin nach rechts.

Da solltest du nachbessern und zwar in der style.css Zeille ab 877:

Code: Select all

.art-header {
    margin: 0 auto;
    height: 275px;
    background-image: url(images/header.jpg);
    background-position: 0 0; /* ändern zu background-position: 50% 50%; */
    background-repeat: no-repeat;
    position: relative;
    z-index: auto !important;
}

Dann wird das Bild horizontal und vertikal zentriert.

Ich habe float: left bzw right entdeckt. gibt es auch etwas, um das Bild Mittig zu setzen und den Text beidseitig umfließen zu lassen?

Ein float: center gibt es leider noch nicht, aber man könnte tricksen.
Gängige Methode ist ein 3-spaltiges Layout, wobei die Spalten gleich hoch und auch noch responsive sein sollten, siehe Beispiel. In dem Beispiel wird es mit display: table und table-cell umgesetzt, es geht natürlich auch mit float oder mit display: inline-block ...

[cmb]

Ich habe float: left bzw right entdeckt. gibt es auch etwas, um das Bild Mittig zu setzen und den Text beidseitig umfließen zu lassen?

Ein float: center gibt es leider noch nicht, aber man könnte tricksen.

Ich habe Zweifel, dass es jemals ein float:center geben wird. Letztlich ist bei float:left und float:right klar, wie umflossen werden soll, aber bei float:center wäre es das nicht. Eigentlich würde man nämlich etwa folgendes erwarten:

Code: Select all

Ich schreibe hier mal schnell +--------+ etwas Text zur Demonstration,
um zu verdeutlichen, dass ein |        | float:center überaus fraglich
wäre, weil der umfließende    +--------+ Text kaum noch zu lesen wäre.

Gängige Methode ist ein 3-spaltiges Layout, wobei die Spalten gleich hoch und auch noch responsive sein sollten, siehe Beispiel. In dem Beispiel wird es mit display: table und table-cell umgesetzt, es geht natürlich auch mit float oder mit display: inline-block ...

Hier wohl das passendste, aber zumindest kann man auch über die columns Eigenschaft nachdenken. Die scheint nur wenig verwendet zu werden, obwohl ich sie bei breiten Inhaltsbereichen eigentlich sehr attraktiv finde, und zumindest der grundlegende Support mittlerweile gut ist (und der Fallback für ältere Browser akzeptabel scheint).

[lck]

Hier wohl das passendste, aber zumindest kann man auch über die columns Eigenschaft nachdenken. Die scheint nur wenig verwendet zu werden, obwohl ich sie bei breiten Inhaltsbereichen eigentlich sehr attraktiv finde, und zumindest der grundlegende Support mittlerweile gut ist (und der Fallback für ältere Browser akzeptabel scheint).

Ja, es gäbe tolle Sachen, wenn nur nicht die Browser hinterherhinken würden (Beispiel CSS Shapes)

[mhz]

Wenn ich beim Tablet die Seite mir hochkant anschaue, klappt es mit der Verschiebung. Wenn ich es aufs Querformat drehe, ist es jetzt richtig! Danke. Die letzte Änderung hat es endlich gebracht.
Danke Ick!

[cmb]

Ja, es gäbe tolle Sachen, wenn nur nicht die Browser hinterherhinken würden (Beispiel CSS Shapes)

Oh, Shapes kannte ich noch nicht – danke! Soweit ich es verstehe, könnte man Shapes aber auch heute schon nutzen – sieht dann halt auf Browsern, die diese nicht unterstützen, nicht so rund aus.

Aber sag nicht "die Browser", sondern besser die "nicht Webkit basierten Browser" (irgendwie scheint es nämlich so zu sein, dass diese fast überall hinterher hinken).

[mhz]

1) Wie bekomme ich im CSS eingestellt, dass dauerhaft mehr Rand zwischen der letzten Zeile im Content und dem Kasten mit dem Locator vorhanden ist.
So sieht es im Augenblick aus:
http://test.hhs-obertshausen.de/?Aktuel ... lerzeitung

2) Ich hätte gerne die Schriftgröße für den kompletten Content-Teil auf 14px eingestellt. Wenn ich jetzt irgendetwas tippe, ist es immer kleiner. Markiere ich das dann und stelle die Schriftgröße auf 14 ein, ist es so wie ich es gerne (sofort gehabt) hätte.
Wo finde ich den zu ändernden font-size?

[SiNiTaSa]

in style.css
zu 1.

Code: Select all

.art-postmetadataheader
{
   background: #E8E8E8;
   background: rgba(232, 232, 232, 0.7);
   border:1px solid #BFBFBF;
   border-left:none;
   border-right:none;
   margin:0 auto;
   position:relative;
   z-index:1;
   padding: 1px;
   margin-bottom: 5px;
margin-top: 15px;
}

margin-top einfügen
zu 2.
bei den .art-postheader

[cmb]

1) Wie bekomme ich im CSS eingestellt, dass dauerhaft mehr Rand zwischen der letzten Zeile im Content und dem Kasten mit dem Locator vorhanden ist.
So sieht es im Augenblick aus:
http://test.hhs-obertshausen.de/?Aktuel ... lerzeitung

Ich würde wohl den Locator aus dem <article> herausnehmen, und ganz ans Ende von <div class="art-layout-cell art-content clearfix"> stellen. Scheint mir semantisch richtiger, und dann ist das Layout-Problem vielleicht schon gelöst.

[mhz]

@SiNiTaSa:
Danke! Habe ich auch probiert.

@ cmb:
Der Locator ist jetzt in der rechten Spalte am Ende. Als ich den direkt hinter

Code: Select all

<div class="art-layout-cell art-sidebar2 clearfix"><div class="art-block clearfix">

einfügte, war er über dem Suchenfeld. Wo er jetzt ist, gefällt es mir auch nicht. Wo müsste ich den Template-Aufruf platzieren, um den unter den eigentlichen Content-Block erscheinen zu lassen?
2) Durch die Rausnahme sind nun unten im Contentblock 2 Begrenzungslinien. Wie verschwinden diese?

[SiNiTaSa]

@mhz

bei mir klappt es.