nicht angemeldet
Gunnar Bittersmann
Gunnar Bittersmann
at
Gunnar Bittersmann
at
Gunnar Bittersmann
MudGuard
Hallo,
ich habe jetzt doch begonnen eine eigene kleine Webseite zu erstellen. Mein erster Versuch könnt ihr hier sehen: http://test-2017.bplaced.net/
Jetzt habe ich ein Problem:
Wie bekomme ich es hin, dass die Navigation immer rechts ausgerichtet ist und dass ich Abstand zwischen die Punkte bekomme? Die Navigationspunkte sollen immer die volle Höhe bekommen.
Mein #home soll immer die volle Höhe haben wie auch jetzt. Allerdings ohne den <header> Bereich, wie kann ich dieses erreichen?
Ist es möglich das Hintergrundbild etwas abzudunkeln dass der Text besser zu sehen ist? Oder muss ich dieses mit einem Grafikprogramm umsetzen? Mit opacity habe ich es versucht, dieses wirkt sich dann auch auf den Text aus, das will ich nicht.
@@Sophie
1. Wie bekomme ich es hin, dass die Navigation immer rechts ausgerichtet ist
Den Inhalt einer Flexbox am Ende ausrichten: nav ul { justify-content: flex-end}. Dazu muss natürlich der Container auch bis zum Ende reichen. Flexitem wachsen lassen: nav { flex-grow: 1 }.
und dass ich Abstand zwischen die Punkte bekomme?
margin und padding sollten bekannt sein.
2. Mein #home soll immer die volle Höhe haben wie auch jetzt. Allerdings ohne den <header> Bereich, wie kann ich dieses erreichen?
Ich verstehe die Frage nicht.
3. Ist es möglich das Hintergrundbild etwas abzudunkeln dass der Text besser zu sehen ist?
?? Die Schrift ist doch dunkel, wie sollte die auf einem noch dunklererem Hintergrund besser zu sehen sein? Du meinst: das Hintergrundbild etwas aufhellen? Wie auch immer …
Oder muss ich dieses mit einem Grafikprogramm umsetzen?
… das wäre, was zu tun ist.
LLAP 🖖
Hallo Gunnar,
Den Inhalt einer Flexbox am Ende ausrichten:
nav ul { justify-content: flex-end}. Dazu muss natürlich der Container auch bis zum Ende reichen. Flexitem wachsen lassen:nav { flex-grow: 1 }.
vielen Dank, hat funktioniert: http://test-2017.bplaced.net/
und dass ich Abstand zwischen die Punkte bekomme?
marginundpaddingsollten bekannt sein.
habe ich eingefügt und es hat geklappt, siehe Link oben.
2. Mein #home soll immer die volle Höhe haben wie auch jetzt. Allerdings ohne den <header> Bereich, wie kann ich dieses erreichen? Ich verstehe die Frage nicht.
Das Bild liegt derzeit hinter dem Header. Ich würde gerne die 100% immer nach dem Header haben. Ist dieses möglich?
3. Ist es möglich das Hintergrundbild etwas abzudunkeln dass der Text besser zu sehen ist?
Naja ich möchte gerne das Hintergrundbild etwas abdunkeln und den Text dann in weiß platzieren. Außerdem wollte ich die zwei Buttons mit display: inline-block; nebeneinander platzieren, wird irgendwie nicht.
Und ist es möglich dass die Navigationspunkt immer die volle Höhe bekomme?
@@Sophie
vielen Dank, hat funktioniert: http://test-2017.bplaced.net/
„Kontakt“ ragt nach rechts aus dem Viewport raus (bei Viewports schmaler als 1000px + 2em), weil der Header wegen header { padding: 1em; width: 100% } aus dem Viewport rausragt. Du möchtest ein anderes Boxmodell verwenden.
Wenn der Viewport noch schmaler wird, ragen noch mehr Menüpunkte nach rechts raus. Verwende flex-wrap: wrap (bzw. flex-flow: row wrap).
Wozu überhaupt das div.container? Die Stile kannst du auch dem header geben.
Und max-width: 1200px — meh. Vergiss, das es soetwas wie px gibt! Die Breite solte sich nach der Schriftgröße richten, also in em bzw. rem angegeben werden.
Das Bild liegt derzeit hinter dem Header. Ich würde gerne die 100% immer nach dem Header haben. Ist dieses möglich?
Wenn du den Header nicht fixed positionierst, ja: body als Flexbox.
Wenn du ihn fixed positionierst, müsstest du seine Höhe kennen. Die kennst du aber nicht.
Außerdem wollte ich die zwei Buttons mit display: inline-block; nebeneinander platzieren, wird irgendwie nicht.
Du meinst die Links (die wie Buttons aussehen). Die sind Flexitems; dass kann also nichts werden. Warum ist section#home eine Flexbox?
LLAP 🖖
Hallo Sophie.
Naja ich möchte gerne das Hintergrundbild etwas abdunkeln und den Text dann in weiß platzieren.
Gängige Ansätze dafür sind filter, was allerdings bei großflächigen Bildern oder mehreren Überlagerungen die Berechnung der Darstellung merklich beeinträchtigen kann, oder das Verwenden von text-shadow mit einem großzügig gewählten Wert für den Radius.
MfG, at
@@at
Naja ich möchte gerne das Hintergrundbild etwas abdunkeln und den Text dann in weiß platzieren.
Gängige Ansätze dafür sind
filter
Für Hintergrundbilder?
oder das Verwenden von
text-shadow
Man kann auch ein zweites Bild nehmen: transparentes einfarbiges Grau, gern auch per linear-gradient.
Oder eher ungern. Auch das kostet unnötig Rechenzeit, also performance.
LLAP 🖖
Hallo Gunnar.
Gängige Ansätze dafür sind
filterFür Hintergrundbilder?
Für alles im Anwendungsbereich des Filters.
MfG, at
@@Sophie
BTW:
marctrix
Matthias Apsel
Rolf Bul {
margin: 0;
padding: 0;
list-style-type: none;
}
ist keine gute Idee. Was, wenn du irgendwann mal im Seiteninhalt eine Liste (mit Bullets) haben möchtest?
Gib das nur für die Navigationsliste an, also für nav ul.
LLAP 🖖
Hi,
- Ist es möglich das Hintergrundbild etwas abzudunkeln dass der Text besser zu sehen ist? Oder muss ich dieses mit einem Grafikprogramm umsetzen?
Du solltest das Bild ohnehin nochmal mit einem Grafikprogramm bearbeiten. 1.3MB sind heftig. Das dauert selbst mit DSL einige Sekunden, bis das angezeigt wird. Mit ner schlechten Mobilverbindung dann entsprechend länger.
Hab das Bild mal probehalber im GIMP aufgehellt (verdunkeln würde ja, wie Gunnar schon angemerkt hat, die dunkle Schrift noch schlechter lesbar machen), und dann mit reduzierter Qualität gespeichert - bei ca. 34% (was auch immer GIMP da als % Qualität bezeichnet) war praktisch kein Unterschied zu erkennen, aber die Dateigröße auf ca. 1/10, ungefähr 125KB geschrumpft.
EXIF und sonstige Metadaten wegzuschmeißen bringt noch mal ein paar KB. Wäre beim Original kaum ins Gewicht gefallen, bei den 125KB sind 2KB weniger dann auch noch mal 1,6% weniger.
cu,
Andreas a/k/a MudGuard
Hallo MudGuard,
ok, ich habe das Bild jetzt auf 216kp reduziert. !.3 MB war wirklich ein wenig groß. Danke für den Hinweis.
Hallo,
wie würdet ihr diese Darstellung umsetzen?
Meine Idee
<section class="about">
<h2>Ich bin eine H2 Überschrift</h2>
<div class="about">
<p class="test">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br><br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br><br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
<p><img src="1.jpg"> <img src="2.jpg"></p>
</div>
</section>
Die Frage ist, wie bekomme ich zwei Bilder übereinander bzw. drei Bilder da ich gerne noch einen kleinen Grauen Hintergrund haben möchte.
Hi,
<section class="about"> <h2>Ich bin eine H2 Überschrift</h2> <div class="about"> <p class="test">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br><br>
Du benutzt einen Absatz (<p>), um mehrere Absätze zu erzeugen (mit <br><br> - brrrrr! - da schüttelt es mich)
<p><img src="1.jpg"> <img src="2.jpg"></p> </div> </section>
Gehören die Bilder nicht eher in ein aside-Element?
Das Übereinander-Positionieren ist m.E. Sache von position, left, top und ggf. z-index.
cu,
Andreas a/k/a MudGuard
Hallo,
Du benutzt einen Absatz (<p>), um mehrere Absätze zu erzeugen (mit <br><br> - brrrrr! - da schüttelt es mich)
mich eigentlich auch. Ich würde lieber <p> nehmen. Aber die Box hat display:flex. Wenn ich alle in ein <p> lege, dann habe ich plötzlich alle nebeneinander.
<p><img src="1.jpg"> <img src="2.jpg"></p> </div> </section>Gehören die Bilder nicht eher in ein aside-Element? Das Übereinander-Positionieren ist m.E. Sache von position, left, top und ggf. z-index.
Darf ein aside in ein section? Ich dachte immer aside gehört in <main>?
Hallo Sophie.
Darf ein aside in ein section? Ich dachte immer aside gehört in <main>?
Dürfen darf das viel. Aber sind die Bilder überhaupt Bestandteile des Inhaltes oder doch eher nur schmuckes Beiwerk?
MfG, at
Hallo,
Dürfen darf das viel. Aber sind die Bilder überhaupt Bestandteile des Inhaltes oder doch eher nur schmuckes Beiwerk?
ich mag Bilder auf Webseiten, nur Text finde ich sehr langweilig. In meinem Fall sind diese einfach nur firlefanz 😉
Hallo Sophie,
dann wären die Bilder sinnvoller mittels CSS als Hintergrundbilder einzufügen. Auch dann lassen sich mehrere verwenden und unterschiedlich ausrichten. Damit der Text die Bilder nicht überlagert, kann man einen auf die Größe und Platzierung der der Hintergrundbilder abgestimmten Innenabstand verwenden.
MfG, at
Hallo,
das Problem wird sein, wenn ich es über CSS regle, dass ich nicht mehr so einfach die Seiten in Wordpress anlegen kann. Ich möchte das Template so bauen, dass ich alle Inhalte über das Backend pflegen kann.
@@Sophie
das Problem wird sein, wenn ich es über CSS regle, dass ich nicht mehr so einfach die Seiten in Wordpress anlegen kann. Ich möchte das Template so bauen, dass ich alle Inhalte über das Backend pflegen kann.
Du hast das Markup im Template in deiner Hand? Dann kannst du ein style-Element dort einbauen. Oder beim passenden Element ein style-Attribut setzen.
LLAP 🖖
Hej Sophie,
In meinem Fall sind diese einfach nur firlefanz 😉
Ich bin da skeptisch — ich nehme an, dass du Gründe hast, genau die Bilder zu nehmen, die da letztendlich stehen werden.
Reine Schmuckgrafiken sind selten.
Marc
Guten Morgen Marc,
Ich bin da skeptisch — ich nehme an, dass du Gründe hast, genau die Bilder zu nehmen, die da letztendlich stehen werden.
Gründe habe ich die wären folgende:
Die Bilder sind jetzt nicht so wichtig, dass man sagen könnte, fehlen die Bilder, versteht man den Text / Inhalt nicht.
Hej Sophie,
Guten Morgen Marc,
Ich bin da skeptisch — ich nehme an, dass du Gründe hast, genau die Bilder zu nehmen, die da letztendlich stehen werden.
Gründe habe ich die wären folgende:
- Nur Text wird von den Usern oftmals nicht gerne angenommen
- Die Bilder neben dem Text bringen das rüber, was im Text steht
- Die Seite wird etwas freundlicher und voller
Die Bilder sind jetzt nicht so wichtig, dass man sagen könnte, fehlen die Bilder, versteht man den Text / Inhalt nicht.
Gilt das auch für Menschen mit einer Lese-Rechtschreicb-Schwäche?
Transportieren die Bilder Emotionen wie "Will-ich-haben", die der Text nicht oder nicht so deutlich enthält? Sagen die Bilder (nochmal) dasselbe, was der Text schon mal gesagt hat in anderer Weise (dann sagen sie etwas und sind Inhalt)?
Zur Abgrenzung: eine Schmuckgrafik ist etwa ein Schnörkel in einer weißen Fläche. der hat tatsächlich nur die Aufgabe hübsch zu sein und die Seite nciht so leer aussehen zu lassen.
So wie ich dich kennen gelernt habe, machst du dir aber Gedanken und wirst nicht irgendwelche Bilder nehmen (die ersten drei von Fotolia) sondern die Bilder bewusst und absichtlich wählen oder sogar selber machen (lassen). Schwierige Voraussetzungen um von Schmuckgrafiken auszugehen (was durchaus noch der Fall sein kann — ich kenne die Bilder ja nicht, ich kenne die Absicht Deiner Seite nicht usw), aber meistens rate ich ganz gut…
Marc
@@marctrix
aber meistens rate ich ganz gut…
Kriterium: Sollen die Bilder mit aufs Papier, wenn man die Seite ausdruckt und keinen Haken bei „Hintergrundfarben und -bilder drucken“ gesetzt hat?
Ja? Inhalt, img.
Nein? Hintergrundbild, CSS.
LLAP 🖖
Hallo Gunnar Bittersmann,
Kriterium: Sollen die Bilder mit aufs Papier, wenn man die Seite ausdruckt und keinen Haken bei „Hintergrundfarben und -bilder drucken“ gesetzt hat?
Kriterium: Sollen die Bilder mit aufs Papier, wenn man die Seite mit dem MS-Edge ausdruckt?
Ich habe noch keine Möglichkeit gefunden, den Edge zum Drucken von Hintergrundfarben und -bildern zu überreden.
Bis demnächst
Matthias
Hallo Sophie,
<br><br> - brrrrr!
mich eigentlich auch. Ich würde lieber <p> nehmen. Aber die Box hat display:flex. Wenn ich alle in ein <p> lege, dann habe ich plötzlich alle nebeneinander.
Vielleicht geht ja statt Flexbox auch das gute alte Float? Ich habe es bewusst mal mit inline-Styles gemacht statt CSS - es klang ja so, als wäre das für dich im Wordpress nicht so einfach (den Teil, der die Images als div simuliert, natürlich nicht).
Rolf
Hej Sophie,
Die Frage ist, wie bekomme ich zwei Bilder übereinander bzw. drei Bilder da ich gerne noch einen kleinen Grauen Hintergrund haben möchte.
Mit einem Bildbearbeitungsprogramm?!?
Marc
Guten Morgen Marc,
Mit einem Bildbearbeitungsprogramm?!?
naja das wäre der schnellste Fall. Allerdings müsste ich dann die Bilder jedesmal vorbereiten und dann hochladen.
Schön wäre wenn ich einfach zwei Bilder in den Text reinziehen kann und die Positionierung sowie die zwei Grauen Kästen automatisch hinzugefügt werden.
Hej Sophie,
Guten Morgen Marc,
Mit einem Bildbearbeitungsprogramm?!?
naja das wäre der schnellste Fall. Allerdings müsste ich dann die Bilder jedesmal vorbereiten und dann hochladen.
Gute Idee! Dabei gleich die Dateigröße optimieren und ggfs Bildoptimierungen durchführen! Dauert nur wenige Minuten, insbesondere mit einer immergleichen PSD-Vorlage. Da sind die Bilder ruckzuck rein importiert!
In Wordpress dann einfach die alte Datei mit der neuen ersetzen. Das funktioniert auch, wenn du dieses Bild mal als Hintergrundgrafik per CSS eingebunden hast (der Dateiname bleibt ja derselbe) — Backups auf deinem Computer aufbewahren!
Und Backups von dem Zeug auf Deinem Computer — ohne da jetzt in der Wunde bohren zu wollen…
Schön wäre wenn ich einfach zwei Bilder in den Text reinziehen kann und die Positionierung sowie die zwei Grauen Kästen automatisch hinzugefügt werden.
Schlechtere Idee. Das wird im Endeffekt viel aufwändiger. Schließlich überlagern sich die Bilder. Was, wenn du mal einen anderen Effekt haben möchtest. Dann musst du die Programmierung/CSS anpassen. Was wenn die Bilder nicht so passen, wie in dem jetzigen Beispiel und du vom unteren Bild etwas mehr oder weniger zeigen möchtest, weil man etwas wichtiges nicht sieht?
Das alles wird aufwändiger und ist weniger flexibel/mächtig als die Möglichkeiten, die dir deine Bildbearbeitung bietet!
Marc
@@marctrix
Backups auf deinem Computer aufbewahren!
Versionskontrollsystem (git) verwenden!
LLAP 🖖
Hallo Sophie,
ich hoffe, ich verstehe dich richtig. Du willst in etwa sowas (g=grau, B=Bild 1, X=Bild 2)?
ggggBBBBBBBBBB
ggggBBBBBBBBBB
XXXXXXXXXXBBBB
XXXXXXXXXXBBBB
XXXXXXXXXXgggg
XXXXXXXXXXgggg
Das würde ich stapeln: Ein grauer Kasten als Container mit position:relative oder absolute, die Bilder mit position:absolute hinein, Bild 1 mit top:0; right:0, Bild 2 mit bottom:0; left:0. Das kannst Du sogar mit Selektoren wie imgContainer img:nth-of-type() soweit im style vorbereiten, dass Du den Bildern gar keine class mehr geben musst.
Ich weiß natürlich nicht, wie weit das in Wordpress komfortabel ist.
Rolf
Hej Rolf,
Das würde ich stapeln:
Erst mal abwarten, ob wir über Bilder im HTML oder im CSS sprechen.
Ich weiß natürlich nicht, wie weit das in Wordpress komfortabel ist.
Könnte klappen - abhängig davon, welche anderen Inhalte noch vorkommen können. Ich vergesse auch gerne mal was bei meinen Überlegungen und stelle beim ausprobieren fest, dass etwas entscheidendes nicht klappt.
Marc