Beiträge von MrMurphy

MrMurphy

Hallo

da steht doch:

Zitat

Resize your browser window or check with a mobile device.

Die Demos sind die drei Menüs auf der Seite.

Gruss

MrMurphy

MrMurphy

Hallo,

du kennst aber schon den Unterschied zwischen

Zitat

da nach aktueller Rechtslage Verwandte keinen Angehörigen belasten müssen

und "Verwandte keine Angehörigen belasten dürfen"?

Richtig - es ist ihnen freigestellt. Von daher ist an dem Urteil überhaupt nichts überraschendes, es spiegelt schlicht die aktuelle Rechtslage wieder.

Außerdem gibt es kein Belastungsverbot oder ein Recht auf eine Nichtbelastung des Beschuldigten, sondern ein Aussageverweigerungsrecht. Das ist etwas ganz anderes. Dadurch soll kein Beschuldigter oder Täter geschützt werden, sondern bestimmte Verwandte / Ehepartner / Verlobte sollen vor einem möglichen Gewissenskonflikt geschützt werden, Angaben machen zu müssen.

Wenn ein Zeuge gegen einge Verwandte aussagen muss kann er unter einen gewaltigen psychischen Druck geraten. Davor soll er sich als Unbeteiligter schützen können. Wer die Behörden unterstützten möchte darf dies aber tun, egal wie eng verwandt er mit dem Beschuldigem ist.

Gruss

MrMurphy

MrMurphy

Hallo

Zitat

warum aber der Browser es manchmal ingnoriert und manchmal nicht, würde mich mal interessieren.

Die Browser schalten die Ansicht nach unterschiedlichen Vorgaben um. Offensichtlich ist das bei der Doctype-Angabe.

Aber es gibt noch andere Gründe. So halt auch ob die Daten lokal vom Rechner stammen oder von einem Webserver geliefert werden.

Anfänger sehen das dann gerne als Browserfehler oder Bug an, dabei übersehen sie ihre "Pflicht" einen fehlerfreien Quellcode zu liefen.

Zitat

darf ich erfahren was an dem Code nicht Mehr Zeitgemäß ist ?

Zum Beispiel die Verwendung von div anstatt geeignetere Container wie header, main, footer u.s.w. zu verwenden.

Oder den Containern feste Größen aufzwingen zu wollen, anstatt das Browserfenster in seiner ganzen Breite zu nutzen oder die Besucher bei schmaleren Fenstern zu zwingen seitwärts zu scrollen.

Gruss

MrMurphy

MrMurphy

Hallo,

so einen Fehler hatte ich schon lange nicht mehr, deshalb war ich da wohl etwas betriebsblind. Das liegt doch nicht an deinem Rechner.

Du hast bei vielen Größenangaben die Einheit weggelassen, bei dir px. Meist wohl bei width.

Das ist nicht zulässig. Die Einheit darf nur bei ganz bestimmten Angaben (z. B. line-height) weggelassen werden.

Lokal ignorieren die Browser solche Fehler. Bei Daten von Webserven offensichtlich nicht. Das musst du also korrigieren.

Gruss

MrMurphy

MrMurphy

Hallo

ich habe die Seite mit dem kompletten CSS getestet, konnte dein Problem aber nicht nachvollziehen. Ich kann im CSS auch keine Angaben finden, die die Verschiebung des Layouts verursachen könnten.

Das Problem ist demnach offensichtlich im Softwarebereich deines Rechners zu suchen. Da werden sich wohl einige Programme gegenseitig stören.

Gruss

MrMurphy

MrMurphy

Hallo,

dein Problem kann ich nicht nachvollziehen.

Allerdings scheinst du uns auch ein Teil des CSS vorzuenthalten. In der HTML-Datei werden zwei CSS-Dateien eingebunden und für das Menü gibt es keine CSS-Angaben, bis auf eine. Und die scheint auch noch falsch zu sein.

Im CSS

Code

#menu_css

und im HTML dann

Code

<div id='cssmenu'>

Zitat

und wollte mir deswegen in den Ferien mal Html und css in den Basics beibringen.

Insgesamt scheinen deine Unterlagen zu HTML / CSS leider sehr veraltet zu sein. Du solltest dir unbedingt aktuelle Unterlagen bzw. aktuelles Lehrmaterial besorgen. Grade in den letzten Jahren hat sich viel geändert und wenn nach veralteten Grundlagen gelernt wird fällt die Umstellung auf aktuelles HTML / CSS sehr schwer oder gelingt gar nicht.

