CSS inherit

[Linuchs]

Moin,

ich bastle ja weiter an meinem simple_editor und simple_viewer.

Da kann ich z.B. im <header> ein Bild links floaten und rechts daneben zwei Zeilen setzen: http://osmer.de/studien/flexbox/

So weit, so gut. Nun möchte ich dieses "Kunstrukt" so wie es ist, zentriert haben und mache

<div style="text-align:center">
  <div style="display:inline-block;text-align:inherit">
  <img src="..." style="height:5em;float:left;margin-right:.5em;" />
  <font color="#00f"><span style="font-size:1.7em">Dogwalk Wallerstädten</span> &nbsp; <span style="font-size:1.5em">Groß-Gerau</span></font><br>
<span style="font-size:1.2em">alle zwei Wochen samstags mit den Wauzis unterwegs</span>
<div style="clear:both"></div>
</div></div>

Durch das text-align:center wird - wie zu erwarten - nicht nur der enthaltene div, sondern auch dessen Inhalt zentriert. Das möchte ich nicht, deshalb noch ein div mit text-align:inherit doch das wirkt nicht, warum?

Und jetzt bitte keine Quakerei wegen der CSS-Angaben "vor Ort". Hier geht es um HTML-Schnippsel, die der Nutzer in seine Webseite einfügen kann, ich bin nicht Herr des globalen CSS.

Linuchs

[Der Martin]

Hallo,

<div style="text-align:center">
  <div style="display:inline-block;text-align:inherit">
  <img src="..." style="height:5em;float:left;margin-right:.5em;" />
  <font color="#00f"><span style="font-size:1.7em">Dogwalk Wallerstädten</span> &nbsp; <span style="font-size:1.5em">Groß-Gerau</span></font><br>
<span style="font-size:1.2em">alle zwei Wochen samstags mit den Wauzis unterwegs</span>
<div style="clear:both"></div>
</div></div>

du willst doch nicht wirklich veraltete und missbilligte Elemente wie font nutzen?

Durch das text-align:center wird - wie zu erwarten - nicht nur der enthaltene div, sondern auch dessen Inhalt zentriert.

Zu erwarten nur deshalb, weil du den inneren Container mit display:inline-block zu inline-Inhalt gemacht hast. Andernfalls würde text-align:center auf dieses Element nicht wirken.

Das möchte ich nicht, deshalb noch ein div mit text-align:inherit doch das wirkt nicht, warum?

Doch, es wirkt wohl. Damit gibst du doch an: Erbe bitte die Eigenschaft text-align von deinem Elternelement. Dieses hat text-align:center. Wenn du dort eine andere Ausrichtung willst, solltest du sie explizit angeben.

Und jetzt bitte keine Quakerei wegen der CSS-Angaben "vor Ort".

Nein. Im Gegensatz zum verwendeten font-Element ist das fast harmlos.

So long,
 Martin

[Linuchs]

Hallo,

Doch, es wirkt wohl. Damit gibst du doch an: Erbe bitte die Eigenschaft text-align von deinem Elternelement.

Hää? Das ist doch sowieso die Eigenschaft von Cascading SS. Ich habe inherit verstanden als: Nimm den Wert, der für das Dokument gilt.

Wenn du dort eine andere Ausrichtung willst, solltest du sie explizit angeben.

Nun gut, ich habe das simple Textformat #ZL# eingeführt, das zwei verschachtelete Container erzeugt, der äußere mit text-align:center, der innere mit text-align:left. Doch nun habe ich das Problem, dass der innere Container Zeilenumbruch verursacht, obwohl er Platz genug hat (border nur testweise):

<div style="text-align:center;border:.1pt solid #f00;padding:2px;">
    <div style="display:inline-block;text-align:left;border:.1pt solid #f00;padding:2px;"><img src="http://dogwalk-wallerstaedten.de/images/Memorial/ML02.jpg" style="height:5em;float:left;margin-right:.5em;" /> <span style="color:#00f;"><span style="font-size:1.7em">Dogwalk Wallerstädten</span> &nbsp; <span style="font-size:1.5em">Groß-Gerau</span></span><br>
<span style="font-size:1.2em">alle zwei Wochen samstags mit den Wauzis unterwegs</span>
<div style="clear:both"></div>
</div></div>

Linuchs

[Linuchs]

übrigens ... die include-Datei simple_viewer.php, die in einer "fremden" PHP-Umgebung aus einem Text HTML-Code erzeugt, stelle ich gerne zur kostenlosen Nutzung und zur Diskussion zur Verfügung.

Sie ist gedacht, um einer "starren" Webseite einen vom Nutzer leicht zu ändernden Container einzufügen. Hier ist sie:

http://osmer.de/simple_viewer_php.txt

Linuchs

[Der Martin]

Hi,

Doch, es wirkt wohl. Damit gibst du doch an: Erbe bitte die Eigenschaft text-align von deinem Elternelement.

Hää? Das ist doch sowieso die Eigenschaft von Cascading SS.

nein, nicht generell. Es gibt in CSS Eigenschaften, die generell nicht vererbet werden (etwa Abstände und Rahmen); es gibt Fälle, in denen die geerbte Eigenschaft durch eine andere Regel überschrieben wurde, und dann kann man mit einem noch spezifischeren Selektor und dem Keyword inherit festlegen, dass eben doch die Eltern-Eigenschaft übernommen werden soll.

