Beiträge von MrMurphy

Für dich gelten die Gesetze genau so wie für jeden anderen Bürger, egal ob du volljährig / strafmündig bist oder nicht. Du bist beschränkt geschäftsfähig.

Du darfst nur Verträge abschließen, die dir keine Nachteile bringen können oder die du mit deinem Taschengeld begleichen kannst. Der Grund ist, dass Jugendliche schuldenfrei in die Volljährig kommen sollen.

Deine Webauftritte können dir Nachteile bringen, zum Beispiel Klagen durch Beiträge im Forum oder Urheberrechtsverstöße, die schnell in den 5-stelligen Eurobereich kommen können.

Deshalb darfst du deine Internettätigkeiten nur mit Zustimmung deiner Eltern betreiben. Die Eltern müssen sich auch nach der Zustimmung regelmäßig informieren, ob du immer noch legalen Bereich unterwegs bist.

Wenn das gegeben ist und du rechtswidrige Inhalte im Forum immer zeitnah löscht sehe ich kein Problem. Das ist keine Rechtsauskunft, sondern mein privater Wissensstand.

Zitat

das wirkt auf alle sections inerhalb von <main>

Fast. Die CSS-Angaben wirken sich auf h1-Elemente aus, die sich innerhalb von section-Elementen befinden und die sich wiederum innerhalb des main-Elements befinden. An section-Elementen selbst ändern die nichts. Genauer: Nur auf h1-Elemente, die direkte Kinder (Kindelemente) von section-Elementen sind, die wiederum direkte Kinder vom main-Element sind.

Zitat

Das wirkt sich nur auf die <section id="#about"> aus.

Eher auf die enthaltenen h1-Elemente. Grundsätzlich wirken sich die Angaben auf alle h1-Elemente aus, die sich innerhalb von Containern mit der id "about" befinden. Dabei müssen die h1-Elemente direkte Kinder von Containern mit der id "about" sein. Ob es sich bei den Containern um header-, footer-, main-, nav-, section-, article-, ...-Elemente handelt spielt keine Rolle.

Mit dem "justify-content" und "align-items" des umgebenden section-Elements zentrierst du das div#about horizontal und vertikal..

Das div#about nimmt durch seinen Inhalt die gesamte Breite des umgebenden section-Elements ein, wird aber nur so hoch wie sein Inhalt. Das ist das ganz normale Verhalten.

Du musst also dem div#about entweder mehr Inhalt oder eine vorgegebene Höhe mit auf seinen Weg geben.

Das nav-Element ist nur für Navigationsblöcke gedacht einschließlich (falls sinnvoll) passenden Überschriften und / oder verlinkten Bildern.

Das header-Element hat genau wie nicht zur Navigation gehörende Bilder nichts im nav-Element verloren.

Umgekehrt darf das header-Element ein nav-Element enthalten.

In der Regel werden header- und nav-Elemente getrennt, da die Seite so flexibler an unterschiedliche Bildschirme und andere Ausgabegeräte angepasst werden kann. Wobei es keine Rolle spielt, ob zu erst das header-Element oder das nav-Element im Quelltext steht.

Zitat

Jetzt hast du in deinem CSS

Soweit ich verstanden habe gilt die Frage nicht dem Quelltext von Emess, sondern deinem Quelltext aus Beitrag #31.

Zitat

Dabei ist mir aufgefallen, das bild passt sich den Smartphoneansichten im Querformat nicht an.

Was verstehst du unter "passt sich ... nicht an"?

Zitat

Jetzt würde mich mehr interessieren ob ich beim bisherigen Projekt margin oder position mit modernen Alternativen ersetzen kann?

Ja, mit CSS-Grid (display: grid;) in Verbindung mit Flexbox (display: flex;).

Zu dem HTML

   <main class="content">
      <header>
         <section>
            <h1>Flexboxprojekt</h1>
            <p>Schaut doch mal rein</p>
         </section>
         <figure>
            <img src="https://my2.emess62.de/img/kasper.png">
         </figure>
      </header>
   </main>

