Beiträge von Sailor

basti1012 ... jep... ::before und ::after braucht auf jeden Fall einen content: "";

Zunächst sollte aber ein section#innerbody element::after (mit content: "";) definiert werden und dann das :hover.

Es entspricht nach meiner Einschätzung am ehesten den Anforderungen (möglichst nur HTML) des TE... allerdings so ganz ohne CSS geht es wohl nicht.

Außerdem ist auch für einen weniger versierten 'Webmaster' leicht zu durchschauen, was da gemacht wird und kann bestimmt auch leicht an eigene Anforderungen angepasst werden.

Aber wie gesagt, war ja auch nur eine erste Idee von mir - muss man ja so nicht machen.

Hast du eine bessere Idee?

Sempervivum

. so abwegig finde ich die Idee gar nicht. Hat allerdings den Nachteil, dass die Bilder im IFrame nicht so ohne weiteres manipuliert werden können (Position/ Größe) und deswegen in den Proportionen schon so halbwegs zu den Frameproportionen passen müssen, sonst werden die halt immer oben links angezeigt.

Kleines Beispiel ... Beispiel mit IFrame

Mir würde bei den überschaubaren Anforderungen.. nur lokal und (wahrscheinlich) nur ein Client... am ehesten ein IFrame in den Sinn kommen, der von den außen positionierten Bildern mit Inhalt gefüllt wird.

Ein paar mehr Informationen wären zielführend. Wie ist die Tabelle in ihrer Gesamtheit aufgebaut... welche Formate verbergen sich hinter den verwendeten Klassen... was soll man unter '...dass das Bild mittig "gezoomt" wird...' verstehen?

Grundsätzlich ist jedoch die Verwendung einer Tabelle immer problematisch, man soll sie auch nur benutzen, wenn tatsächlich tabellarische Daten dargestellt werden sollen. Es gibt durchaus mit HTML und CSS bessere Möglichkeiten (zB FlexBox oder Grid Layout), um deine Problem zu lösen.

Des weiteren fällt mir auf, dass du wohl auf einem älteren Stand in Sachen HTML bist. Die aktuelle Variante ist HTML5 und dort ist zB deine Tag-Ergänzung 'align="center" ' als veraltet eingestuft und sollte durch CSS formatiert werden. Hmmm... nebenbei... so wie es dort steht ist es meiner Meinung nach sowieso nicht wirksam, denn es zentriert zwar den Inhalt des <td> (also das <div>) aber nicht den Inhalt des <div> (also das <img>).

Ebenso dein 'height=100%' Attribut. Dieses ist zwar noch zulässig in HTML5, allerdings glaube ich, dass die Prozent (%) Einheit nicht zulässig ist, sondern nur Pixel (px). Und wenn, dann sollte bei der Tag Ergänzung gar keine Einheit stehen, sondern nur height="200"... was dann 200px wären.

Also bitte.. poste den vollständigen Code (HTML und CSS), beschreibe, was du tatsächlich erreichen willst und dann wird sich hier bestimmt jemand finden, der dir den richtigen Weg zum Ziel weist.

UUpps... ja... sorry! Da hat wohl meine Leseschwäche temporär 'links' mit 'rechts' verwechselt .

Aber teste mal folgendes... gib dem ::before (ungehovered) ein margin-left: 95px;

und setze das bei :hover zurück auf 0px.

https://jsfiddle.net/qz9rg534/

Versuche es mal ::after!

Und bitte... ::after und ::before sind 'Pseudoelemente' und werden im CSS mit einem doppelten Doppelpunkt (::) ausgezeichnet.

Im Gegensatz zu Pseusoklassen (zB :hover), die haben den einfachen Doppelpunkt (:)

Versuche mal

ul {
  margin-left: 100px;
}

Und position: center; gibt es nicht!

Das Stylesheet wird eindeutig nicht gefunden und kann deswegen auch nicht geladen werden.

Entweder der Name ist falsch geschrieben (auch Groß- und Kleinschreibung beachten... owncss.css ist nicht das Selbe wie zB Owncss.css).

Oder die Datei befindet sich nicht im selben Verzeichnis, wie die index.html.

Du willst herausfinden, ob dein Ausdruck 'test' einen Wert von 4, 3, 5 oder keinen von den Werten hat. Alle deine Werte sind Zahlen.

Als Übergabewert hast du aber einen Textstring... "4", "3"....

Switch vergleicht nicht nur den Wert, sondern auch den Variablentyp (===). Beides muss übereinstimmen.

Diesen weißen Rand kann ich nicht erkennen (hab mit FireFox, Chrome, Opera und IE11 geprüft). Kannst du einen Screenshot machen und Details zum Browser, Betriebssystem und Displaygröße geben.

