Beiträge von MrMurphy

Hallo,

die Frage lässt sich nicht so einfach beantworten.

Das Hauptproblem ist die rechtliche Seite. Du darfst auf fremde Seiten so verlinken, dass sie sich in einem neuen Tab oder neuen Fenster öffnen.

Den Inhalt einer fremden Seite in deine Seite einzubinden, so dass für Besucher nicht mehr erkennbar ist, dass es sich um fremden Inhalt handelt, ist verboten und eine Straftat.

Deshalb musst du dich mit dem Betreiber der Fremdseite in Verbindung setzen und mit ihm klären, ob und wie du seinen Inhalt übernehmen kannst.

Technisch hängt die Datenübernahme von deiner Seite und der Fremdseite ab. Die müssten wir also schon beide kennen um dir direkt helfen zu können.

Gruss

MrMurphy

Hallo,

das letzte Semikolon eines CSS-Anweisungsblocks kann wohl weggelassen werden. Also das Semikolon direkt vor der schließenden Klammer.

In deinem zweiten Beispiel sollte also auch das Weglassen des Semikolons hinter dem dotted keine Auswirkungen haben. Entsprechend kann das Semikolon bei einer einzelnen CSS-Anweisung, wie in deinem ersten Beispiel, auch weggelassen werden.

Ich habe mir allerdings angewöhnt hinter jeder CSS-Anweisung ein Semikolon zu setzen. So gibt es keine Probleme wenn ich die CSS-Anweisungen umsortiere oder zum Schluß neue hinzufüge.

Mit der border-Funktion hat das nichts zu tun, das gilt für alle CSS Anweisungen.

Gruss

MrMurphy

Hallo,

dann kannst du leider auch nichts anpassen. Wobei mir nicht bekannt ist, das ein Homepagebaukasten den Zugriff per FTP verbietet.

Ich weiß leider auch nicht wie so ein Homepage-Baukasten von 1&1 funktioniert. Wenn der keine individuellen Anpassungen zulässt musst du halt mit dem Vorhandenen leben.

Gruss

MrMurphy

Hallo,

du kannst du allgemeinen Angaben der a-Elemente mit denen der h2-Überschrift überschreiben, in dem du in deiner css-Datei z. B. folgendes hinzufügst:

h2>a {
color: blue;
text-decoration: underline;
}

Gruss

MrMurphy

Hallo,

du greifst in die Höhenverhältnisse mit height ein anstatt das wie vorgesehen den Browsern zu überlassen.

Der header hat eine Höhe von 150px, die beiden Überschriften sind jedoch höher.

Die Höhe der Überschriften (und aller anderen Block-Elemente) setzt sich aus der eigentlichen Höhe und den Außenabständen padding, border und margin zusammen. Wenn padding und margin nicht angegeben sind wird von den Browsern ein eigener Abstand hinzugefügt.

Wenn du bei h1 und h2 padding und margin, jeweils zumindest oben und unten, auf Null setzt passen sie auch in den header.

Wenn du die Höhe von Containern eingrenzt musst du also immer auch dafür sorgen, das der Inhalt überhaupt hineinpasst.

Gruss

MrMurphy

Hallo,

du öffnest zwei div, schließt aber nur eins.

Und beim header h2 fehlt die schließende Klammer.

Das ist aber nicht die Ursache des Problems.

Wenn du aus deinen eigenen hier veröffentlichten Quelltextschnipseln eine Webseite erstellst (und border oder eine Hintergrundfarbe hinzufügst) wirst du feststellen, das h1 und h2 innerhalb des headers dargestellt werden. Also so, wie es sein soll. Das Problem liegt also in dem Quelltext (HTML oder CSS) den du uns unsinnigerweise verheimlichst.

So ist eine Hilfe durch uns leider nicht möglich.

Gruss

MrMurphy

Hallo

Zitat

ich sehe teilweise Begriffe in dem Code, die ich noch nie gesehen habe