Gruss

MrMurphy

MrMurphy

Hallo

Zitat

gibt es eine elegantere Lösung?

Ja. Mein Beispiel wirkt sich auf alle article mit der "id=post-110" direkt aus.

Außerdem auf alle Elemente, welche die Klasse class="clearfix" bekommen.

Du kannst also jeweils den umgebenden Containern gezielt die Klasse clearfix zuweisen.

Allerdings solltest du dich mit den Grundlagen von float, clear und clearfix beschäftigen.

Für das clearfix gibt es unterschiedliche Inhalte, die nicht bei jeder Konstellation funktionieren, sondern manchmal sogar zu zusätzlichen Problemen führen.

Mit meiner clearfix-Lösung hatte ich zwar noch keine Probleme und sie wird auch im Internet als zuverlässig beschrieben. Das heißt aber nicht, dass sie immer funktioniert.

Gruss

MrMurphy

MrMurphy

Hallo

Zitat

Das clear könnte ich doch in meinem css schnipsel eintragen nicht ?

Nein.

Ich habe meinen vorigen Beitrag grade erweitert, das hat sich mit deiner Antwort überschnitten.

Du musst entweder dem umgebenden Container (also dem article-Element mit der id="post-110") ein Clearfix mit auf den Weg geben. Die Lösung habe ich im vorigen Beitrag nachträglich beschrieben.

Oder du musst unterhalb der 6 div aber innerhalb des article ein weiteres Element einfügen und dem per CSS ein clear verpassen. Inhaltsleere Container zu erstellen um das Layout zu beeinflussen ist aber schlechter Stil und sollte vermieden werden.

Gruss

MrMurphy

MrMurphy

Hallo,

die Linien sind der untere Rahmen des article-Containers mit der id="post-110". Der Rahmen ist in der style.css unter ".site-content article" mit "border-bottom: 4px double #EDEDED" eingetragen.

Eigentlich sollte der Rahmen unterhalb der 6 darin enthaltenen div mit der Klasse "box_2" erscheinen. Also unter den 6 Bohnen-Angeboten.

Allerdings sind die 6 div gefloatet und damit aus dem Textfluss genommen. Dadurch hat das article-Element keinen Inhalt mehr und der Rahmen wird noch oben verschoben.

Den Rahmen zu entfernen würde das Problem nur verstecken, aber nicht lösen.

Da hiflt nur der alte Merksatz weiter "Wer floatet MUSS auch clearen."

Du musst also an geeigneter Steller ein "clear" einfügen. Am geschicktesten ist wahrscheinlich ein clearfix für das article-Element zu vergeben. Das musst du halt ausprobieren.

Du kannst in die style.css ja mal folgendes eintragen:

Code

article#post-110:before,
article#post-110:after,
.clearfix:before,
.clearfix:after {
   content: "";
   display: table;
}
article#post-110:after,
.clearfix:after {
   clear: both;
}

Alles anzeigen

Gruss

MrMurphy

MrMurphy

Hallo

ich befürchte, das dir hier niemand helfen kann.

Das ist ein spezielles Shopware-Problem. Mit der Anwendung wird sich in einem HTML-/CSS-Forum nur mit sehr viel Glück jemand auskennen.

Du solltest suchen, ob es ein spezielles Shopware-Forum gibt oder dich an der Hersteller wenden. Das scheint ein Anwendungsfehler zu sein.

Ich habe zum Beispiel über Google dieses Forum gefunden:

http://forum.shopware.com/

Wobei ich nicht mal sicher sein kann, das es sich dabei auch um dein "Shopware" handelt, da sich der Name ziemlich allgemein anhört.

Gruss

MrMurphy

MrMurphy

Hallo,

Zitat

Woran liegt das Problem und wie ist es lösbar?

Du mißbrauchst eine Tabelle zum Layouten. Das ist falsch und führt zu solchen Problemen wie von dir beschrieben. Also weg damit.

Weiterhin solltest du auf veraltete, unzulässige Elemente wie das center-Tag und das font-Tag verzichten.

Das br-Tag sollte nur in Ausnahmefällen benutzt werden.

Ich habe mal ein Beispiel-Formular erstellt. Dabei habe ich die Felder in einer mir sinnvoller erscheinenden Reihenfolge sortiert.

Das Layout habe ich Responsive gemacht.

Außerdem habe ich eine Datei "normalize.css" eingebunden, deren Inhalt ich dahinter poste. Die muss eingebunden sein damit das Layout funktioniert.

