Hallo
Ich habe die entspr. CSS-Selektoren inline angegeben, damit sie für Euch sofort sichtbar sind.
Das kann ich nicht nachvollziehen.
In der Datei
gibt es den Eintrag
@media screen and (max-width: 736px) {
#sidebar {
display: none;
}
}durch den das Menü bei schmalen Fenstern ausgeblendet wird. Ist das dein Problem?
Gruss
MrMurphy
Hallo
Wie wäre da ein Lösungsansatz?
Es gibt keinen, da es mit HTML und CSS weder möglich ist PCs von Smartphones oder Desktop-Monitore von Smartphone-Monitoren zu unterscheiden.
Gruss
MrMurphy
Hallo
Ja. Stichwort "Linear-Gradient".
Gruss
MrMurphy
Hallo
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
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
Hallo
#test {
width:100px;
height:900px;
background:black;
}Gruss
MrMurphy
Hallo
Du hast width falsch geschrieben und bei den CSS-Angaben fehlt die Klammer.
Gruss
MrMurphy
Hallo
Ich habe noch zwei Links zur Info eingefügt.
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
Hallo
Solche Hintergründe können nur mit CSS als Hintergrundgrafik mit linear-radient eingefügt werden. In deinem Beispiel zum Beispiel mittels
ul {
background-image: linear-gradient(
90deg,
hsla(198, 83%, 63%, 1),
hsla(198, 83%, 63%, 1) 80%,
hsla(197, 82%, 87%, 1) 80%,
hsla(197, 82%, 87%, 1) 93.5%,
hsla(198, 83%, 63%, 1) 93.5%,
hsla(198, 83%, 63%, 1)
);
}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
Hallo
ich erkenne keine fehler
Wir auch nicht.
Bleibt nur raten.
Gruss
MrMurphy
Hallo
Das kommt auf deinen Quelltext an und wie sich das Menü verhalten soll.
So sollen wohl nicht alle Bilder ausgeblendet werden, sondern nur die, welche zum Menü gehören.
Gruss
MrMurphy
Hallo
Die Bilder werden zunächst grundsätzlich ausgeblendet (display: none oder opacity: 0) und mittels :hover-Anweisung eingeblendet.
Wie stellst du dir das bei Touchscreens vor? Die kennen keine :hover-Anweisung.
Gruss
MrMurphy
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
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
Hallo
Oder doch ganz anders?
Ja. Eine Liste sehe ich aus deinen Angaben nicht. Jedes Element kommt in einen passenden Container (zum Beispiel figure). Alle drei Container werden dann mittels Flexbox angeordnet.
Gruss
MrMurphy
Hallo
Und wie soll das ganze auf Touchscreen-Bildschirmen funktionieren? Die kennen bekanntlich keinen Mouse-Over- beziehungsweise hover-Effekt und werden bereits von der Mehrzahl der Besucher verwendet.
Gruss
MrMurphy
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
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:
.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
Hallo
die Tabelle ist linksbündig, würde sie aber gerne Zentral haben.
Dazu dient die CSS-Anweisung
margin: 0 auto;Du kannst also die Angabe
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border:none;">zu
<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
Hallo
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.
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
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
Gruss
MrMurphy