Beiträge von MrMurphy

MrMurphy

Hallo

Ich habe trotzdem mal ein Beispiel erstellt, zumal auch andere User deinen Beitrag lesen werden.

Flexbox hilft zudem bei vielen Problemen, für die es bisher keine sinnvolle Lösungen gab. Zum Beispiel dass die Container einer Zeile immer gleich hoch sind, egal wieviel Text sie enthalten. Oder dass in diesem Beispiel die Links "Weiterlesen" sich immer am unteren Rand des Containers befinden, egal wieviel Leerraum darüber ist.

Zunächst einmal der HTML-Quelltext mit deutlich weniger Containern, passenden HTML5-Elementen und damit einer viel größeren Übersicht und Wartbarkeit::

Code

<header class="hauptheader">
      <h2>header</h2>
   </header>
   <nav class="hauptnav">
      <h2>Navigation</h2>
   </nav>
   <main class="main">
      <aside class="mainaside">
         <h2>aside</h2>
      </aside>
      <article class="mainarticle">
         <h2>Ali Sprüche</h2>
         <section class="card">
            <p>Ich bin der König der Welt! Ich habe die Welt erschüttert.</p>
            <a href="#">Weiterlesen</a>
         </section>
         <section class="card">
            <p>Die Menschen begreifen nicht, was sie hatten, bis es weg ist. Wie Präsident Kennedy, es gab niemanden wie ihn. Wie die Beatles, es wird nie wieder etwas wie sie geben. Wie mein Elvis Presley. Ich war der Elvis des Boxens.</p>
            <a href="#">Weiterlesen</a>
         </section>
         <section class="card">
            <p>Schwebe wie ein Schmetterling, steche wie eine Biene.</p>
            <a href="#">Weiterlesen</a>
         </section>
         <section class="card">
            <p>Boxen ist nur ein Job. Gras wächst, Vögel fliegen, Wellen schlagen an den Strand - ich verhaue Leute.</p>
            <a href="#">Weiterlesen</a>
         </section>
      </article>
   </main>
   <footer class="hauptfooter">
      <p>Originaldiskussion: <a href="http://www.forum-hilfe.de/threads/57995-Darstellungsprobleme-mit-Div">http://www.forum-hilfe.de/</a></p>
   </footer>

Alles anzeigen

Jetzt die entscheidenden CSS-Angaben für die Seite, wobei die Flexbox-Angaben nur einen geringen Teil einnehmen und der Rest auch bei anderen Lösungen erforderlich ist:

Code

