Blackpanther23: Prozentuale Höhenangabe wird ignoriert

0 19

Prozentuale Höhenangabe wird ignoriert

Blackpanther23
  • css
  • html
  1. 0
    Auge
  2. 3
    Orlok
    1. 0
      Gunnar Bittersmann
      1. 1
        Orlok
        1. 0
          Gunnar Bittersmann
    2. 0
      Blackpanther23
      1. 0
        Der Martin
      2. 0
        Blackpanther23
        1. 0
          Gunnar Bittersmann
        2. 0
          MrMurphy1
          1. 0
            Gunnar Bittersmann
    3. 0
      Gunnar Bittersmann
      • html
      1. 0

        Ersetzte Elemente

        Orlok
        • html
        • menschelei
        1. 0
          Gunnar Bittersmann
          1. 0
            Orlok
            • html
            • html
            • menschelei
            1. 0
              Gunnar Bittersmann
              • html
              • menschelei
              1. 0
                Orlok
                1. 0
                  Gunnar Bittersmann
SELF-Forum

Prozentuale Höhenangabe wird ignoriert

Blackpanther23
– Informationen zu den Bewertungsregeln

Hallo zusammen,

habe das Problem, dass prozentuale Höhenangaben mit CSS ignoriert werden. Nach eigener Recherche kam heraus, dass ich dem HTML (dem HEAD?) und dem BODY Element 100% Höhe "zuweisen" muss. Quelle: Linkbeschreibung

Aber ich kriege es nicht umgesetzt, würde mir jemand das an meinem Beispiel zeigen? "height" als Parameter anzuhängen, hat nicht funktioniert und das hier:

html, body {
  height:100%;
}

habe ich offensichtlich falsch positioniert. Ich weiß mir keinen Rat mehr...

Hier mein Code:

<!DOCTYPE html>
<html lang="de" height="100%">
<head height="100%"><title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="design.css" type="text/css" rel="stylesheet">
</head>

<body bgcolor="#7e7e7e" height="100%">
<header>
<!-- <img src="logo.jpg" width="50" height="50"></img>-->  
</header>
 
<article>
<h1>Überschrift</h1>
	<div id="navigation">
		<div id="item1">Part A</div>
		<div id="item2">Part B</div>
		<div id="item3">Part C</div>
		<div id="item4">Part D</div>
		<div id="item5">Part E</div>
		
	</div>

</article>
 
<aside>
<!---weiterführende Informationen --->
</aside>
 
<footer>
Ersteller dieser Website bin ich selbst.
</footer>
</body>
</html>

und falls das notwendig sein sollte, meine CSS Datei:

#container{
	flex-direction: row;
	flex-wrap: nowrap;
	display: -webkit-flex;
	display: flex;	
}

#navigation{
	margin-top: 20px;
	background-color: green;
	justify-content: space-around;
	flex-direction: row;
	flex-wrap: nowrap;
	display: -webkit-flex;
	display: flex;	
}

#item1 {
	box-sizing: border-box;
	background: red;
	width="15%";
	border-left: 1px solid white;
	border-right: 1px solid white;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
	width: 12%;
	height: 25%;
}

#item2 {
	box-sizing: border-box;
	background: red;
	border-left: 1px solid white;
	border-right: 1px solid white;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
	width: 12%;
	height: 25%;
}

#item3 {
	box-sizing: border-box;
	background: red;
	border-left: 1px solid white;
	border-right: 1px solid white;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
	width: 12%;
	height: 25%;
}

#item4 {
	box-sizing: border-box;
	background: red;
	border-left: 1px solid white;
	border-right: 1px solid white;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
	width: 12%;
	height: 25%;
}

#item5 {
	box-sizing: border-box;
	background: red;
	border-left: 1px solid white;
	border-right: 1px solid white;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
	width: 12%;
	height: 25%;
}



@font-face {
	color: #72C87D;
	font-size: 1 em;
	text-align: center;
	font-weight: bold;
}

Vielen Dank schon einmal für jede Unterstützung

Blackpanther PS: Ich bin Anfänger, bitte berücksichtigen, danke :-)

Beitrag melden
–
Informationen zu den Bewertungsregeln