Kann ich nachvollziehen, mit HTML5 / CSS3 gab es einen ähnlichen Entwicklungssprung wie im Jahr 2000 mit der Einführung von HTML4 und CSS2. Um die neuen Möglichkeiten zu nutzen muss man sie natürlich lernen und ihre Eigenarten kennen.

Insgesamt sind damit viele Probleme leichter zu lösen, für die früher mühsam rumgetrickst werden musste. Dies gilt grade in Bezug auf die "neuen kleinen" Bildschirmgrößen von Smartphones und Tablets. Oder auch beim Sticky Footer.

Wer sich den Möglichkeiten von HTML5 und CSS3 verschließt hat die Zukunft schon verschlafen. Das ist die Realität, auch wenn viele Webseitenersteller das mit für Experten eher albernen Ausreden (IE 8 und ähnliches) leugnen.

Jeder kann sich seine Seiten natürlich selbst erstellen. Er sollte sich dann aber auch bewußt sein, das er keine Begeisterungsstürme ernten wird und viele Möglichkeiten entweder gar nicht genutzt werden können oder zusätzlichen Aufwand erfordern.

Zitat

Aber durch die fest definierte Größe von "850px" was in dem Tutorial notwendig war, ändert er mir jetzt auch den header auf diese Größe, ich hoffe ihr versteht ein bisschen was ich meine. Hab das gleiche eigentlich auch mit dem Footer vor

Das war bei mir in den ganzen Beiträgen untergegangen. header, nav und footer sollen also 100%-Breite haben, der Inhaltsbereich aber "nur" 850px breit sein. Ich habe mal so ein Layout erstellt:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Layout 02</title>
   <meta name="description" content="Überschrift mit Hintergrundbild">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
   /* Hack für IE 10 und IE 11 */
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      html {
         height: 100%;
      }
   }
   @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);




   /*Grundeinstellungen*/
   @media all {
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
         font-size: 100%;
      }
      body {
         height: 100%;
         min-height: 100vh;
         padding: 0;
         margin: 0;
         display: -ms-flexbox;
         display: flex;
         -ms-flex-direction: column;
         flex-direction: column;
      }
      header,
      main,
      footer {
         padding: 0;
         margin: 0;
      }
      main {
         flex: 1;
         -ms-flex: 1 0 auto; /* Für alle IE, muss hinter "flex: 1;" stehen */
      }
   }




   @media all {
      header {
         background-image: linear-gradient(to bottom, #2381f6 0%, #023d85 100%);
         padding: 0;
      }
      header h2 {
         /*background-color: green;*/
         color: white;
         /*background-image: url("john_raider_header_02.png");*/
         background-size: 20px;
         padding: 2rem 1rem;
         margin: 0;
      }
      nav {
         background-color: #303030;
         box-shadow: 0 5px 10px darkslategray;
         z-index: 1; /*wegen box-shadow*/
         padding: 0.5rem;
         border-top: 1px solid silver;
         border-bottom: 1px solid silver;
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
      }
      nav a {
         display: block;
         color: white;
         text-decoration: none;
         font-variant: small-caps;
         padding: 0 1rem;
      }
      nav a:hover {
         color: white;
      }
      main {
         background-color: brown;
         width: 850px;
         margin: 0 auto;
      }
      main article {
         padding: 0 1rem;
      }
      footer {
         background-color: aqua;
      }
      footer p {
         text-align: center;
      }
   }




   @media only screen and (max-width: 1000px) {
      body {
         margin: 0;
      }
   }
   @media only screen and (max-width: 850px) {
      main {
         width: 100%;
      }
   }
   @media only screen and (max-width: 550px) {
      nav>* {
         flex: 1 0 40%;
      }
   }




   /* Vorlage zum Kopieren für Media-Query */
   @media only screen and (max-width: 0px) {
   }




   </style>
</head>
<body>
   <header>
      <h2>Seitentitel</h2>
   </header>
   <nav>
      <a href="#">Home</a>
      <a href="#">Referenzen</a>
      <a href="#">Kontakt</a>
      <a href="#">Service</a>
   </nav>
   <main>
      <article>
         <h2>Inhalt</h2>
         <p>Inhalt</p>    
         <p>Inhalt</p>
         <p>letzte Zeile vom inhalt</p>
      </article>
   </main>
   <footer>
      <p>ww.html-seminar.de</p>
   </footer>
</body>
</html>

Hallo,

meinst du so:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Obere linke Ecke</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%;
         line-height: 0.8;
      }
      body {
         margin: 0;
      }
      ul {
         height : 50px;
         width : 100px;
         color : #575757;
         margin: 0;
         padding: 0;
      }
      ul li {
         list-style-type: none;
         padding: 0 0 5px 0;
      }
   }
   </style>
