Beiträge von MrMurphy

Hallo,

mit deinen Quellcodeschnipseln können wir wenig anfangen, der gesamte Quelltext oder ein Link zur Seite wären sinnvoller.

Und welche Software zeigt dir die roten Zeilen an?

Gruss

MrMurphy

Hallo,

das geht nicht mit CSS.

Du kannst eine Grafik erstellen und an der gewünschten Stelle einfügen. Am sinnvollsten erscheint mir eine SVG-Grafik, deren Größe als Vektorgrafik flexibel angepasst werden kann und die auf vielfältige Weise in eine HTML-Datei eingebunden werden kann.

Gruss

MrMurphy

Hallo,

entweder ist die Datei nicht hochgeladen

oder

der Pfadname stimmt nicht

../pics/Kühe.jpg

vs.

Kühe.jpg

oder

der Dateiname macht Probleme, hier das ü

oder

der Dateiname stimmt in Groß-/Kleinschreibung nicht mit der Angabe in der CSS-Datei überein.

Pfad-, Datei- und Ordnernamen sollten nur aus Buchstaben des englischen Alphabets, Zahlen und dem Unterstrich bestehen, das vermeidet viele Probleme im Vorfeld. Noch mehr Probleme werden vermieden wenn von den Buchstaben nur die Kleinbuchstaben verwendet werden, also die Kleinbuchstaben des englischen Alphabets, Zahlen und der Unterstrich.

Gruss

MrMurphy

Hallo

Zitat

Wo habe ich einen Fehler drin?

Dein Grundproblem sind deine veralteten Vorstellungen von HTML und CSS. Mit aktuellem HTML5 und CSS3 hat dein Quelltext leider eher wenig zu tun.

Durch

* {
   margin: 0px;
   padding: 0px;
}

werden alle Abstände auf Null gesetzt. Das war vor 15 Jahren mal angesagt, hat sich aber inzwischen als nachteilig herausgestellt. Die meisten Abstände der Browser-Stylesheets sind durchaus sinnvoll und sollten genutzt werden. Wenn du die Eigenschaften trotzdem behalten willst musst du natürlich alle Abstände mit eigenen Werten belegen.

Andererseits vergibst du unnötigerweise Höhenangaben (height), die das Layout einschränken. Die Höhe von Containern wird durch deren Inhalt bestimmt und soll vom Browser selbst bestimmt werden.

Zitat

bei den Menüpunkten einen Abstand nach oben hinzubekommen

Wenn du dem umgebenden Container .navigation eine Höhe von 2em gibst bleibt bei einer Schriftgröße von 1.5em nur wenig Platz für Abstände. Da du zudem die li-Elemente zu inline-Elementen bestimmst werden die Möglichkeiten Abstände zu bestimmten weiter eingeschränkt. Eine weitere Einschränkung ist das veraltete und überflüssige center-Element.

Von daher ist die gesamte CSS-Konstruktion zu überdenken.

Momentan kannst du nur die Höhe von .navigation vergrößern, zum Beispiel auf 4em und den li-Elementen ein line-height von 4em hinzufügen. Oder halt statt der 4em andere dir passende Werte einsetzen.

Spätestens bei kleineren Fenstern wird dir das Layout aber um die Ohren fliegen.

Durch das setzen von "display: inline;" reagieren die li-Elemente nicht mehr auf Abstände wie padding oder margin.

Insgesamt wäre es sinnvoller das Menü mit "display: block;" zu definieren und die Menüpunkte mit float, oder aktueller flex, nebeneinander zu setzen sowie das height bei .navigation und das center-Element wegzulassen. Dazu benötigst du aber mehr Hintergrundwissen.

Gruss

MrMurphy

Hallo

Zitat

Ich dachte es gäbe eine Möglichkeit diese Liste in einer extra-Datei zu schreiben und dann in allen HTML-Dateien einfach nur einen Verweis zu dieser Datei zu setzen.

Es gibt verschiedene Möglichkeiten, mit denen Anfänger aber häufig überfordert sind, da sie mehr als nur HTML und CSS verlangen.