/*Grundlayout*/
   @media all {
      body {
      }
      body>* {
         max-width: 1000px;
         margin: 0 auto;
      }
   }


   /*.hauptheader*/
   @media all {
      .hauptheader {
         /*background-color: gold;*/
         padding: 0 0.25rem 0.5rem 0.25rem;
         border: 1px solid transparent;
      }
      .hauptheader {
      }
   }


   /*.hauptnav*/
   @media all {
      .hauptnav {
         background-color: #FC3;
         padding: 0 0.25rem 0.5rem 0.25rem;
         border: 1px solid #EBB81F;
      }
      .hauptnav {
      }
   }


   /*.main*/
   @media all {
      .main {
         /*background-color: gold;*/
         max-width: calc(1000px + 0.5rem);
         border: 1px solid #EBEBEB;
         border-radius: 0.4rem;
         margin: 0.5rem auto 0 auto;
      }
      .main {
      }
   }


   /*.mainaside*/
   @media all {
      .mainaside {
         padding: 0 0 0 0;
         padding: 0 0.25rem 0.5rem 0.25rem;
         border-bottom: 2px solid gray;
         margin: 0;
      }
      .mainaside {
      }
   }


   /*.mainarticle*/
   @media all {
      .mainarticle {
         padding: 0 0 0 0;
         padding: 0 0.25rem 0.5rem 0.25rem;
         margin: 0;
         display: flex;
         flex-wrap: wrap;
      }
      .mainarticle h2 {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 0.5rem - 2px - 0.5rem);
      }
      .mainarticle .card {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 0.5rem - 2px - 0.5rem);
      }
      .mainarticle {
      }
   }
   @media only screen and (min-width: 600px) {
      .mainarticle .card {
         flex-basis: calc(50% - 0.5rem - 2px - 0.5rem);
      }
   }
   @media only screen and (min-width: 1000px) {
      .mainarticle .card {
         flex-basis: calc(25% - 0.5rem - 2px - 0.5rem);
      }
   }


   /*.card*/
   @media all {
      .card {
         background-color: #F4F4F4;
         box-shadow: 0 0 2px #000;
         padding: 0 0 0 0;
         padding: 0 0.25rem 0.5rem 0.25rem;
         border: 1px solid gray;
         border-radius: 0.4rem;
         margin: 0.5rem 0.25rem 0 0.25rem;
         display: flex;
         flex-direction: column;
      }
      .card p {
         margin: 0.5rem 0.25rem auto 0.25rem;
      }
      .card a {
         text-align: center;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      .card {
      }
   }


   /*.hauptfooter*/
   @media all {
      .hauptfooter {
         background-color: #3F6;
         padding: 0 0.25rem 0.5rem 0.25rem;
         border: 1px solid #1FEB52;
         margin: 0.5rem auto 0 auto;
      }
   }

Alles anzeigen

Und der komplette Quelltext zum direkten Erstellen einer Datei:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Layoutproblem 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>


   /*Icon-Font - font-family: 'FontAwesome';*/
   @import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);


   /*Überschriften - font-family: 'Roboto Slab', Serif;*/
   @import 'https://fonts.googleapis.com/css?family=Roboto+Slab';


   /*Fließtext - font-family: 'Roboto', Sans-Serif";*/
   @import 'https://fonts.googleapis.com/css?family=Roboto';


   /*Zahlen* - font-family: 'Merriweather';*/
   @import url(https://fonts.googleapis.com/css?family=Merriweather);


   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         /*box-sizing: border-box;*/
         min-width: 0;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         padding: 0 0.25rem 0.5rem 0.25rem;
         border-top: 0.01px solid transparent;
         margin: 0;
      }
   }


   /*Schriften 01*/
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: 'Roboto Slab', serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: 'Roboto Slab', serif;
         font-size: 1rem;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      p, li, dl, dt, address {
         font-family: 'Roboto', 'Sans-Serif';
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      a {
         color: blue;
         text-decoration: none;
         outline: none;
         margin: 0;
      }
      figcaption {
         font-family: 'Roboto', 'Sans-Serif';
         font-size: 0.9rem;
         margin: 0;
      }
   }


   /*Grafiken*/
   @media all {
      figure {
         min-width: 0;
         max-width: 100%;
         margin: 0;
      }
      img {
         /*text-align: bottom;*/
         min-width: 0;
         display: block;
         max-width: 100%;
         /*max-height: 100vh;*/
         border: 0;
      }
   }


   /*Grundlayout*/
   @media all {
      body {
      }
      body>* {
         max-width: 1000px;
         margin: 0 auto;
      }
   }


   /*.hauptheader*/
   @media all {
      .hauptheader {
         /*background-color: gold;*/
         padding: 0 0.25rem 0.5rem 0.25rem;
         border: 1px solid transparent;
      }
      .hauptheader {
      }
   }


   /*.hauptnav*/
   @media all {
      .hauptnav {
         background-color: #FC3;
         padding: 0 0.25rem 0.5rem 0.25rem;
         border: 1px solid #EBB81F;
      }
      .hauptnav {
      }
   }


   /*.main*/
   @media all {
      .main {
         /*background-color: gold;*/
         max-width: calc(1000px + 0.5rem);
         border: 1px solid #EBEBEB;
         border-radius: 0.4rem;
         margin: 0.5rem auto 0 auto;
      }
      .main {
      }
   }


   /*.mainaside*/
   @media all {
      .mainaside {
         padding: 0 0 0 0;
         padding: 0 0.25rem 0.5rem 0.25rem;
         border-bottom: 2px solid gray;
         margin: 0;
      }
      .mainaside {
      }
   }


   /*.mainarticle*/
   @media all {
      .mainarticle {
         padding: 0 0 0 0;
         padding: 0 0.25rem 0.5rem 0.25rem;
         margin: 0;
         display: flex;
         flex-wrap: wrap;
      }
      .mainarticle h2 {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 0.5rem - 2px - 0.5rem);
      }
      .mainarticle .card {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(100% - 0.5rem - 2px - 0.5rem);
      }
      .mainarticle {
      }
   }
   @media only screen and (min-width: 600px) {
      .mainarticle .card {
         flex-basis: calc(50% - 0.5rem - 2px - 0.5rem);
      }
   }
   @media only screen and (min-width: 1000px) {
      .mainarticle .card {
         flex-basis: calc(25% - 0.5rem - 2px - 0.5rem);
      }
   }


   /*.card*/
   @media all {
      .card {
         background-color: #F4F4F4;
         box-shadow: 0 0 2px #000;
         padding: 0 0 0 0;
         padding: 0 0.25rem 0.5rem 0.25rem;
         border: 1px solid gray;
         border-radius: 0.4rem;
         margin: 0.5rem 0.25rem 0 0.25rem;
         display: flex;
         flex-direction: column;
      }
      .card p {
         margin: 0.5rem 0.25rem auto 0.25rem;
      }
      .card a {
         text-align: center;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      .card {
      }
   }


   /*.hauptfooter*/
   @media all {
      .hauptfooter {
         background-color: #3F6;
         padding: 0 0.25rem 0.5rem 0.25rem;
         border: 1px solid #1FEB52;
         margin: 0.5rem auto 0 auto;
      }
      .hauptfooter {
      }
   }


   /*Spezielle Einstellungen*/
   @media all {
   }


   /*Flexbox für IE*/
         /*-ms-flex-preferred-size: calc(50% - 1rem);*/
   /*Vorlage für das gesamte CSS*/
   @media all {
   }
   /*Vorlage zum Kopieren für Media Queries - Mobile first*/
   @media only screen and (min-width: 0px) {
   }
   /*Vorlage zum Kopieren für Media Queries - Desktop first*/
   @media only screen and (max-width: 0px) {
   }


   </style>
</head>
<body>
   <header class="hauptheader">
      <h2>header</h2>
   </header>
   <nav class="hauptnav">
      <h2>Navigation</h2>
   </nav>
   <main class="main">
      <aside class="mainaside">
         <h2>aside</h2>
      </aside>
      <article class="mainarticle">
         <h2>Ali Sprüche</h2>
         <section class="card">
            <p>Ich bin der König der Welt! Ich habe die Welt erschüttert.</p>
            <a href="#">Weiterlesen</a>
         </section>
         <section class="card">
            <p>Die Menschen begreifen nicht, was sie hatten, bis es weg ist. Wie Präsident Kennedy, es gab niemanden wie ihn. Wie die Beatles, es wird nie wieder etwas wie sie geben. Wie mein Elvis Presley. Ich war der Elvis des Boxens.</p>
            <a href="#">Weiterlesen</a>
         </section>
         <section class="card">
            <p>Schwebe wie ein Schmetterling, steche wie eine Biene.</p>
            <a href="#">Weiterlesen</a>
         </section>
         <section class="card">
            <p>Boxen ist nur ein Job. Gras wächst, Vögel fliegen, Wellen schlagen an den Strand - ich verhaue Leute.</p>
            <a href="#">Weiterlesen</a>
         </section>
      </article>
   </main>
   <footer class="hauptfooter">
      <p>Originaldiskussion: <a href="http://www.forum-hilfe.de/threads/57995-Darstellungsprobleme-mit-Div">http://www.forum-hilfe.de/</a></p>
   </footer>
</body>
</html>

Alles anzeigen

Gruss

MrMurphy

MrMurphy

Hallo

width

Oder du machst irgendwelche Dummheiten die du uns verschweigst.

Gruss

MrMurphy

MrMurphy

Hallo

Die Ursache des Problems ist wie von mir vermutet die Tatsache, dass float Elemente aus dem Dokumentenfluss nimmt.

Mal ein paar Infos dazu:

http://www.andreas-kalt.de/webdesign/tutorials/float-theorie

und

http://www.thestyleworks.de/basics/float-rule.shtml

und

http://little-boxes.de/lb1/IV-css-positionierung.html

Insgesamt empfehle ich dir aber Flexbox zu verwenden.

Gruss

MrMurphy

MrMurphy

Hallo

Zitat

aber irgendwie zerreisst es mir dadurch den zweiten content div

Das ist keine Problembeschreibung mit der wir etwas anfangen können.

Dass die Webseite nicht wie von dir gewünscht angezeigt wird ist klar. Aber nicht was du erreichen willst.

Zitat

somit auch ohne fehler

Das stimmt leider nicht. Wenn du eine fehlerfreie HTML5-Webseite erstellen möchtest musst du auch die HTML5-Regel einhalten. Dazu gehört zum Beispiel div-Elemente nur noch zu verwenden, wenn es keine geeigneteren gibt.

Oder auf unnötige Container / Elemente zu verzichten.

Technisch kannst du zwar deine Divitis beibehalten, sachlich handelt es sich aber um Fehler.

Ich vermute dass du float verwendest ohne die Grundlagen dafür gelernt zu haben. Zum Beispiel, das gefloatete Elemente aus dem Dokumentfluss genommen werden.

Zudem war float nur eine Notlösung. Aktuell und langfristig sollte zum Layout besser Flexbox verwendet werden, das im Gegensatz zu float direkt zum Layouten entwickelt wurde.

Gruss

MrMurphy

MrMurphy

Hallo

Zitat

Habe neu gebootet.
Dann müsste wohl auch der Cachespeicher leer sein.

Nein, das löscht den Cachespeicher nicht. Die Browser können die Bilddateien auf der Festplatte ablegen und von dort aufrufen. Cache-Daten werden nicht nur im Arbeitsspeicher gehalten.

Gruss

MrMurphy

MrMurphy

Hallo

Zitat

soll nur ledeglich zum üben da sein

Ich habe mal eine Seite mit dem Grundlayout wie von dir beschrieben erstellt. Mit Inhalt kannt du es dann ja selbst füllen.

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Flexbox zentrieren 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>


   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      html {
         height: 100%;
      }
   }
   @media all {
      body {
         min-height: 100vh;
         height: 100%;
      }
   }


   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      body {
         margin: 0;
         display: flex;
         justify-content: center;
         align-items: center;
      }
      .wrapper {
         width: 80%;
         height: 80vh;
         border: 4px solid blue;
         display: flex;
         justify-content: center;
      }
      .aside {
         border: 4px solid orange;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(50% - 0rem - 8px - 0rem);
      }
      .side-content {
         border: 4px solid green;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(50% - 0rem - 8px - 0rem);
      }
   }


   </style>