Ich habe inherit verstanden als: Nimm den Wert, der für das Dokument gilt.

Das ist ein Missverständnis.

Wenn du dort eine andere Ausrichtung willst, solltest du sie explizit angeben.

Nun gut, ich habe das simple Textformat #ZL# eingeführt, das zwei verschachtelete Container erzeugt, der äußere mit text-align:center, der innere mit text-align:left. Doch nun habe ich das Problem, dass der innere Container Zeilenumbruch verursacht, obwohl er Platz genug hat (border nur testweise):

Das liegt daran, dass das Element dank inline-Block nur noch so breit ist, wie es sein Inhalt erfordert (shrink-to-fit). Wenn du das nicht willst, lege eine Breite fest - oder formatiere den Inhalt so, dass er nicht umbricht (white-space:nowrap). Letzteres ist mit Vorsicht zu genießen; Obacht bei schmalen Browserfenstern!

So long,
 Martin

[MrMurphy1]

Hallo

Da kann ich z.B. im header ein Bild links floaten und rechts daneben zwei Zeilen setzen

float ist der falsche Ansatz. float ist nicht dafür gedacht Elemente links- oder rechtbündung auszurichten.

Für dein Problem ist Flexbox besser geeignet.

Am sinnvollsten erscheint mir, in den header zunächst einen Hilfscontainer zu setzen. In diesen Hilfscontainer kommen dann das Logo (eventuell in einem figure-Element) und ein weiterer Hilfscontainer für den Text. Die beiden inneren Container werden dann mittels Flexbox ausgerichtet.

Gruss

MrMurphy

[MrMurphy1]

Hallo

Ich habe mal ein Beispiellayout mit drei unterschiedlichen headern erstellt.

Zunächst die Lösung, die mir am besten gefällt: Logo und Text sind so weit wie möglich außen.

Dann die Lösung, dass Logo und Text jeweils in der Breite des mittleren Containers mit dem Hauptinhalt so weit außen wie möglich sind.

Und als Drittes sind Logo und Text so nah wie sinnvoll zusammen und gemeinsam zentriert. Der Text bricht erst um wenn er nicht mehr in eine Zeile passt. Das schwebt dir wohl am ehesten vor.

Dazu noch etwas responsive Design für schmale Bildschirme.

Linuchs header Testlayout

Ich fand den Ortsnamen am besten in einer separaten Zeile aufgehoben. Das ist mein persönlicher Geschmack und kann natürlich noch angepasst werden.

Gruss

MrMurphy

[Linuchs]

Hallo MrMurphy,

Ich habe mal ein Beispiellayout mit drei unterschiedlichen headern erstellt. Linuchs header Testlayout

Danke für deine Mühe, das muss ich in Ruhe studieren. Die CSS Angaben sind sehr umfangreich, ich muss mal sehen, was eigentlich die Basis ist.

Linuchs

[JürgenB]

Hallo,

zum verwendeten HTML: sieh dir mal figure und figcaption an.

Gruß
Jürgen

[Linuchs]

zum verwendeten HTML: sieh dir mal figure und figcaption an.

Ja, ich sehe gerade und muss schmunzeln:

<img src="Selfhtml-Logo-Neu.png" alt="SelfHTML-Logo">

Das neue Logo hieß alt "SELFHTML-Logo".

Immer mehr Senioren verschwinden im Internet, weil sie die Tastenkombination [alt][entf] gedrückt haben.

Linuchs

[marctrix]

Hej Linuchs,

das ist alles viel zu kompliziert.

Versuch es erstens mit mobile first, zweitens mit Flexbox.

Das folgende CSS sollte reichen:

/* Seitenaufteilung */

body {
    display: flex;
    flex-wrap: wrap;
}
body > header,
body > footer {
   flex: 0 0 100%;
}
main {
   flex: 2 0 40em;
}
body > div,
body > aside {
   flex: 1 0 20em;
}

Das dazugehörige HTML

<!doctype html>
<html class="no-js" lang="de">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Name der Seite - Name des Angebotes</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
	<header>
		<nav></nav>
	</header>
	<div>Wozu eigentlich?</div>
	<main>
		Ein oder mehrere article
	</main>
	<aside></aside>
	<footer></footer>
</body>

Hier die Codepen-Version mit etwas Inhalt

Marc

[MrMurphy1]

Hallo

noch mal zum inherit.

Wichtig zum inherit ist noch, dass der berechnete Wert der Elternelements übernommen wird. Also zum Beispiel keine Prozent-Werte, sondern dann der jeweils aktuelle Pixelwert. Wenn das nicht beachtet wird können zwar korrekte, für den Webseitenersteller aber unerwartete, Ergebnisse die Folge sein. Siehe zum Beispiel

https://developer.mozilla.org/de/docs/Web/CSS/inherit

Du suchst wohl die Eigenschaften initial und unset. Dabei solltest du aber die Browserunterstützung beachten. Bis zum IE11 einschließlich geht nichts und auch andere Browser werden teilweise erst seit kurzem unterstützt.

Für initial siehe

https://developer.mozilla.org/de/docs/Web/CSS/initial

sowie

http://caniuse.com/#search=initial

und für unset

https://developer.mozilla.org/de/docs/Web/CSS/unset

sowie

http://caniuse.com/#search=unset

Gruss

MrMurphy