reicht dann grundsätzlich folgendes CSS

   @media only screen and (min-width: 700px) {
      .content header {
         display: grid;
         grid-template-columns: 1fr 1fr;
      }
      .content header section {
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
      }
   }

Dazu dann noch etwas Standard-CSS für die Schrift und um Grafiken responsive zu bekommen.

Der gesamte Quelltext (für die Ausrichtung des Textes neben der Grafik) könnte dann folgendermaßen aussehen. Die Angaben Basisangaben, Schriften und Grafiken sind aus Erfahrung für mich für die gesamte Website sinnvoll:

 <!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Flexboxprojekt</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <style>

   /*Basisangaben*/
   @media all {
      * {
         min-width: 1px;
      }
      html {
      }
      body {
         max-width: 1200px;
         margin: 1rem auto 1rem auto;
      }
   }

   /*Schriften*/
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      p {
         font-family: sans-serif;
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
   }

   /*Grafiken*/
   @media all {
      figure {
         min-width: 1px;
         max-width: 100%;
         min-height: 1px;
         margin: 0rem;
      }
      img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         border: 0px;
      }
   }

   /*.content*/
   @media all {
      .content header h1, p {
         text-align: center;
      }
      .content header figure img {
         max-width: 300px;
         margin: 0 auto 0 auto;
      }
   }
   @media only screen and (min-width: 700px) {
      .content header {
         display: grid;
         grid-template-columns: 1fr 1fr;
      }
      .content header section {
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
      }
   }

   </style>
</head>
<body>
   <main class="content">
      <header>
         <section>
            <h1>Flexboxprojekt</h1>
            <p>Schaut doch mal rein</p>
         </section>
         <figure>
            <img src="https://my2.emess62.de/img/kasper.png">
         </figure>
      </header>
   </main>
</body>
</html>

Zitat

Kann sein, das ich es einfach nur falsch "rausgelesen" habe und du nicht zu dieser Gruppe gehörst, dann nichts für ungut.

Du könntest zum Beispiel mal ältere Beiträge von mir lesen. Dann wirst du feststellen, dass ich immer das passende CSS für das jeweilige Problem empfehle und nichts gegen Flexbox habe, wenn es angebracht ist, zum Beispiel

Beitrag

RE: HTML Code Bild+Link+ausrichten

Dazu benötigst du HTML und CSS in aktueller Version. Die beiden Texte werden als Text zusammen mit dem Bild in einen Container in HTML eingegeben und mittels CSS ausgerichtet. Aus dem Bauch raus würde ich die Texte mittels Flexbox (display: flex;) ausrichten, das hängt aber von der gesamten Seite ab, die ich nicht kenne.

Als Einzeiler geht das etwas komplizierter auch, das hat aber mit aktuellem HTML und CSS nichts zu tun.

MrMurphy

27. Februar 2023 um 11:59

Ob Flexbox (display: flex;) oder CSS-Grid (display: grid;) zur Lösung des jeweiligen Problems besser geeignet ist hängt nicht davon ab, aus wie vielen Seiten die Website besteht.

Schau dir

display: grid;

mal genauer an.

Zitat

Gibt es eine Alternative zu margin-right?

1. Korrektes HTML

2. Passendes CSS

Du bist beim CSS leider einseitig auf Flexbox fixiert. CSS ist aber ein Gesamtpaket und Flexbox ist für viele Lösungen halt nur schlecht oder gar nicht geeignet.

Eine Grundregel beim HTML und CSS ist zum Beispiel, den Quelltext minimal zu halten. Also nur HTML-Elemente und CSS-Anweisungen zu verwenden, die notwendig sind.

Da können wir mit den bisherigen Informationen auch nur raten.

Der Online-Shop hat offensichtlich eine Autokorrektur. Wann die eingreift sollte aus der Anleitung hervorgehen, die wir nicht kennen. Aus dem Bauch fallen mir dazu zwei Ursachen ein:

1. Der HTML-Quelltext entspricht nicht den HTML-Regeln.