Aktuell sinnvoll und gebräuchlich:

1. Verwendung eines Content-Management-Systems (CMS) wie zum Beispiel Joomla, die es als Freeware gibt.

oder

2. Verwendung eines Editors der das Auslagern von Seiteninhalten zulässt. Der kostenpflichtige Dreamweaver kann das zum Beispiel. Oder eines Editors der das gleichzeitige Ändern von mehreren Dateien gleichzeitig zulässt wie das kostenpflichtige UltraEdit. Mir sind leider keine Freeware-Editoren bekannt die sowas unterstützen.

oder

3. Die zusätzliche Verwendung der Programmiersprache PHP. Für das Auslagern reichen ein paar einfache Befehle wie include, es muss also nicht die gesamte Sprache gelernt werden.

Bei Joomla oder PHP muss der der Provider allerdings PHP unterstützen. In den billigsten Vertragsstufen ist PHP häufig nicht vorhanden, häufig muss deshalb in einen etwas teueren Vertrag gewechselt werden. Zum Testen reichen aber Freeware-Anbieter wie bplaced.net. Auf dem eigenen Rechner wird ein Webserverprogramm wie XAMPP benötigt, das es als Freeware-Variante gibt.

Von älteren Lösungen wie Framesets kann nur abgeraten werden. Die werden von HTML5 nicht mehr unterstützt.

Gruss

MrMurphy

Hallo

Das geht nicht direkt.

Du musst die Worte in geeignete Inline-Elemente einfügen und kannst die dann mit CSS gestalten. Dazu ist zum Beispiel das span-Element geeignet. Zum Beispiel

<p>Von <span>Microsoft</span> werden keine Updates mehr bereitgestellt.</p>

Das CSS dazu könnte so aussehen:

p span {
   background-color: yellow;
}

Wenn du unterschiedliche Hintergrundfarben verwenden möchtest kannst du den span-Elementen Klassen zu weisen und dazu passende im CSS verwenden.

Gruss

MrMurphy

Hallo

Zitat

Das komische an der Geschichte, dies passiert nur auf der Startseite.

Auf den Unterseiten war bereits bei jedem vierten div ein clear gesetzt um das float global aufzuheben. Auf der Startseite vor deiner Änderung offensichtich nicht.

Für gleichhohe Boxen gibt es flexbox, auch als Flexbox-Modell bekannt. Ich weiß allerdings nicht in wie weit das bei dem von dir verwendeten XHTML 1.0 funktioniert. Da XHTML bereits 2008 offiziell zu Grabe getragen wurde und seitdem nicht mehr weiterentwickelt wird benutze ich es seitdem nicht mehr.

Irgendwann werden auch die Browserhersteller XHTML als unnützen Ballast abwerfen. Das wird zwar noch einige Zeit dauern, trotzdem solltest du dir Gedanken machen mittelfristig auf HTML5 umzusteigen. Zumal auch Google Seiten mit veraltetem HTML4 bzw. XHTML 1.0 bereits abwertet. Das kommt grade für gewerbliche Seiten nicht gut.

Gruss

MrMurphy

Hallo

Zitat

dass das css überhaupt nicht berücksichtigt/angezeigt wird

Dann stimmt in der Regel der Datei- und / oder Pfadname nicht. Das ist deinen Angaben aber nicht zu ernehmen.

Zitat

Bei dem background-image hab ich keinen Plan wie das funktioniert.

Eventuell ist die Ursache dass du keine Dateiendung angegeben hast.

Gruss

MrMurphy

Hallo,

du hast leider falsche Vorstellungen wie in HTML mit CSS Elemente angeordnet werden beziehungweise aufeinander reagieren. Deshalb wäre es am sinnvollsten du würdest erst einmal die Grundlagen lernen.

So werden mit position:absolute Elemente aus dem Fluss einer Webseite genommen und können nicht mehr auf andere Elemente reagieren. Damit ist jede Berechnung sinnlos.