Also erst mal die HTML-Datei:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Formular Layout 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
   <!-- Links zu externen css-Stylesheets mit Basisangaben -->
   <link href="normalize.css" rel="stylesheet">
   <!-- <link href="https://necolas.github.io/normalize.css/3.0.2/normalize.css"> -->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
   @media all {
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0;
      }
      form {
         font-size: 1.2rem;
         width: 600px;
         padding: 0.5rem 0;
         border: 1px solid blue;
         margin: 1rem auto;
      }
      form a {
         display: block;
         color: black;
         text-decoration: none;
      }
      .selectfeld,
      .textfeld,
      .checkboxfeld,
      .linkfeld,
      .buttonfeld {
         padding: 0.5rem;
         display: flex;
      }
      .selectfeld :nth-child(1),
      .textfeld :nth-child(1) {
         padding: 0.20rem 0;
         flex: 1 0 30%;
      }
      .selectfeld :nth-child(2),
      .textfeld :nth-child(2) {
         border: 1px solid black;
         border-radius: 0.2rem;
         flex: 1 0 70%;
      }
      .checkboxfeld :nth-child(1) {
         flex: 1 0 30%;
      }
      .checkboxfeld {
         justify-items: flex-start;
      }
      .checkboxfeld :nth-child(2) {
         flex: 1 0 70%;
      }
      .buttonfeld :nth-child(1) {
         flex: 0 0 30%;
      }
      .linkfeld {
         border-top: 1px solid blue;
      }
      .linkfeld :nth-child(1n) {
         background: linear-gradient(
            #fbfbfb 0%,
            #fbfbfb 5%,
            #f1f1f1 5%,
            #ebebeb 50%,
            #dddddd 50%,
            #cfcfcf 95%,
            #f3f3f3 95%,
            #f3f3f3 100%
         );
         text-align: center;
         padding: 0.1rem;
         border: 1px solid #707070;
         border-radius: 0.2rem;
         margin: 0.3rem 0.5rem 0 0;
         flex: 0 1 50%;
      }
      p {
      }
   }
   @media only screen and (max-width: 620px) {
      form {
         width: 100%;
      }
      .selectfeld,
      .textfeld,
      .checkboxfeld,
      .linkfeld,
      .buttonfeld {
         flex-wrap: wrap;
      }
      .selectfeld :nth-child(1n),
      .textfeld :nth-child(1n),
      .checkboxfeld :nth-child(1n),
      .linkfeld :nth-child(1n),
      .buttonfeld :nth-child(1n) {
         flex-wrap: wrap;
         flex: 1 0 100%;
      }
   }
   </style>
</head>
<body>
   <main>
      <form method="post" action="index.html">
         <div class="selectfeld">
            <label for="select">Server:</label>
            <select name="select" id="select" />
               <option value="test1">test1</option>
               <option value="test2">test2</option>
               <option value="test3">test3</option>
               <option value="test4">test4</option>
               <option value="test5">test5</option>
            </select>
         </div>
         <div class="textfeld">
            <label for="login_name">Login:</label>
            <input type="text" name="login_name" id="login_name"  value="" placeholder="mc-nickname or email-address">
         </div>
         <div class="textfeld">
            <label for="password">Password:</label>
            <input type="password" id="password" name="Password" placeholder="password">
         </div>
         <div class="checkboxfeld">
            <label for="rememberme">Remember me:</label>
            <div>
               <input type="checkbox" id="rememberme" name="rememberme" value="Remember me">
            </div>
         </div>
         <div class="buttonfeld">
         <input type="submit" name="commit" value="Login">
         </div>
         <div class="linkfeld">
            <a href="#">Forgot password?</a>
            <a href="#">Register new account</a>
         </div>
      </form>
   </main>
</body>
</html>

Alles anzeigen

und der Inhalt der normalize.css:

Code

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */


/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */


html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}


/**
 * Remove default margin.
 */


body {
  margin: 0;
}


/* HTML5 display definitions
   ========================================================================== */


/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */


article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}


/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */


audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}


/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */


audio:not([controls]) {
  display: none;
  height: 0;
}


/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */


[hidden],
template {
  display: none;
}


/* Links
   ========================================================================== */


/**
 * Remove the gray background color from active links in IE 10.
 */


a {
  background-color: transparent;
}


/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */


a:active,
a:hover {
  outline: 0;
}


/* Text-level semantics
   ========================================================================== */


/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */


