Beiträge von MrMurphy

  • div-blöcke

    Hallo

    Zitat

    Ja ok. Für was braucht man mehr als 4 oder 10 divs ????

    In Zeiten von HTML5 ist es sinnvoller statt von div von Containern zu sprechen. Sofern möglich sollen heutzutage semantisch passende Container wie main, header, footer, article, section, aside, figure und so weiter verwendet werden. Nur wenn es keine passende Container gibt sollen div-Elemente verwendet werden.

    Ein sinnvoller Fortschrift von HTML5 ist das Inhalt (HTML) und Gestaltung / Design (CSS) möglichst getrennt werden sollen. Das beinhaltet auch unnötige Container im HTML-Quelltext zu vermeiden. Dazu gehören auch direkt verschachtelte Container wie in deinem Beispiel mit den div-Elementen. Die sind zu 99% unnötig.

    In Zeiten von HTML4 / XHTML und älter waren zweifach verschachtelte Container (damals gab es nur div-Elemente) teilweise notwendig, wenn margin, border und padding in unterschiedlichen Einheiten (px, em, rem, Prozent und andere) angegeben wurden. Das ist heutzutage dank CSS-calk und den Möglichkeiten von zum Beispiel flexbox nicht mehr notwendig.

    Es geht bei meinen Ausführungen nicht um mehrere Container, die sich innerhalb eines übergeordneten Container befinden. Die lassen sich nicht so konsequent vermeiden und sind aktuell teilweise immer noch sinnvoll, sofern es für das gewünschte Layout keine andere Lösung gibt.

    Gruss

    MrMurphy

  • 2 IDs lassen sich nicht sepparat anordnen

    Hallo

    Das ist ein gewolltes Verhalten. Informationen findest du unter dem Stichwort "Collapsing Margins". Zum Beispiel

    https://developer.mozilla.org/de/docs/Web/CS…A4nden_meistern

    oder

    http://www.thestyleworks.de/basics/margins.shtml

    Eine der Lösungen hast du bereits selbst gefunden. Du kannst dem umgebenden Element ein border geben. Dazu reicht eine Breite von 1px. Dem Border kannst du auch eine Farbe geben, zum Beispiel die Hintergrundfarbe des Containers, dann ist der Rahmen nicht mehr sichtbar. Mit "transparent" kannst du den Rahmen auch durchsichtig machen.

    Oder du gibst dem umgebenden Element ein padding, dabei reicht auch 1px.

    Es darf nur nicht direkt margin auf margin treffen.

    Unabhängig von deinem Problem solltest du grundsätzlich einen Doctype (aktuell sinnvollerweise für HTML5) und ein charset angeben.

    Gruss

    MrMurphy

  • Balken einfügen

    Hallo

    Ich habe noch zwei Links zur Info eingefügt.

    Zitat

    warum verwendet du hsla und kein RGB oder RGBA

    Das ist etwas Geschmackssache. hsla ist am aktuellesten und wird langfristig wohl die Führungsrolle übernehmen. Als Nachteil wird es aber noch von manchen alten Browsern und Formaten nicht unterstützt. Ich bevorzuge grundsätzlich Farben mit Alpha-Kanal (also entweder hsla oder rgba) oder für die schnelle schlicht direkte Farbnamen.

    Gruss

    MrMurphy

  • Balken einfügen

    Hallo

    Solche Hintergründe können nur mit CSS als Hintergrundgrafik mit linear-radient eingefügt werden. In deinem Beispiel zum Beispiel mittels

    Natürlich müssen auch andere CSS-Angaben angepasst werden. Ich habe mal eine Beispieldatei online gestellt:

    Hintergrundgrafik mit linear-gradient

    Informationen findest du zum Beispiel unter

    http://www.mediaevent.de/css/gradient.html

    und einige Beispiele für die Möglichkeiten unter

    http://lea.verou.me/css3patterns/

    Gruss

    MrMurphy

  • Hovereffekt mit verschiedenen Farben an Bild

    Hallo

    Für solche Effekte gibt es verschiedene Möglichkeiten.

    In dem von dir verlinkten Beispiel sind die Bilder farbig hinterlegt und werden mittels der CSS-Anweisung

    Code
    filter: grayscale(100%);

    nur mit Grautönen angezeigt. Beim hovern werden die 100% dann auf 0% geändert, mittels transition mit einem weichen Übergang.

    Allerdings wird CSS filter noch nicht von allen Browsern direkt unterstützt. Bis zum IE11 geht gar nichts. Siehe zum Beispiel

    http://caniuse.com/#search=filter

    Gruss

    MrMurphy

  • Zeilenumbruch im a tag bzw. Link klappt nicht

    Hallo

    Deine Problembeschreibung ist leider sehr diffus.

    Du hast zwei Zeilenumbrüche eingefügt, beide werden von den Browsern auch angezeigt.

    Du erstellst in deinem Queltext grundsätzlich zwei Elemente (img, span). img ist eine Inline-Block-Element, span ist ein Inline-Elment. Beide erzeugen von sich aus keine Zeilenumbrüche.

    Wenn der Text unter dem Bild erscheinen soll musst du also zwischen img und span ein br einfügen. Wenn nach dem span ein Zeilenumbruch erfolgen soll musst du danach noch ein br einfügen.

    Insgesamt sollten br-Elemente aber vermieden werden. Es ist in der Regel sinnvoller direkt Block-Container zu erstellen oder durch entsprechende CSS-Anweisungen Inline- und Inline-Block-Elementen in Block-Elemente umzuwandeln, die von sich aus Zeilenbrüche mit sich bringen. So können auch Abstände besser kontrolliert werden.

    Gruss

    MrMurphy

  • Buttons nebeneinander ohne Abstand positionieren

    Hallo

    Das liegt daran, dass es sich bei Buttons um sogenannte Inline-Block-Elemente handelt.

    Wenn du sie in Block-Elemente oder Flexbox-Items umwandelst können sie ganz normal angeordnet werden. Zusätzlich haben Button-Elemente einen transparenten Rand, der auch entfernt werden muss. Das CSS dazu könnte folgendermaßen aussehen:

    Code
    .button-group {
         display: flex;
      }
      .button-group button {
         font-size: 4rem;
         border: 0;
      }

    Die Schrift habe ich vergrößert damit die Abstände besser zu sehen sind. Oder halt nicht, wenn es keine gibt.

    Gruss

    MrMurphy

  • Tabelle mittig Stellen

    Hallo

    Zitat

    die Tabelle ist linksbündig, würde sie aber gerne Zentral haben.

    Dazu dient die CSS-Anweisung

    Code
    margin: 0 auto;

    Du kannst also die Angabe

    Code
    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border:none;">

    zu

    Code
    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border:none;margin: 0 auto;">

    ändern.

    Grundsätzlich scheinst du aber nach einer sehr alten Anleitung zu lernen. Dein Quellcode ist bereis seit über 15 Jahren veraltet.

    Einige Angaben waren für Webseiten schon immer falsch, wie Einheiten in cm oder pt anzugeben.

    Spätestens mit etwas mehr Inhalt und bei der Anzeige auf Tablets und Smartphones wird die Darstellung schlecht aussehen.

    Du solltest besser gleich aktuelles HTML5 und CSS3 lernen. Die Umstellung von solch veraltetem Quellcode zu aktuellem ist meist schwieriger als direkt aktuelles HTML5 und CSS3 zu lernen.

    Gruss

    MrMurphy

  • Navigation umsetzten

    Hallo

    Zitat

    leider wurde mein Account gelöscht, warum auch immer,

    Das hat nichts mit dir zu tun. Es gab wohl einen Datenverlust, so dass alle Beiträge und Anmeldungen aus dem Juli 2016 weg sind.

    Zitat

    eine tolle Navigation (rechts oben)

    Was willst du mit "rechts oben" sagen?

    Die Navigation ist mit JQuery / JavaScript erstellt worden.

    Da der gleiche oder zumindest ein sehr ähnlicher Effekt auch nur mit CSS erstellt werden kann sollte dafür aber auf JQuery / JavaScript verzichtet werden.

    Die hover-Effekte (welche auf Touchscreen-Geräten nicht funktionieren) können mit transform / transition erzeugt werden.

    Das Umschalten zwischen Bild- und Textnavigation wahrscheinlich mittels des Checkbox-Hacks.

    Gruss

    MrMurphy

  • Lernbuch - Kaufberatung

    Hallo

    Meiner Ansicht nach sollten die Grundlagen von HTML und CSS im Zusammenhang gelernt werden. Dazu eignen sich Bücher hervorragend.

    Ich kann das Buch Flexible Boxes in der Auflage ab 2015 von Peter Müller nur empfehlen.

    Sehr Informativ und immer noch aktuell ist auch das Buch Little Boxes, das kostenlos online zur Verfügung steht:

    http://little-boxes.de/little-boxes-teil1-online.html

    Die bewährten Techniken, die in Little Boxes ausführlich behandelt werden, werden in Flexible Boxes eher kurz abgehandelt, dass sich dafür ausführlich mit den aktuellen Techniken wie CSS3 oder Responsive Design beschäftigt. Die ergänzen sich hervorragend.

    Speziell zum Thema Flexbox sind mir bislang weder gute Bücher noch gute Webseiten bekannt. Es gibt einen kostenpflichtigen Online-Videokurs von Video2Brain, den ich aber eher mittelmäßig beurteile.

    Zum Thema Bootstrap empfehle ich auch die Seite

    http://holdirbootstrap.de/

    Gruss

    MrMurphy

  • Booststrap - Grid - Umbruch

    Hallo

    Zitat

    Ich schätze aber, das geht irgendwie auch anders, dass ich pixel benutzen kann?

    Richtig.

    Die Lösung ist dir auch schon über den Weg gelaufen. Um verschiedene Einheiten wie % und px kombinieren zu können kennt CSS die Berechnungsmöglichkeit mittels calc.

    Bei einer gewünschten gesamten Breite von 33,333% und einem margin von 5px kann beim CSS folgendes bestimmt werden:

    Code
    flex: 1 calc(33.3333% - 10px);

    10px, da ja links und rechts jeweils 5px sind. Die Leerzeichen vor und hinter dem Berechnungszeichen (hier dem Minus) sind Pflicht. Zwischen calc und der ersten öffnenden Klammer darf hingegen kein Leerzeichen stehen.

    Es gilt Punkt- vor Strichrechnung. Klammern können gesetzt werden.

    Wobei einige Browser mit calc bei Kurzschreibweisen nicht zurechtkommen. Deshalb sollte die lange Schreibweise verwendet werden:

    Code
    flew-grow: 1;
flex-shrink: 1;
flex-basis: calc(33.3333% - 10px);
    Zitat

    wäre es denn okay, wenn ich manche Elemente (einfachere) mit Bootstrap mache - und wieder andere mit Flexboxen?

    Ja, das wird von Bootstrap sogar selbst empfohlen. Man sollte halt nur wissen was man tut.

    Gruss

    MrMurphy