Beiträge von MrMurphy

Hallo,

seit wann sind 800px ein Kriterium um mobile Geräte zu erkennen?

Gruss

MrMurphy

Hallo,

dein HTML- und CSS-Code ist leider antik, um es mal freundlich auszudrücken. Den solltest du insgesamt aufräumen und überarbeiten. Meine Erklärungen werden dir deshalb wahrscheinlich nur bedingt weiterhelfen.

Zitat

Verstehe den Abstand vor dem ersten Button (Home) nicht

Das li-Element ist bereiter als sein Inhalt. Durch das Zentrieren des Textes ( text-align: center ) hat er rechts und links jeweils innerhalb des li-Elements den gleichen Abstand, also auch links. Heißt: Das li-Element befindet sich links, sein Inhalt durch die Zentrierung hingegen nicht.

Zitat

bei "position: relative" reagiert right-Position wie links. Pickt nie bei "right:0px;" am rechten Rand (müsste vom "div id="wrapper"" kommen)

Hier fehlt dir Grundlagenwissen. Bei position:absolute reagiert right anders als bei position:relative, da die betroffenen Elemente sich unterschiedlich verhalten.

Bei position:relative geht right von der aktuellen Position aus. Gib mal right:-10rem ein und dann auch andere Werte. Dann solltest du das Verhalten erkennen. Zum Ausrichten am rechten Rand beziehungsweise rechts ist das weder gedacht noch geeignet. Dafür sind float oder aktuell Flexbox erdacht worden.

Gruss

MrMurphy

Hallo,

das habe ich befürchtet. Ohne Grundlagenwissen deinerseits ist es kaum möglich dir zu helfen. Das läuft im Endeffekt darauf hinaus, dass wir für dich die ganze Arbeit machen. Zeitlich sogar noch mehr, da wir dir mehr oder weniger jeden Tastendruck erklären müssen. Das geht über Hilfe zur Selbsthilfe weit hinaus.

Zumal:

So ein Template kauft man auch nicht, wenn man nur hin- und wieder ein paar Sachen bei Ebay verkaufen will. Meinem Gefühl nach willst du bei Ebay mehr oder weniger gewerblich unterwegs sein. Dann solltest du unsere kostenlose Hilfe auch nicht ausnutzen.

Gruss

MrMurphy

Hallo

wie gut kennst du dich denn überhaupt mit

a) HTML

b) CSS

c) Bootstrap

aus?

Bei dem Template bekomme ich insgesamt Augenkrebs. Der Kontrast zwischen Schrift und Hintergrund ist ungenügend und die Textschatten machen alles noch schlimmer.

Kennst du die Möglichkeit das Layout im Browser zu untersuchen? Beim Firefox zum Beispiel rechte Maustaste und dann "Element untersuchen".

Gruss

MrMurphy

Hallo

Die Einheit rem ist auch in Ordnung und für Schriftgrößen am sinnvollsten.

Dann kannst du die Schriftgröße mit den MediaQueries ändern.

Wenn die Schriftgröße im div#home2 bei 800px-Fensterbreite kleiner werden soll kannst du am Ende der CSS-Datei folgendes einfügen:

@media only screen and (max-width: 800px) {
   #home2 {
      font-size: 0.7rem;
   }
}

Zitat

Und uns wurde gesagt ...

Ich kann nur auf die Informationen antworten, die du mir mitteilst. Gleiches gilt für

Zitat

Warum verkleinert sich meine Schrift trotzdem nicht?

Dazu musst du schon mitteilen was du überhaupt geändert hast.

Gruss

MrMurphy

Hallo

das hatte ich befürchtet.

Responsive Design soll die Seiten benutzerfreundlicher machen.

Bei kleinen Bildschirmen muss dazu die Schrift deshalb eher etwas größer werden. Du solltest also noch mal in dich gehen bevor du dein benutzerunfreundliches Vorhaben umsetzt.