akzeptierte Antworten

  1. Prozentuale Höhenangabe wird ignoriert

    Auge
    – Informationen zu den Bewertungsregeln

    Hallo

    Ja, du musst dem Wurzelelement eine Höhe zuweisen, damit eine Angabe für ein Kindelement eine Bezugsgröße bilden kann. Das muss dann aber auch im gleichen Kontext, hier CSS, erfolgen. Deine Angaben als HTML-Attribute für html und body ist somit falsch. Lösche sie wieder heraus und ersetze sie durch (weitgehend) gleichlautende CSS-Regeln.

    html {
height: 100%; /* Falls hier, wie bei der folgenden Angabe für body, min-height besser ist, soll das mal bitte jemand nachtragen. Danke. */
}
body {
min-height: 100%; /* Die Angabe von min-height erfolgt für den wahrscheinlichen Fall, dass mehr Inhalt da ist, als in eienr Bildschirmhöhe darstellbar ist. */
}

    Auf diese Anhaben kann sich eine folgende Höhenangabe in Prozent beziehen.

    Noch ein paar Maneuverkritikpunkte:

    #item1 {
        /* bla */
        width="15%"; /* falsch, richtig wäre „width: 15%;“ */
        /* blubb */
}

    Mit font-face werden Schriftarten nachgeladen, nicht Formatierungen festgelegt. Siehe: SelfHTML-Wiki @font-face

    @font-face { /* <= falscher Selektor */
        /* bla */
        font-size: 1 em; /* Keine Trennung von Maßangabe und -einheit! Richtig wäre „1em“ */
        /* blubb */
}

    Tschö, Auge

    --
    Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
    Terry Pratchett, „Gevatter Tod“
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Prozentuale Höhenangabe wird ignoriert

    Orlok (Versionen)
    +3 Informationen zu den Bewertungsregeln

    Hallo

    [Ich] habe das Problem, dass prozentuale Höhenangaben mit CSS ignoriert werden.

    Bei prozentualen Angaben ist die Frage immer: Prozent von was?

    Wenn du also einem Element eine height in Prozent zuweist, dann bezieht sich dieser Wert auf das direkte Vorfahrenelement, und wenn du für dieses Element keine explizite Angabe zur Höhe gemacht hast, dann passiert, wie du festgestellt hast, nichts, denn in Ermangelung eines Bezugswertes wird der Wert der Eigenschaft height ganz einfach nach der Höhe des Inhalts des Elementes bemessen.

    Wenn das Vorfahrenelement des Elementes, um das es geht, nun selbst zwar eine Angabe zu height hat, deren Wert jedoch ebenfalls eine prozentuale Angabe ist, dann verschiebt sich dieser Zusammenhang einfach um eine Ebene und die Frage ist wieder: Worauf bezieht sich nun diese Angabe?

    Nehmen wir also mal das folgende simple Beispiel:

    <!doctype html>

<html lang="de">
  <head>
    <meta charset="utf-8">
    <title> Höhe in Prozent </title>
  </head>
  <body>
    <main role="main">
      <article>
        <p> Höhe in Prozent </p>
      </article>
    </main>
  </body>
</html>

    Würden wir jetzt für das Element article im Stylesheet eine Höhe in Prozent zuweisen, also schreiben article { height: 100%; }, ohne für dessen Vorfahrenelemente Angaben für height zu machen, dann würde sich die Höhe von article, da es keine Angabe gibt, auf welche sich die Prozentangabe beziehen kann, nach dessen Inhalt richten, hier also der Höhe des Elementes p.

    Nehmen wir nun an, wir würden zudem auch für das Elternelement von article, also main, eine prozentuale Angabe zu height machen, also schreiben main { height: 100%; }, ohne aber für dessen Elternelement body eine explizite Angabe zu machen, dann hätten wir wieder die gleiche Situation: Die Höhe von main bemisst sich mangels Bezugswert nach dem Inhalt, und es bleibt schließlich bei der Höhe des paragraphs.

    Etwas anderes wäre es nun, wenn wir für main keine prozentuale Angabe zur Eigenschaft height machen würden, sondern zum Beispiel main { height: 20em; } schreiben würden, denn nun hätten wir einen Bezugswert und die 100% Höhe von article entsprächen nun diesen 20em Höhe des Elternelementes main.

    Aber das machen wir nicht, sondern behalten unsere Angabe main { height: 100%; } und geben dessen Elternelement body ebenfalls eine Höhe von 100%, schreiben also in unser Stylesheet: body { height: 100%; }, und stellen fest, dass die Höhe von article immer noch nach dessen Inhalt, also p bemessen wird.

    Wenn wir nun aber auch noch dem Element html eine height von 100% zuweisen, also schreiben…

    html, body, main, article {
  height: 100%;
}

    …dann funktioniert es und article füllt in der Höhe das ganze Fenster aus! - Aber warum?

    Deswegen, weil die Angabe zu height für das letzte Glied in der Kette, also unser Element html sich nun auf den viewport bezieht, dessen Abmessungen durch die Breite und Höhe des Fensters im Browser definiert sind, weshalb hier also ein Bezugswert gegeben ist, nach welchem sich wiederum alle prozentualen Angaben in der Kette der Elemente richten können.

    Nähmen wir nun aber main wieder heraus, wäre die Kette unterbrochen, das heißt html und body hätten eine Höhe von 100% des Browserfensters, aber article wäre wieder nur so hoch wie sein Inhalt.

    In dem Fall, dass wie in diesem kleinen Beispiel letztlich alle Angaben auf den viewport bezogen sind, könnte man aber auch gleich schreiben article { height: 100vh; }, da die Einheiten vh (für viewport height) und vw (für viewport width) sich genau auf diese Abmessungen des viewports, also des Browserfensters beziehen.

    Wenn wir nun mit diesem Wissen deinen Code betrachten, dann stellen wir fest, dass dein Element div mit der ID navigation ein Kindelement von article ist.

    Und wir stellen weiterhin fest, dass du für dieses Element article keine Angabe zur Eigenschaft height gemacht hast, das heißt, obwohl du...

    html, body {
  height:100%;
}

    …ausprobiert hast, ist die Kette durch article unterbrochen und alle prozentualen Angaben, die du für dessen Kindelemente gemacht hast, sind vergebens!

    So, nachdem das also geklärt wäre, noch ein paar Hinweise zu deinem Code… ;-)

    <!DOCTYPE html>