abbr[title] {
  border-bottom: 1px dotted;
}


/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */


b,
strong {
  font-weight: bold;
}


/**
 * Address styling not present in Safari and Chrome.
 */


dfn {
  font-style: italic;
}


/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */


h1 {
  font-size: 2rem;
  margin: 0.67rem 0;
}


/**
 * Address styling not present in IE 8/9.
 */


mark {
  background: #ff0;
  color: #000;
}


/**
 * Address inconsistent and variable font size in all browsers.
 */


small {
  font-size: 80%;
}


/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */


sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}


sup {
  top: -0.5rem;
}


sub {
  bottom: -0.25rem;
}


/* Embedded content
   ========================================================================== */


/**
 * Remove border when inside `a` element in IE 8/9/10.
 */


img {
  border: 0;
}


/**
 * Correct overflow not hidden in IE 9/10/11.
 */


svg:not(:root) {
  overflow: hidden;
}


/* Grouping content
   ========================================================================== */


/**
 * Address margin not present in IE 8/9 and Safari.
 */


figure {
  margin: 1rem 40px;
}


/**
 * Address differences between Firefox and other browsers.
 */


hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}


/**
 * Contain overflow in all browsers.
 */


pre {
  overflow: auto;
}


/**
 * Address odd `em`-unit font size rendering in all browsers.
 */


code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1rem;
}


/* Forms
   ========================================================================== */


/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */


/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */


button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}


/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */


button {
  overflow: visible;
}


/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */


button,
select {
  text-transform: none;
}


/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */


button,
html input[type='button'], /* 1 */
input[type='reset'],
input[type='submit'] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}


/**
 * Re-set default cursor for disabled elements.
 */


button[disabled],
html input[disabled] {
  cursor: default;
}


/**
 * Remove inner padding and border in Firefox 4+.
 */


button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}


/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */


input {
  line-height: normal;
}


/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */


input[type='checkbox'],
input[type='radio'] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}


/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */


input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  height: auto;
}


/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */


input[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}


/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */


input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}


/**
 * Define consistent border, margin, and padding.
 */


fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35rem 0.625rem 0.75rem;
}


/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */


legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}


/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */


textarea {
  overflow: auto;
}


/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */


optgroup {
  font-weight: bold;
}


/* Tables
   ========================================================================== */


/**
 * Remove most spacing between table cells.
 */


table {
  border-collapse: collapse;
  border-spacing: 0;
}


td,
th {
  padding: 0;
}

Alles anzeigen

Gruss

MrMurphy

Edit: Am 13.08.2015 Quelltext überarbeitet: Links als Buttons gestaltet

MrMurphy

Hallo

weder das Bild noch der php-Quelltext helfen zur Erleuchtung des Problems weiter. Daraus können wir keine Seite erstellen. Außerdem fehlen uns die Grafiken. Am besten wäre ein Link zu der Seite mit deinem aktuellen HTML-Quellcode.

Zur Anordnung von Elementen kannst du dich ansosten mit dem Flexbox-Modell ( display: flex; ) beschäftigen.

Gruss

MrMurphy

MrMurphy

Hallo,

deine Angaben sind für eine konkrete Hilfe leider viel zu dünn. Vielleicht hilft dir die folgende Seite ja weiter:

http://los.webdaum.de/inhalt/html_schule/hyperlinks.html

Gruss

MrMurphy

MrMurphy

Hallo

Zitat

Kann ich diese bereits offline testen

Ja, dazu musst du einen Webserver wie XAMPP installieren. Das ist eine Freeware-Software.

Zitat

Websitebaker oder CMSimple

Ich kenne die beiden leider nicht. Text und Bilder einzurichten und zu ändern sind aber die Grundlagen jedes CMS.

Gruss

MrMurphy

MrMurphy

Hallo MadMaid,

den Quelltext interessiert es leider überhaupt nicht ob du Anfänger bist oder nicht.

Zum "Lernen" von HTML / CSS hast du leider auf vollkommen veraltete Quellen zurückgegriffen und zusätzlich noch gestrichene Elemente verwendet bzw. andere Elemente sachlich falsch angewendet.

So ist zum Beispiel XHTML bereits 2006 offiziell begraben worden und wird entsprechend nicht mehr weiterentwickelt. Irgendwann werden die Browser XHTML als Altlasst streichen und nicht mehr anzeigen. Neue Seiten sollten deshalb nur mit HTML5 / CSS3 erstellt werden.

