WordPress & Webwork - perun.net

CSS3: Größe beliebiger Elemente ändern

Von am 21. 10. 2011 um 11:11

Mit CSS3-Eigenschaft resize kann man dem Besucher erlauben, die Größe beliebiger Elemente anzupassen, hier ein einfacher Absatz:

Ich bin ein Absatz und mich kann man vergrößern oder verkleinern. Einfach mit dem Mauscursor unten rechts klicken und ziehen.

Folgender CSS-Code kam hier zum Einsatz:

p {
    width: 470px;
    background: #ddd;
    border: 1px solid #bbb;
    padding: 1.2em;
    margin-left: auto; margin-right: auto; 
    resize: both;
    overflow: hidden;
}

Wichtig sind aber die zwei letzten Code-Zeilen, die ich auch hervorgehoben habe. Mit resize: both; erreicht man, dass das Element sowohl in der Breite als auch in der Höhe veränderbar ist. Weitere mögliche Werte für diese Eigenschaft sind:

  • vertical: nur vertikale Änderung
  • horizontal: nur horizontale Änderung
  • none: keine Änderung erlaubt

Die zweite Angabe overflow: hidden; dient dazu da um das Verhalten von Safari zu fixen. Wobei auch andere Browser, die diese Eigenschaft unterstützen, für die Eigenschaft overflow einen Wert benötigen, der nicht visible ist … also müssen die Werte auto, scroll oder hidden zum Einsatz kommen.

Unterstützt wird das ganze von Chrome, Firefox und Safari.

Weitere Links

Diesen Artikel weiterempfehlen oder später lesen:

auf Kindle (später) lesen

Premium WordPress Themes

Verwandte Artikel:

Kategorien:
HTML & CSS
Tags:
 
Beitrag:
Druckvorschau
Kommentare:
Kommentare verfolgen oder Kommentar abgeben

 — 

2 Kommentare

  1. 1. – MI

    Kommentar vom 21.10.2011 um 11:32

    Sehr praktisch beispielsweise für längere Listings. Auf http://jendryschik.de/weblog/2010/08/17/funktionsweise-meiner-glossareinbindung/ beispielsweise stören die Listings den Lesefluss, vor allem das lange JavaScript. Ich könnte nun die Höhe der Listings beschränken und den Leser das Element entsprechend vergrößern lassen, wenn er mehr Quelltext sehen möchte. Diese Funktion müsste natürlich deutlich sichtbar sein.

  2. 2. – Perun

    Kommentar vom 21.10.2011 um 18:41

    Ja, du hast Recht, die sechs kleinen Punkte sind jetzt wirklich gut sichtbar. Es wäre gut wenn man da auch Einfluss nehmen könnte.

Hinweis:
WordPress 3.5 für Autoren & Redakteure (pdf)
Ausdruckbar, Volumenlizenzen zu sehr fairen Preisen.

Tut mir Leid, aber die Kommentar-Funktion ist momentan deaktiviert.

Weblog der perun.net webwork gmbh mit Artikeln zum Thema WordPress, Webwork, und Internet.