Beiträge von Killerbear

Die Profis benutzen sowas wahrscheinlich gar nicht sondern setzen auf sogenannte css präprozessoren wie sass, less oder stylus.

Dort werden dann durch imports von erstellten mixins auch die präfixes in die css gerendert,
ohne dass man sie immer alle selber schreiben muss.

Außerdem bieten Präprozessoren noch eine Menge weitere Vorteile.
Und man muss den Quellcode nicht extra in irgendeine Seite hin und her kopieren.

Ich hab schon öfter gehört, dass man aber Anfang nicht mit solchen Präprozessoren beginnen sollte, wenn man grundlegendes css noch nicht versteht.

Zitat

Die Leute wollen immer gleich los rennen, bevor sie überhaupt ordentlich laufen können

Ich kann das allerdings nicht ganz nachvollziehen, weil man mit einem Präprozessor auch ganz normales css schreiben kann.
Man kann also css lernen und gleichzeitig die Vorteile von einem Präprozessor genießen.

Zitat von rantanplan2000

Wie kann ich dass genau mit dem Margin machen, wenn ich 2 Spalten mit 50% Breite habe? Wie in meinem Lerncode, habe ich zwei Bootstrap col auf 6 setzen wollen, dann ist aber durch den Margin kein Platz mehr und es sprint um. (Ich habe zwar dank euch funktionierende Codes, versuche es aber auch zu verstehen - und das mit dem Margn ist eben noch offen)

Wenn du flexboxen benutzt, kannst du den cols auch margin vergeben, ohne dass sich das bootstrap grid system verschiebt.
Wenn du keine flexboxen benutzt (warum auch immer, weil du ja eigentlich diesen Thread eröffnet hast, weil du flexboxen benutzt willst), dann darfst du das margin nicht den bootstrap cols geben sondern einem Kind-Element davon

<div class="row">	<div class="col-md-6"><div class="content">.col-md-6</div></div>	<div class="col-md-6"><div class="content">.col-md-6</div></div></div>

.content{margin: 10px;}

Zitat von rantanplan2000

p.s. ist mein Reset-Code, den ich kopiert habe gut so, oder gibts da bessere?

ich bin benutzen für den css reset immer die normalize.css, die auch von bootstrap empfohlen wird:
http://getbootstrap.com/css/#overview-normalize

Zitat von rantanplan2000

p.s. wird mein html code nicht angezeigt, oder liegt es an meinem browser?

wird bei mir auch nicht angezeigt

ich bin eher der Praktiker und muss zum verstehen immer alles selber ausprobier und Fehler selber machen um alles zu verstehen.
Aber das ist von Person zu Person unterschiedlich.
Für mich persönlich eigenen sich Grundlagen Bücher daher nur bedingt.

Um tiefer in eine Materie einzusteigen und Tipps, Tricks und Kniffe zu lernen,
eigenen sich Bücher oder Videos aber wieder super, weil man auf manche interessanten Lösungen niemals selber gekommen wäre.

Ich würde also aus meiner persönlichen subjektiven Sicht auch keine Bücher empfehlen sondern eher Methoden, bei denen man selber etwas nachbauen muss.
Und da bin ich vor kurzem auf eine interessante Education Seite gestoßen:
https://www.udacity.com/course…esign-fundamentals--ud893

Der Kurs ist von google erstellt.
Dort bekommt man Aufgaben gestellt, die man dann erfüllen muss.
Die Stück für Stück komplexer werden.

Hab nur kurz rein geschaut und fand den Ansatz sehr interessant.
Allerdings komplett auf englisch.

der container hat bei mir im chrome und firefox 15px padding.
genau wie du es auch in der css angegeben hast.

Funktioniert alles einwandfrei

ich würde mich freuen, wenn du deinen Quellcode sinnvoll in HTML, CSS und javscript unterteilst.
Dann kann man den Code leichter kopieren und testen.

Momentan funktioniert dein Code bei mir nämlich nicht.
Dein Javscript fängt mit einer Funktion an, die weder einen Namen hat noch irgendwo aufgerufen wird.

Dem entsprechend wird das Javascript nirgendwo verwenden und dadurch passiert auch im Menü nichts.

Erstmal eine kurze Korrektur deines Quellcodes:

In Bootstrap wird das responsive Gridsystem immer so aufgebaut

<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Die <div class="col"> müssen immer von einem <div class="row"> umschlossen sein.

Dann hast du dich scheinbar bei der Spaltebreite für large verrechnet.
Wenn 4 Elemente nebeneinander anzeigen willst, dann muss die Spaltenbreite 12/4 = 3 sein

<div style="background:yellow;" class=" col-xs-12 col-sm-6 col-lg-3">

Dann werden die Boxen für small und large schonmal korrekt angezeigt.

Jetzt zu deinem Problem.
Momentan floaten die Elemente nach links, bis sie auf ein Element stroßen, und dann daran hängen bleiben.
Dadurch bleibt die Grüne Box an der schwarzen Box hängen.
Dieses Problem kann man mit der css-Eigenschaft clear beseitigen.
http://codepen.io/Killerbear_02/pen/qNRYBj

Jede ungerade Box hat die Eigenschaft clear:left, die verhindert, dass sich links von dieser Box ein floatendes Element befindet.

Eine alternative Möglichkeit wären die besagten flexboxen.
Dadurch kann man auch erreichen, dass die nebeneinander stehen Boxen gleich hoch sind.
http://codepen.io/Killerbear_02/pen/ZOLxdG

