Beiträge von MrMurphy

MrMurphy · 19. April 2016

Hallo

Ich verstehe nicht was du willst.

Gruss

MrMurphy

MrMurphy · 19. April 2016

Hallo

So ganz verstehe ich deine Frage nicht.

Möchtest du ein Zebramuster? Das geht per CSS mit :nth-child(odd) und :nth-child(even).

In das CSS kannst du zum Beispiel eintragen

Code

table tr:nth-child(odd) {
   background-color: red;
   color: white;
}
table tr:nth-child(even) {
   background-color: white;
   color: black;
}

um abwechselnd eine Zeile mit rotem und eine mit weißem Hintergrund zu erhalten.

Gruss

MrMurphy

MrMurphy · 18. April 2016

Hallo

Es gibt drei verschiedene Arten CSS anzuwenden:

a) Inline-CSS: Das ist das was du machst und nicht empfehlenswert

b) Internes CSS: Das ist für Test- und Einzelseiten gut geeignet. Alle CSS-Anweisungen stehen im head-Bereich der Webseite in einem style-Block

c) Externes CSS: Das ist die übliche Einbindung bei veröffentlichten Webauftritten, die aus mehreren Seiten bestehen. Die CSS-Anweisungen werden in eine extra Datei geschrieben, die mit der Webseite verknüpft wird.

Siehe auch

https://wiki.selfhtml.org/wiki/CSS/Einbindung

Zitat

An welcher Stelle müssen hier die Befehle in den Code eingesetzt werden?

Am einfachsten kannst du in den head-Bereich folgenden Quelltext eintragen:

Code

<style>
      a {
         color: red;
         font-size: 1.5rem;
         text-decoration: underline;
      }
   </style>

Zitat

Wäre es auch möglich die underline in rot darstellen zu lassen?

Nicht direkt. Eine Unterstreichung hat immer die Farbe des Textes. Wobei Unterstreichungen als schlechter Stil gelten und vermieden werden sollten.

Auch doppelte schließende Klammern > > sollten vermieden werden und sind in der Regel ein Fehler. Wenn schließende Klammern angezeigt werden sollen müssen sie maskiert werden:

https://wiki.selfhtml.org/wiki…t_und_HTML-eigene_Zeichen

Gruss

MrMurphy

MrMurphy · 14. April 2016

Hallo

Zitat

Wie muss der Code verändert werden, dass ich oben auch drei gleich große Blöcke habe?

Ich sehe zwei Möglichkeiten:

Wenn die beiden äußeren Blöcke keinen Inhalt haben sollen kannst du die Hintergrundfarbe des body-Bereichs entsprechend anpassen.

Wenn die beiden äußeren Inhalt enthalten sollen musst du die beiden äußeren Blöcke auch anlegen. Ich habe für mein Beispiel zwei div-Container verwendet.

Außerdem solltest du HTML5 verwenden, da XHTML Elemente wie header, nav, aside und so weiter nicht kennt.

Auf unnötige Elemente wie das div.site sollte zudem verzichtet werden. Als grid-Container ist das body-Element besser geeignet.

Ich habe mal ein entsprechendes Beispiel erstellt:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Grid-Layout 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 all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         margin: 0;
         display: -ms-grid;
         -ms-grid-columns: 25% 50% 25%;
         -ms-grid-rows: 150px 450px 100px;
      }
      .obenlinks {
         /*background: rot*/
         background: #ED1C24;
         -ms-grid-column: 1;
         -ms-grid-row: 1;
      }
      header {
         /*background: hellbraun*/
         background: #b07e4a;
         -ms-grid-column: 2;
         -ms-grid-row: 1;
      }
      .obenrechts {
         /*background: pink*/
         background: #FFAEC9;
         -ms-grid-column: 3;
         -ms-grid-row: 1;
      }
      nav {
         /*background: grün*/
         background: #94c11f;
         -ms-grid-column: 1;
         -ms-grid-row: 2;
      }
      article {
         /*background: weiß*/
         background: white;
         -ms-grid-column: 2;
         -ms-grid-row: 2;
      }
      aside {
         /*background: blau*/
         background: #38aae1;
         -ms-grid-column: 3;
         -ms-grid-row: 2;
      }
      footer {
         /*background: dunkelbraun*/
         background: #683c10;
         -ms-grid-column: 1;
         -ms-grid-row: 3;
         -ms-grid-column-span: 3;
      }
   }
   </style>
