Web-Development-Talk [HTML, CSS, JavaScript, ...]

[FreezyBTW]

Hi.

Bevor ich nun alle zwei Tage einen neuen Thread wegen einer weiteren, simplen Frage bezüglich CSS o.Ä. erstellen muss, eröffne ich nun einfach diesen "Web-Development-Talk". Der Grundgedanke ist, dass man hier Fragen bezüglich Web-Entwicklung mit HTMl, CSS, JavaScript/jQuery, PHP oder auch Datenbanken wie MySQL oder MongoDB stellen kann und erfahrene Nutzer diese beantworten.

Selbstverständlich ist dieser Thread nicht nur für meine Fragen gedacht; jeder darf hier schreiben, wie er lustig ist, solange es sich um das vorgegebene Thema handelt. Der Thread ist für jegliche Formen von Fragen von Anfängern und Fortgeschritteneren gedacht.

Bitte vergesst nicht, wenn ihr euren Code postet, den BB-Code CODE beziehungsweise /CODE in [] zu nutzen!

Beispiel

Mit freundlichen Grüßen,
Freezy

 

[SvyyIf8nLfZt6Cz7geUkhIxJ]

Schöne Idee.

 

[FreezyBTW]

Direkt zu Anfang habe ich eine (für mich im Augenblick relativ relevante) Frage:
Ich habe den Hintergrund meiner Seite auf 100% skaliert und möchte, dass der Hintergrund auch bei Kleiner-Skalieren des Fensters mit-skaliert wird. Derzeit entstehen weiße Freiflächen beim Skalieren des Fensters.

Spoiler: Die Problematik (Screenshot)

Der Code:

body {
    background: url("img/background_blackwhite.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: roboto;
    display: block;
    color: #f8f8f8;
}

Danke schonmal c:
-Freezy

 

[SvyyIf8nLfZt6Cz7geUkhIxJ]

Wie lernt man eigentlich am besten Html,css etc.Hat da jemand ein Empfehlung?

~Elias

 

[expeehaa]

Wie lernt man eigentlich am besten Html,css etc.Hat da jemand ein Empfehlung?

~Elias

ein bisschen internet tutorials. gibt ein paar gute. und dann hilft es auch sehr viel, sich einfach mal das html von websiten anzuschauen, geht ja im browser ganz easy. da findet man dann oft auch css und javascript, kann man auch darüber einiges lernen.

Direkt zu Anfang habe ich eine (für mich im Augenblick relativ relevante) Frage:
Ich habe den Hintergrund meiner Seite auf 100% skaliert und möchte, dass der Hintergrund auch bei Kleiner-Skalieren des Fensters mit-skaliert wird. Derzeit entstehen weiße Freiflächen beim Skalieren des Fensters.

Spoiler: Die Problematik (Screenshot)

Der Code:

body {
    background: url("img/background_blackwhite.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: roboto;
    display: block;
    color: #f8f8f8;
}

Danke schonmal c:
-Freezy

Versuch mal, die Höhe des Backgrounds auf 100% zu setzen. Könnte funktionieren.

 

[FreezyBTW]

Versuch mal, die Höhe des Backgrounds auf 100% zu setzen. Könnte funktionieren.

Hat nicht geholfen :/ Trotzdem danke.

 

[Atlaan]

@FreezyBTW
Bootstrap bietet dafür direkt eine kompakte Lösung.
http://holdirbootstrap.de/css/#grid

 

[expeehaa]

@FreezyBTW
Bootstrap bietet dafür direkt eine kompakte Lösung.
http://holdirbootstrap.de/css/#grid

hauptsache auf deutsch... bin immer noch fna von getbootstrap.com

 

[FreezyBTW]

Direkt zu Anfang habe ich eine (für mich im Augenblick relativ relevante) Frage:
Ich habe den Hintergrund meiner Seite auf 100% skaliert und möchte, dass der Hintergrund auch bei Kleiner-Skalieren des Fensters mit-skaliert wird. Derzeit entstehen weiße Freiflächen beim Skalieren des Fensters.

Spoiler: Die Problematik (Screenshot)

Der Code:

body {
    background: url("img/background_blackwhite.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: roboto;
    display: block;
    color: #f8f8f8;
}

Danke schonmal c:
-Freezy

Ich habe eine Lösung gefunden. Wenn man "background-size: 100%;" entfernt und stattdessen "width: 100%" einfügt, wird der Hintergrund nicht mit skaliert.

body {
    background: url("img/background_blackwhite.png");
    width: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: roboto;
    display: block;
    color: #f8f8f8;
}

#EDIT:
Es funktioniert noch besser, wenn man den Code folgendermaßen ändert:

body {
    background: url("img/background_blackwhite.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    font-family: roboto;
    display: block;
    color: #f8f8f8;
}

Damit wird das Bild an der Seite nicht abgeschnitten, sondern stattdessen mit-skaliert.
-Freezy

 

[expeehaa]

Klingt interessant, aber ich denke nicht, dass Leute bei Fragen zu HTML/CSS/JS etc. hier fragen würden. Es dauert viel zu lange bis jemand mit einer guten Lösung antwortet.
Es geht viel schneller einfach das Problem auf StackOverflow zu suchen.

Beim ersten Teil stimme ich dir zu, beim zweiten Teil muss ich etwas hinzufügen. @NussNinja hat da so nen tollen discord server gemacht rund ums programmieren. Muss er mal den Invitelink schicken.

 

[SvyyIf8nLfZt6Cz7geUkhIxJ]

Hier ein Invitelink: https://discord.gg/EhsGJ

 

[Atlaan]

Extra nur dafür Bootstrap? Naja.

Bootstrap ist allgemein eine recht elegante und professionelle Lösung. Da kann man auch gerne die anderen Features benutzen - allein die Buttons sind ja im aktuellem css/html keine zeitgemäs stylistischen Lösungen.

 

[soldaten98]

muss man hierbei nicht einfach die width beachten und die monitorauflösung, sprich mit responsive desgin. habe da i.was gelsen, wusste auch mal wie es geht, auf jedenfall hat das mit der width zu tun