</head>
<body>
   <div class="wrapper">
      <div class="aside">
         <h2>.aside (Bild)</h2>
      </div>
      <div class="side-content">
         <h2>.side-content (Formular)</h2>
      </div>
   </div>
</body>
</html>

Alles anzeigen

Gruss

MrMurphy

MrMurphy

Hallo

Deine Überlegungen zur Gestaltung erscheinen mir nicht ausgereift.

Hast du dabei nur deinen Browser vor Augen und in deinen Gedanken?

Was ist mit Besuchern, die ihren Browser in anderer Größe benutzen? Zum Beispiel nur eine Bildschirmhälfte ausfüllen und in der anderen ein anderes Programm laufen lassen? Oder Smartphones / Tablets / Notebooks verwenden? Die dann auch im Wechsel von Hoch- und Querformat?

Wie soll sich die Seite dann verhalten?

Gruss

MrMurphy

MrMurphy

Hallo

Du hast wahrscheinlich unbewußt mehrere Probleme in die Webseite eingebaut.

Wenn du .wrapper eine Hintergrundfarbe geben würdest, zum Beispiel ein knalliges Orange, würdest du feststellen, dass der Container überhaupt keine Höhe hat.

Das kommt durch das float von .side-content, welches den Container .side-content aus dem Dokumentenfluß nimmt. Damit ist es kein Inhalt von .wrapper mehr und kann weder die Höhe von .wrapper beeinflussen noch innerhalb von .wrapper zentriert werden. float solltest du erst verwenden wenn du es verstanden hast und mittels clear oder clearfix auch wieder "einfangen" (beenden) kannst.