</head>
<body>
   <div class="obenlinks">
      <p>div.obenlinks rot</p>
   </div>
   <header>
      <p>header hellbraun</p>
   </header>
   <div class="obenrechts">
      <p>div.obenrechts pink</p>
   </div>
   <nav>
      <p>nav grün</p>
   </nav>
   <article>
      <p>article weiß</p>
      <p>Die Seite wurde mit dem grid-Layout ( display: grid; ) erstellt.</p>
      <p>Das funktioniert zur Zeit (April 2016) nur im IE11 und IE Edge.</p>
   </article>
   <aside>
      <p>aside blau</p>
   </aside>
   <footer>
      <p>footer dunkelbraun</p>
   </footer>
</body>
</html>

Alles anzeigen

Dass das Grid-Layout aktuell nur im IE funktioniert wird dir bekannt sein.

Gruss

MrMurphy

MrMurphy · 28. März 2016

Hallo

Ich kann dein Problem an Hand deiner Angaben nicht nachvollziehen. Du gibst als Schriftfarbe schwarz an und so wird ein Beispieltext auch ausgedruckt.

Quellcodeschnipsel sind in der Regel auch nicht besonders hilfreich. Hast du mal einen Link zu der Seite?

Gruss

MrMurphy

MrMurphy · 25. März 2016

Hallo

Es fehlen leider zu viele Angaben um dir helfen zu können. Zumal du mit allgemeinen Angaben überforderdet seinw wirst.

Leere Elemente wie einfach footer sagen überhaupt nichts aus.

Hast du einen Link zu der Seite? Freeware Webspace gibt es zum Beispiel bei http://www.bplaced.net/.

Außerdem ist nicht klar, ob der footer ständig sichtbar sein soll oder er nur unten stehen soll, solange der Inhalt der Webseite das Fenster nicht komplett ausfüllt.

Die CSS-Anweisung

Code

float: center;

gibt es nicht und sie bewirkt deshalb auch nichts.

Zitat

Und wenn wir schon dabei sind, kann mir jemand vielleicht auf die Sprünge helfen, warum die Länge in der mobilen Ansicht auf ungefähr 1/3 reduziert wird...

Nein, das ist aus deinen Quellcodeschnipseln nicht ersichtlich. Außerdem gibt es den Begriff "mobile Ansicht" eigentlich nicht. Das ist nur ein schwammiger Oberbegriff ohne jede technische Aussage. Deshalb ist nicht nachvollziehbar, was du damit meinst.

Gruss

MrMurphy

MrMurphy · 18. März 2016

Hallo

Mit deinen Angaben kann ich nichts anfangen.

Deine Problembeschreibung ist wirr, aus den Quellcodeschnipselen kann ich keine Seite erstellen und auf die Bilder habe ich keinen Zugriff.

So kann ich dir leider nicht helfen.

Am Besten wäre ein Link zu der Seite. Falls du noch keinen Webspace hast kannst du kostenlose Freewareprovider wie bplaced.net nutzen.

Momentan kann ich deshalb nur raten: Deine Fragestellung deutet darauf hin, dass du die Navigation nach den Vorstellungen des letzten Jahrtausends erstellen willst. Also mit zerschnittenen (geslicten) Bildern, die vom Browser wieder als ein Bild dargestellt werden sollen.

Damit ist weder eine Anpassung an den Inhalt noch an die Höhe möglich.

Dieses Vorgehen ist seit der Einführung von CSS2 im Jahr 2000 veraltet und spätestens mit Aufkommen der Smartphones sollte jeder Webseitenersteller auch erkennen warum.

Welche HTML-Version benutzt du überhaupt? Mit dem aktuellen HTML5 sind div-Suppen, wie offensichtlich bei dir, nicht mehr zulässig.

Gruss

MrMurphy

MrMurphy · 14. März 2016

Hallo

ich schlage vor

Code

<figure>
   <img src="...">
   <figcaption>Dieses Bild ist besonders schön</figcaption>
</figure>

Gruss

MrMurphy