Ich gebe zu, dass ich mit meiner Zukunftsprognose etwas über das Ziel hinaus geschossen bin.
Aber es zeigt zumindest, dass sich über das Problem Gedanken gemacht wird.

Denn das Problem ist die Darstellung von eingebundenen Bildern per <im> tag.
Diese Bilder können nicht per css mediaquerrys ausgetauscht werden.
Man kann sie zwar hoch- und runter skalieren.
Aber eben nicht komplett durch größere oder kleinere Bilder ersetzten.

Für dieses Szenario muss man auch 2016 noch javascript verwenden.

Anders sieht das ganze natürlich aus, wenn das Bild per css geladen wird,
Dann kann man natürlich jedem viewport das passende Bild liefern.

Das geht natürlich auch.

In der Dokumentation auf der bootstrap seite findest du auch viele Beispiele.
http://holdirbootstrap.de/los-gehts/#examples-framework

Das erste Beispiel macht genau das, was du willst.
Aber auch hier sollte man schon Grundkenntnisse in HTML und CSS mitbringen, um zu verstehen, was da eigentlich passt.
Aber zumindest kannst ja mal durch den html und css quellcode stöbern.

Zitat von lauras

ist übrigens obwohl häufig gleich verwendet nicht das gleiche wie dpi!

Da muss ich dir widersprechen.
Sowohl dpi wie auch ppi gehen die Dichte der Bildpunkte an.
Ob diese Bildpunkte nun Farbpunkte oder Displaypixel sind, spielt keine Rolle.

Die unterschiedliche Bezeichnung gibt nur an, dass es sich bei dpi um eine Auflösung im analogen Bereich (z.B. Drucker und Scanner) handelt
und bei ppi um die Auflösung im digitalen Bereich (z.B. Displays)

Beide spiegeln aber das selbe wieder.
Nämlich die Anzahl der Bildpunkte/Pixel pro Zoll.

Jedes Bild kann beliebig groß skaliert werden.
Insofern ist die dimensionale Größe also erstmal nicht entscheidend.

Wichtiger dabei ist die Bildqualität und die Dateigröße.
Wenn das Bild zu klein ist und dann für hohe Auflösungen hoch skaliert werden muss, dann leidet die Bildqualität.
Für diesen Fall ist es am besten, wenn das Ausgangsbild so groß wie möglich ist.

Wenn das Bild zu groß ist, dann muss es bei kleinen Auflösungen runter skaliert werden.
Auch hier kann die Bildqualität leiden, weil Browser da meistens nicht die beste Arbeit leisten.
Außerdem wird ein riesen Bild mit einer riesen Dateigröße geladen, obwohl es nur in einer kleinen Größe dargestellt werden muss.
Für diesen Fall ist es am besten, wenn das Ausgangsbild so klein wie möglich ist.

Um beide Fälle halbwegs befriedigend abzudecken, wird meistens eine Breite von 1600px verwendet,
weil die Bildqualität auf größeren Bildschirmen noch ausreichend ist
und kleine Displays keine riesige Datei laden müssen (was dann mobile Bandbreite kostet und zu langsamen Seitenaufbau führt).

Um für jedes Gerät die optimale Bildgröße zu laden, gibt es auch javascript Lösungen.
Damit gibt es dann riesige Bilder für große Displays und schön kleine Bilder für Smartphones.

In Zukunft wird es auch ein überarbeitetes <img> Element geben, dem man ein set an src attributen verpassen kann.
Dann wird automatisch das Bild geladen, dass auf den aktuellen viewport passt.
Aber das ist noch Zukunftsmusik.
Quelle: https://blog.kulturbanause.de/…es-srcset-sizes-adaptive/

Nein das ist leider nicht per css möglich, da man mit css nicht den Inhalt eines Elements prüfen kann.

Es gibt zwei Lösungen für das Problem:
1. Serverseitig
Da der Inhalt aus einer Datenbank kommt, wird die Tabelle scheinbar per php oder ähnlichem generiert.
An dieser Stelle könnte man also den Inhalt prüfen und dann die Zellen einfärben oder den Zellen entsprechende Klassen verpassen.
Dann kann per css die Elemente mit den entsprechenden Klassen unterschiedlich färben.

2. Clientseitig
Per javascript den Inhalt aller Zellen prüfen und einfärben.
Oder auch Klassen ran schreiben, die dann per css eingefärbt werden.

Zitat von oboo

Also diese Fläche mit den Zahlen die nach links gedreht wird kann man nicht mit CSS machen?

Nein das geht leider nicht.
Bei deinem Beispiel weiß ich leider nicht, wie man das Teil zum drehen bekommt, aber man sieht am quellcode ja ungefähr, wie das ganze scheinbar funktionieren sollte.

Das drehende Rad ist eine lange Grafik
[Blockierte Grafik: http://www.csgodouble.com/img/cases.png]

Diese Grafik ist in diesem Fall als Hintergrund gesetzt und kann mit der css Eigenschaft background-position verschoben werden.
Jetzt komm Java Script ins Spiel.
Wenn man auf einen Knopf drückt, dann wird ein script ausgeführt, dass die css Eigenschaft background-position für das Element #case dann in kurzen Abständen ändert.

Für die Animationen und die Ausgabe der Werte brauchst du also noch Javascript.
Auch das Speichern der Werte lokal auf dem Rechner geht auch per javascript (Zauberwort cookies)