nicht angemeldet
Vertikale Textausrichtung neben einem Bild
Matthias ApselHallo,
ich bin gerade noch in der Denkphase, kann Euch daher noch kein Beispiel liefern.
Hier mein gedankliches Problem:
Ich möchte einen Text neben einem Bild darstellen. Soweit so gut, hierfür gibt es viele Beiträge.
Damit der Text nicht am oberen Bildrand steht, würde ich z.B
padding-top: 3em; (oder eine %-Angabe)
angeben.
Dann ist mir aber eingefallen, dass wenn man das Bild verschmälert, reicht der Text, der ursprünglich über 3 Zeilen ging, plötzlich über 4 oder 5 oder noch mehr. Dadurch würde der Text - weil oben durch das padding Platz "geklaut" wurde - bis zum unteren Bildrand oder noch weiter nach unten rutschen.
So etwas wie die horizontale Zentrierung von Text (text-align: center; oder eines containers durch margin-left: auto; margin-right: auto;
habe ich leider nicht gefunden.
Wie macht man dies?
-
So etwas wie die horizontale Zentrierung von Text (text-align: center; oder eines containers durch margin-left: auto; margin-right: auto;
habe ich leider nicht gefunden.Es gibt die Eigenschaft vertical-align: middle; (http://www.w3schools.com/cssref/pr_pos_vertical-align.asp)
Hierfür müsstest du z.B. eine Tabelle nehmen und in das td Element diese Eigenschaft setzen, wäre ein Ansatz.
-
Hallo
Hierfür müsstest du z.B. eine Tabelle nehmen und in das td Element diese Eigenschaft setzen, wäre ein Ansatz.
Auf der Suche nach table bin ich auf CSS-Einträge gestoßen, die mir unerklärlich sind.
Was bedeuten z.B. folgende Zeilen?/*\*/ display: table; /**/ /*\*//*/ ~~~?-
Hallo
Hierfür müsstest du z.B. eine Tabelle nehmen und in das td Element diese Eigenschaft setzen, wäre ein Ansatz.
Auf der Suche nach table bin ich auf CSS-Einträge gestoßen, die mir unerklärlich sind.
Was bedeuten z.B. folgende Zeilen?/**/ display: table; /**/
/*///
Damit kannst du über css eine tabelle "simulieren" siehe Erklärung: http://de.selfhtml.org/css/eigenschaften/positionierung.htm hab ich persönlich noch nie gebraucht, würde eher zum normalen html-Tabellenkonstrukt zurückgreifen. ~~~html <table ...> <tr> <td style="vertical-align: top;"><img src="deinbildpfad.jpg" ... /></td> <td style="vertical-align: middle;">dein text </td> </tr> </table>-
Om nah hoo pez nyeetz, ms88!
hab ich persönlich noch nie gebraucht, würde eher zum normalen html-Tabellenkonstrukt zurückgreifen.
Du solltest bei der Erstellung von HTML-Dokumenten zuallererst die Inhalte und deren Beziehungen untereinander beachten und dann erst die Gestaltung. Eine Tabelle sollte man ausschließlich für tabellarische Daten verwenden.
Matthias
-
Om nah hoo pez nyeetz, ms88!
hab ich persönlich noch nie gebraucht, würde eher zum normalen html-Tabellenkonstrukt zurückgreifen.
Du solltest bei der Erstellung von HTML-Dokumenten zuallererst die Inhalte und deren Beziehungen untereinander beachten und dann erst die Gestaltung. Eine Tabelle sollte man ausschließlich für tabellarische Daten verwenden.
Matthias
Das ist korrekt, geht aber aus dem Problem nicht hervor was genau der Zusammenhant ist, deswegen hab ich auch z.B. über Tabelle geschrieben. Er kanns auch über divs lösen wenn er keinen tabellarischen Zusammenhang hat. Ich hatte das Problem nur nie, dass ich das display: table; property verwenden musste.
-
-
-
Om nah hoo pez nyeetz, Neuhier!
Was bedeuten z.B. folgende Zeilen?
/**/ display: table; /**/
/*///
Das kannst du getrost ignorieren, es handelt sich um einen CSS-Hack (für uralte Browser) . Dieser sorgt dafür, dass nur Netscape-Browser die Regel interpretieren. (iirc) Matthias -- Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [TeX und Textmarker](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=T#tex). -
Hi,
Das kannst du getrost ignorieren, es handelt sich um einen CSS-Hack (für uralte Browser) . Dieser sorgt dafür, dass nur Netscape-Browser die Regel interpretieren. (iirc)
habe aus Interesse nach CSS-Hacks gesucht und "unendlich" viele gefunden.
Das ist natürlich sehr unübersichtlich. Was gilt für was und welchen Browser sollte man überhaupt noch berücksichtigen?
Gibt es eine aktuelle Übersicht über die Hacks, die heute noch sinnvoll sind, um dir gängigsten Browser zu korrigieren?-
Om nah hoo pez nyeetz, Neuhier!
Das ist natürlich sehr unübersichtlich. Was gilt für was und welchen Browser sollte man überhaupt noch berücksichtigen?
Das hängt ganz von deinem Auftraggeber oder deiner Zielgruppe ab. Für private Seiten würde ich keinem Browser eine Extrawurst braten. Meist sind es eh nur Kleinigkeiten wie falsche Abstände, die einem zum Hack greifen lassen. In halbwegs modernen Browsern wird die Seite nicht gleich unbenutzbar.
habe aus Interesse nach CSS-Hacks gesucht und "unendlich" viele gefunden.
Gibt es eine aktuelle Übersicht über die Hacks, die heute noch sinnvoll sind, um dir gängigsten Browser zu korrigieren?Salopp formuliert: Sie ist in den allermeisten Fällen nicht notwendig.
Matthias
-
Hallo,
welchen Browser sollte man überhaupt noch berücksichtigen?
Wie Matthias auch sagt, das kommt auf die Ziele einer speziellen Website an. Sofern nicht aus irgendwelchen Gründen alte Browser unterstützt werden müssen oder spezielle Techniken verwendet werden, werden Websites für die Browser entwickelt, die heutzutage den Markt beherrschen. Für alte Browser werden dann nach Notwendigkeit und Aufwand kleine Anpassungen vorgenommen, damit die Site grundlegend bedienbar ist.
Gibt es eine aktuelle Übersicht über die Hacks, die heute noch sinnvoll sind, um dir gängigsten Browser zu korrigieren?
Hacks werden fast nicht mehr verwendet. Es gibt wenige verbreitete Browser, die CSS-Anpassungen erfordern, die sich nur mit fiesen Syntax-Hacks notieren lassen. Manchmal muss man eine zusätzliche Eigenschaft notieren, die in anderen Browsern aber auch nicht schadet.
Starke Anpassungen sind gegebenenfalls für alte Internet Explorer nötig (IE < 9, insbesondere IE < 8). Es ist gang und gäbe, hier separate Stylesheets zu verwenden, die durch <http://de.selfhtml.org/css/layouts/browserweichen.htm#alternative@title=Conditional Comments> eingebunden werden. Will man alle zugehörigen Styles an einer Stelle haben, kann man diese Extra-Styles durch CSS-Präprozessoren wie Sass generieren lassen.
Die Marktanteile dieser alten IEs sind aber nicht mehr hoch, daher verzichten viele auf Anpassungen. Das variiert natürlich nach Umfeld. In vielen Unternehmen und Institutionen sind immer noch ewig alte Browser »verbaut«.
Mathias
-
Om nah hoo pez nyeetz, molily!
Starke Anpassungen sind gegebenenfalls für alte Internet Explorer nötig (IE < 9, insbesondere IE < 8). Es ist gang und gäbe, hier separate Stylesheets zu verwenden, die durch <http://de.selfhtml.org/css/layouts/browserweichen.htm#alternative@title=Conditional Comments> eingebunden werden. Will man alle zugehörigen Styles an einer Stelle haben, kann man diese Extra-Styles durch CSS-Präprozessoren wie Sass generieren lassen.
Oder auch selbst in das Stylesheet schreiben. Um mal ein Beispiel CC vs. _ein_ Stylesheet zu haben
Das Forums-CSS umfasst ca. 1800 Zeilen. Davon sind ca. 130 für den IE6, 100 für den IE7, 10 für den IE8 und der IE9 hat ausschließlich aus kosmetischen Gründen 15 Zeilen zusätzliches Stylesheet via CC bekommen.
Matthias
-
-
-
-
-