MrMurphy · 13. März 2016

Hallo

Zitat

Dann habe ich da was falsch verstanden.

Stimmt.

Du versuchst offensichtlich sinnvolle Vorgehensweisen von HTML / CSS auf SVG zu übertragen. Davon musst du dich lösen, da SVG anders funktionieren als eine Webseite.

Zitat

Von daher nehme ich dann meinetwegen auch Pixel, falls es wirklich keine Lösung gibt.

Am sinnvollsten ist es SVG mit Pixel zu erstellen. Und zwar wie schon von mir geschrieben ohne einen Rahmen / Abstand.

Andere Einheiten sind zwar zulässig, aber sollten nur in speziellen Ausnahmefällen verwendet werden.

Zitat

Ich dachte, das besondere an SVG ist, dass es sich eben ohne Probleme skalieren lässt.

Stimmt. Im Gegensatz zu Pixelgrafiken lassen sich Vektorgrafiken, zu denen auch SVG gehören, ohne Qualitätsverlust vergrößern und verkleinern. Und zwar auch wenn sie intern mit der Einheit px erstellt wurden. Hier liegt wahrscheinlich dein Denkfehler. Du erwartest, dass sich mit px erstellte SVG ähnlich starr wie HTML-Elemente verhalten. Dem ist aber nicht so.

Gruss

MrMurphy

MrMurphy · 13. März 2016

Hallo

Zitat

Und zwar scheint die SVG irgendwie die Größe der Navbar bzw. der Menu-Buttons zu beeinflussen.

Das ganz normale Verhalten.

Da der SVG keine Größenangaben mit auf den Weg gegeben wurden erhält sie eine vom Browser vorgegebene Standardgröße. Genau wie andere Elemente auch.

Guter Stil bei SVG ist, der SVG eine Größe zu geben und dabei keinen Abstand zum Inhalt der SVG aufkommen zu lassen. Wie bei jeder anderen Grafik auch.

Gruss

MrMurphy

MrMurphy · 9. März 2016

Hallo

Zitat

Is sowas möglich?

Ja.

Zitat

Gibts da schon fertige Lösungen

Ja, Erläuterungen und eine Demo.

Zitat

Geht das rein mit CSS

Nein.

Zitat

Javascript überfordert mich momentan noch stark

Dann wird die Lösung nichts für dich sein.

Anleitung:

http://www.drweb.de/magazin/fu…ne-pager-erstellen-68021/

und Demo dazu:

http://alvarotrigo.com/fullPage/#secondPage

Gruss

MrMurphy

MrMurphy · 7. März 2016

Hallo

So wie von dir gewünscht kann das Verhalten nur mit HTML und CSS nicht sinnvoll erreicht werden.

Der große Unterschied zwischen deiner und der von dir verlinkten Lösung ist, dass bei deiner Lösung die Navigation zunächst sichtbar sein soll, dann nach oben wegscrollen und später wieder oben fixiert eingeblendet werden soll. Bei der von dir verlinkten Lösung ist die Navigation zunächst jedoch nicht sichtbar und taucht erst später auf.

Bei der von dir verlinkten Lösung ist die Navigation von Beginn an fixiert. Der erste Container (.overlay) wird dann mittels position und z-index vor die Navigation gestapelt. Die restlichen Container befinden sich standardmäßig hinter der fixierten Navigation.

Vom Betrachter zum Bildschirmhintergrund hin erscheint also zunächst der erste Container mit Inhalt (.overlay), dahinter die Navigation und dahinter der restliche Inhalt.

Für deine Wunschdarstellung müsste die Navigation doppelt erstellt werden, einmal zum wegscrollen und einmal für die fixierte Version. Das gilt aber als schlechter Stil ohne das deine Besucher dadurch einen greifbaren Vorteil hätten. Die Frage ist ob du das wirklich willst.

Gruss

MrMurphy

MrMurphy · 4. März 2016

Hallo

Welchen IE meinst du?

Es ist immer ärgerlig wenn Fragesteller mit dem IE nicht zurechtkommen und sich später rausstellt, dass sie vollkommen veraltete Versionen meinen, die überhaupt nicht mehr berücksichtigt werden müssen.