Weiterhin bestimmt sich die Höhe von Elementen aus ihrem Inhalt. Es ist schlechter Stil in Webseiten unnötige Höhenangaben zu machen. Außerdem führt das immer wieder zu Problemen, wenn sich der Inhalt ändert.

Wenn zwei nebeneinanderliegende Spalten gleich hoch werden sollen muss entweder auf "faux column" zurückgegriffen werden oder sie müssen mit dem "Flexbox-Modell" ausgerichtet werden.

Wenn Seiten sich auch bei wenig Inhalt mindestens bis zum unteren Fensterrand erstrecken sollen solltest du nach "sticky footer" suchen.

Ohne grundlegende Änderungen an deinem CSS-Code wird aber keine der Lösungen funktionieren.

Gruss

MrMurphy

Hallo

Zitat

Ich möchte dass außerhalb von diesem Rahmen der Background geändert werden kann ohne dass die Header Sidebar und die überschrift davon abhängig sind. Wie ihr seht ändert sich auch der Inhalt vom Wrapper.

Dann darfst du nicht dem Sternchen ( * ) die Hintergrundfarbe geben. Das ist sowieso schlechter Stil. Sondern dem body.

Das margin und padding beim Sternchen auf Null setzen hat sich auch nicht bewährt und sollte vermieden werden. Viele Abstände, die die Browser von sich mitliefern, sind sinnvoll und können problemlos übernommen werden.

Zitat

Das Menü soll runter bis zum Footer gehn und der Content soll genauso runter bis zum Footer. Leider habe ich das bisher nicht geschafft.

Das geht auch nicht so einfach, sondern erfordert einiges an Hintergrundwissen.

Bis vor ein, zwei Jahren ging das nur mit optischen Tricks. Dazu kannst du nach "faux column" googeln. Das sollte jede Menge Infos liefern, so dass ein ellenlanger Text von mir sinnlos wäre.

Als weitere Möglichkeit kannst du den Hintergrund mit "background-image linear-gradient" füllen.

Oder du must dich mit dem Flexbox Modell beschäftigen. Dazu wirst du deine Datei aber komplett neu aufbauen müssen. Das wäre zwar in die Zukunft gerichtet sinnvoll, grade wenn deine Seite auch auf Smartphones und Tablets funktionieren soll. Aber dazu wird dir noch das Hintergrundwissen fehlen. Wenn es dich interessiert kannst du nach "flexbox" googeln. Dazu gibt es inzwischen auch einige deutschsprachige Seiten.

Gruss

MrMurphy

Hallo,

ja, für Listenelemente mit einem Aufzählungszeichen, also li. Andere Elemente haben andere display-Vorgaben.

Gruss

MrMurphy

Hallo,

so genau ist noch nicht klar geworden worum es dir überhaupt geht.

Mit "display: none;" werden Elemente versteckt und ihr Platz frei gegeben. Warum reicht dir das nicht aus?

Gruss

MrMurphy

Hallo,

das geht nicht. Wenn der Link im HTML-Quelltext ist kann er mit CSS nicht entfernt werden. Er kann nur versteckt werden, ist aber immer noch im Quelltext und damit für den Besucher auffindbar.

Gruss

MrMurphy

Hallo

Zitat

Da schreibst du nämlich ausdrücklich, dass der content_wrap eine Ausnahme ist.

Aber doch mit Flexbox und nicht mit height oder min-height. Darum ging es doch die ganze Zeit.

Zitat

Dann mach ich das wohl mit der min-height...

Deine Entscheidung.

Gruss und viel Erfolg

MrMurphy

Hallo

Zitat

Was hab ich falsch gemacht?

Keine Ahnung. Es gibt verschiedene Möglichkeiten einen Sticky Footer mit Flexbox zu erreichen. Und die Vorlage deiner Quelle zeigst du trotz Nachfrage nicht. So ist Hilfe natürlich schwer möglich.

Und ich frage mich natürlich warum ich

#content_wrap {
...
min-height: 70%;
}

lese, obwohl ich

Zitat