Die prozentuale Höhenangabe von .wrapper ( height: 80%; ) hat zudem keine Auswirkung. .wrapper kann mit Prozentangaben nur so hoch werden wie sein umgebender Container (body) und dessen umgebender Container (html). Du musst also zunächst dafür sorgen, dass die überhaupt eine Höhe mit Platz zum Zentrieren haben. Und dabei darauf achten, dass alle gängigen Browser das auch verstehen.

Weiterhin hast du den Doctype vergessen. Der sollte heutzutage HTML5 aufrufen. Dann könntest du auch aussagekräftigere Containerelemente wie main, article, section und so weiter verwenden.

Wenn das alles korrigiert ist geschieht das Zentrieren ganz einfach mittels Flexbox.

Wenn es nur ums seitliche zentrieren geht kannst du auch float streichen und .side-content ein linkes und rechtes margin mit dem Wert "auto" geben.

Nachtrag:

Der Beginn der Datei mit dem Doctype könnte zum Beispiel folgendermaßen aussehen:

HTML

<!DOCTYPE html>
<html lang="de">
<head>

und das CSS folgendermaßen. Ich habe zu löschende Angaben erst mal nur auskommentiert und den Rahmen zur Kenntlichmachung eine größere Breite und knallige Farben verpasst. Um das Zentrieren in der Höhe habe ich mich erst mal nicht gekümmert da ich nicht weiß, ob du das überhaupt willst und ich deine height-Angabe falsch interpretiert habe:

