frag mich nicht: So nah und Doch so fern (.html -.css Verbinden)

SELF-Forum

So nah und Doch so fern (.html -.css Verbinden)

frag mich nicht
– Informationen zu den Bewertungsregeln

Wie kann ich bei html ein Bild zufügen das als Hintergrund fungiert, drauf sollen zwei Button (auf dem Bild). Ich mache das alles hier zum Erstmal, ich habe mir viele Videos angesehen, wenn man es nicht weiß, nervt es einfach nur.

Homepage.html

<!DOCTYPE html>

<html lang="de">
<head> 

    <link rel="stylesheet" href="seit1.css" type="text/css">
   
<title>Community</title> 

    <img src="<style type=" text />css">
   
    <style type="text/css">
        .auto-style1 {
            width: 1920px;
            height: 1200px;
        }
    </style>

    <p>
        <img class="auto-style2" src="file:///C:/Users/PC/Desktop/Neuer%20Ordner%20(2)/front%201%20-%20Kopie.jpg" />
    </p>

</head>

<body>
    <h1></h1>

            <form action="mailto:email_address" method="POST">
                <br><input type="text" name="realname" size="15"><b>Name</b>
                <br><input type="text" name="email" size="15"><b>Adresse</b>
                <br>
            </form>

</body>
</html>

****Hintergrund.css ****

<style type="text/css">
          .auto-style2 {
              width: 1920px;
              height: 1200px;
          }
      </style>

      <p>
          <img class="auto-style2" src="file:///C:/Users/PC/Desktop/Neuer%20Ordner%20(2)/front%201%20-%20Kopie.jpg" /></p>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. So nah und Doch so fern (.html -.css Verbinden)

    bobby
    – Informationen zu den Bewertungsregeln

    Moin,

    <!DOCTYPE html>

    Sehr gut

    <html lang="de"> <head>

    <link rel="stylesheet" href="seit1.css" type="text/css">

    das verlinken scheint erstmal korrekt, wenn auch HTML und CSS nicht stimmen. Dies ist korrekt

    <title>Community</title>

    Ab hier->

    <img src="<style type=" text />css">

<style type="text/css">
    .auto-style1 {
        width: 1920px;
        height: 1200px;
    }
</style>

<p>
    <img class="auto-style2" src="file:///C:/Users/PC/Desktop/Neuer%20Ordner%20(2)/front%201%20-%20Kopie.jpg" />