Das font-Element ist ersatzlos gestrichen worden und sollte deshalb auch nicht mehr verwendet werden.

Das b-Element und das strong-Element dienen nicht mehr der Fettschrift sondern haben eine semantische Bedeutung bekommen, die in deinem Beispiel nicht gegeben ist. Fette Schrift ohne semantische Bedeutung wird heutzutage über CSS dargestellt.

Tabellen sind nur für Tabellendaten zulässig und nicht um das Layout zu beinflussen. Du hast aber keine Tabellendaten. In diesem Zusammenhang muss zwischen Tabellen und tabellarischer Darstellung unterschieden werden. Eine tabellarische Darstellung ist häufig auch sinnvoll, wenn keine Tabellendaten vorliegen, zum Beispiel bei Listen. Die tabellarische Darstellung wird dann aber über CSS erzeugt.

Unnötige div sollten vermieden werden. Container sollten zudem durch geeignete Elemente erzeugt werden, zum Beispiel header, main, footer, article, section, aside, figure u.s.w.

Um dir konkret zu helfen sind deine Angaben zudem zu dürftig.

Trotzdem mal ein Beispiel wie deine Daten mit aktuellem HTML5 / CSS3 dargestellt werden können. Die Abstände und das Aussehen können natürlich noch angepasst werden:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Anordnung Layout 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
   @media all {
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-size: 100%;
      }
      body {
         padding: 0;
      }
      footer {
         display: flex;
      }
      footer h1 {
         text-align: center;
      }
      footer>section>dl:nth-child(2)>dt {
         font-weight: bold;
      }
      footer>section>dl:nth-child(3)>dt {
         color: #696969;
      }
      footer>* {
         flex: 1 0 33.3%;
      }
      footer>:nth-child(1) {
         background-color: grey;
      }
      footer>:nth-child(2) {
         background-color: green;
      }
      footer>:nth-child(3) {
         background-color: blue;
      }
      footer>*>* {
         padding: 0.5rem;
         border: 1px solid black;
         margin: 0.5rem;
      }
      footer>* dl {
         display: flex;
         flex-wrap: wrap;
      }
      footer>* dl :nth-child(2n+1) {
         width: 30%;
      }
      footer>* dl :nth-child(2n+2) {
         width: 70%;
      }
      footer>*>* p,
      footer>*>* dt,
      footer>*>* dd {
         padding: 0;
         margin: 0;
      }
   }
   @media only screen and (max-width: 800px) {
      footer {
         flex-direction: column;
      }
      footer>* {
         flex: 1 0 100%;
      }
      footer>:nth-child(1) {
         order: 2;
      }
      footer>:nth-child(2) {
         order: 1;
      }
      footer>:nth-child(3) {
         order: 3;
      }
   }
   </style>
</head>
<body>
   <footer>
      <section>
         <h1>Header 1</h1>
         <dl>
            <dt>Mo.-Fr.:</dt>
            <dd>00:00 bis 00:00 Uhr</dd>
            <dt>Sa.:</dt>
            <dd>00:00 bis 00:00 Uhr</dd>
         </dl>
         <dl>
            <dt>Fon:</dt>
            <dd>+49 (0000) 000000</dd>
         </dl>
      </section>
      <section>
         <h1>Header 2</h1>
         <div>
            <p>Straße 00-00</p>
            <p>00000 Stadt</p>
         </div>
         <dl>
            <dt>Fax:</dt>
            <dd>+49 (0000) 000000</dd>
         </dl>
      </section>
      <section>
         <h1>Header 3</h1>
         <dl>
            <dt>Mo.-Fr.:</dt>
            <dd>00:00 bis 00:00 Uhr</dd>
            <dt>Sa.:</dt>
            <dd>00:00 bis 00:00 Uhr</dd>
         </dl>
         <dl>
            <dt>Mail:</dt>
            <dd>info@mail.de</dd>
         </dl>
      </section>
   </footer>
</body>
</html>

Alles anzeigen

Gruss

MrMurphy

MrMurphy

Hallo,

ich wüßte nicht das "data-filter" zu HTML oder CSS gehören. Von daher wird es schwierig dir zu helfen.

Gruss

MrMurphy

MrMurphy

Hallo,

so ganz habe ich dein Problem leider nicht verstanden.

Grundsätzlich würde ich für dein Problem keine Listen verwenden, sondern für 3 Ebenen die Elemente h4 bis h6. Dadurch wird meiner Ansicht nach der Quelltext deutlich übersichtlicher, auch wenn HTML-/CSS-Puristen bleich werden. Soweit ich gelesen habe ist die Lösung mit den Überschriften aber semantisch auch korrekt.