Code

body {
         font-family: Verdana, Arial, sans-serif;
         background-color: #F7F9F9;
         color: #666666;
         margin: 0px;
      }
      .wrapper {
         width: 80%;
         height: 80%;
         border: 4px solid blue;
         margin: 80px auto;
      }
      .side-content {
         width: 50%;
         /*float: right;*/
         border: 4px solid green;
         margin: 0 auto;
         display: flex;
         justify-content: center;
      }
      .side-content .form-group {
         width: 25%;
         /*display: inline-block;*/
         padding: 10px;
         border: 4px solid red;
      }
      .form-control {
      }

Alles anzeigen

Am Quellcode habe ich auch nichts geändert um dich nicht zu sehr zu verwirren, den kannst du also beibehalten.

Gruss

MrMurphy

MrMurphy

Hallo

Zitat

Wie passe ich das am besten an, sodass das Padding oben bleibt und im Submenü veschwindet!?

In der style.css gibt es (je nach Editor) etwa in der Zeile 1545 folgende Anweisungen

Code

.main-navigation li ul {
		margin: 0;
		padding: 0;
		position: absolute;
		top: 100%;
		z-index: 1;
		height: 1px;
		width: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
	}

Alles anzeigen

Die kannst du um

Code

left: 0;

erweitern. Also zum Beispiel

Code

.main-navigation li ul {
		margin: 0;
		padding: 0;
		position: absolute;
		top: 100%;
                left: 0;
		z-index: 1;
		height: 1px;
		width: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
	}

Alles anzeigen

Die Null kannst du dann noch etwas anpassen.

Zitat

Weiß jemand zufällig ob man bei WP ein Submenü anlegen kann, ohne dass die Elternseite Content haben muss bzw. anklickbar ist?

Das weiß ich leider nicht.

Gruss

MrMurphy

MrMurphy

Hallo

Du kannst Flexbox verwenden. Dann wird es noch schlichter und schöner. Dann noch gleichzeitig die passenden HTML-Elemente und gut ist.

Gruss

MrMurphy

MrMurphy

Hallo

Du hast die li- und a-Elemente falsch herum verschachtelt. Das ul-Element darf nur li-Elemente als direkte Kinder haben.

Durch die falsche Verschachtelung ist gleichzeitig jedes li-Element ein first-child, nämlich vom übergeordneten a-Element.

Gruss

MrMurphy

MrMurphy

Hallo

Mit CSS:

Code

.service-item h3 {color: red;}

Gruss

MrMurphy

MrMurphy

Hallo

So ganz kann ich dein Problem nicht nachvollziehen da ich keinen Zugriff auf deine Bilder habe.

Aus dem Bauch raus solltest du den figure-Elementen per CSS einen oberen Abstand (margin-top) in Höhe der Schriftgröße geben, also zum Beispiel 1rem.

Gruss

MrMurphy

MrMurphy

Hallo

Bei mir funktioniert djhekes Vorschlag grundsätzlich. Benutzt du überhaupt einen halbwegs aktuellen Browser?

Gruss

MrMurphy

MrMurphy

Hallo

Zitat

Wie kann ich mich denn dem annähern, ohne gleich wieder aufzugeben?

YouTube ist ein guter Beginn. Einfach mal nach "Goethe Faust" suchen. Da finden sich viele lockere Filmchen, die einem Anfänger den Faust näher bringen oder auch einfach nur Neugierig auf ihn machen, aber auch komplette Aufführungen. Auf direkte Verknüpfungen verzichte ich um keine Rechte zu verletzten und dadurch das Forum in Probleme zu bringen.