Und hast du mal ein Beispiel? Es gibt veschiedene Arten Schriften einzubinden und alle funktionieren mit Links.

Gruss

MrMurphy

MrMurphy · 2. März 2016

Hallo

Verwende zukünftig bitte die für Quelltext vorgesehenen Code-Tags.

In dem von dir genannten Quelltext kannst du zum Beispiel

Code

background-position:left center;

durch

Code

background-position:left 14px;

ersetzen.

Gruss

MrMurphy

MrMurphy · 28. Februar 2016

Hallo

Es wäre schön wenn du dir bei der Fragestellung etwas mehr Mühe geben würdest.

Zum einen gehört der Quellcode in die dafür vorgesehen code-Tags.

Zum anderen gehe ich davon aus, das du dir mit

Code

<head>list-style:none;
padding:15px 26px;
background:#003366;
color:#ffffff;

einfach keine Mühe gegeben hast. Ich gehe schon davon aus dass du selbst weißt, das so ein Code sachlich falsch ist.

Erstelle bitte aus deinem veröffentlichen Quellcode immer selbst eine Datei um zu prüfen, ob du uns den Quelltext wirklich zumuten willst. So können wir dein Problem nicht nachvollziehen.

Das wird mit deinem Problem zwar nichts zu tun haben, aber: Du solltest heutzutage grundsätzlich HTML5 und CSS3 verwenden, grade für neue Seiten. HTML4, XHTML1 und CSS2.1 sind veraltet.

Gruss

MrMurphy

MrMurphy · 27. Februar 2016

Hallo

Aus deiner bisherigen Problembeschreibung geht leider nicht hervor, wie das Layout aussehen soll. Quellcodeschnipsel sind für eine konkrete Hilfe in der Regel auch nicht ausreichend. Zumal wenn es auch um Grafiken geht, diese uns aber nicht vorliegen.

Nach deiner bisherigen Beschreibung sind eher die dafür vorgesehenen figure- und figcaption-Elemente geeignet. Als umgebendes Element zum Beispiel ein section-Element. Das lässt sich aber nur im Zusammenhang mit der kompletten Seite beurteilen. Der Quelltext im body-Bereich könnte dann so aussehen:

Code

<body>
   <section>
      <figure class="inhalt">
         <img src="http://lorempixel.com/300/150/transport/2" alt="kleines Flugzeug" />
         <figcaption>Hier sollte ein Text und ein <a href="#">Link </a>herkommen</figcaption>
      </figure>
      <figure class="inhalt">
         <img src="http://lorempixel.com/300/150/transport/2" alt="kleines Flugzeug" />
         <figcaption>Auch hier soll der Text erscheinen mit einem <a href="#">Link</a>welcher nicht größer als die vorgegebene Box sein darf denn sonst wandert das Div in </figcaption>
      </figure>
      <figure class="inhalt">
         <img src="http://lorempixel.com/300/150/transport/2" alt="kleines Flugzeug" />
         <figcaption>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. 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 <a href="#">LINK</a>gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</figcaption>
      </figure>
      <figure>
         <img src="http://lorempixel.com/300/150/transport/2" alt="kleines Flugzeug" />
      </figure>
   </section>
</body>

Alles anzeigen

Die Ausrichtung der Elemente kann mittels CSS mit dem Flexbox-Modell erreicht werden. Aber wie schon geschrieben ist zumindest mir noch nicht klar, was du im Endeffekt erreichen möchtest. Wenn du keine unrealistischen Wünsche hast kann ich dir wahrscheinlich auch ein CSS-Beispiel erstellen.

Gruss

MrMurphy

MrMurphy · 25. Februar 2016

Hallo

Opacity beinflusst grundsätzlich alle Nachfahrelmente und kann in denen nicht "ausgeschaltet" werden.

Siehe auch

http://www.html-seminar.de/css3-opacity-deckkraft.htm

Gruss

MrMurphy

MrMurphy · 24. Februar 2016

Hallo

Zitat

Oder geht das nicht?

Doch, das geht.

Allerdings befürchte ich, dass du noch vollkommen falsche Vorstellungen über die Erstellung einer Webseite hast und dir eine Lösung deshalb nicht unbedingt weiterhelfen wird. Lösungen können nur im Gesamtzusammenhang funktionieren und deine Seite soll wahrscheinlich noch mehr Informationen enthalten.