Ob und wie das mit den Buchstaben funktioniert weiß ich leider nicht.

Die farbigen Hintergründe habe ich eingefügt, damit besser sichtbar ist wo ein Absatz anfängt und endet.

Ich selbst würde die folgende Lösung bevorzugen. Die ist meiner Ansicht nach am übersichtlichsten und man kann zu den einzelnen Überschriften noch problemlos Absätze hinzufügen:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Liste mit Unterpunkten 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
   @media all {
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0;
         counter-reset: ebene1;
      }
      body :nth-child(2n+1) {
         background-color: papayawhip;
      }
      body :nth-child(2n+2) {
         background-color: silver;
      }
      h4,
      h5,
      h6,
      p {
         font-size: 1.3rem;
         padding: 0;
         margin: 0;
         margin-bottom: 0.5rem;
      }
      h4 {
         counter-reset: ebene2;
         margin-left: 4rem;
      }
      h4:before {
         content: counter(ebene1) " ";
         counter-increment: ebene1;
         margin-right: 2.5rem;
         margin-left: -3.5rem;
      }
      h5 {
         counter-reset: ebene3;
         margin-left: 4rem;
      }
      h5:before {
         content: counter(ebene1) "." counter(ebene2) " ";
         counter-increment: ebene2;
         margin-right: 1.5rem;
         margin-left: -3.5rem;
      }
      h6 {
         margin-left: 4rem;
      }
      h6:before {
         content: counter(ebene1) "." counter(ebene2) "." counter(ebene3) " ";
         counter-increment: ebene3;
         margin-right: 0.5rem;
         margin-left: -3.5rem;
      }
      p {
         font-weight: bold;
         margin-left: 4rem;
      }
   }
   /* Vorlage zum Kopieren für Media-Query */
   @media only screen and (max-width: 0px) {
   }
   </style>
</head>
<body>
   <h4>Pediram-me que escrevesse um "Blindtext". Em português seria algo como o texto para cegos ou texto cego. No Brasil também chamado de Nononono (eu sempre me pergunto se tanta energia negativa não acaba influenciando o cliente).</h4>
   <h5>Deze tekst is voor spek-en-bonen, is nep, malafide, onecht, artificiëel, geïmiteerd, illusionair, suggestief, kunstmatig, misleidend, een prothese. Er wordt geen open kaart gespeeld, er wordt gesjoemeld</h5>
   <p>Ein Holzschuhmacher und ein Bogenschütze mit Brot- beziehungsweise Wassersack durchschritten eine Saccharose-Pfütze. Zwar war sie gottlos, aber zäh wie Lack. Der Schütze sprach: "Wir müssen sie entwässern. Nur so wird sie zu gutem Scheuersand.</p>
   <p>Jedoch kann ich sie schwerlich trockenbessern. Mein Sack enthält den falschen Gegenstand." Der Holzschuhmacher sprach: "Oh, ich vermute, du willst mein sittsam frommes Beutelbrot - auf dass es zuckernd sich zu Tode blute und selbstvergessen stirbt den Opfertod."</p>
   <h6>"Mein Gott, du laberst wie ein schwuler Pfaffe, dem man den Wäschebeutel klauen will. Ist dir denn klar, dass ich es niemals schaffe? In deinem Sack ist Brot, in meinem Müll!" "Du bist ein Bösewicht, Sadist und Schlächter und willst mein Brot als süsses Opferlamm.</h6>
   <p>Der ärgste Tempelräuber ist gerechter. Mein Brot, verdammt, ist heilig. Und kein Schwamm!" So zogen sie denn lauthals schreiend weiter, teils sakrosankt, teils niedersäbelnd schroff. Noch heute singen sie dem Anstaltsleiter das Lied vom Pfützlein mit dem Zuckerstoff.</p>
   <h6>Als eines Tages im Internet neben allen Highway-Junkies auch alle Chinesen vernetzt waren, kam Pab Li Shing aus Win Link Shou auf die Idee, dem Chaos ein Ende zu bereiten und für immer steinreich zu werden.</h6>
   <h5>Da er wie alle Kreativen nichts für sich behalten konnte, teilte er seine vermeintliche Erleuchtung sogleich seinem Meister On Lein Lin mit: "Stellen Sie sich vor, verehrter Meister, dass ich eine CD-ROM auf den Markt werfen werde, die alle CD-ROMs verzeichnet, die CD-ROMs verzeichnen. Des weiteren werde ich eine CD-ROM anbieten, auf der alle CD-ROMs verzeichnet sind, die keine CD-ROMs verzeichnen. Das wäre doch für die Welt und für mich ein übersichtlicher Gewinn."</h5>