Das könnte bei deinem Quelltext die Ursache sein. Da bei allen Webbrowsern eine Fehlerkorrektur eingebaut ist legen Webseitenersteller häufig keinen Wert auf einen korrekten HTML-Quelltext. So nach dem Motto: Wenn das Ergebnis wie von mir gewünscht angezeigt wird ist der Quelltext richtig.

Um das auszuschließen solltest du den Link zunächst schlicht und einfach ohne jeden Firlefanz, Sonderzeichen, komische Anführungszeichen und ähnliche Besonderheiten erstellen. Zum Beispiel

<p><a href="https://mediahub.ai/share/album/03fd377a-8214-4a0b-8779-2015c78e2699/">Bilddatenbank NERO</a></p>

Falls der Link dann funktionieren sollte kannst du ihn anschließend Stück für Stück nach deinen Wünschen erweitern.

2. Der Online-Shop erlaubt nur interne Verlinkungen.

Das kannst du nur ändern wenn du Zugriff auf den Quelltext hast und weißt, wo du das ändern kannst. Der Betreiber muss das natürlich auch rechtlich erlauben. Meist sind solche gewollten Sperren in PHP oder JavaScript erstellt.

Zitat

Brauche ich auch Webspace für eine eigene Seite?

Ja, wenn du die Seite veröffentlichen willst. Zum Testen für dich selber nicht.

Zitat

Kann man man in Wordpress auch den Code verändern?

Ja, aber dazu solltest du dich bereits mit HTML, CSS und Wordpress gut auskennen.

Zitat

Wie bekomme ich diese Lücken weg?

Die Frage ist falsch gestellt. Ohne CSS-Angaben entsteht keine Lücke oder Abstand, wenn a-Elemente in Text eingefügt werden. Egal ob Absatz, Überschrift, Liste oder was es sonst so gibt.

Dabei können wir dir ohne Kenntnis deines Quelltextes nicht helfen. Du musst also alle Formatierungen im CSS daraufhin untersuchen, ob sie für die unerwünschten Abstände verantwortlich sind und dann entweder löschen oder durch geeignete Angaben überschreiben.