Ansonsten wird der linke Rand des Sliders durch das margin-left im CSS Code bestimmt. Versuche doch bitte mal diesen (negativen) Wert etwas zu vergrößern und schaue, ob dadurch der Slider nach links rutscht und sich die Lücke schließt.

Zitat von m.scatello

da hast du auf das falsche Pferd gesetzt,

Da stimme ich voll und ganz zu! Zum individuellen Anpassen einer Seite ist so eine WordPress Seite einfach nur bääähhh!

Zitat von m.scatello

das geht bei dem Wordpress-Theme Colormag nur mit einem größerem Umbau

Auch das ist wohl richtig - und von derartigen Umbauten sollte man besser die Finger lassen, es sei denn, man ist ein Profi auf diesem Gebiet.

Was aber wohl klappen könnte, ist eine 'Fummellösung' mit CSS:

#header-right-sidebar {
  width: 100vw;
}
#header-right-section {
  width: 100vw;
  clear: both;
  float: none;
  margin-left: calc((50vw - 570px) * -1);
}
@media screen and (max-width: 1190px) {
  #header-right-section {
    margin-left: -3%;
  }
}

Einfach mal in das 'zusätzliche CSS' im Customizer einfügen und schauen, ob das so passen könnte - wenn nicht, einfach wieder löschen.

Hallo basti1012 ... neee... du hast absolut Recht! Es müsste richtig 'flex-start' sein, habe ich irgendwie durcheinander gebracht. Hmmm... aber 'left' scheint scheint aber auch zu klappen ;)... oder es ist ganz einfach, weil 'flex-start' der Default-Wert ist und deswegen der Browser das (falsche) 'left' ignoriert.

Hast du den Code getestet? Er ist nicht auf Bildschirmgrößen beschränkt... er passt für alle Bildschirmgrößen!

Er kann aber nur mit einer bestimmten Anzahl von Containern umgehen... wenn die Anzahl der Container sich ändert, dann muss der 'max-width' Wert angepasst werden.

Jein... also vielleicht nicht so, wie du es haben möchtest.

Wie viele Container in eine Reihe passen, ist ja abhängig davon, wie breit der Bildschirm ist und das ist ja angefangen bei einem Smartphone bis hin zu einem großen HD - Monitor eine ganz schöne Spanne.

Wenn du weißt, wie viele Container maximal auf der Seite angezeigt werden, dann kannst du ausrechnen, wie viel Platz (in Pixel) die benötigen.

Dann könntest du für Bildschirme, die kleiner sind als diese Breite, eine MediaQuery ins CSS schreiben, die dann von justify-content: center; auf justify-content: left; umschaltet.

Etwa so...

@media screen and (max-width: 1295px) {
  .block-center {
    justify-content: left;
  }
}

Den Wert '1295px' musst du natürlich an deine Seite und die maximale Zahl von Containern anpassen anpassen - und das Ganze auch noch testen, ob es überhaupt das liefert, was du haben willst.

Teste mal...

.block-center {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

Und das float: left; bei den anderen Containern löschen!

Wie soll das denn konkret aussehen auf einem Smartphone... und von welcher (minimalen) Bildschirmbreite reden wir?

Ich seh gerade... da verrutscht die vertikale Ausrichtung etwas, da bei der Tabelle in in den Zellen das Default auf 'middle' gesetzt ist.

Ergänze den 'style' der beiden <td>Elemente um vertical-align: top;, dann sollte es passen.

Das sollte aber klappen... mit welchem Mailprogramm arbeitest du denn?

Ansonsten kann dir vielleicht der Vorschlag von m.scatello weiterhelfen... eine Tabelle.

Das könnte dann so aussehen.

<table style="width: 100%; border: 0; background-color: #a2c217; font-size: 1em; color: #ffffff; padding: 5px;">
   <tr>
      <td style="padding-left: 10px; text-align: left;">
         name<br>
         straße<br>
         stadt<br>
         <br>
         nummer<br>
         nummer<br>
         was auch immer was auch immerwas auch immer was auch immer was auch immer was auch immer      was auch immer was auch immerwas auch immer was auch immer was auch immer was auch immer      was auch immer was auch immerwas auch immer was auch immer was auch immer was auch immer
      </td>
      <td style="padding-right: 10px; text-align: right;">
         bank<br>
         name<br>
         iban<br>
         bic<br>
         <br>
         geschäftsführer<br>
         name
      </td>
   </tr>
</table>

dann füge bitte mal den Code flex-wrap: nowrap; in das Style-Element des ersten (äußeren) div's hinzu.

... So soll diese Zeile dann aussehen.

<div style="display: flex; justify-content: space-between; flex-wrap: nowrap; background-color: #a2c217; font-size: 1em; color: #ffffff; padding: 5px;">

Gibt aber auch andere Möglichkeiten... kommt darauf an, was du haben willst und wie das 'Endprodukt' aussehen soll.