Mit deinen bisherigen Informationen könnte eine Lösung zum Beispiel so aussehen.

Das HTML:

Code

<body>
   <header>
      <figure>
         <img src="http://www.projektwoelke.lima-city.de/bilder/ueberschrift.jpg" alt="Logo Fahrradhandel">
      </figure>
   </header>
</body>

Das entscheidende CSS:

Code

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




   @media all {
      body {
         height: 100%;
         min-height: 100vh;
         padding: 2vw;
      }
      body>header {
         background-image: url(http://www.projektwoelke.lima-city.de/bilder/blank.png);
         background-size: 100% 100%;
         position: relative;
         /*width und height müssen den Proportionen des background-image entsprechen*/
         width: 96vw;
         height: 64vw;
         border-top: 1px solid transparent; /*Collapsing margins*/
      }
      figure:nth-child(1) {
         position: absolute;
         width: 20%;
         left: 10%;
         top: 19.3%;
      }
   }

Alles anzeigen

Und eine gesamte Seite, deren Quellcode eins zu eins übernommen werden kann:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Grafik anordnen 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>




   /*Meine persönlichen Grundeinstellungen für alle Seiten*/
   @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: Sans-Serif;
         font-size: 120%;
      }
      body {
         margin: 0;
      }
   }




   /* ==================================================== */
   /* ***Ab hier beginnen die Angaben zur Problemlösung*** */




   /*Spezielle Einstellungen*/




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




   @media all {
      body {
         height: 100%;
         min-height: 100vh;
         padding: 2vw;
      }
      body>header {
         background-image: url(http://www.projektwoelke.lima-city.de/bilder/blank.png);
         background-size: 100% 100%;
         position: relative;
         /*width und height müssen den Proportionen des background-image entsprechen*/
         width: 96vw;
         height: 64vw;
         border-top: 1px solid transparent; /*Collapsing margins*/
      }
      figure:nth-child(1) {
         position: absolute;
         width: 20%;
         left: 10%;
         top: 19.3%;
      }
   }




   /* ***       Ende der Angaben zur Problemlösung***       */
   /* ===================================================== */




   /* Vorlage zum Kopieren für Media Queries */
   @media only screen and (max-width: 0px) {
   }
   </style>
</head>
<body>
   <header>
      <figure>
         <img src="http://www.projektwoelke.lima-city.de/bilder/ueberschrift.jpg" alt="Logo Fahrradhandel">
      </figure>
   </header>
</body>
</html>

Alles anzeigen

Siehe auch:

https://www.html.de/threads/pr…bei-positionierung.55666/

Gruss

MrMurphy

MrMurphy · 12. Februar 2016

Hallo

Du hast den Link zu der Seite vergessen.

Gruss

MrMurphy

MrMurphy · 12. Februar 2016

Hallo

Firefox und Opera melden mir bei deinem Link Malware-Angriffe. Was soll das?

Gruss

MrMurphy

Beiträge von MrMurphy

Tabelle in 2 Farben darstellen

Tabelle in 2 Farben darstellen

Link: Schriftgröße und -formatierung ändern

Grundstruktur für eine Webseite selbst Designen funktioniert einfach nicht, warum?

CSS-Vorgaben für @media print greifen nur teilweise

Footer Problem

Variable Anpassung an Inhalt von 2 DIVs ineinander

HTML5 korrekte Auszeichnung von Bildboxen mit Infotexr

Direkt im HTML-Code eingebundene SVG verändert die Größe der Nav

Direkt im HTML-Code eingebundene SVG verändert die Größe der Nav

Fullscreen zu Fullscreen - Scrollen mit Sprüngen. Geht das?

Sticky Nav nach Scroll, ohne Java! - wie einbauen?

Einbindung externer Schriften im IE

Ausrichtung von Aufzählungszeichen in Listen

Horizontales Menü wird in verschiedenen Browsern mit unterschiedlicher Höhe angezeigt

IMG Tags von DIV Tags umschlungen

Opacity wirkt weiter als erwünscht

Positionierung zueinander

Hintergrundbilder in mobilen Versionen fixieren

HP zentrieren auf mobilen Endgeräten