<html lang="de" height="100%">

    Das Element html darf kein Attribut height haben. Die Attribute width und height sind nur bei wenigen Elementen erlaubt, wie etwa img, input, object oder canvas, also grob gesagt bei Elementen mit einem bestimmten Inhaltsmodell, aber das können dir andere hier sicher besser erklären. ;-)

    <head height="100%">

    Gleiches gilt jedenfalls für das Element head, wobei hier die Unsinnigkeit einer solchen Angabe noch augenscheinlicher ist, da head, also der Kopf eines HTML-Dokumentes, mit der Darstellung im Fenster des Browsers direkt gar nichts zu tun hat, sprich, das Element head und seine Kindelemente werden gar nicht gerendert.

    <link href="design.css" type="text/css" rel="stylesheet">

    Die Angabe type="text/css" kannst du dir sparen, da der Browser grundsätzlich davon ausgeht, dass eingebundene Stylesheets in CSS verfasst sind.

    <body bgcolor="#7e7e7e" height="100%">

    Auch für das Element body gilt, dass die Attribute height und width nicht erlaubt sind, und das selbe gilt für bgcolor, das heißt, du hättest hier höchstens schreiben können…

    <body style="height: 100%; background-color: #7e7e7e;">

    …aber Gestaltung und Markup sollten so streng wie möglich getrennt sein, weshalb die Zuweisung von Styles im style-Attribut, von wenigen begründeten Ausnahmefällen abgesehen, dringend zu vermeiden ist.

    Du hast hier ja eine CSS-Datei eingebunden, also schreibe dort:

    body {
  height: 100%;
  background-color: #7e7e7e;
}

    Weiter im Quelltext…

    <header>
<!-- <img src="logo.jpg" width="50" height="50"></img>-->  
</header>

    Gut, dass du das img-Element in einen Kommentar gepackt hast. ;-)

    Die Attribute width und height sind wie oben schon gesehen für das Element img zwar zulässig, aber dieses Element hat kein schließendes Tag, denn welcher Inhalt sollte umschlossen werden?

    Auch sollte aus Gründen der Barrierefreiheit ein kurzer Alternativtext hinterlegt werden:

    <img src="logo.jpg" width="50" height="50" alt="Kurze Bildbeschreibung">

    Weiter…

    <article>
  <h1>Überschrift</h1>
  <div id="navigation">
    <div id="item1">Part A</div>
    <div id="item2">Part B</div>
    <div id="item3">Part C</div>
    <div id="item4">Part D</div>
    <div id="item5">Part E</div>
  </div>
</article>

    Hier solltest du zunächst einmal darüber nachdenken, ob die von dir verwendeten Elemente auch wirklich passend und sie auch an der richtigen Stelle sind:

    Das Element article dient dazu, in Abgrenzung zu anderen Inhalten, einen bestimmten inhaltlich eigenständigen Abschnitt des Seiteninhalts auszuzeichnen, wobei der Seiteninhalt selbst jedoch durch das Element main ausgezeichnet werden sollte, welches daher auch nur einmal pro Dokument vorkommen darf, also statt <article> wäre hier <main role="main"> wohl angebrachter, wobei abhängig von den Inhalten, welche du hinzuzufügen gedenkst, innerhalb von main durchaus mehrere article-Elemente notiert werden können.

    Dann hast du als erstes Kindelement von article, das wohl eigentlich viel lieber main sein möchte, eine Überschrift h1 gewählt.

    Die Überschriften, also h1 bis h6 sollten die Hierarchien innerhalb des Dokumentes repäsentieren, das heißt h1 wäre hier als globale Überschrift eher in deinem <header> unterzubringen, und für Inhaltlich untergeordnete Elemente wie main oder article wären dann h2, h3 usw. zu wählen, die natürlich in CSS noch gestaltet werden können.

    Was nun dein div-Element namens navigation angeht: Auch hier gibt es ein semantisch passenderes Element, welches sich sinnigerweise nav nennt…

    Die Navigation ist allerdings kein Teil des eigentlichen Seiteninhalts, weshalb je nach dem, ob es sich hierbei lediglich um eine seiteninterne Navigation handelt oder nicht, und wie du dir dein Layout eben so vorstellst, das Element nav auf einer Ebene mit main, oder aber als Kindelement von header oder aside besser untergebracht wäre.

    Solltest du dich hier entscheiden, die Navigation nicht im header der Seite unterzubringen, wäre es aus Gründen der Zugänglichkeit zum Inhalt der Seite aber wohl besser, wenn du das nav oder, wenn du es in einem aside-Element notieren willst, dann dieses Element, erst nach main hinzufügen würdest.

    Was den Inhalt deiner Navigation angeht, kann man darüber streiten, ob die Links als direkte Kindelemente - also wie hier deine diversen div-Elemente - oder in Form einer Liste notiert werden sollten, wobei ich eine Liste hier für semantisch passend erachte:

    <nav>
  <ul>
    <li><a href="…"> Link 1 </a></li>
    <li><a href="…"> Link 2 </a></li>
    <li><a href="…"> Link 3 </a></li>
    <li><a href="…"> Link 4 </a></li>
  </ul>