Höhenangaben sind in der Regel unsinnig und sollten unterbleiben.

geschrieben habe. Mit solchen Angaben zwingst du die Browser dazu anders zu rechnen als vorgesehen. Dann bekommst du natürlich manchmal auch unerwartete Ergebnisse.

Zitat

Aber wenn ich z.B. einen zweiten Artikel hinzufüge, also mehr Content hab, sieht es so aus

Deshalb schreibe ich mir doch die Finger wund, erst mal den Inhalt zu erstellen und dann das Layout.

Gruss

MrMurphy

Hallo

Zitat

Ok, das bedeutet, dass ich die Höhe nur mit der Eigenschaft flex: 1; (Beispiel) bestimmen kann.

Nein. Du kannst die Höhe natürlich auch anders bestimmen. Es ist in der Regel nur weder nötig noch sinnvoll.

Zitat

Weil ich möchte ja nicht, dass die Flexbox alle Container automatisch gleichgroß darstellt.

Nein. Flexbox gibt den Containern automatisch nur den Platz den ihr Inhalt erfordert. Damit ein Container mehr Platz bekommt musst du eingreifen. Siehe zum Beispiel

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Flexbox 01</title>
   <meta name="description" content="HTML5, CSS3, Flexbox">
   <style>
      body {
         display: flex;
      }
      body>* {
         border: 1px solid silver;
      }
   </style>
</head>
<body>
   <header>
      <h2>header</h2>
   </header>
   <main>
      <h2>main</h2>
   </main>
   <footer>
      <h2>footer</h2>
   </footer>
</body>
</html>

Du hast die Frage

Zitat

Wo gefunden?

noch nicht beantwortet.

Gruss

MrMurphy

Hallo

Zitat

Ich hab einmal eine Variante gefunden, wo man dem Wrapper die min-height: 100vh;

Wo gefunden? Wrapper sind nur "erfunden" worden um Webseitenentwickler zu nerven und sollten in der Regel weggelassen werden. Sie sind, von Ausnahmen abgesehen, schlicht unnötig. Ein natürlicher und immer vorhandener Wrapper ist das body-Element.

Zitat

Gibt man den Flex-Items, also z.B. Header etc., eine Höhe in Prozent

Die Höhe eines Containers richtet sich nach seinem Inhalt. Höhenangaben sind in der Regel unsinnig und sollten unterbleiben.

Von Ausnahmen abgesehen. Eine solche Ausnahme ist das Element (und nur das) welches den footer bei wenig Inhalt nach unten drücken soll.

Das ist in deinem Fall das div "content_wrap". Welches ich persönlich einfach mit der id "inhalt" bedenken würde. Eine id ist inhaltsleer und warum kompliziert wenn es auch einfach geht.

Dein "content_wrap" bzw. mein "inhalt" bekommt zum Ausdehnen die Anweisung

flex: 1 0 auto;
         -ms-flex: 1 0 auto; /* Für alle IE, muss hinter "flex: 1;" stehen */

Hinweis:

flex: 1;

reicht vornehmlich auch, aber das ist technisch doch etwas anderes als nur

flex: 1 0 auto;

und kann in bestimmten Konstellationen zu Problemen führen.

Ähnliches gilt dafür, dass die Anweisung mit dem Prefix hinter der Anweisung ohne Prefix steht. Das ist im Regelfall unsinnig, hat in diesem Fall aber technische Gründe.

Gruss

MrMurphy

Hallo,

es gibt unterschiedliche Möglichkeiten per CSS oder per JavaScript. Welche davon für dich am geeignetsten ist kann ich deiner Frage nicht entnehmen.

Wenn es darum geht das Bild beim Anklicken nur etwas zu vergrößern solltest du dich mit CSS, transform und transition beschäftigen.

Beispiele mit Quellcode zum Beispiel auf

[[[LINK GING AUF DOMAIN, DIE ES SO NICHT MEHR GIBT, daher wurde der Link gelöscht]]]

Für's Anklicken brauchst du nur :hover durch :active ersetzen.