</body>
</html>

Alles anzeigen

Du suchst aber wohl eher nach der folgenden Lösung. Dabei habe ich aber keine Möglichkeit gefunden zusätzliche Absätze mit den passenden Abständen hinzuzufügen:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Liste mit Unterpunkten 02</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
   @media all {
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0;
         counter-reset: ebene1;
      }
      body :nth-child(2n+1) {
         background-color: papayawhip;
      }
      body :nth-child(2n+2) {
         background-color: silver;
      }
      h4,
      h5,
      h6,
      p {
         font-size: 1.3rem;
         padding: 0;
         margin: 0;
         margin-bottom: 0.5rem;
      }
      h4 {
         counter-reset: ebene2;
         margin-left: 4rem;
      }
      h4:before {
         content: counter(ebene1) " ";
         counter-increment: ebene1;
         margin-right: 2.5rem;
         margin-left: -3.5rem;
      }
      h5 {
         counter-reset: ebene3;
         margin-left: 8rem;
      }
      h5:before {
         content: counter(ebene1) "." counter(ebene2) " ";
         counter-increment: ebene2;
         margin-right: 1.5rem;
         margin-left: -3.5rem;
      }
      h6 {
         margin-left: 12rem;
      }
      h6:before {
         content: counter(ebene1) "." counter(ebene2) "." counter(ebene3) " ";
         counter-increment: ebene3;
         margin-right: 0.5rem;
         margin-left: -3.5rem;
      }
   }
   /* Vorlage zum Kopieren für Media-Query */
   @media only screen and (max-width: 0px) {
   }
   </style>
</head>
<body>
   <h4>Pediram-me que escrevesse um "Blindtext". Em português seria algo como o texto para cegos ou texto cego. No Brasil também chamado de Nononono (eu sempre me pergunto se tanta energia negativa não acaba influenciando o cliente).</h4>
   <h5>Deze tekst is voor spek-en-bonen, is nep, malafide, onecht, artificiëel, geïmiteerd, illusionair, suggestief, kunstmatig, misleidend, een prothese. Er wordt geen open kaart gespeeld, er wordt gesjoemeld</h5>
   <h6>"Mein Gott, du laberst wie ein schwuler Pfaffe, dem man den Wäschebeutel klauen will. Ist dir denn klar, dass ich es niemals schaffe? In deinem Sack ist Brot, in meinem Müll!" "Du bist ein Bösewicht, Sadist und Schlächter und willst mein Brot als süsses Opferlamm.</h6>
   <h6>Als eines Tages im Internet neben allen Highway-Junkies auch alle Chinesen vernetzt waren, kam Pab Li Shing aus Win Link Shou auf die Idee, dem Chaos ein Ende zu bereiten und für immer steinreich zu werden.</h6>
   <h5>Da er wie alle Kreativen nichts für sich behalten konnte, teilte er seine vermeintliche Erleuchtung sogleich seinem Meister On Lein Lin mit: "Stellen Sie sich vor, verehrter Meister, dass ich eine CD-ROM auf den Markt werfen werde, die alle CD-ROMs verzeichnet, die CD-ROMs verzeichnen. Des weiteren werde ich eine CD-ROM anbieten, auf der alle CD-ROMs verzeichnet sind, die keine CD-ROMs verzeichnen. Das wäre doch für die Welt und für mich ein übersichtlicher Gewinn."</h5>
   <h4>Pediram-me que escrevesse um "Blindtext". Em português seria algo como o texto para cegos ou texto cego. No Brasil também chamado de Nononono (eu sempre me pergunto se tanta energia negativa não acaba influenciando o cliente).</h4>
   <h5>Deze tekst is voor spek-en-bonen, is nep, malafide, onecht, artificiëel, geïmiteerd, illusionair, suggestief, kunstmatig, misleidend, een prothese. Er wordt geen open kaart gespeeld, er wordt gesjoemeld</h5>
   <h6>"Mein Gott, du laberst wie ein schwuler Pfaffe, dem man den Wäschebeutel klauen will. Ist dir denn klar, dass ich es niemals schaffe? In deinem Sack ist Brot, in meinem Müll!" "Du bist ein Bösewicht, Sadist und Schlächter und willst mein Brot als süsses Opferlamm.</h6>
   <h6>Als eines Tages im Internet neben allen Highway-Junkies auch alle Chinesen vernetzt waren, kam Pab Li Shing aus Win Link Shou auf die Idee, dem Chaos ein Ende zu bereiten und für immer steinreich zu werden.</h6>
   <h5>Da er wie alle Kreativen nichts für sich behalten konnte, teilte er seine vermeintliche Erleuchtung sogleich seinem Meister On Lein Lin mit: "Stellen Sie sich vor, verehrter Meister, dass ich eine CD-ROM auf den Markt werfen werde, die alle CD-ROMs verzeichnet, die CD-ROMs verzeichnen. Des weiteren werde ich eine CD-ROM anbieten, auf der alle CD-ROMs verzeichnet sind, die keine CD-ROMs verzeichnen. Das wäre doch für die Welt und für mich ein übersichtlicher Gewinn."</h5>
   <h5>Allein für mich würden Deine Dienste nicht von Nutzen sein, da die entscheidende Frage unbeantwortet im Cyberspace stehenbleibt: Welche der beiden CD-ROMs wird die CD-ROM verzeichnen, die alle CD-ROMs verzeichnet, die keine CD-ROMs verzeichnen? Auf der CD-ROM, die alle CD-ROMs verzeichnet, die CD-ROMs verzeichnen, kann und darf sie ja nicht verzeichnet sein.</h5>
