Ankündigung

Einklappen
Keine Ankündigung bisher.

Layout Startseite schrägen mit CSS

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

  • Layout Startseite schrägen mit CSS

    Hallo,

    ich habe eine Idee für eine neue Startseite. Ich möchte den Hintergrund nicht als Bild, sondern mit CSS, weiß aber nicht so richtig ob und wie das geht. Das angehängt Bild soll das mal verdeutlichen. Ich wäre euch dankbar, wenn ich mir dabei behilflich sein könntet.

    Liebe Grüße
    Andre
    CO Webdesign
    CO Webservice bei Facebook?

  • #2
    Warum denn kein Bild? Wenn es SVG ist, wird es sehr kompakt und Du kannst geradezu zeichnen, während es mit CSS ein "von hinten durch die Brust ins Auge" wird.

    Kommentar


    • #3
      Hallo,

      kann ich dir sagen. Ich versuche seit Jahre mit einem Programm zurecht zu kommen was SVG mach. Da geht nichts. Ich bin kein Grafiker. Zurzeit habe ich die neuste Inkscape und so ein doch schon komplexes Bild für die Größe ist woanders kaum in einer guten Qualität machbar.

      Liebe Grüße
      Andre
      CO Webdesign
      CO Webservice bei Facebook?

      Kommentar


      • #4
        Ich bin auch weniger Grafiker und mehr Programmierer und dachte eher daran, das SVG mit einer Bibliothek und Javascript zu zeichnen, z. B. dieser:
        https://svgjs.com/docs/2.7/getting-started/
        Dürfte damit um Längen einfacher sein als es mit CSS zu basteln.

        Kommentar


        • #5
          Hallo,

          ich und Javascript und dann noch englisch. Da muss ich versuchen eine andere Lösung zu finden. Danke. Einfache Einstellungen vielleicht, aber auch da habe ich Probleme. Na Danke.

          Liebe Grüße
          Andre
          CO Webdesign
          CO Webservice bei Facebook?

          Kommentar


          • #6
            Alles halb so wild, schau mal:
            http://jsfiddle.net/Sempervivum/0hrkc43L/9/

            Kommentar


            • #7
              Hi Andre1,
              ersteinmal finde ich das eine sehr gute Idee vom Design her. Von der Umsetzung ist es etwas komplexer hier kann man SVG-Grafik verwenden wie oben beschrieben. Aber es geht auch mithilfe von CSS. Und zwar verwendest du hier ein Container, indem mehrere Container mithilfe von CSS-Transform geändert werden. Das ganze solltest du dann mit den übergeordneten Container nochmals per Transform anpassen. Also es ist ziemlich viel Fummelarbeit sowas mit CSS zu realisieren aber nicht unmöglich.

              Gruß euer
              Localfu
              Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt.
              Albert Einstein

              Kommentar


              • #8
                Zitat von Sempervivum Beitrag anzeigen
                Alles halb so wild, schau mal:
                http://jsfiddle.net/Sempervivum/0hrkc43L/9/
                Hallo,

                nur leider scheine ich etwas nicht zu verstehen. Ja mit englisch ist das immer so eine Sache, auch stecke ich neben bei mit meinem Kopf in meinem Fernstudium "Geprüfter Web- Designer" bei der ILS. Ich weiß nicht ganz wie ich den Code einbinden müsste und (css) formatieren. Und ohne das kritisieren zu wollen da fehlen noch längst Linien, so dass es dann wie Dreiecke aussieht. Vielleicht könntest Du mir auch eine PN schreiben.

                Liebe Grüße
                Andre
                CO Webdesign
                CO Webservice bei Facebook?

                Kommentar


                • #9
                  man könnte es auch so ungefähr machen https://codepen.io/basti1012/pen/Xyeadg?editors=1010
                  unten noch die Schräge rein und es passt ja fast.

                  Aber svg ist besser und wahrscheinlich auch responsiver;
                  Zuletzt geändert von basti1012; 19.11.2018, 04:11.
                  Mein (Basti1012) Forum und Chat

                  Kommentar


                  • #10
                    Hallo,

                    ich habe das ganze jetzt mit svg gemacht und als neue Startseite erstellt. Ich danke dir für den Vorschlag.

                    Liebe Grüße
                    Andre
                    CO Webdesign
                    CO Webservice bei Facebook?

                    Kommentar


                    • #11
                      Zitat von Andre1 Beitrag anzeigen
                      ich und Javascript und dann noch englisch. Da muss ich versuchen eine andere Lösung zu finden.
                      Aber Webdesign usw. gewerblich anbieten???
                      PHProcks! » Tutorials

                      Kommentar


                      • #12
                        Zitat von Arne Drews Beitrag anzeigen
                        Aber Webdesign usw. gewerblich anbieten???
                        Und muss man jetzt zwingend englisch dafürkönnen? Eher nicht, sicher wäre es bei vielen besser, aber zwingend nicht. Es gibt immer auch andere Möglichkeiten und außerdem hat sich das erledigt.

                        Und als Webdesigner, das sagt der Name schon Designer ist JavaScript nur beding nötig, man kann ja nicht alles können, das kann keiner auch die welche denken alles zu können.
                        CO Webdesign
                        CO Webservice bei Facebook?

                        Kommentar


                        • #13
                          JavaScript ist für einen Webdesigner in der heutigen Zeit viel mehr als nur bedingt nötig. Das galt vielleicht vor 10 Jahren, wo alle noch auf JavaScript geschimpft haben und die Webseite auch ohne JavaScript funktionieren müsste. Das ist aber gerade in der heutigen Zeit meiner Meinung nach total überholt. Ich denke auch das dieses Forum hier etwas eingeschlafen ist in Sachen neuer technologien im Webdesign. Von Node.js, Vue.js, relaxt, angular, bootstrap, etc. habe ich hier noch nie etwas gelesen. Ganz zu schweigen von git. Was für eine ordentliche quellcodeverwaltung auch sehr wichtig wäre. Die Themenbereiche hier sind auch auf dem Stand von 2005...

                          Kommentar


                          • #14
                            Testie Dein Wort in Gottes Ohr! In den einschlägigen Foren trifft man "erfahrene" Mitglieder zuhauf, die jeglichen Einsatz von Bibliotheken oder Frameworks vehement ablehnen ...

                            Kommentar


                            • #15
                              Sehe ich ähnlich. JavaScript ist zwar grundlegendes Mittel, um eine saubere Usability zu schaffen und der Website Dynamik zu verleihen, gar keine Frage. Aber die grundlegende Bedienung sollte bspw. aus meiner Sicht auch ohne JS funktionieren, denn ansonsten schließt man z.B. Benutzergruppen aus, die durch einen Script-Blogger am Ausführen von Funktionen gehindert werden.
                              Natürlich setze ich selbst auch JS ein, aber wie gesagt, lassen sich meine Projekte auch ohne zumindest grundlegend bedienen und es gibt keine Infos, die nur über Script erreichbar wären.
                              PHProcks! » Tutorials

                              Kommentar

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

                              Einklappen

                              Themen: 56.413   Beiträge: 428.240   Mitglieder: 27.798   Aktive Mitglieder: 69
                              Willkommen an unser neuestes Mitglied, planaigeist.

                              Online-Benutzer

                              Einklappen

                              195 Benutzer sind jetzt online. Registrierte Benutzer: 3, Gäste: 192.

                              Mit 1.625 Benutzern waren am 17.03.2018 um 18:52 die meisten Benutzer gleichzeitig online.

                              Die neuesten Themen

                              Einklappen

                              • arnego2
                                Antwort auf Suche Filehoster
                                mega und hidive Mega (nz) komplett umsonst bis 5gb glaub ich....
                                Heute, 13:42
                              • andi656
                                Suche Filehoster
                                hallo,

                                welche Anbieter gibt es momentan die günstig oder sogar kostenlos ihren Dienst anbieten?
                                Ich bin da noch etwas ratlos, da ich sowas noch nie genutzt habe und bin daher über jeden Ratschlag dankbar....
                                Heute, 10:34
                              • Sempervivum
                                Antwort auf Zusätzliche fusszeile
                                Wenn Du also beide Boxen, #footer und #bereich, untereinander anzeigen willst, brauchst Du sie ja nur nacheinander in deine HTML-Seite einzufügen. Durch
                                Code:
                                display: flex;
                                flex-direction: column;
                                werden sie dann untereinander angeordnet. Woran scheiterst Du dabei denn?
                                BTW: float_center...
                                Gestern, 22:08
                              • föni
                                Antwort auf Zusätzliche fusszeile
                                Um die Codes auseinander zu halten, hab ich diese einfach anders benannt.

                                den...
                                HTML-Code:
                                #footer {
                                    width: 95%;
                                ...hab ich ja bereits mit eingepackt. Es erschein aber nicht mal einen Rahmen oder sonst was... als wäre der Code nicht da...

                                Weiss da auch nicht mehr w...
                                Gestern, 21:01
                              • Sempervivum
                                Antwort auf Zusätzliche fusszeile
                                Wenn Du den Footer über (fast) die ganze Breite haben willst, sieht dies doch vernünftig aus:
                                Code:
                                #footer {  
                                 width: 95%;
                                Ich bin nur ein wenig verwirrt, weil Du zunächst vom Footer schreibst und dann von #bereich? Soll diese Box zusätzlich zum Footer angezeigt werden?
                                Gestern, 19:39

                              Kostenlose Homepage bei Jimdo!

                              Einklappen

                              Jimdo

                              Die neuesten Beiträge

                              Einklappen

                              • andi656
                                Suche Filehoster
                                hallo,

                                welche Anbieter gibt es momentan die günstig oder sogar kostenlos ihren Dienst anbieten?
                                Ich bin da noch etwas ratlos, da ich sowas noch nie genutzt habe und bin daher über jeden Ratschlag dankbar....
                                Heute, 10:34
                              • arnego2
                                Antwort auf Suche Filehoster
                                mega und hidive Mega (nz) komplett umsonst bis 5gb glaub ich....
                                Heute, 13:42
                              • föni
                                Zusätzliche fusszeile
                                Hallo Leute

                                Ich hab eine html Seite am laufen mit folgendem Code:

                                HTML-Code:
                                 <!DOCTYPE HTML>
                                <html lang="de">
                                <head>
                                    <link rel="icon" href="bim/favicon.ico" type="image/x-icon" />
                                <title>x.ch</title>
                                ...
                                17.05.2019, 22:00
                              • Sempervivum
                                Antwort auf Zusätzliche fusszeile
                                Wenn Du also beide Boxen, #footer und #bereich, untereinander anzeigen willst, brauchst Du sie ja nur nacheinander in deine HTML-Seite einzufügen. Durch
                                Code:
                                display: flex;
                                flex-direction: column;
                                werden sie dann untereinander angeordnet. Woran scheiterst Du dabei denn?
                                BTW: float_center...
                                Gestern, 22:08
                              • föni
                                Antwort auf Zusätzliche fusszeile
                                Um die Codes auseinander zu halten, hab ich diese einfach anders benannt.

                                den...
                                HTML-Code:
                                #footer {
                                    width: 95%;
                                ...hab ich ja bereits mit eingepackt. Es erschein aber nicht mal einen Rahmen oder sonst was... als wäre der Code nicht da...

                                Weiss da auch nicht mehr w...
                                Gestern, 21:01
                              • Sempervivum
                                Antwort auf Zusätzliche fusszeile
                                Wenn Du den Footer über (fast) die ganze Breite haben willst, sieht dies doch vernünftig aus:
                                Code:
                                #footer {  
                                 width: 95%;
                                Ich bin nur ein wenig verwirrt, weil Du zunächst vom Footer schreibst und dann von #bereich? Soll diese Box zusätzlich zum Footer angezeigt werden?
                                Gestern, 19:39
                              • föni
                                Antwort auf Zusätzliche fusszeile
                                Vielen Dank für Deine hilfreiche Antwort.

                                Ich hab nun den Code wie folgt ergänzt und möchte eigentlich unten gerne auch die selbe box quer (ca. 95% breit) über die Seite haben. (wie im Bild oben)

                                HTML-Code:
                                #footer {
                                width: 95%;
                                min-height: 560px;
                                margin: 0 auto;
                                ...
                                Gestern, 19:07
                              • Sempervivum
                                Antwort auf Zusätzliche fusszeile
                                Dann versuche es mit...
                                Gestern, 07:27
                              • föni
                                Antwort auf Zusätzliche fusszeile
                                Die Fusszeile sollte normal in die Seite eingebaut werden und nicht immer fix zu sehen sein....
                                Gestern, 07:13
                              • Sempervivum
                                Antwort auf Zusätzliche fusszeile
                                Soll die Fußzeile denn ganz normal in die Seite eingebettet sein oder soll sie beim Scrollen fixiert sein? In jedem Fall ist float:left der falsche Weg. Wenn ersteres zutrifft, ist es wahrscheinlich schon ausreichend, wenn Du es weglässt und beim body flex-direction:column und align-items:center hinzu...
                                Gestern, 06:27
                              Lädt...
                              X