Mal ein Lösungsansatz. Du musst nur noch den Inhalt zwischen den beiden style-Elementen in die externe CSS-Datei kopieren und die wie in der Aufgabe gefordert benennen. Zum Testen kannst du den Quelltext direkt in eine Datei übernehmen.

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>CSS-Aufgabe</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="css-aufgabe.css" rel="stylesheet">

   <style>

   @media all {
      html {
         font-family: Verdana, Geneva, sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         max-width: 1200px;
         padding: 1rem;
         margin: 0rem auto 0rem auto;
      }
      h1 {
         font-size: 1.5rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      p {
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      ul {
         padding: 0rem 0rem 0rem 0rem;
         margin: 0rem 0rem 0rem 0rem;
      }
      li {
         font-size: 1rem;
         font-style: normal;
         font-weight: bold;
         list-style-type: none;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      li a {
         color: white;
      }
      a {
         color: hsla(240, 100%, 27%, 1);
         text-decoration: none;
         outline: none;
         margin: 0rem 0rem 0rem 0rem;
      }
      a,
      a:link,
      a:visited {
      }
      a:hover,
      a:focus,
      a:active {
         text-decoration: underline;
      }
      .content {
         background-color: #F4E92B;
      }
      .text {
         background-color: #59DB01;
         padding: 1rem;
      }
      .grosstext {
         font-size: 1.4rem;
      }
      .kleintext {
         font-size: 0.8rem;
      }
      .navigation {
         background-color: #0050A1;
         padding: 1rem;
      }
   }
   @media only screen and (min-width: 900px) {
      .content {
         display: flex;
         align-items: start;
      }
      .text {
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: 1px;
         order: 1;
      }
      .navigation {
         width: 250px;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: 250px;
         order: 2;
      }
   }

   </style>
</head>
<body>
   </header>
   <main class="content">
      <nav class="navigation">
         <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
         </ul>
      </nav>
      <article class="text">
         <h1>CSS Aufgabe</h1>
         <p class="grosstext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
         <p class="kleintext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      </article>
   </main>
   <p>MrMurphy, 14.03.2023, 08-15</p>
</body>
</html>

Dazu benötigst du HTML und CSS in aktueller Version. Die beiden Texte werden als Text zusammen mit dem Bild in einen Container in HTML eingegeben und mittels CSS ausgerichtet. Aus dem Bauch raus würde ich die Texte mittels Flexbox (display: flex;) ausrichten, das hängt aber von der gesamten Seite ab, die ich nicht kenne.

Als Einzeiler geht das etwas komplizierter auch, das hat aber mit aktuellem HTML und CSS nichts zu tun.

Ohne die wirkliche Größe des Bildes zu kennen:

<a href="LINK" style="display:block; width:600px; height:300px; margin: 0 auto;"> <img src="BILD.png"style="display:block; width:600px; height:300px;" alt="TEXT"/> </a>

"div column-matter" sagt mir überhaupt nichts.

Zitat

kann mir jemand in die richtige richtung weisen,

Du kannst mit CSS ein Drucklayout erstellen

https://www.mediaevent.de/css-links-drucken/

und dort eine Spaltenansicht hinterlegen

https://www.mediaevent.de/css/text-columns.html

Da viele Browser das Ausdrucken von Seiten eher stiefmütterlich behandeln solltest du das Ergebnis in möglichst vielen Browsern testen.

1. In der style.css in der Klasse .grid den Eintrag "max-width: 1200px;" löschen

2. In der style.css in der Klasse .header-group den Eintrag "margin-bottom: 30px;" löschen

3. In der style.css in der Klasse .header-widget den Eintrag "padding: 30px 20px; löschen

Statt die drei Einträge gleich zu löschen kannst du die natürlich auch auskommentieren.

Wenn nicht der gesamte Inhalt über die volle Seitenbreite gehen soll wirst du die Seite komplett neu aufbauen müssen.

Das table-Element ist ausschließlich für Tabellendaten gedacht, die in normalen Webseiten so gut wie nie vorkommen. Es ist also aktuell und zulässig, wird in der Praxis aber so gut wie nicht mehr benötigt. Echte Tabellendaten, für die das table-Element vorgesehen ist, gibt es eigentlich nur in Wissenschaft und Wirtschaft. Auch in deinem Fall sehe ich keine Tabellendaten.

HTML stammt ja nicht aus der Programmierwelt, sondern wurde an einer Universität entwickelt, um Daten digital zwischen Universitäten / Wissenschaftlern austauschen zu können. Dabei ist das table-Element auch heute noch sinnvoll.

Allerdings kannst du deine Seite aufbauen wie du willst. Also auch das table-Element falsch verwenden. Deine Entscheidung.

Aber zu deinem Problem: Für deinen Wunsch sind HTML und CSS nicht gedacht. Um das p-Element außerhalb der Tabelle zu erstellen, aber die Position abhängig von der Tabelle zu bestimmen, benötigst du eine Programmiersprache wie JavaScript. Damit musst du dir dann ein passendes Programm schreiben. Da deine Anforderung sehr individuell ist wird es dafür bereits kaum passende Programme geben, die du dann einfach anpassen könntest.

Du könntest noch versuchen die Tabelle und den Absatz in einen gemeinsamen Container (egal ob div, main, section, ...) zu packen und dadurch eine Abhängigkeit in der Darstellung zu erreichen. So weit ich verstanden zu haben glaube, liegen aber noch viele andere Element dazwischen. Das wird deshalb nur mit einer bestimmten Fenstergröße in einer bestimmten Schriftart und -größe funktionieren. Zudem dann auch nur auf deinem Rechner mit deinem Browser und deinen Einstellungen. Das erscheint mir eher unrealistisch.

Dazu muss das p-Element in die Tabellenzelle und die Tabellenzelle muss wahrscheinlich auch eine position-Angabe auf ihren Weg mitbekommen.

Deine Angaben sind recht mager, es scheint aber, dass sie mit den aktuellen HTML-Regeln nur wenig zu tun haben.