Zitat

habe aber Angst vor dem Schinken

Dann schau zur Therapie unter den Suchergebnissen mal unter anderem nach

Faust - die Gretchentragödie von TheGyJos

Worum geht es in Faust? - Die Klugscheisserin - Allgemeinwissen von Die Klugscheisserin

Faust to go (Goethe in 9 Minuten) von Sommers Weltliteratur to go

Goethe Faust I 09 11 07 21 15 3sat von Yezariael82

Faust in 5 Minuten von bngmgf

Goethes Faust in 2,5 Minuten von Faust aufs Auge

Wer englisch kann vielleicht auch

David Wellbery: "Who is Faust?" von UChicago Division of the Humanities (bereits recht gut verständlich mit Schulenglisch)

Goethe: The Tragedy of Faust von Erick Masters

Und anschließend eine der kompletten Aufführungen, Einfach kurz reinschauen und dann die anschauen, die einem am ehesten zusagt. Zum Beispiel

Faust. Der Tragödie erster Teil 1960 von Christina Utesova

Goethe # Faust 1 von TOŠ TOSCH MIHAEL (mehrere Teile)

Faust part 1/2 von marcel riedel

Gruss

MrMurphy

MrMurphy

Hallo niklasxyz

Deine Angaben sind leider noch sehr dünn. Grade Anfänger sollten einen Link zu ihren bisherigen Bemühungen posten.

Grundsätzlich hat sich für Vorschaubilder mit zugehörigen Text / Links / Buttons folgendes Vorgehen bewährt:

1. Zunächst wird ein umgebender Container erstellt. Dafür eigenet sich wie in deinen Beispiel ein section-Element mit einer class. Eine id ist nur sinnvoll wenn sie auf einer Webseite technisch nur einmal auftauchen darf.

2. Für jedes Vorschaubild wird ein passender Container erstellt. Dafür ist in HTML5 aktuell das figure-Element vorgesehen. div-Elemente sollen nur noch verwendet werden, wenn es keine passenderen Elemente gibt, deshalb sind sie hier falsch.

3. In das figure-Element kommt in einer Vorschaugalerie jeweils ein Bild. Bilder sollten jeweils für die Webseite aufbereitet werden und nur so groß sein, wie sie maximal angezeigt werden sollen.

4. Der Text (in deinem Fall der Button) kommt innerhalb eines a-Elements in ein figcaption-Element. Der Text kann dann als Button gestaltet werden.

Der HTML-Quelltext kann so zum Beispiel folgendermaßen aussehen:

Code

<section class="vorschau">
   <figure>
      <img src="http://lorempixel.com/150/80/transport/2">
      <figcaption><a href="banane.html">Banane</a></figcaption>
   </figure>
   <figure>
      <img src="http://lorempixel.com/150/80/transport/5">
      <figcaption><a href="orange.html">Orange</a></figcaption>
   </figure>
</section>

Die Elemente können dann mit folgendem CSS-Grundgerüst angesprochen werden:

Code

.vorschau {
}
.vorschau figure {
}
.vorschau img {
}
.vorschau figcaption {
}
.vorschau a {
}

Deine bisher bekannten Vorstellungen sollten mit folgendem CSS gelöst werden können, wobei ich noch einige sinnvolle Vorgaben hinzugefügt habe:

Code

* {
         min-width: 0;
      }
      figure {
         min-width: 0;
         max-width: 100%;
         margin: 0;
      }
      img {
         min-width: 0;
         display: block;
         max-width: 100%;
         border: 0;
      }
      .vorschau {
         display: flex;
         flex-wrap: wrap;
      }
      .vorschau figure {
         padding: 4px;
         margin: 30px;
      }
      .vorschau img {
      }
      .vorschau figcaption {
         text-align: center;
      }
      .vorschau a {
      }

Alles anzeigen

Das CSS muss dann nur noch um deine noch nicht bekannten Wünsche erweitert werden.

Gruss

MrMurphy

MrMurphy

Hallo

Das musst du in der Gebrauchsanleitung nachlesen.

Es gibt Aktenshredder die geölt oder gefettet werden müssen. Dabei muss immer auf ein zulässiges Öl oder Fett geachtet werden.