</body>
</html>

Alles anzeigen

Die margin kannst du natürlich auch entsprechend auf deine verschachtelten Listen anwenden.

Vielleicht hilft dir das ja weiter.

Gruss

MrMurphy

MrMurphy

Hallo,

ja, dass kann über CSS gelöst werden. Ich komme aber mit deinen Quelltextschnipseln nicht zurecht. Stell' mal bitte eine Beispielseite online und poste den Link. Als Freewareprovider kannst du z. B. bplaced.net nehmen.

Gruss

MrMurphy

MrMurphy

Hallo,

du mißbrauchst eine Tabelle für's Layout. Das ist sachlich falsch und sollte deshalb vermieden werden.

Korrekt benutzt du je nach Inhalt die korrekten Container wie main, article, section u.s.w. und gestaltest die per CSS, zum Beispiel mit Flexbox.

Um dir konkret helfen zu können wäre etwas Beispiel-Inhalt von dir sinnvoll.

Gruss

MrMurphy

MrMurphy

Hallo

Zitat

Auch wenn der Quelltext von dem Frame gut aussieht, funktioniert es bei mir nicht so wie es soll.

Ich denke djheke meint folgendes, was bei mir im Firefox funktioniert: Rufe nur das Frame mit der Seite auf und gehe dann auf "Datei - Seite speichern unter...", also nicht den Quelltext aufrufen und speichern. Wahrscheinlich geht auch "rechte Maustaste - Seite speichern unter...".

Zitat

allerdings sehe ich bei mir kein "Share" oben

Um den Share-Button zu sehen musst du die Seite mit allen Frames aufrufen (also dein erster Link) und JavaScript muss erlaubt sein. So funktioniert es jedenfalls bei mir im Firefox, Chrome, Opera und IE11. Der sollte dann zwischen "Fork" und "Settings" stehen.

Eventuell blockiert den auch deine Firewall oder dein Virenscanner.

Gruss

MrMurphy

Beiträge von MrMurphy

Menü responsiv umschaltbar

Interessantes Urteil

Html & css problem beim Seitenaufbau

Html & css problem beim Seitenaufbau

Html & css problem beim Seitenaufbau

Html & css problem beim Seitenaufbau

Seiteninhalt ragt über den Content-Bereich hinaus

Seiteninhalt ragt über den Content-Bereich hinaus

Seiteninhalt ragt über den Content-Bereich hinaus

Shopware: Bei 0€ kann Bestellung nicht abgeschlossen werden

Tabellenpositionierung schlägt fehl

[Verzweifelt] Divs anordnen

href-Link funktioniert nicht

CMS kompatibel mit HTML und CSS ?

Wrapper will nicht so wie ich will

Selektoren funktionieren nicht

Verschachtelte Liste mit Aufzählung (1.1.1 ...) mit css formatieren

Textteile in Tabellenzelle oben und unten ausrichten

Textteile in Tabellenzelle oben und unten ausrichten

Wie Projekt aus codepen.io funktionsfähig speichern?