</p>

    <- bis hier, ist Unsinn. Im Head stehen nur Header-Daten. Keine Inhalte

    </head>

    <body> <h1></h1>

    ein leeres H1?

            <form action="mailto:email_address" method="POST">
            <br><input type="text" name="realname" size="15"><b>Name</b>
            <br><input type="text" name="email" size="15"><b>Adresse</b>
            <br>
        </form>

    Das ist ein Formular mit 2 Input Feldern, und nicht mit Buttons!

    </body> </html>

    ****Hintergrund.css ****

    Diese nächste Zeile darf nicht im CSS stehen!

    <style type="text/css">

    Das sieht gut aus, allerdings, denke ich auf das falsche Element ausgeführt

          .auto-style2 {
          width: 1920px;
          height: 1200px;
      }

    Die nächsten Zeilen haben in der CSS wieder nix verloren!

      </style>
  <p>
      <img class="auto-style2" src="file:///C:/Users/PC/Desktop/Neuer%20Ordner%20(2)/front%201%20-%20Kopie.jpg" /></p>

    Ich denke du solltest dir folgendes Überlegen. Du hast ein Formular (<form>). Diesem kannst du über die CSS-Datei einen Hintergrundbild zuweisen (background-img:url('front 1 - Kopie.jpg') !ACHTUNG! du hast einen absoluten Pfad eingertragen, der auf anderen Rechnern nicht funktioniert. Außerdem sollten keine Leerzeichen im Dateinamen stehen). Dann kannst sagen dass das Hintergrundbild nicht wiederholt werden soll (background-repeat:no-repeat). Dem Formular kannst du die Höhe und breite zuweisen ( width: 1920px;height: 1200px;)

    Versuch es einfach nochmal!

    Gruß Bobby

    --
    -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. So nah und Doch so fern (.html -.css Verbinden)

      Gunnar Bittersmann Homepage des Autors
      +1 Informationen zu den Bewertungsregeln

      Außerdem sollten keine Leerzeichen im Dateinamen stehen).

      Warum nicht? Wenn das OS das unterstützt, spricht nichts dagegen.

      Natürlich müssen Leerzeichen evtl. kontextgemäß escapet werden – im Pfad von URIs eben als %20.

      Dem Formular kannst du die Höhe und breite zuweisen ( width: 1920px;height: 1200px;)

      Keine gute Idee. Die Viewports der meisten Geräte sind kleiner als 1920px.

      In Pixel festgemeißelte Breiten waren noch nie webtauglich. Seit dem Aufkommen mobiler Geräte sollten sie tabu sein.

      LLAP

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      Beitrag melden
      +1
      Informationen zu den Bewertungsregeln

      1. So nah und Doch so fern (.html -.css Verbinden)

        bobby
        +1 Informationen zu den Bewertungsregeln

        Moin,

        Natürlich müssen Leerzeichen evtl. kontextgemäß escapet werden – im Pfad von URIs eben als %20.

        Dies kann zu Problemen führen. Würde ich generell abraten

        Keine gute Idee. Die Viewports der meisten Geräte sind kleiner als 1920px.

        In Pixel festgemeißelte Breiten waren noch nie webtauglich. Seit dem Aufkommen mobiler Geräte sollten sie tabu sein.

        Ist ja korrekt... ich wollte jetzt nur den Code des OP korrigieren.

        Gruß Bobby

        --
        -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
        Beitrag melden
        +1
        Informationen zu den Bewertungsregeln

      2. So nah und Doch so fern (.html -.css Verbinden)

        frag mich nicht
        – Informationen zu den Bewertungsregeln

        Dem Formular kannst du die Höhe und breite zuweisen ( width: 1920px;height: 1200px;)

        Keine gute Idee. Die Viewports der meisten Geräte sind kleiner als 1920px.

        In Pixel festgemeißelte Breiten waren noch nie webtauglich. Seit dem Aufkommen mobiler Geräte sollten sie tabu sein.

        LLAP

        Hallo, vielen dank für die hilfe von euch. Ich bin mir nun nicht ganz schlüssig. Welches wäre denn jetzt die bessere form. wo kann ich den Quelltext finden.

        gruss:-)

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

    2. So nah und Doch so fern (.html -.css Verbinden)

      frag mich nicht
      – Informationen zu den Bewertungsregeln

      ****Hintergrund.css ****

      Diese nächste Zeile darf nicht im CSS stehen!

      <style type="text/css">

      Das sieht gut aus, allerdings, denke ich auf das falsche Element ausgeführt

            .auto-style2 {
          width: 1920px;
          height: 1200px;
      }

      Die nächsten Zeilen haben in der CSS wieder nix verloren!

        </style>
  <p>
      <img class="auto-style2" src="file:///C:/Users/PC/Desktop/Neuer%20Ordner%20(2)/front%201%20-%20Kopie.jpg" /></p>

      Ich denke du solltest dir folgendes Überlegen. Du hast ein Formular (<form>). Diesem kannst du über die CSS-Datei einen Hintergrundbild zuweisen (background-img:url('front 1 - Kopie.jpg') !ACHTUNG! du hast einen absoluten Pfad eingertragen, der auf anderen Rechnern nicht funktioniert. Außerdem sollten keine Leerzeichen im Dateinamen stehen). Dann kannst sagen dass das Hintergrundbild nicht wiederholt werden soll (background-repeat:no-repeat). Dem Formular kannst du die Höhe und breite zuweisen ( width: 1920px;height: 1200px;)

      Versuch es einfach nochmal!

      Gruß Bobby

      hi Bobby und vielen dank, ich habe es gleich verbessert. Aber wohin Speicher ich das Hintergrundbild, so das es immer sichtbar bleibt.

      Dazu wenn ich das Bild zuweise, schau es so aus?

      selettore { background-image: url(.auto-style1); }

             {
          width: 1920px;
          height: 1200px;
      }


  <p>
      <img class="auto-style2" src="file:///C:/Users/PC/Desktop/Neuer%20Ordner%20(2)/front%201%20-%20Kopie.jpg"/></p>

      ich bin dankbar, wenn Ihr mir helfen könnt. Am besten Quelltext.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. So nah und Doch so fern (.html -.css Verbinden)

        frag mich nicht
        – Informationen zu den Bewertungsregeln

        Dazu wenn ich das Bild zuweise, schau es so aus? ****Hintergrund.css ****

        selettore { background-image: url(.auto-style1); }

               {
          width: 1920px;
          height: 1200px;
      }


  <p>
      <img class="auto-style2" src="file:///C:/Users/PC/Desktop/Neuer%20Ordner%20(2)/front%201%20-%20Kopie.jpg"/></p>

        ich bin dankbar, wenn Ihr mir helfen könnt. Am besten Quelltext.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. So nah und Doch so fern (.html -.css Verbinden)

    JürgenB
    +1 Informationen zu den Bewertungsregeln

    Hallo,

    zwei Anmerkungen:

    Du solltest nicht (nur) nach Videos lernen. Such dir eine Quelle, wo die Grunglagen erklärt werden, z.B. die Selfhtml-Doku

    Dein Vorhaben mit "mailto:..." wird bei vielen Besuchern nicht funktionieren. Dazu mus ein Mailclient installiert und konfiguriert sein. Viele User lesen aber ihre Mails nur im Web-Inteface des Mailanbieters.

    Gruß Jürgen

    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. So nah und Doch so fern (.html -.css Verbinden)

      1unitedpower
      +1 Informationen zu den Bewertungsregeln

      Dein Vorhaben mit "mailto:..." wird bei vielen Besuchern nicht funktionieren. Dazu mus ein Mailclient installiert und konfiguriert sein. Viele User lesen aber ihre Mails nur im Web-Inteface des Mailanbieters.

      Webclients können heute auch schon mit mailto-Links verknüpft werden. Google Mail macht es so, wie es bei anderen Anbietern aussieht weiß ich nicht. Die Technik dahinter schimpft sich "custom scheme and content handlers"

      Beitrag melden
      +1
      Informationen zu den Bewertungsregeln

      1. So nah und Doch so fern (.html -.css Verbinden)

        dedlfix
        – Informationen zu den Bewertungsregeln

        Tach!

        Webclients können heute auch schon mit mailto-Links verknüpft werden. Google Mail macht es so, wie es bei anderen Anbietern aussieht weiß ich nicht. Die Technik dahinter schimpft sich "custom scheme and content handlers"

        Etwas verständlicher (wie ich finde) als in der Spezifikation: MDN - registerProtocolHandler

        Das geht dann aber nur, wenn die Website selbst das Ziel ist. Das ist bei E-Mail nicht so häufig der Fall und klappt nur, wenn man auch der Mail-Provider des Besuchers ist.

        dedlfix.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  3. So nah und Doch so fern (.html -.css Verbinden)

    frag mich nicht
    – Informationen zu den Bewertungsregeln

    Update: Ich kann immer noch nicht das Hintergrundbild sehen. Wohin kann ich das Foto speichern, auf einem Server oder Ordner? So das es keine Probleme gibt wenn ich mit der hp on bin.

    Hier Erstmal das Update: Homepage.html

    <!DOCTYPE html>

<html lang="de">

<head> 

    <link rel="stylesheet" href="seit1.css" type="text/css">
  

<title>Community</title> 
    

</head>



<body>
   
   
    <form <selettore { background-image url"c:\users\pc\desktop\neuerordner(2)\front1-kopie.jpg"; }>

    <background-repeat:no-repeat>

</form>

   
    
</body>
</html>

    Hintergrund.cs

    selettore { background-image url"C:\Users\PC\Desktop\NeuerOrdner(2)\front1-Kopie.jpg"; }
         .auto-style2  {
              width: 1920px;
              height: 1200px;

              <p>
          <img class="auto-style2" src="file:///C:/Users/PC/Desktop/Neuer%20Ordner%20(2)/front%201%20-%20Kopie.jpg" /></p>
          }

    
      }
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln