Ankündigung

Einklappen
Keine Ankündigung bisher.

html und css homepage ohne Javascript

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • html und css homepage ohne Javascript

    Hallo,
    ich möchte nur in html und css ohne Javascript eine Website erstellen , die laut Anhang ungefähr so aussehen soll. Content diverse Themenbereiche als Blog. Ich habe auch schon angefangen, hochgeladen, das würde eigentlich schon reichen. Aber ich bin haltrnicht zufrieden. Als Hilfe hatte ich mir W3school hergenommen. Ich bekomm einfach das content nicht zentriert. Und als responsive verschiebt sich alles im Content und ist auch nicht gut lesbar.
    Ich habe mal die bestehende html und css Datei hinzugefügt.
    Vielleich kann ich ja Hilfe von euch bekommen? Vielen Dank
    PS: ich bin jetzt mit dem hochladen nicht klar gekommen. Die css habe ich jetzt als pdf hoch geladen.??
    Zuletzt geändert von ; 14.05.2022, 16:01.

  • #2
    Auch w3schools ist mit Vorsicht zu genießen: Ebenso wie in anderen Quellen im Netz findet man veraltete Anleitungen. In diesem Fall ist das Problem, dass mit Floatlayout gearbeitet wird und sich das für dein Vorhaben nicht eignet.
    Informiere dich statt dessen über Gridlayout, dann wird alles einfacher und Du kannst die Container so anordnen wie Du es wünschst.
    https://css-tricks.com/snippets/css/...te-guide-grid/
    Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
    (Andre Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)

    Kommentar


    • #3
      Vielen Dank

      Kommentar


      • #4
        Moin eisbär,
        ich kann die nur empfehlen ein Buch über HTML und CSS holen. Das kostet heutzutage fast nichts mehr und man bekommt auch digitale Bücher als PDF oder eBook. Ich kann dir empfehlen das Buch zu holen, da es ein guter Einstieg ist in die Erstellung von Webseiten mit HTML und CSS. https://www.rheinwerk-verlag.de/eins...-html-und-css/

        Natürlich gibt es noch viele weitere gute Bücher von anderen Verlagen, aber bevor du die Übersicht verlierst, ist das ein guter Einstieg. Ich wünsche dir viel Erfolg und wenn du Fragen hast, dann einfach ins Forum schreiben.

        Viele Grüße Localfu
        PS: Wenn euch mein Post gefallen hat, dann lasst mir ein "Daumen hoch" da!

        Kommentar


        • #5
          Dank Dir, sehr guter Vorschlag. Denn nach 2 Stunden rum probieren bekomme ich mein "einfaches Template" mit grid nicht hin. Bin zu blöd dafür.
          Das Zusammenspiel Html und css miteinander habe ich halbwegs schon kapiert. Für meine Ansprüche sollte es reichen. Aber den Aufbau mit grid, pfffffffffff
          Trotzdem Danke

          Kommentar


          • #6
            Für dein Template brauchst Du nur wenig von Grid:

            Zwei Spalten anlegen:
            Code:
            #grid-container {
                grid-template-columns: 2fr 1fr;
            }
            Header und Footer müssen beide Spalten überspannen:
            Code:
            header {
                grid-column: 1 / 3;
            }
            Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
            (Andre Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)

            Kommentar


            • #7
              ja vielen Dank. Ein Ansatzpunkt. Das versuche ich mal.
              Ich bin momentan auf der Seite https://wiki.selfhtml.org/wiki/CSS/T...rid/Grid-Items
              Vielleicht zum üben net schlecht.....?
              Zuletzt geändert von ; 14.05.2022, 19:27.

              Kommentar


              • #8
                Ja, Selfhtml ist auch zu empfehlen.
                Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
                (Andre Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)

                Kommentar


                • #9
                  Hallo,
                  ich komme nicht klar mit oben genannten Code. Irgendwie steig ich nicht dahinter.
                  Ich habe jetzt mal mit "item" versucht um wenigstens irgendwas hinzubekommen. Da geht mir aber die Luft aus, wenn ich dann mehrere Content (Themen) erzeugen möchte. Auch der Menu-Bereich ist viel zu hoch. Außer ich mache die Schrift größer.
                  Wahrscheinlich bin ich mit allem auf dem falschen Dampfer.
                  Header, Menu, Footer sollen über die ganze Breite.
                  Die Verschiebung von img-logo und Schrift geht auch über "padding" ??
                  Abgesehen von den schrecklichen Farben, "Logofehler" fehlt ein e , und nichts sagendem Text, habe ich meinen Code im Anhang und ein Foto der Einteilung. Wenn ihr meint, schade um die Zeit, dann lasse ichs bleiben. Jeder hat so seine Begabung......
                  HTML-Code:
                  <!DOCTYPE html>
                  <html>
                  <head>
                  <title>Das Bullshit-Web</title>
                  <link rel="stylesheet" href="css/formate.css">
                  <link rel="shortcut icon" type="image/x-icon" href="Bilder/favicon.png">
                  <meta charset="utf-8">
                  <meta font-family= "Roboto">
                  <meta name="refferer" content="no-refferer">
                  <meta http-equiv="Content-Security-Policy" content="script-src 'none'">
                  </head>
                  <body>
                  
                  <div class="grid-container">
                  <div class="grid-item1"><img src="/Bilder/money.png" width="410" height="100">
                  <h3>Eine Seite für Unverbesserliche...</h3>
                  <p>kann man lesen, muss man nicht.</p>
                  </div>
                  <div class="grid-item2"><a href="index.html">Startseite</a>
                  <a href="bullshit.html">Bullshit</a>
                  <a href="blog.html">Blog koin Bock</a>
                  <a href="datenschutz.html">Datenschutz</a>
                  <a href="Espressum.html">Espressum</a>
                  </div>
                  <div class="grid-item3"><h4>Microsoft</h4>
                  <p>Microsoft, was , wer ist das. Ein neues Kochbuch von Bill</p></div>
                  <div class="grid-item4"><h4>Microsoft</h4>
                  <p>Microsoft, was , wer ist das. Ein neues Kochbuch von Bill</p></div>
                  <div class="grid-item5"><a href="index.html">Startseite</a>
                  <a href="bullshit.html">Bullshit</a>
                  <a href="blog.html">Blog koin Bock</a>
                  <a href="datenschutz.html">Datenschutz</a>
                  <a href="Espressum.html">Espressum</a><img src="/Bilder/money.png" width="410" height="100"></div>
                  </div>
                  </body>
                  </html>
                  
                  [CODE].grid-container {
                  display: grid;
                  grid-template-rows: 100px 100px 100px;
                  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
                  grid-gap: 5px;
                  grid-template-areas:
                  "area1 area1 area1 area1 area1"
                  "area2 area2 area2 area2 area2"
                  " . area3 area3 area4 . "
                  "area5 area5 area5 area5 area5"
                  }
                  .grid-item1 {
                  background: blue;
                  text-align: center;
                  grid-area: area1;
                  }
                  .grid-item2 {
                  background: red;
                  text-align: center;
                  padding: 35px 2px 2px 2px;
                  grid-area: area2;
                  }
                  .grid-item3 {
                  background: green;
                  text-align: center;
                  grid-area: area3;
                  }
                  .grid-item4 {
                  background: yellow;
                  text-align: center;
                  grid-area: area4;
                  }
                  .grid-item5 {
                  background: PowderBlue;
                  text-align: center;
                  grid-area: area5;
                  }
                  
                  
                  [/CODE]
                  
                  
                  
                  
                  
                  
                  Angehängte Dateien

                  Kommentar


                  • #10
                    Hallo,

                    vielleicht mal dieses Beispiel anschauen ...

                    >> https://media.kulturbanause.de/2016/...-grids-01.html

                    ... gefunden hier in diesem Beitrag ...

                    CSS Grid – Einführung in Gestaltungsraster mit dem Grid Layout Module

                    >> https://kulturbanause.de/blog/css-grid-layout-module/
                    ... nach unten scrollen bis "Beispiel anschauen".

                    daniel5959
                    FindeLinks.de - Kurzinfos mit Linkempfehlung
                    Homepage-FAQs.de - seit Ende 2020 offline

                    Kommentar


                    • #11
                      Abstände durch zusätzliche Container zu erzeugen ist wenig elegant und macht das Ganze unübersichtlich. Besser mit Außenabständen bzw. Margins arbeiten.
                      Und feste Abmessungen sind häufig eine Quelle von Problemen, in diesem Fall durch Überlaufe. Besser nur in Ausnahmefällen verwenden.
                      Dies müsste eigentlich in etwa das sein, was Du in deinem PDF skizziert hast:
                      Code:
                              .grid-container {
                                  display: grid;
                                  /* grid-template-rows: 100px 100px 100px; */
                                  /* Die linke Spalte soll doppelt so breit sein wie die rechte: */
                                  grid-template-columns: 2fr 1fr;
                                  grid-gap: 5px;
                                  grid-template-areas:
                                      "area1 area1"
                                      "area2 area2"
                                      "area3 area4"
                                      "area5 area5"
                              }
                              .grid-item1 {
                                  background: blue;
                                  text-align: center;
                                  grid-area: area1;
                              }
                              .grid-item2 {
                                  background: red;
                                  text-align: center;
                                  padding: 35px 2px 2px 2px;
                                  grid-area: area2;
                              }
                              .grid-item3 {
                                  background: green;
                                  text-align: center;
                                  grid-area: area3;
                                  margin: 2em 0 2em 5em;
                              }
                              .grid-item4 {
                                  background: yellow;
                                  text-align: center;
                                  grid-area: area4;
                                  margin: 2em 1em 2em 2em;
                              }
                              .grid-item5 {
                                  background: PowderBlue;
                                  text-align: center;
                                  grid-area: area5;
                              }
                      Und die Verwendung von semantischen Tags wie nav, header, section etc. wäre noch zu empfehlen.
                      Zuletzt geändert von Sempervivum; 23.05.2022, 09:02.
                      Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
                      (Andre Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)

                      Kommentar


                      • #12
                        Daaaankeee

                        Kommentar

                        homepage-forum.de - Hilfe für Webmaster! Statistiken

                        Einklappen

                        Themen: 57.089   Beiträge: 432.165   Mitglieder: 29.280   Aktive Mitglieder: 37
                        Willkommen an unser neuestes Mitglied, JosephGeata.

                        Online-Benutzer

                        Einklappen

                        199 Benutzer sind jetzt online. Registrierte Benutzer: 2, Gäste: 197.

                        Mit 3.502 Benutzern waren am 23.01.2020 um 17:20 die meisten Benutzer gleichzeitig online.

                        Die neuesten Themen

                        Einklappen

                        • daniel5959
                          Gaspreise - gut wer Energie auf Vorrat lagern kann
                          Hallo,

                          jetzt sind alle Leute gut dran, die ihre Heizenergie im eigenen Haus lagern können und schon im Frühjahr Heizöl bestellt haben, sie müssen sich keine Sorgen um die Gaspreissteigerungen der kommenden Monate machen.

                          Bisher waren die Gaskunden gut dran, sie haben sich...
                          24.06.2022, 01:37
                        • Grufty
                          Handydarstellung
                          In der Handydarstellung meiner Homepage fehlt neuerdings das Menue. War bisher ok. Sonst alles ok.

                          Problem durch sehr prompte Hilfe durch IN MEDIA gelöst!
                          Es lag am COUNTER CODE.
                          22.06.2022, 09:04
                        • Sprueche
                          LustigX.de - Lustige Bilder & witzige Memes
                          Hallo liebe Leute,

                          ich will Euch ein neues Projekt von mir vorstellen. Es handelt sich um "LustigX.de". Auf der Webseite werden von Mitgliedern "Lustiges/Witziges" gepostet. Du kannst gerne ein Teil der Community werden und selber "Lustiges/Witziges" posten....
                          21.06.2022, 02:08
                        • daniel5959
                          Energiewende mit günstigem Ökostrom und Wärmepumpe
                          Hallo,

                          meine Berechnung für eine persönliche Energiewende.

                          A) Grob geschätzt für mein kleines Häuschen rund 850 Liter Heizöl im langjährigen Mittel, das wären (Heizöl - Heizwert ca. 9,8 kWh pro Liter) 8.330 kWh und wenn ich diese Wärme mit einer Wärmepumpe und einer Jahresarbeitszahl
                          ...
                          18.06.2022, 02:45
                        • rene_j
                          Euere Meinung und Feedback zu meinem Projekt - van-reise.eu
                          Um welches Thema geht es?
                          Es geht primär um die Themen Reisen, Wandern, Geocaching, Trekking, Urban Exploration (Lost Places) und Übernachtungen im Freien (Wälder, Berge etc.) sowie Fahrzeug Anschaffung und Ausbau.

                          Das Projekt steckt noch in Kinderschuhen.
                          Die Social-Media-Kanäle...
                          14.06.2022, 13:41

                        Die neuesten Beiträge

                        Einklappen

                        • daniel5959
                          Antwort auf Steigende Preise
                          Nachtrag:

                          Mein Kassenbon vom 12.Juni 2022 hatte die Summe von knapp 58 Euro, also knapp 30 Euro pro Woche.

                          Heute werfe ich mal wieder einen Blick in den ...



                          Es gibt weiterhin günstige Lebensmittel zu kaufen, auch Obst und Gemüse, selbst Bier, Fleisch...
                          Gestern, 04:47
                        • Sprueche
                          Antwort auf SpruecheX.de - Sprüche, Zitate und Weisheiten
                          Wegen Social-Media und SEO.

                          Update: Neues Design ist online!...
                          26.06.2022, 22:51
                        • eloms
                          Antwort auf Feedback zur Überarbeitung meiner Homepage
                          Hallo

                          So, ich habe diverse Ändeungen vorgenommen und ein Zufallsbild auf der Startseite eingefügt. Klickt man auf den Link, wird das ausgewählte Bild grün angezeigt.
                          War für mich gar nicht so einfach da so umzusetzen.
                          Langsam wird die Seite fertig.

                          mfg
                          ...
                          26.06.2022, 05:47
                        • daniel5959
                          Gaspreise - gut wer Energie auf Vorrat lagern kann
                          Hallo,

                          jetzt sind alle Leute gut dran, die ihre Heizenergie im eigenen Haus lagern können und schon im Frühjahr Heizöl bestellt haben, sie müssen sich keine Sorgen um die Gaspreissteigerungen der kommenden Monate machen.

                          Bisher waren die Gaskunden gut dran, sie haben sich...
                          24.06.2022, 01:37
                        • ST747
                          Antwort auf Gaspreise - gut wer Energie auf Vorrat lagern kann
                          hi,

                          beim gas ist die lieferung derzeit gedrosselt, weil ein pumpe kaputt ist.

                          deshalb werden auch die gasspeicher nicht so gefüllt, wie geplant.

                          nach meinen informationen muss die pumpe von einer deutschen firma gewartet oder repariert werden. das geht aber nicht,...
                          25.06.2022, 13:48
                        • daniel5959
                          Antwort auf Gaspreise - gut wer Energie auf Vorrat lagern kann
                          Nachtrag 2:

                          Frage: Wie weit würde man mit maximal 256 TWh (= max. 256 Mrd. kWh) Gas kommen?



                          In den letzten 3 Monaten des Jahres - Oktober, November und Dezember - werden im Mittel 277 TWh an Gas verbraucht, d.h. die maximal gefüllten Gasspeicher wären am Jahresende...
                          25.06.2022, 05:53
                        • daniel5959
                          Antwort auf Gaspreise - gut wer Energie auf Vorrat lagern kann
                          Nachtrag:

                          Deutschland hat genau genommen keinen Gasvorrat, sondern nur einen Gaspuffer, um die Spitzen im Winter abzupuffern.



                          Also wenn die Erdgasspeicher ganz voll wären, dann würde es für 2 bis 3 Monate reichen, aber nur wenn in dieser Zeit weiterhin Gas...
                          25.06.2022, 00:15
                        • Grufty
                          Handydarstellung
                          In der Handydarstellung meiner Homepage fehlt neuerdings das Menue. War bisher ok. Sonst alles ok.

                          Problem durch sehr prompte Hilfe durch IN MEDIA gelöst!
                          Es lag am COUNTER CODE.
                          22.06.2022, 09:04
                        • Localfu
                          Antwort auf Handydarstellung
                          Hier eine Lösung von mir
                          Code:
                          var linkTitle = ['Startseite', 'Über mich', 'Aktuelles', 'Kontakt', 'Impressum'];
                          var linkURL = ['home.html', 'about.html', 'news.html', 'contact.html', 'impressum.html'];
                          var topnav;
                          document.addEventListener('DOMContentLoaded', ()=> {
                          ...
                          24.06.2022, 16:16
                        • Localfu
                          Antwort auf Handydarstellung
                          Hallo Grufty,
                          leider ist dein JavaScript-Code fehlerhaft und weisst viele Fehler auf:
                          Code:
                          jQuery.noConflict()(function($){$("<form id='mobilemenu' class='right2'><select /></form>").appendTo("#topnav"),$("<option />",{selected:"selected",value:"",value:"",text:"F"
                          ...
                          24.06.2022, 15:22
                        Lädt...
                        X