Technisch gibt es zwei Möglichkeiten, die auch kombiniert werden können:

1. Die Schriftgröße wird in vw angegeben.

2. Die Schriftgröße wird über MediaQueries beeinflußt.

Gruss

MrMurphy

Hallo,

wie soll die Schrift sich denn verhalten? "nicht responsive" sagt nicht aus was du erreichen möchtest.

Gruss

MrMurphy

Hallo

Im IE hast du dir die Seite wohl noch nicht angeschaut?

Kurz und knapp: Der Quelltext ist Schrott.

Du mißbrauchst eine Tabelle zum Layouten. Tabellen sind nur für Tabellendaten gedacht. Entsprechend funktionieren sie nicht in allen Browsern für ein pixelgenaues Layout.

Der HTML-Datei fehlt der Doctype. Damit bekommt im Grunde jeder Browser die Freiheit zu entscheiden, nach welchen Regeln er die HTML-Datei anzeigen darf.

Die Datei ist mit der Textcodierung "Windows-1252" gespeichert, in den Metaangaben wird jedoch "charset=iso-8859-1" vorgegeben. Beide sollten jedoch übereinstimmen. Bereits seit Jahren ist UTF-8 am sinnvollsten.

Das CSS im head-Bereich ist durch HTML-Kommentare umschlossen.

Statt CSS werden absolut veraltete Inline-Attribute verwendet.

Für die Bilder wird position:absolute offensichtlich ohne das notwendige Hintergrundwissen eingesetzt.

Und so weiter, und so weiter, und so weiter ...

Empfehlung: Abreißen und neu machen - ohne Tabelle.

Gruss

MrMurphy

Hallo

Zitat

kann man es irgendwo zuverlässig testen, ob die Flex-Box auf Ipad und Iphone funktionieren?

Dazu hat sich Erweiterung meines ersten Beitrag mit deiner Antwort überschnitten.

Wenn Webseiten im Chrome UND im Opera funktionieren dann erfahrungsgemäß auch im Safari.

Für iPhone und iPad gibt es zudem Online-Simulatoren. Mit denen kannst du unter Windows Webseiten zusätzlich testen.

http://www.testiphone.com/

http://www.alexw.me/ipad2/#!safari

Gruss

MrMurphy

Hallo,

welche Version von Safari unter welchem Betriebssystem benutzt du denn?

Die Entwicklung von Safari für Windows wurde bereits vor drei Jahren eingestellt. Die damalige Version hat Flexbox noch nicht unterstützt. Die eignet sich zum Testen von daher nicht und die Verbreitung war so gering, dass sie nicht berücksichtigt werden muss.

Safari, Chrome und Opera weisen zwar geringe Unterschiede auf, basieren aber auf derselben Grundlage. Wenn Seiten in Chrome und Opera funktionieren, funktionieren sie erfahrungsgemäß auch in Safari.

Gruss

MrMurphy

Vielleicht das niemand so lange Wörter ohne Leerzeichen wie deinen Testtext schreibt?

Hallo

wie wäre es mit ein paar Leerzeichen?

Gruss

MrMurphy

Hallo

Zitat

da hat sich aber einiges getan

Stimmt. Das hat Nach- und Vorteile. Die Webseitenersteller müssen zusätzliche Elemente und Anweisungen lernen. In Fällen wie deinen erspart man sich dafür die große Bearbeitung von Bildern und spätere Änderungen sind einfacher möglich.

Zitat

Wie hast die die Schrift so hin bekommen?

Das sind nur einige wenige CSS-Anweisungen. Der zu kippende Text muss im HTML-Quelltext in einem Container stehen, der durch die beiden folgenden CSS-Anweisungen perspektivisch gekippt wird:

transform-origin: 50% 100%;
transform: perspective(300px) rotateX(25deg);

Zum Testen was welcher Wert bewirkt kannst du ja einfach mal die Werte ändern.

Gruss

MrMurphy

Hallo,

du meinst wahrscheinlich Guillemets.