Gruss

MrMurphy

Hallo

Zitat

klar ist noch kein inhalt drinnen

Nee, ist überhaupt nicht klar. Und vernünftiges Layout kannst du so auch nicht lernen.

Zitat

was ist an dem div aufbau schlecht?

Erst mal fehlt die Semantik.

Und dann wird durch die vielen schließenden div der Quelltext auch für den Webseitenersteller selbst ganz schnell unübersichtlich.

Zitat

habe viele aktuelle videos gesehen die einen solchen aufbau machen?

Die sind entweder nicht aktuell (das Internet vergisst nie) oder die Ersteller haben von aktuellem HTML / CSS keine Ahnung. Davon gibt es leider sehr viele. Nur weil jemand ein Video bei YouTube veröffentlichen kann ist er noch lange kein Spezialist für Webseiten.

Zitat

html5 grundgerüst? oder hat es auch einen fachbegriff?

Es gibt kein immer passendes Grundgerüst. Das Grundgerüst hängt vom Inhalt ab. Und der ...

Gruss

MrMurphy

Hallo,

es wäre besser du wärst bei deinem Thema geblieben oder hättest ein neues eröffnet, da die Überschrift deins Alten zu deinen aktuellen Fragen nicht passt.

Zitat

ich habe jetzt mal grundgerüst für responsive webdesign gemacht und hoffe, es stimmt so?

Das kann dir niemand beantworten. Denn, da du es noch immer nicht verstanden hast:

Der Inhalt bestimmt das Layout und damit auch das responsive Design.

Also: Erst Inhalt, dann Layout und Design. Der Inhalt fehlt bei dir noch komplett. Deshalb

Zitat

also bevor ich weiter bastel, wollte ich fragen ob ich das so richtig und "sauber" mache?

kann man dich nur auf einige strukturelle Mängel hinweisen. Nein, das ist nicht sauber.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

XHTML ist bereits vor 8 Jahren für tot erklärt worden und wird seitdem offiziell nicht mehr weiter entwickelt. Aktuell sinnvoll ist nur HTML5, also

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   ...

<div id="wrapper">

Ein Wrapper ist überflüssig wie ein Tropf. Weg damit.

<div ...

Du leidest unter Divits, auch Diveritis genannt. Besser mit HTML5 die dafür vorgesehenen Container wie header, nav, main, footer u.s.w. verwenden. Und div nur, wenn es nichts besseres gibt.

@media screen and (max-width: 350px){
...
@media screen and (min-width: 350px){
...

Ganz schlecht.

Zunächst werden die CSS-Anweisungen erstellt, die für alle Fenstergrößen gelten sollen.

Dann sollte man sich entscheiden, ob man nach Mobile-First oder Desktop-First vergehen will. Technisch sind beide Vorgehensweisen vollkommen gleichwertig. Anfängern wird gerne zu Mobile-First geraten, da auf Smartphones häufig nicht der gesamte Inhalt der Seite angezeigt werden soll.

Die min-width bzw. max-width-Angaben richten sich dann nach dem Inhalt der Seite - der bei dir noch komplett fehlt. Für 350px eine Media Query zu erstellen ist heutzutage meist nicht notwendig.

#wrapper {
	max-width: 950px;
}

Warum soll der Inhalt höchstens 950px breit werden? Solche Einschränkungen stammen aus dem letzten Jahrtausend und das Responsive Design soll auch dazu dienen, Desktop-Fenster mit Inhalt zu füllen und den Usern grade kein halbleeres Fenster vorzusetzen. Den insgesamt überflüssigen Wrapper habe ich bereits erwähnt.

max-height: 258px;

height-Angaben sollten so weit wie möglich unterbleiben. Die Höhe richtet sich nach dem Inhalt und die können die Browser selbst bestimmen.

Zitat

Dabei funktioniert "auto" ja auch und geht für alle Größen?

auto ist in der Regel sinnvoller, funktioniert aber nicht in allen Situationen. Es gibt also kein entweder .. oder.

Gruss

MrMurphy