Hintergrund von HTML seminar seite

  • Hallo,

    Beim HTML Seminar wir eine Website mit 3 spalten Schritt für Schritt erklärt. Dort gibt es das Hintergrundbild-Inhalt welches ja leicht durchsichtig ist mit drei Spalten sozusagen. Ich würde das gerne verwenden nur die Spalte rechts würde ich gerne weglassen und dafür die mittlere vergrößern. Wie bekomme ich das hin ohne das der durchsichtige Effekt verfällt?

  • Wenn es das ist, was ich denken kannst du das durchsichtige mit Background und rgba machen. Den Rest solltest du selber hinbekommen. Eine Spalte löschen und die eine vergrößern ist auch für einen Anfänger machbar.


    Kannst du mal das verlinken, was du meinst?

  • Den Code habe ich genauso wie auf der Seite. Der Hintergrund mit den drei Spalten ist ja nur ein Bild. Also habe ich das Bild bearbeitet und es wieder im Code eingebaut. Muss ich beim Code wenn ich das Bild mit einem Editor bearbeitet habe verändern?

  • #wrapper {
    /*background-color: #eeeeee;*/
    width: 900px;
    border: 2px solid red;
    margin: 0 auto;
    text-align: left;
    background-image: url(bilder/hintergrund-inhalt.png);

  • Wenn du die rechte Spalte löscht und die mittlere verbreiterst ändert sich nichts am Hintergrundbild. Damit ändert sich auch nichts am durchsichtigen Effekt. Die mittlere Spalte reicht dann einfach in den Bereich, der durch die rechte Spalte belegt war.


    Wenn du ein starres Layout 2-spaltiges Layout mit einem Hintergrundbild erstellen willst musst du die Grafik mit einem geeigneten Programm neu erstellen und in das umgebende Element (aktuell: div id=wrapper) einfügen. Das Grafikprogramm muss durchsichtige png-Grafiken erstellen können, das können nicht alle.


    Zur Info: Solche starren Layouts sind veraltet und zum Erstellen von ernsthaften Webseiten nicht geeignet.

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von MrMurphy ()

  • Aber das ist ja das Problem ich bearbeite es und schneide die dritte Spalte raus, füge es bei meine Website ein und der durchsichtige Effekt ist weg und ich frage mich warum das so ist.

    Da ich das erste Mal eine Website erstelle und auch nur für schulische Zwecke sollte das ausreichen.

  • Zitat

    ich bearbeite es und schneide die dritte Spalte raus, füge es bei meine Website ein und der durchsichtige Effekt ist weg und ich frage mich warum das so ist.

    Das kann viele Gründe haben: Vielleicht unterstützt dein Bildbearbeitungsprogramm keine Transparenz. Welches Programm hast Du zum Herausschneiden benutzt? Hänge am besten mal das Bild vor und nach der Bearbeitung an,damit man das überprüfen kann.


    BTW: Mit dem Link aus Posting #3 hast Du gerade ein etwas unglückliches Beispiel heraus gegriffen weil es float benutzt. Bei einem Mehrspaltenlayout orientiere dich besser hieran:

    https://www.html-seminar.de/css-flexbox.htm

  • Okay, vielen Dank. Welches Programm würdest du denn empfehlen? Welches das unterstützt?


    Wie schon geschrieben bin ich blutige Anfängerin und mache erstmal das was da steht, aber danke für den Hinweis dann schaue ich da nochmal rein.

  • Ist mir jetzt unangenehm aber das ist irgendein Bearbeitungsprogramm welches voreingestellt auf dem Laptop ist. 🤣🤣 Ich glaube Paint.

  • Bearbeitungsprogramm welches voreingestellt auf dem Laptop ist

    Das wird wohl Paint sein, allerdings ist das nicht wirklich brauchbar. Du solltest dir ein vernünftiges Programm besorgen. Kostenlos gibt es z.B. Gimp, allerdings wirst du dich da erst mal einarbeiten müssen, denn Gimp ist sehr mächtig und nicht ganz so leicht zu bedienen.

  • Warum ist dir das unangenehm, Paint ist kein Powerprogramm aber naheliegend und wird häufig verwendet. Aber jetzt haben wir die Erklärung: Ich habe es schnell ausprobiert und dies bekommen beim Speichern:

    html-seminar.de/forum/ws/attachment/3253/


    Versuche es mit Irfanview, das arbeitet zwar nicht interaktiv, indem man einen Rahmen aufzieht. aber vielleicht kannst Du damit erst Mal leben.

  • Hallo, mit Paint 3D (war tatsächlich auch auf dem Laptop) hat es funktioniert und mein hintergrund ist so wie ich ihn haben möchte. Dankeschön