Da gibt es jeweils zwei Möglichkeiten in HTML: Entweder per HTML-Entity oder mittels Tastencode.

Siehe

http://www.gemeinde-michendorf.de/homepage/8sonstiges/entity.php

und

http://www.die-tastenkombination.de/tastenkuerzel-…s-chevrons.html

Gruss

MrMurphy

Hallo

Zitat

Auf diese Art eine Seite zu gestalten bin ich über dieses Video gekommen.

Das hat mit aktuellem HTML / CSS nichts zu tun. Um die Jahrtausendwende war das mal in Mode, als Tabellen- und danach fixe Layouts "Stand der Technik" waren.

Seit etwa 10 Jahren gilt aber die Regel, dass Text auch im Quelltext Text sein soll. Andere Lösungen haben zu viele Nachteile.

Mit CSS3 wurden die Möglichkeiten in dieser Hinsicht noch mal kräftig erweitert. Für eine Darstellung wie bei deiner Grafik ist es nicht mehr erforderlich, den Text mit einem Grafikprogramm zu erstellen.

Die Optik mag dann zwar leicht anders sein, das interessiert aber keinen Besucher.

Ich habe mal auf die Schnelle ein Beispiel mit einer Bildgröße wie dein Beispiel erstellt. Da das gesamte Layout mit CSS erstellt ist können Schriftarten, Farben, Abstände und und und natürlich noch angepasst werden - ohne zu einem Grafikprogramm geifen zu müssen:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Layout mit Hintergrundgrafik 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);
   @import url(https://fonts.googleapis.com/css?family=Asap);
   @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%; /*für die Einheit rem, mit der ich gerne arbeite*/
      }
      body {
         margin: 0;
      }
   }


   /*Farben, Text-Shadow, Box-Shadow*/
   @media all {
      nav {
         background-color: hsla(360,0%,100%, 0.4);
      }
      nav a {
         color: #4d75a6;
         background-color: white;
      }
      main h1 {
         color: lightsteelblue;
         text-shadow:
            1px  1px 1px white,
            1px -1px 1px white,
            -1px  1px 1px white,
            -1px -1px 1px white;
      }
      main >div p {
         color: ivory;
         text-shadow:
            -1px 1px 1px silver;
      }
      footer {
         background-color: hsla(360,0%,100%, 0.3);
      }
      footer a {
         color: #41464c;
         background-color: hsla(208,100%,97%, 0.8);
      }
   }


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


   /*Spezielle Einstellungen*/
   @media all {
      body > div {
         background-image: url(http://www.torange-de.com/photo/21/16/Yacht-Segeln-am-Meer-1365151788_32.jpg);
         background-size: cover;
         width: 768px;
         height: 600px;
      }
      nav {
         padding: 0.5rem 0.5rem;
         border-radius: 0.5rem;
         margin-top: 1rem;
         margin-right: 1rem;
      }
      nav a {
         font-size: 1.2rem;
         font-weight: bold;
         text-decoration: none;
         outline: none;
         padding: 0 0.5rem;
         border-radius: 0.4rem;
         margin-right: 0.8rem;
      }
      nav a:last-child {
         margin-right: 0;
      }
      main h1 {
         font-size: 3rem;
         font-family: Asap;
         font-weight: bold;
         margin-top: 5rem;
         margin-left: 5rem;
         margin-bottom: 0;
      }
      main div {
         transform-origin: 50% 100%;
         transform: perspective(300px) rotateX(25deg);
         width: 70%;
         margin-left: 10%;
         margin-top: -4rem;
      }
      main > div p {
         font-family: Asap;
         font-size: 1.3rem;
      }
      footer {
         padding: 0.5rem 0.5rem;
         border-radius: 0.5rem;
         margin-bottom: 1rem;
         margin-right: 1rem;
         align-self: center;
      }
      footer a {
         font-size: 1.2rem;
         font-weight: bold;
         text-decoration: none;
         outline: none;
         padding: 0 1.5rem;
         border-radius: 0.4rem;
         margin-right: 1rem;
      }
      footer a:last-child {
         margin-right: 0;
      }
   }


   /*Flexbox Grundlayout*/
   @media all {
      body > div {
         display: flex;
         flex-direction: column;
      }
      nav {
         align-self: flex-end;
      }
      main {
         flex: 1 1 1%;
      }
   }


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


   /* Vorlage zum Kopieren für Media Queries */
   @media only screen and (max-width: 0px) {
   }
   </style>
</head>
<body>
   <div>
      <nav>
         <a href="#">Home</a>
         <a href="#">Foto</a>
         <a href="#">Kontakt</a>
         <a href="#">Sport</a>
      </nav>
      <main>
         <h1>Fotografie</h1>
         <div>
            <p>Hallo</p>
            <p>Mit seiner Aufnahme in die Elite war Knechts Leben auf eine andre Ebene verpflanzt, es war der erste und entscheidende Schritt in seiner Entwicklung geschehen. Es geht durchaus nicht allen Eliteschülern so, daß die amtliche Aufnahme in die Elite mit dem innern Erlebnis der Berufung zusammenfällt. Das ist Gnade, oder wenn man es banal ausdrücken will: es ist ein Glücksfall.</p>
         </div>
      </main>
      <footer>
         <a href="#">Gästebuch</a>
         <a href="#">Impressum</a>
      </footer>
   </div>
</body>
</html>

Gruss

MrMurphy

Hallo,

innerhalb einer ul-Liste gibt es zum Beispiel folgende Möglichkeit:

ul :nth-child(15n+1),
ul :nth-child(15n+2),
ul :nth-child(15n+3),
ul :nth-child(15n+4),
ul :nth-child(15n+5) {
   background-color: green;
}
ul :nth-child(15n+6),
ul :nth-child(15n+7),
ul :nth-child(15n+8),
ul :nth-child(15n+9),
ul :nth-child(15n+10) {
   background-color: blue;
}
ul :nth-child(15n+11),
ul :nth-child(15n+12),
ul :nth-child(15n+13),
ul :nth-child(15n+14),
ul :nth-child(15n+15) {
   background-color: red;
}

Gruss

MrMurphy

Hallo

wie viele Einträge in der Liste werden es denn maximal?

Dürfen (oder sogar sollen) sich die Farben wiederholen? Wenn ja, wie viele Farben sollen verwendet werden?

Gruss

MrMurphy

Hallo,

einfach mal das folgende div außerhalb des bereits vorhandenen div hinzufügen. Das rote, recht kleine, div befindet sich dann innerhalb des verweisintensiven Bereichs, der mit einer Höhe von 25px und einer Breite von 61px, wie schon geschrieben, recht klein ist:

<div style="background-color: red; position: absolute; width: 5px; height: 5px; left: 91px; top: 385px;"></div>

Gruss

MrMurphy

Hallo

Das bedeutet immer, dass die ersten beiden Zahlen x1 und y1 zwangsläufig kleiner als das zweite Zahlenpaar sein muss.

Hinweis: Nein, welche Ecke zuerst angegeben wird ist egal.

Gruss

MrMurphy

Hallo

Zitat

Leider funktioniert es immer noch nicht.

Doch, das funktioniert. Allerdings hast du zwei Probleme "eingebaut".

1. Die verweisintensive Fläche ist sehr klein.

2. Die Koordinaten für die verweisintensive Fläche sind absolut, die Bildgröße (100% Breite und Höhe) ist aber relativ. Als Ergebnis wandert die verweisintensive Fläche je nach Fenstergröße des Browsers, dem sogenannten Viewport, über das Bild.

Genauer: Die verweisintensive Fläche bleibt immer am gleichen Fleck, die Grafik darunter verschiebt sich.

Verweisintensive Grafiken sollten also eher bei festen Bildgrößen verwendet werden.

Gruss

MrMurphy