HTML (CSS) Bild horizontal und vertikal auf Bildschirm/Window zentrieren

[netzgestaltung]

Achso naja du mußt nur vom äußersten bis zum innersten Element Blockelemente haben bzw display:block; anwenden und height:100% vergeben. Die Frames bilden hier aber eine Schranke. Das gilt nur innerhalb eines Dokumentes oder absolute/relative positionierten Elementen.

 

[cumulonimbus8]

Auf die VHS die einem mal so ausführlich bei (m)einem eigentlich ja so trivialen Problem hlft, statt mit Bunt und Hallo Welt zu wedeln, auf die warte ich noch 😉
CN8

 

[netzgestaltung]

VHS

Sagt mir jetzt jetzt nurmehr was als Volkshochschule oder die alte video kassette.
CSS beruht vielfach auf Erfahrung, daher experimentiere ich immer herum, so lernt sich das vermutlich am besten. Es gibt sehr viele richtig und einige falsch und manches davon ändert sich über die Zeit. Viele Entscheidungen liegen nur daran ob das CrossBrowser geht oder später einfacher wartbar ist oder sonstige metaparameter.

 

[cumulonimbus8]

Natürlich die Volkshochschule
Ja, CSS ist eben zu vielseitig dasselbe auf diversen Wegen zu erreichen.
Und doch, sehe ich fremden CSS-Code klappt mir die Kinnlade an Syntaxoptionen runter. Da hätte ein Lehrer genug zu tun. (In ungefähr wie diese PowerShell von MS - Tonnen an Syntax und Begriffen die einer Fremdsprache gleichkommen, da ist CSS regelrecht harmlos )
CN8

 

[netzgestaltung]

Ja ich hab da eine sehr starre Philosophie entwickelt, mein CSS ist immer gleich formatiert ;-). Viele Selektoren waren früher wegen dem IE 6 nicht nutzbar und ganze Philosophien wie BEM sind entstanden.

Dagegen wehre ich mich immer weil ich heilfroh bin den nicht mehr zwangsweise unterstützen zu müssen, denn die Syntax wird durch die definitiven layoutbezogenen classNames deutlich eingeschränkt und unflexibler und halt elendslange Selektoren, die schlecht wartbar sind in Folge, wenns mal was individuelles sein soll. Wenn jemand dann ungeübt ist beim erstellen fragst du dich nach 3 Jahren warum .col-3 .border--thin--dashed{ border-style:solid; } hatte und kein Kommentar dabei.

Dafür trachte ich immer danach inhaltsbezogene globale Klassen am Body zu vergeben und nur sehr einfache inhaltsbezogene klassen in den restlichen elementen. Die einzige reine "layout" klasse die bei mir überlebt hat ist "inner", wenn ich mal einen conainer benötige, bekommt das innere Element die. die Syntax dazu ist dann zb: .articles > .inner{}, dadurch ist der kontext klar ersichtlich.

Diese meine Philosophie möchte ich eh schon längst Dokumentieren, dieses Jahr könnte es soweit sein. Witzigerweise dürfte ich das von jQuery übernommen haben denn unlängst sah ich mal in deren alte Doku rein.

Mein HTML dazu sieht dann häufig so aus:

<section class="articles">
  <h2 class="title">Articles</h2>
  <div class="inner">
    <article class="my-post-type my-number-id my-slug" id="my-post-type-my-slug">
      <h3 class="title"><a href="{% more_url %}">My Title</a></h3>
      <div class="inner content">
        <p>I am content</p>
        <p class="more">
          <a href="{% more_url %}">Read more</a>
        </p>
      </div>
    </article>
    <article class="my-post-type my-number-id my-other-slug" id="my-post-type-my-other-slug">
      <h3 class="title"><a href="{% more_url %}">My other Title</a></h3>
      <div class="inner content">
        <p>I am other content</p>
        <p class="more">
          <a href="{% more_url %}">Read more</a>
        </p>
      </div>
    </article>
  </div>
</section>