</nav>

    Zu deinem CSS:

    #container{
  flex-direction: row;
  flex-wrap: nowrap;
  display: -webkit-flex;
  display: flex;	
}

    Ein Element mit der ID container gibt es in deinem hier geposteten Markup gar nicht, weshalb dieser Block völlig nutzlos ist.

    Auch sollte es, zumindest in der Regel, keine Elemente namens container geben, da dies üblicherweise ein Hinweis darauf ist, dass entweder Markup zu Gestaltungszwecken missbraucht wird oder dass unnötigerweise eine ID für ein diese Funktion erfüllendes Element vergeben wird, welches auch direkt angesprochen werden kann, z.B. html, body oder main, aber das nur so als Anmerkung. ;-)

    Es kann jedenfalls nicht schaden, einmal einen Blick auf die verschiedenen Selektoren in CSS zu werfen, denn meistens ist die Vergabe von IDs oder die Zuweisung von Klassen überflüssig.

    Außerdem kannst du dir durch die richtige Wahl der Selektoren auch mehrfache Zuweisungen wie im Rest deines Codes sparen, den zu zitieren ich jetzt mal unterlasse. ;-)

    Erwähnt sei höchstens noch, dass es in CSS einige shorthand-properties wie beispielsweise margin oder flex-flow gibt, welche die Zahl der benötigten Zeilen zusätzlich zur passenden Wahl der Selektoren weiter reduzieren helfen, und was dein @font-face angeht: Du lädst hier ja gar keine Schriften nach, also solltest du vielleicht einfach mal einen Blick auf diese Seite werfen.

    PS: Ich bin Anfänger, bitte berücksichtigen, danke :-)

    Ich hoffe, das habe ich getan und mein Beitrag war hilfreich. ;-)

    Gruß,

    Orlok

    Beitrag melden
    +3
    Informationen zu den Bewertungsregeln

    1. Prozentuale Höhenangabe wird ignoriert

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@Orlok

      da head, also der Kopf eines HTML-Dokumentes, mit der Darstellung im Fenster des Browsers direkt gar nichts zu tun hat

      Ähm …

      sprich, das Element head und seine Kindelemente werden gar nicht gerendert.

      Per Default nicht, aber das kann man bei Bedarf durchaus ändern.

      LLAP 🖖

      --
      Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Prozentuale Höhenangabe wird ignoriert

        Orlok
        +1 Informationen zu den Bewertungsregeln

        Hallo

        da head, also der Kopf eines HTML-Dokumentes, mit der Darstellung im Fenster des Browsers direkt gar nichts zu tun hat

        Ähm …

        sprich, das Element head und seine Kindelemente werden gar nicht gerendert.

        Per Default nicht, aber das kann man bei Bedarf durchaus ändern.

        Ja, kann man, und dieser Mangel an Präzision entwertet meinen Beitrag natürlich völlig, aber mal ehrlich: Würde diese Information Blackpanther23 zu diesem Zeitpunkt und an dieser Stelle wirklich weiterhelfen?

        Ich hatte mir ehrlich gesagt eher erhofft, dass du meine Anmerkung zum Thema Inhaltsmodell aufgreifst und hierzu ein paar erhellende Worte schreibst. Davon hätte ich nämlich auch profitieren können. ;-)

        Gruß,

        Orlok

        Beitrag melden
        +1
        Informationen zu den Bewertungsregeln

        1. Prozentuale Höhenangabe wird ignoriert

          Gunnar Bittersmann Homepage des Autors
          – Informationen zu den Bewertungsregeln

          @@Orlok

          Ja, kann man, und dieser Mangel an Präzision entwertet meinen Beitrag natürlich völlig,

          Naaatüüürliiich.

          aber mal ehrlich: Würde diese Information Blackpanther23 zu diesem Zeitpunkt und an dieser Stelle wirklich weiterhelfen?

          Wenn ich $PersonA antworte, dann i.d.R. nicht unbedingt, um damit $PersonB zu antworten.

          Ich hatte mir ehrlich gesagt eher erhofft, dass du meine Anmerkung zum Thema Inhaltsmodell aufgreifst und hierzu ein paar erhellende Worte schreibst.

          Hab ich dann mal gemacht.

          LLAP 🖖

          --
          Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

    2. Prozentuale Höhenangabe wird ignoriert

      Blackpanther23
      – Informationen zu den Bewertungsregeln

      Lieber Orlok,

      herzlichen Dank für Deine ausführliche und äußerst kompetente Hilfe. Ich darf vorweg nehmen, dass Dein Beitrag weit mehr als hilfreich war. Du hast nicht nur mein Problem lösen können, sondern es mir auch di­dak­tisch brilliant erklärt, sodass es mir möglich wurde meine Fehler nachzuvollziehen und in Zukunft zu vermeiden. Da machst es wirklich Spaß, sich weiterzuentwickeln und weiter zu programmieren. Es ist immer genauso frustierend, wenn etwas trotz erheblichem Zeitaufwand nicht funktioniert, wie es toll ist, wenn es dann doch endlich klappt. Danke nochmal.

      Ich bin gestern Stück für Stück Deinen Beitrag durchgegangen und vermelde folgende Ergebnisse:

      1. Dem html- tag musste ich - in der CSS- Datei - eine Höhe zuweisen, damit es funktioniert.
      html{
 	height: 100%;
}

      Du schreibst ja auch an anderer Stelle, dass man es braucht. Das hat funktioniert, :-)

      1. Die weiteren Veränderungen konnte ich problemlos durchführen (der schließende End- Tag von <img> war schon sehr peinlich, mein Programm macht immer automatisch den End- Tag mit, da passiert so etwas dann...)

      2. Die <div>- Container sind jetzt durch <nav> ersetzt und stehen im <header>- Bereich. Ich muss aber zugeben, dass mir die einzelnen Bereiche und deren jeweiliger Verwendungszweck noch nicht ganz klar sind - da werde ich noch einmal genauer lesen und rumprobieren.

      3. Die Gliederung meiner - horizontalen - Navigationsleiste durch <ul>- Elemente sind das einzige, was ich nicht hinbekommen habe, da dann ein Navigationselement pro Zeile angezeigt wurde... Wird, wie ich mich kenne - an mir gelegen haben, aber es funktioniert ja auch ohne Liste! :-)

      4. Der nicht genutzte Container war nur eine Spielerei, die nun erst mal entfernt wurde. Mir war auch irgendwie schon klar, dass man das mit den Selektoren und meinen 5 items besser lösen kann, danke auch hier für den erhellenden Hinweis, jetzt steht alles hintereinander und funktioniert perfekt!

      5. Über die Kurzschreibweise für die Flexboxen bin ich auch schon gestolpert, aber am Anfang hätte ich es gerne "ausführlicher", weil es für mich dann leichter nachzuvollziehen ist, langfristig werde ich aber darauf zurückgreifen.

      6. Die Formatierung der Schrift ist auch so ein Thema, was mir zum jetzigen Zeitpunkt Rätsel aufgibt, ich werde das weiter verfolgen, hab den '@font-face' jetzt erstmal gelöscht. Den Link werde ich mir bis dahin merken.

      Ich werde, wenn ich es zeitlich schaffe, heute noch weiter programmieren. Ich habe nicht die gesteigerte Hoffnung, dass das problemlos abläuft, deswegen würde ich gerne den Thread noch nutzen, sofern das in Ordnung ist. Ich weiß, dass ich mich schon einmal bedankt habe, möchte es aber noch mal tun. Es ist nicht selbstverständlich, so ausführlich das eigene Problem gelöst zu bekommen. Vielen Dank und einen schönen Sonntag wünscht

      Blackpanther

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Prozentuale Höhenangabe wird ignoriert

        Der Martin
        – Informationen zu den Bewertungsregeln

        Hallo,

        herzlichen Dank für Deine ausführliche und äußerst kompetente Hilfe. [...]

        es ist schön, wenn man feststellt, dass Hilfe nicht nur angenommen wird, sondern auch wirklich ankommt und nützlich ist. Dieses Feedback kommt leider selten.

        1. Dem html- tag musste ich - in der CSS- Datei - eine Höhe zuweisen, damit es funktioniert.

        Nicht dem html-Tag, sondern dem html-Element.

        1. Die weiteren Veränderungen konnte ich problemlos durchführen (der schließende End- Tag von <img> war schon sehr peinlich, mein Programm macht immer automatisch den End- Tag mit, da passiert so etwas dann...)

        Was immer das für ein Programm ist - das Gelbe vom Ei scheint es nicht zu sein.

        1. Die Gliederung meiner - horizontalen - Navigationsleiste durch <ul>- Elemente sind das einzige, was ich nicht hinbekommen habe, da dann ein Navigationselement pro Zeile angezeigt wurde...

        Das liegt daran, dass sowohl ul als auch li von Haus aus Blockelemente sind. Sollen sich die li-Elemente in einer Zeile anreihen, dann bietet es sich an, sie als inline-block zu formatieren.

        Wird, wie ich mich kenne - an mir gelegen haben, aber es funktioniert ja auch ohne Liste! :-)

        Das ist schön; dennoch wäre die Liste hier ein sinnvolles Strukturelement.

        Ich werde, wenn ich es zeitlich schaffe, heute noch weiter programmieren. Ich habe nicht die gesteigerte Hoffnung, dass das problemlos abläuft, deswegen würde ich gerne den Thread noch nutzen, sofern das in Ordnung ist.

        Selbstverständlich. Das ist sogar besser, als morgen oder übermorgen einen neuen aufzumachen. Denn so ist alle Information zum Projekt in einem Thread konzentriert, und Helfer müssen sie nicht kreuz und quer zusammensuchen.

        Ich weiß, dass ich mich schon einmal bedankt habe, möchte es aber noch mal tun.

        ;-)

        Es ist nicht selbstverständlich, so ausführlich das eigene Problem gelöst zu bekommen.

        Das ist allerdings wahr; das hat wirklich Vorbildcharakter.

        Schönes Wochenende noch,
         Martin

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. Prozentuale Höhenangabe wird ignoriert

        Blackpanther23
        – Informationen zu den Bewertungsregeln

        Hallo Zusammen!

        Nach einer längeren Pause stehe ich erneut vor einem Problem. Ich habe mehrere Bilder, die von einer Flexbox umrahmt werden soll. Der Rahmen und das Bild sollen bei einer Änderung der Fenstergröße mitwachsen oder mitschrumpfen. Womöglich ist mein Ziel auch ganz anders zu erreichen. Kann mir vielleicht jemand helfen?

        Vielen Dank schon mal, Blackpanther

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Prozentuale Höhenangabe wird ignoriert

          Gunnar Bittersmann Homepage des Autors
          – Informationen zu den Bewertungsregeln

          @@Blackpanther23

          Nach einer längeren Pause stehe ich erneut vor einem Problem.

          Neues Problem ⇒ neuer Thread.

          Ich habe mehrere Bilder

          Gleich große? Verschieden große?

          die von einer Flexbox umrahmt werden soll.

          Warum?

          Der Rahmen und das Bild sollen bei einer Änderung der Fenstergröße mitwachsen oder mitschrumpfen. Womöglich ist mein Ziel auch ganz anders zu erreichen.

          Was genau ist denn dein Ziel?

          Kann mir vielleicht jemand helfen?

          Bei der Problembeschreibung: nein, noch nicht.

          LLAP 🖖

          --
          Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

        2. Prozentuale Höhenangabe wird ignoriert

          MrMurphy1 (Versionen)
          – Informationen zu den Bewertungsregeln

          Hallo,

          mit reinem Flexbox geht das nicht. Reines Flexbox heißt, dass keine Breitenangaben (width oder max-width) erforderlich sind, da Flexbox die wie vorgesehen selbst berechnet.

          Wenn die Bilder sich alle direkt in einem Container befinden funktioniert Flexbox überhaupt nicht, da die Höhe der Bilder sich nicht proportional anpasst. Dann muss gefloatet werden und das max-width der Bilder wird mit calc berechnet.

          Wenn sich die Bilder jeweils in eigenen Containern befinden, die sich wiederum in der Flexbox befinden, kann die max-width der Container mit calc berechnet werden und die Bilder passen sich dann auch proportional an.

          Bei beiden Lösungen müssen je nach Box-Modell noch padding und / oder border und / oder margin berücksichtigt werden.

          Gruss

          MrMurphy

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Prozentuale Höhenangabe wird ignoriert

            Gunnar Bittersmann Homepage des Autors
            – Informationen zu den Bewertungsregeln

            @@MrMurphy1

            mit reinem Flexbox geht das nicht.

            Was ist „das“? Das hier?

            Ich hab dafür auch noch keine CSS-Lösung; vielleicht fällt meiner Zeitlinie was ein.

            LLAP 🖖

            --
            Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

    3. Prozentuale Höhenangabe wird ignoriert

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@Orlok

      Das Element html darf kein Attribut height haben. Die Attribute width und height sind nur bei wenigen Elementen erlaubt, wie etwa img, input, object oder canvas, also grob gesagt bei Elementen mit einem bestimmten Inhaltsmodell, aber das können dir andere hier sicher besser erklären. ;-)

      Inhaltsmodell von img und input: empty.
      Inhaltsmodell von object: zero or more param elements, then, transparent.
      Inhaltsmodell von canvas: transparent.

      Kein „bestimmtes Inhaltsmodell“; damit kann es also nichts zu tun haben.

      Meine Vermutung ist, dass width und height nur bei ersetzten Elementen erlaubt sind. Ohne dass ich jetzt in der Spec eine Erklärung finden würde, was das genau für welche sind.

      width und height gibt es für embedded content.

      Außerdem für input, nicht aber für textarea (da gibt’s cols) und auch nicht für select (da gibt’s gar nichts dergleichen).

      Nicht besonders konsistent, die HTML5-Spec. Warum wundert mich das jetzt nicht?

      LLAP 🖖

      --
      Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Ersetzte Elemente

        Orlok
        – Informationen zu den Bewertungsregeln

        Hallo Gunnar

        Also zunächst mal bin ich froh, deiner anderen Antwort entnehmen zu können, dass ich diesen Beitrag von dir offenbar falsch interpretiert habe. ;-)

        Die Botschaft, die bei mir ankam war nämlich in etwa sowas wie: „Das hättest du ruhig mal etwas besser erklären können, oder weißt du etwa nicht…“ und nicht das, was du wohl eigentlich sagen wolltest: „Nur nebenbei bemerkt und für den Fall, dass du es nicht weißt…“.

        Es gab hier schon genug Baustellen zu bearbeiten, und da wollte ich mich an der Stelle, auf die du dich bezogen hast, einfach nur möglichst kurz und unmissverständlich ausdrücken, zumal Blackpanther ja erst kürzlich die lustige Idee hatte, quasi als Pendant zu head, nach body noch einen footer einzufügen.

        Jedenfalls bin ich gerne bereit, meinen Beitrag zu diesem Missverständnis einzuräumen, möchte aber dennoch zu bedenken geben, dass dein einleitendes „Ähm …“ womöglich nicht so ausdrucksstark war, wie du vielleicht dachtest, sprich, ein paar zusätzliche Worte zum beabsichtigten Zweck deines Beitrags, und wenn es nur ein „BTW“ oder „FYI“ gewesen wäre, hätten hier wohl sicher nicht geschadet. ;-)

        Aber nun zum Thema…

        Meine Vermutung ist, dass width und height nur bei ersetzten Elementen erlaubt sind. Ohne dass ich jetzt in der Spec eine Erklärung finden würde, was das genau für welche sind.

        Diese Vermutung dürfte weitestgehend zutreffend sein; Die HTML5 Spec zu replaced elements:

        „The embed, iframe, and video elements are expected to be treated as replaced elements.“; „A canvas element that represents embedded content is expected to be treated as a replaced element.“; „An object element that represents an image, plugin, or nested browsing context is expected to be treated as a replaced element.“; „An (obsolete) applet element that represents a plugin is expected to be treated as a replaced element.“

        Alle diese Elemente haben width und height als content attributes aufgelistet. Aber…

        „The audio element, when it is exposing a user interface, is expected to be treated as a replaced element about one line high, as wide as is necessary to expose the user agent's user interface features.“

        …obwohl audio als ersetztes Element aufgeführt ist, sind diese Attribute hier nicht erlaubt. Anders hingegen bei img und input, die im nachfolgenden Abschnitt noch zu den ersetzten Elementen hinzugezählt werden, wobei letzteres nur eingeschränkt, aber dazu später mehr…

        width und height gibt es für embedded content.

        Aber auch nicht für alle. Der Abschnitt dimension attributes führt hier zwar img, iframe, embed, object, und video auf, also Elemente die auch als replaced elements aufgeführt sind, nicht aber param, source, track, map und area, bei denen width und height dementsprechend auch nicht erlaubt sind.

        Außerdem für input […]

        Ja, wir beide haben in unseren Beiträgen input mal ganz nonchalant dazugezählt, aber wenn ich die HTML5 Spec nicht völlig falsch verstehe, dann gilt das nur unter Einschränkungen…

        „The width and height attributes on img, iframe, embed, object, video, and, when their type attribute is in the Image Button state, input elements may be specified to give the dimensions of the visual content of the element (the width and height respectively, relative to the nominal direction of the output medium), in CSS pixels.“

        …was sich auch mit den Angaben in der Tabelle zu den content attributes von input deckt, das heißt, soweit ich das verstanden habe, sind width und height nur bei <input type="image"> erlaubt.

        Auch die CSS Spec hat einen Abschnitt zum Thema replaced Element:

        „An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet. For example, the content of the HTML IMG element is often replaced by the image that its "src" attribute designates. Replaced elements often have intrinsic dimensions: an intrinsic width, an intrinsic height, and an intrinsic ratio. For example, a bitmap image has an intrinsic width and an intrinsic height specified in absolute units (from which the intrinsic ratio can obviously be determined). […] The content of replaced elements is not considered in the CSS rendering model.“

        Soweit ich das also verstanden habe, kann man nicht pauschal sagen, dass width und height bei bestimmten Elementen grundsätzlich erlaubt sind, sondern es hängt immer davon ab, ob diese Elemente unter bestimmten Bedingungen als ersetzte Elemente anzusehen sind.

        Und die Kriterien, nach denen ein Element als „ersetzt“ anzusehen ist, richten sich dann im Wesentlichen danach, ob externe Inhalte eingebunden werden, die über eigene Abmessungen verfügen.

        Jedenfalls habe ich es jetzt so verstanden… ;-)

        Gruß,

        Orlok

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Ersetzte Elemente

          Gunnar Bittersmann Homepage des Autors
          – Informationen zu den Bewertungsregeln

          @@Orlok

          Die Botschaft, die bei mir ankam […]

          Die ankommen sollte, war: „Da hast du etwas ungenau formuliert.“

          zumal Blackpanther ja erst kürzlich die lustige Idee hatte, quasi als Pendant zu head, nach body noch einen footer einzufügen.

          Da gehört natürlich kein footer hin. Sondern als Pendant zu head ein foot. ;-)

          möchte aber dennoch zu bedenken geben, dass dein einleitendes „Ähm …“ womöglich nicht so ausdrucksstark war, wie du vielleicht dachtest, sprich, ein paar zusätzliche Worte zum beabsichtigten Zweck deines Beitrags, und wenn es nur ein „BTW“ oder „FYI“ gewesen wäre, hätten hier wohl sicher nicht geschadet. ;-)

          Ich dachte, „Ähm …“ wäre synonym dazu. ;-)

          Aber auch nicht für alle. Der Abschnitt dimension attributes führt hier zwar img, iframe, embed, object, und video auf, also Elemente die auch als replaced elements aufgeführt sind,

          Das sind die Container.

          nicht aber param, source, track, map und area, bei denen width und height dementsprechend auch nicht erlaubt sind.

          Das sind Elemente für Werte (Parameter) von Multimedia-Dingens; die werden ja nicht gerendert.

          Ja, wir beide haben in unseren Beiträgen input mal ganz nonchalant dazugezählt, aber wenn ich die HTML5 Spec nicht völlig falsch verstehe, dann gilt das nur unter Einschränkungen…

          Gut rausgefunden.

          …was sich auch mit den Angaben in der Tabelle zu den content attributes von input deckt, das heißt, soweit ich das verstanden habe, sind width und height nur bei <input type="image"> erlaubt.

          Ja, man kann sich nicht drauf verlassen, was oben in der blauen Box steht.

          Man muss die ganze Prosa lesen, mit dem ganzen Wenn-dann-sonst-aber-Kram.

          Hab ich schon erwähnt, dass die HTML5-Spec ein Grauen ist?

          Wann kommt endlich XHTML 2?

          LLAP 🖖

          --
          Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Ersetzte Elemente

            Orlok
            – Informationen zu den Bewertungsregeln

            @Gunnar Bittersmann

            zumal Blackpanther ja erst kürzlich die lustige Idee hatte, quasi als Pendant zu head, nach body noch einen footer einzufügen.

            Da gehört natürlich kein footer hin. Sondern als Pendant zu head ein foot. ;-)

            Besser zwei, sonst kippt das Monu… ich meine Dokument noch um.

            Hab ich schon erwähnt, dass die HTML5-Spec ein Grauen ist?

            Mag sein, aber es ist immer einmal zuwenig…

            Wann kommt endlich XHTML 2?

            Soweit ich weiß, gar nicht.

            Gruß,

            Orlok

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Ersetzte Elemente

              Gunnar Bittersmann Homepage des Autors
              – Informationen zu den Bewertungsregeln

              @@Orlok

              Da gehört natürlich kein footer hin. Sondern als Pendant zu head ein foot. ;-)

              Besser zwei, sonst kippt das Monu… ich meine Dokument noch um.

              Du meinst, ein Monoment stünde auf einem Fuß, ein Duoment auf zweien?

              Wann kommt endlich XHTML 2?

              Soweit ich weiß, gar nicht.

              Ähm, das war eine rhetorische Frage.

              LLAP 🖖

              --
              Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Ersetzte Elemente

                Orlok
                – Informationen zu den Bewertungsregeln

                @Gunnar Bittersmann

                Du meinst, ein Monoment stünde auf einem Fuß, ein Duoment auf zweien?

                Egal, hauptsache es steht auf einem soliden Fundament.

                Ähm, das war eine rhetorische Frage.

                Du meinst „Ähm“ synonym zu „BTW“, oder? :-P

                Hatte mich auch schon gewundert, denn das Thema ist ja doch schon etwas länger durch, aber andererseits gibt es ja auch Zeitgenossen, für die die Uhren ein wenig langsamer laufen…

                …zu denen du aber natürlich nicht gehörst. ;-)

                Gruß,

                Orlok

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. Ersetzte Elemente

                  Gunnar Bittersmann Homepage des Autors
                  – Informationen zu den Bewertungsregeln

                  @@Orlok

                  Ähm, das war eine rhetorische Frage.

                  Du meinst „Ähm“ synonym zu „BTW“, oder? :-P

                  Ich wollt schon fast drauf antworten. ;-)

                  das Thema [XHTML 2] ist ja doch schon etwas länger durch

                  Leider. Die Frage war zwar rhetorisch, hatte aber doch einen ernsthaften Hintergrund.

                  LLAP 🖖

                  --
                  Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln