Ankündigung

Einklappen
Keine Ankündigung bisher.

individuelles Grid in die css Kriegen aus Adobe XD

Einklappen

Neue Werbung 2019

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

  • individuelles Grid in die css Kriegen aus Adobe XD

    Aloha läutz,

    was muss ich mit den vielen vertikalen Baby Blauen streifen machen wie kriege ich diese ins style.css?
    wie ist die Mathematische Formel so das ich Hilfslinien erstellen kann zum Beispiel Gimp?
    wo zu sind die den den gut ?
    so wie ich es glaube ist das ein individuelles Grid System, so wie boodstrap?


    Die weise Tafel wo man die Sachen ablägen kann ist 1920px breit.
    Die Abstände sind 240px breit auf beiden Seiten also die Orangenen Kästchen also Mittig.
    Das rote Kästchen ist 36px breit so wie die anderen Säulen.
    Das blaue Kästchen ist 25px breit und ist der Abstand zwischen beiden Säulen.
    es gibt 24 Säulen.

  • #2
    Sollen wir die Anleitung für dich durchlesen?
    Ich glaube kaum das die Software hier jemand kennt und selbst wenn, warum liest nicht du die Dokumentation oder Hilfe dazu durch?

    Kommentar


    • #3
      protestix lol es geht nicht um die Software (adobe XD, gimp), sonder wie ich das Drecks grid in eine style.css kriege. Ihr kriegt doch auch eine Photoshop Datei mit diesen Hilfslinien die das css repräsentieren.

      ich habe so was biss jetzt erreicht

      Code:
      body{
          max-width: 1920px; <!--1920px deswegen weil das Fenster so breit ist-->
      
      }
      .container_24{
          margin-left: auto;
          margin-right: auto;
          width: 1439px;<!--1439px deswegen weil vom Anfang der baby blauen zu ende der baby blauen 1439px sind -->
      }
      
      
      .col_1,.col_2,.col_3,.col_4,.col_5,.col_6,.col_7,.col_8,.col_9,.col_10,.col_11,.col_12,.col_13,.col_14,.col_15,.col_16,.col_17,.col_18,.col_19,.col_20,.col_21,.col_22,
      .col_23,.col_24{
          display: inline;
          float: left;
          margin-left: 12.5px;
          margin-right: 12.5px;
      }
      
      .container_24,.col_1{width: 36px;}
      .container_24,.col_2{width: 97px;}
      .container_24,.col_3{width: 158px;}
      .container_24,.col_4{width: 219px;}
      .container_24,.col_5{width: 280px;}
      .container_24,.col_6{width: 341px;}
      .container_24,.col_7{width: 402px;}
      .container_24,.col_8{width: 463px;}
      .container_24,.col_9{width: 524px;}
      .container_24,.col_10{width: 585px;}
      .container_24,.col_11{width: 646px;}
      .container_24,.col_12{width: 707px;}
      .container_24,.col_13{width: 768px;}
      .container_24,.col_14{width: 829px;}
      .container_24,.col_15{width: 890px;}
      .container_24,.col_16{width: 951px;}
      .container_24,.col_17{width: 1012px;}
      .container_24,.col_18{width: 1073px;}
      .container_24,.col_19{width: 1134px;}
      .container_24,.col_20{width: 1195px;}
      .container_24,.col_21{width: 1256px;}
      .container_24,.col_22{width: 1317px;}
      .container_24,.col_23{width: 1378px;}
      .container_24,.col_24{width: 1439px;}
      HTML-Code:
      <!DOCTYPE html>
      <html>
      
          <head>
              <meta charset="utf-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <title>ERSTE SCHRITTE MIT BRACKETS</title>
              <meta name="description" content="Ein interaktiver Wegweiser für die ersten Schritte mit Brackets.">
              <link rel="stylesheet" href="style.css">
          </head>
          <body>
      
      
                   <div class="container_24">
                 <div class="col_1">asdsa</div>
                 <div class="col_1">asdsa</div>
                 <div class="col_1">asdsa</div>
                 <div class="col_1">asdsa</div>
                 <div class="col_1">asdsa</div>
                 <div class="col_1">asdsa</div>
                 <div class="col_1">asdsa</div>
                 <div class="col_1">asdsa</div>
                 <div class="col_1">asdsa</div>
                 <div class="col_1">asdsa</div>
                 <div class="col_1">asdsa</div>
                 <div class="col_1">asdsa</div>
                 <div class="col_1">asdsa</div>
                 <div class="col_1">asdsa</div>
                 <div class="col_1">asdsa</div>
                 <div class="col_1">asdsa</div>
                 <div class="col_1">asdsa</div>
                 <div class="col_1">asdsa</div>
                 <div class="col_1">asdsa</div>
                 <div class="col_1">asdsa</div>
                 <div class="col_1">asdsa</div>
                 <div class="col_1">asdsa</div>
                 <div class="col_1">asdsa</div>
                 <div class="col_1">asdsa</div> <!--dieser kriegt eine neue zeile-->
      
              </div>
                <div class="container_24">
                 <div class="col_12">asdsa</div>
                 <div class="col_12">asdsa</div> <!--dieser kriegt eine neue Zeile ob wohl beide passen mussten es das ist die Helfte -->
              </div>
      
          </body>
      </html>
      Technische infos->

      aus dem Bild entnähmet das View 1920px breit ist.
      die Mitte wo die Spalten sind 1439px breit
      24 Spalten
      Spaltenbreite 36
      Spaltenabstand zu einander ist 25
      an der Seite sind jeweils 240px

      Kommentar


      • #4
        Was soll das werden, wenns fertig ist? Vielleicht bewegst du dich gerade in die vollkommen falsche Richtung, aber das kann dir niemand sagen ohne deine Absichten zu kennen.

        Wenn das irgendwas grafisches werden soll, bist du mit CSS falsch. Dafür eignet sich eher SVG oder Canvas.

        Kommentar


        • #5
          Ich verstehe hier auch irgendwie nix.
          Ich verstehe nicht was das erste Bild mit deinen Code zu tun hat. Was soll das überhaupt sein im Bild ? Willst du das nachbauen wie es im Bild zu sehen ist? Dein Code bringt mich bis jetzt auch nicht weiter ,weil das bis jetzt ja noch nix fertiges ist und ich auch noch nicht raus gefunden habe was das werden soll.

          Am besten sagst du uns ,oder zeigst du uns wie du was haben willst und zeigst uns dann was du bis jetzt gemacht und versuchst hast ?
          Ich mach keine Rechtschreibfehler - ich schreib Freestyle!
          Erreichbar in mein Javascript-Forum und in Facebook-Chat

          Kommentar


          • #6
            basti1012 hellbringer Es ist ein webdesign Rohling auf das Baby blaue kommen informationen der Website drauf sowas wie (Header mit dem Logo, navbar, conntent bilder). Es ist eine hilfe bei der Gestaltung der Website. Wie man will rasten da die Sachen ein und helfen es alles sauber in der Linie zu bringen. Ist der Designer fertig kommen die Baby blauen Spalten weg. Der Programmierer setzt das in html5 und CSS um. Die farbigen Quadrate sind da fÜr da zu veranschaulichen wie der Setup ist für euch.die Baby blauen Spalten sind nur wichtig.

            Kommentar


            • #7
              Das verstehe ich ja so halbwegs. Nur verstehe ich jetzt nicht was du vor hast und was du jetzt willst.
              Was willst du mit den blauen Spalten machen ? Sollen die auf deiner Seite sein ? Sollen die in dein dobe rein oder,oder.
              Ich glaube das Thema ist gerade etwas hoch für mich ,oder ich verstehe alles falsch
              Ich mach keine Rechtschreibfehler - ich schreib Freestyle!
              Erreichbar in mein Javascript-Forum und in Facebook-Chat

              Kommentar


              • #8
                basti1012 die Spalten im CSS nachprogramieren, wenn du das so willst eigenes bootstrap quasi. Ist es aber nicht. Es ist so was wie ein eigenes kordinaten system. Sagen wir wollen was ab der 6 Spalte plazieren gebe ich einfach Classic="col_6".

                Kommentar


                • #9
                  Zitat von Harry05 Beitrag anzeigen
                  basti1012 hellbringer Es ist ein webdesign Rohling auf das Baby blaue kommen informationen der Website drauf sowas wie (Header mit dem Logo, navbar, conntent bilder). Es ist eine hilfe bei der Gestaltung der Website. Wie man will rasten da die Sachen ein und helfen es alles sauber in der Linie zu bringen. Ist der Designer fertig kommen die Baby blauen Spalten weg. Der Programmierer setzt das in html5 und CSS um. Die farbigen Quadrate sind da fÜr da zu veranschaulichen wie der Setup ist für euch.die Baby blauen Spalten sind nur wichtig.
                  Du erfindest ein Steinzeitrad neu. Heutzutage verwendet man Flex-Boxen und kein Pseudo-Grid. Und wenns mal der IE untersützt, kann man auch ein richtiges CSS-Grid verwenden.

                  Wenns ein "Framework" sein soll, schau dir mal Flex Grid von Primefaces an:

                  https://www.primefaces.org/primeng/#/flexgrid

                  Kommentar


                  • #10
                    hellbringer ich könnte auch mir die Arbeit sparen und das grid960.de nehmen, aber dann stimmt es mit meinem Grid nicht über ein, da müsste ich erst die Spalten ( im Gimp, photoshop, Illustrator, whatever anpassen)an das Grid anpassen. Ich glaube auch das meine Arbeitsweise zimmlich modern ist habe schon mehrere Dinger im i-net gesehen es wurde bloß nicht ausreichend erklärt zur Erstellung des grids und customnising.

                    Kommentar


                    • #11
                      hellbringer https://youtu.be/xKpjtYAVs0M

                      Kommentar


                      • #12
                        Ich denke ich habe es teilweise verstanden.

                        Mal meine unwichtige Meinung dazu. Die meisten hier sind keine Grafiker, und auch ich wusste nicht, dass man Hilfslinien in Grafikprogrammen einblenden lassen kann, wozu auch, habe damit nichts zu tun und mit G'IMP und Derivaten nie gearbeitet, dafür gibt es schliesslich Grafiker, die einem das entwerfen.

                        Die hohe Kunst ist es nun, diese Grafiken in eine Webseitenvorlage umzusetzen, die auf allen derzeit genutzten Geräten ansprechend aussieht.

                        Da viele das nicht können, nutzen sie eben Hilfsmittel wie Bootstrap, wer aber mit HTML und CSS3 vertraut ist, setzt das individuell um.
                        Was dir nun fehlt ist wahrscheinlich das komplette Wissen über die Zusammenhänge von CSS und HTML, dies können wir dir aber nicht vermitteln, dies musst du selbst erlenen

                        Ich persönlich habe auch noch nie Bootstrap genutzt, weil ich die vielen Klassen für die Darstellung innerhalb eines Elementes als falsch erachte.
                        Die CSS-Klassen sollen ja Elementen die wiederholten Einstellungen zentral speichern um HTML schlank zu halten und die CSS-Datei zentral zu speichern, damit sie nicht immer wieder übertragen wird. Wenn man jedoch für jedes Element ein vielfaches an Bytes mitgibt, wie zum
                        Beispiel
                        HTML-Code:
                        <div class="col-p2 centeralign red font-bold headline">
                        Wo bleibt der Sinn?

                        Das es zu allem und jedem Frameworks gibt die das alles missachten, liegt ja nur daran, dass die Entwicklung Geld kostet, da wird dann halt nicht hinterfragt ob das sinnig ist oder ein Bytes mehr im Traffic verursacht.
                        Ist halt ein wenig so wie Industrieproduktion vs. Handwerk.
                        Willst du von der Stange oder Massanzug?

                        Dies war jetzt ein kleiner Ausflug und nur meine Meinung. Helfen wird dir das sicher nicht, dann das Erlernen der Techniken bleibt dir überlassen.
                        Und fluchen,
                        sonder wie ich das Drecks grid in eine style.css kriege
                        hilft hier auch nicht sonderlich weiter, sondern wirkt eher unprofessionell und zumindest für mich eher abstossend.

                        Kommentar


                        • #13
                          protestix ja es kommt vom dem Grafiker er macht seine Hilfslinien, diese werden dem Programmiern(oder Programmier ist auch zu gleich der Designer) mitgegeben und der muß diese umsetzen können im CSS. Das macht die Entwicklung um vieles leichter und schneller nach meinen wissen stand ist das auch so genig,für individuelle seiten.

                          Die Frage ist wie ich aus meinem adobe xd setup es in CSS kriege.

                          Also
                          View 1920px breit
                          Eine Spalte 36px breit
                          Unterbrechung 25px breit
                          Gesamtes centrum 1439px breit also Anfang der Säule bis Ende der letzten Säule.

                          also muss ich ein Grafiker ran schafen der mir das erklären kann wie man das ausrechnet und umsetzt?

                          Kommentar


                          • #14
                            Was soll ich sagen ausser dem was ich schon gesagt habe.
                            Wenn du das nicht kannst muss es halt ein anderer machen. Für das Forum ist es jedenfalls keine Frage, die hier hin gehört, da es kein Problem ist welches wir lösen können und den Code wird dir wohl auch niemand schreiben, da zu umfangreich.

                            Kommentar


                            • #15
                              Zitat von hellbringer Beitrag anzeigen
                              Wenns ein "Framework" sein soll, schau dir mal Flex Grid von Primefaces an:

                              https://www.primefaces.org/primeng/#/flexgrid
                              Super, kommt bei mir this is undefined in main(....).js 1: 32764

                              Klick dir das css doch einfach hier zusammen:
                              https://foundation.zurb.com/sites/do...mizeFoundation

                              Kommentar

                              Lädt...
                              X