</head>
<body>
   <ul>
      <li>Coffee</li>
      <li>tee</li>
      <li>wasser</li>
   </ul>
</body>
</html>

Verzichte auf "position: absolute;" und negative Abstandswerte - da kommt nur Stress rüber.

Gruss

MrMurphy

Hallo

Zitat

Ich hab mir das auf html-seminar jetzt schon ein paar mal angeschaut, dennoch komme ich damit irgendwie nicht so ganz zurecht,

Ist auch nicht optimal zum lernen. Umsonst gibt es halt höchstens Durchschnitt.

Zitat

ich bräuchte einfach mal ein Beispiel anhand meiner Sachen

Foren sind eher als Hilfe zur Selbsthilfe gedacht. Und ob dir ein Beispiel ohne Grundlagenwissen weiterhilft?

Ich habe trotzdem mal ein Beispiel mit etwas Responsive Design erstellt. Obwohl es eher sinnfrei ist Webseiten ohne Inhalt zu erstellen.

Abstände, Farben u.s.w. können natürlich noch angepasst werden. Für die Praxis sollten für ein paar CSS-Angaben noch Prefixe vergeben werden, aber dafür gibt es Seiten, die das mehr oder weniger automatisch erledigen.

Ansonsten ist es eine sinnvolle Grundlage mit aktuellem HTML5 / CSS3:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Layout 02</title>
   <meta name="description" content="Überschrift mit Hintergrundbild">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
   /* Hack für IE 10 und IE 11 */
   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      html {
         height: 100%;
      }
   }
   @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);




   /*Grundeinstellungen*/
   @media all {
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
         font-size: 100%;
      }
      body {
         height: 100%;
         min-height: 100vh;
         padding: 0;
         margin: 0 15%;
         display: -ms-flexbox;
         display: flex;
         -ms-flex-direction: column;
         flex-direction: column;
      }
      header,
      main,
      footer {
         padding: 0;
         margin: 0;
      }
      main {
         flex: 1;
         -ms-flex: 1 0 auto; /* Für alle IE, muss hinter "flex: 1;" stehen */
      }
   }




   @media all {
      header {
         background-image: linear-gradient(to bottom, #2381f6 0%, #023d85 100%);
         z-index: 20;
      }
      header h2 {
         padding: 1rem;
      }
      nav {
         background-color: #303030;
         box-shadow: 0 5px 10px darkslategray;
         padding: 0.5rem;
         border-top: 1px solid silver;
         border-bottom: 1px solid silver;
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
      }
      nav a {
         display: block;
         color: white;
         text-decoration: none;
         font-variant: small-caps;
         padding: 0 1rem;
      }
      nav a:hover {
         color: white;
      }
      main {
         background-color: brown;
         /*margin-top: 5px;*/
         z-index: 10;
      }
      main article {
         padding: 0 1rem;
      }
      footer {
         background-color: aqua;
      }
      footer p {
         text-align: center;
      }
   }




   @media only screen and (max-width: 1000px) {
      body {
         margin: 0;
      }
   }




   @media only screen and (max-width: 550px) {
      nav>* {
         flex: 1 0 40%;
      }




   }
   </style>
</head>
<body>
   <header>
      <h2>Seitentitel</h2>
      <nav>
         <a href="#">Home</a>
         <a href="#">Referenzen</a>
         <a href="#">Kontakt</a>
         <a href="#">Service</a>
      </nav>
   </header>
   <main>
      <article>
         <h2>Inhalt</h2>
         <p>Inhalt</p>    
         <p>Inhalt</p>
         <p>letzte Zeile vom inhalt</p>
      </article>
   </main>
   <footer>
      <p>ww.html-seminar.de</p>
   </footer>
</body>
</html>

Gruss

MrMurphy

Hallo

Zitat

Zudem hab ich einen Header, bei dem ich bezweifel, dass man den komplett nur über CSS erstellen kann.

Eine veraltete Vorstellung. Niemand besucht eine Seite wegen ihres Layouts. Entscheidend ist nur der Inhalt. Ob der Header wie mit Photoshop aussieht oder nur ähnlich oder ganz anders interessiert die Besucher kein bißchen.

Das beste Layout ist jenes, welches von den Besuchern überhaupt nicht wahrgenommen wird. Wahrgenommen wird es nämlich nur wenn es stört oder sogar nervt.

Gruss

MrMurphy

Hallo,

wir haben keinen Zugriff auf deine Grafiken, können also nicht wissen, was du erreichen willst. Du musst uns die Grafiken also zeigen.

Zitat

aber würde natürlich gerne besser, bzw. neuerer arbeiten wollen.

Dann solltest du dich mit HTML5 und CSS3 beschäftigen.

So soll zum Beispiel die Höhe von Containern nicht festgelegt werden, sondern sich dem Inhalt anpassen.

Die Breite einer Webseite soll sich der Fensterbreite anpassen und auch nicht starr festgelegt werden.

Gruss

MrMurphy

Hallo

Zitat

sogar aus mehreren "Div's" d.h. zum Beispiel den Schatten nochmal als extra "div" usw.

Das Vorgehen ist veraltet, damit kommst du etwa 15 Jahre zu spät. Heutzutage werden der Inhalt und das Layout getrennt, also auch keine unnötigen div erstellt. Deine Krankheit ist auch unter divitis bekannt, die solltest du in Ruhe auskurieren.

Zitat

dass es bessere alternative angeblich zu dem Sticky Footer gibt.

Quatsch. Die Lösung hängt davon ab, was du erreichen willst. Entsprechend kann ein Sticky Footer sinnvoll sein - oder auch nicht. In jedem Fall ist er lediglich ein optisches Gimmick und damit prinzipiell unnötig.

Du gehst nach der veralteten Reihenfolge vor, das Layout vor dem Inhalt zu erstellen. Das hat sich als Irrweg erwiesen.

Erstelle erst den Inhalt und packe ihn in semantisch korrekte HTML-Elemente. Die werden dann anschließend mittels CSS formatiert und dazu noch einige wenige (sehr wenige) Container hinzugefügt.

Gruss

MrMurphy

Hallo

Zitat

Gibt es da eine Sammlung, auf die ihr achtet oder irgendwas ähnliches?

Nein. Ich habe schlicht die Grundlagen gelernt (aktuell HTML5 / CSS3) sowie mich mit Responsive Design und Media Queries beschäftigt und wende sie an. Also ganz klassisch.

Gruss

MrMurphy

Hallo,

mit deinem Quellcodeschnipseln ist bei mir alles ok.

Gruss

MrMurphy

Hallo

Zitat

Nennt sich 'drop down' menü

Eher nicht:

Zitat

ich möchte kein Ausklapp-Menü

Zitat

sondern will das "Ausklapp-Menü" sozusagen in das vertikale Menü packen

Diese Frage ist in einem Joomla-Forum besser aufgehoben. Um die Beantworten zu können muss man sich mit Joomla auskennen.

Du musst wahrscheinlich ein Modul erstellen, das dann die vertikale Navigation nur für die gewünschen Seiten enthält.

Gruss

MrMurphy

Hallo

du verzichtest auf feste Breiten wie "width: 820px;".

Das ist in Zeiten von Responsive Design schlicht veraltet. Webseiten haben schlicht keine Größe sondern sollen sich flexibel und dynamisch so anpassen, das ein seitliches Scrollen so weit wie möglich vermieden wird.

Gruss

MrMurphy

Hallo,

die Texte "Höhe Kaution" und "Laufzeit" befinden sich jeweils innerhalb eines strong-Elements, bei dem als Hintergrundfarbe

color: #253F4E !important;

bestimmt ist. Da sich das strong-Element näher am Text als der umgebende div-Container befindet muss du die Schriftfarbe dort auch ändern.

Gruss

MrMurphy

Hallo,

eine konkrete Hilfe ist nicht möglich da wir deine Bilder nicht kennen.

Deine Problembeschreibung ist leider auch nicht eindeutig. Du schreibst von einem Bild und einer Taballe, dein Bild enthält aber zwei Bilder und zwei Tabellen.

Zudem enthalten deine Tabellen keine Tabellendaten und werden damit zum Layouten "mißbraucht". Das ist grundsätzlich falsch.

Die Tabellen sind zusätzlich mit veralteten Attributen wie dem "width"-Attribut gestaltet, die nicht mehr verwendet werden sollen. Auch sollte auf Inline-CSS grundsätzlich verzichtet werden.

Dein Quelltext enthält 33 sachliche Fehler, die bereinigt werden müssen, da sie Auswirkungen auf andere Elemente enthalten können. Um die zu finden kannst du den Quelltext bei

http://validator.w3.org/#validate_by_input

eingeben und prüfen lassen.

Es gibt Regeln die zwar nicht vor- oder festgeschrieben sind, die aber aber trotzdem eingehalten werden sollen. So sollten innerhalb von p-Elementen keine Container wie div-Elemente verwendet werden.

Insgesamt solltest du aber aktuelles HTML und CSS verwenden und auf Tabellen zum Gestalten verzichten.

Gruss

MrMurphy

Hallo,

dafür gibt es wohl nicht so viele Lösungen.

Für Firefox gibt es das AddOn "Dust-Me", das wohl einzelne Dateien als auch ganze Projekte überprüfen kann:

http://seocouch.de/css-dateien-aufraeumen-schnelle-website/

Gruss

MrMurphy

Hallo,

du hast leider offensichtlich ganz falsche Vorstellungen wie eine Webseite benutzerfreundlich erstellt wird.

Das Buch geht aber davon aus, das die Webseitenersteller sinnvolle benutzerfreundliche Seiten erstellen wollen und geht deshalb auf unsinnige Lösungen nicht ein.

So ist es zum Beispiel ein absolutes No-Go Seiten so zu erstellen, das der Besucher seitlich scrollen muss um den Text zu lesen. Von daher sollte auf geschützte Leerzeichen so weit wie möglich verzichtet werden. Sinnvoll sind die nur wenn zusammengehörige Begriffe wie z. B. "3 kg" auch zusammen in einer Zeile stehen sollen.

Weiterhin solltest du bei Test-Texten nur Wörter in der üblichen Länge und nicht unsinnig lange Wörter benutzen. Damit man sich die nicht immer selbst ausdenken muss gibt es im Internet sogenannte Blindtext-Generatoren. Die erzeugen zwar unsinnigen Text, der aber Wörter in den gängigen Längen enthält.

Zu einem float gehört auch immer ein clear. Ich kann mir nicht vorstellen das darauf im Buch nicht eingegangen wird. Durch ein fehlendes clear ergeben sich einige deiner Probleme, da durch float Elemente "aus dem Fluss" genommen werden. Was das bedeutet sollte auch in dem Buch stehen.

Schlechter Stil ist es auch Abstände durch leere Elemente wie

<p></p>
<p>&nbsp;</p>

oder

   

zu erzeugen. Abstände werden grundsätzlich mit CSS erzeugt. Eine der Grundlagen der Trennung von Inhalt und Aussehen ist, das im body-Bereich keine Elemente eingefügt werden die nur dafür gedacht sind das Aussehen der Seite zu ändern.

Ähnliches gilt für das hr-Element. Das ist nicht dazu gedacht optisch eine Linie darzustellen sondern hat eine semantische Bedeutung. Wenn es nicht um die semantische Bedeutung (der Begriff sollte auch im Buch erklärt werden) geht ist das hr-Element auch nicht angebracht.

Gruss

MrMurphy