Halbwegs aktuelle Aktenshredder haben zumeist eine Dauerschmierung, die die gesamte Laufleistung überdauern soll. In diesen Fällen kann durch ölen oder fetten die Dauerschmierung zerstört werden.

Gruss

MrMurphy

MrMurphy

Hallo

Für das Theme gibt es eine CSS-Datei, die in meinem Browser als

Code

http://tomaten-haus.de/wp-content/themes/activello/style.css?ver=4.5.4

angezeigt wird. Eventuell auch ohne ?ver=4.5.4.

In etwa (da zählt jeder Editor etwas anders) Zeile 125 enthält die den Eintrag

Code

#uwpqsffrom_329 p {
   margin: 5px 0;
}

Den kannst du ändern zu

Code

#uwpqsffrom_329 p,
#uwpqsffrom_807 p,
#uwpqsffrom_801 p,
#uwpqsffrom_802 p,
#uwpqsffrom_803 p {
   margin: 5px 0;
}

Das sollte die Abstände wie beim ersten Formular anpassen.

Gruss

MrMurphy

MrMurphy

Hallo

Zitat

mein Handy

Wieso dein Handy? Machst du die Seite für dich oder für deine Besucher?

Mit der Antwort darauf beginnt die Lösung.

Zitat

woher weiß ich dann, ohne genau mein Handy zu suchen, ob die Bildshirmgröße passt

Das kannst du bei den Endgeräten (das sind ja nicht nur Handys) deiner Besucher überhaupt nicht wissen. Bei der Vielzahl der Bildschirmgrößen ist es deshalb vollkommen unsinnig Webseiten für bestimmte Bildschirmgrößen (oder besser: Fenstergrößen) zu erstellen.

Es hat sich als am praktikabelsten erwiesen das Layout dem Inhalt anzupassen. Dabei wird berücksichtigt, dass seitliches Scrollen von den meisten Usern abgelehnt wird. Je nach Fensterbreite passt sich die Länge der Seite an. Je schmaler das Fenster wird desto höher wird die Seite, so dass nur rauf- und runter gescrollt werden muss. Die Bildschirm-/Fenstergröße spielt dann nur noch eine untergeordnete Rolle.

Das ganze läuft unter der Bezeichnung "Responsive Layout".

Zitat

sodass es für alle Geräte komplett gleich aussieht?

Das hat sich bereits vor Jahren als Sackgasse erwiesen. Besucher erwarten überhaupt nicht das Webseiten auf allen Endgeräten gleich aussehen. Viel wichtiger ist das Webseiten problemlos gelesen und benutzt werden können.

Gruss

MrMurphy

MrMurphy

Hallo

Du hast den Link zu deiner Seite vergessen.

Du willst offensichtlich ein Responsive Layout erstellen.

Deine Vorgehensweise ist aber eher ungeschickt. Das Layout hängt vom Inhalt ab. Du solltest also für alle übergeordneten Elemente und deren Inhalt eigene "CSS-Blöcke" erstellen.

Dabei hat es sich als sinnvoll erwiesen zunächst das Layout für schmale Fenster und davon ausgehend für immer breitere zu erstellen, bekannt als "Mobile-First".

Verschiedene CSS-Dateien für verschiedene Fensterbreiten zu erstellen hat sich als Sackgasse erwiesen. Das endet in Frust wie bei dir.

Natürlich sollte der HTML-Quelltext dem aktuellen HTML5 entsprechen und keine sachlichen Fehler enthalten.

Gruss

MrMurphy

Beiträge von MrMurphy

Darstellungsprobleme mit Div

Wie passt sich Text automatisch an?

Darstellungsprobleme mit Div

Darstellungsprobleme mit Div

Nicht vorhandene Datei wird trotzdem angezeigt -- WARUM??

div- im div-Element zentrieren

div- im div-Element zentrieren

div- im div-Element zentrieren

Submenü nicht einrücken, Hauptpunkt schon

Navigation :first-child problem

Navigation :first-child problem

Text Farbe ändern

Abstand zwischen Bildern

Erste eigene Website

Gibt es "Faust" auch als nicht-trockene Literatur?

Button mittig unter Bild Zentrieren

Muss man einen Aktenschredder eigentlich mal ölen oder so?

Abstand zwischen Zeilen einstellen, aber wo?

Header(fixed) nicht an oberster Stelle

Layout&Bildschirmgrößen