Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] Design Frage - Umsetzung

Einklappen

Neue Werbung 2019

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

  • [Erledigt] Design Frage - Umsetzung

    Guten Abend,

    ich bin momentan dabei HTML und CSS zu lernen.

    Ich möchte aus meiner Content Box:



    dieses hier machen:




    HTML (umschlossen vom wrapper):

    Code:
    <section>
    <h1>Willkommen!</h1>
    
    <p>Hier entseht meine erste HTML-Seite zum lernen.</p>
    </section>
    CSS:

    Code:
    #wrapper {
      width: 1200px;
      margin: 0 auto;
      text-align: left;
    }
    
    section {
      margin: 0px 300px 48px 300px;
      background-color: orange;
      height: 600px;
      width: 800px;
      border: 1px black solid;
      border-radius: 40px;
      box-shadow: 12px 12px 10px 0 #808080;
    }
    
    
    section h1 {
      padding: 30px 0px 15px 35px;
    }
    
    
    section p {
      padding: 0px 0px 0px 35px;
    }
    Ist dies mit HTML / CSS zu lösen? Muss eine eigene Grafik für die Box erstellt werden? Wenn ja, wie füge ich diese zusammen?

    Der Inhalt der Box sollte links und rechts einen Abstand haben sowie ober und unterhalb des Striches. Möglichst ohne den Abstand jedes einzelnen Elementes (h1, p, ...) ändern zu müssen. Oder ist dies nur so möglich?


    Mit freundlichen Grüßen
    rodaN

  • #2
    Möglicherweise kannst du section::before und section::after dafür nutzen - wenn du beides passend positionieren kannst. (Dann einfach mit display: block, background-color: black und der gewünschten Höhe versehen.)

    Kommentar


    • #3
      wenn diese Linien statisch sein sollen:
      html:
      PHP-Code:
      <section>
          <
      div class="dicke_linien_oben_und_unten">
             <
      h1>Willkommen!</h1>

             <
      p>Hier entseht meine erste HTML-Seite zum lernen.</p>
         </
      div>
      </
      section
      css:
      PHP-Code:
      .dicke_linien_oben_und_unten
      {
      height:500px/* die pixelangaben musst du selber anpassen */
      border-top:10px solid black;
      border-bottom:10px solid black;
      margin:20px 0px 20px 0px/* Abstand oben und unten */

      Kommentar


      • #4
        Oh je. Ich hätte mir mal das CSS anschauen sollen, ich hatte irgendwie einfach angenommen, der border-radius sei auf dem div gesetzt.

        Ja gut wenn man die border-Eigenschaft des divs verändern kann ist es ohne weiteres machbar.

        Kommentar


        • #5
          Hallöchen,

          das ließe sich dennoch ohne Weiteres mit ::before und ::after abbilden: Beispiel, Trennlinien.

          Viele Grüße,
          lotti
          [SIZE="1"]Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript.[/SIZE]

          Kommentar


          • #6
            klar ich hab ja auch nichts gegenteiliges behauptet,es gibt tausend möglichkeiten wie man das machen kann,man könnte alternativ z.B. auch bilder verwenden oder eine div box jeweils oben und unten...

            Kommentar


            • #7
              Zitat von easyAnfaenger26 Beitrag anzeigen
              klar ich hab ja auch nichts gegenteiliges behauptet,es gibt tausend möglichkeiten wie man das machen kann,man könnte alternativ z.B. auch bilder verwenden oder eine div box jeweils oben und unten...
              Das sind jetzt quasi Beispiele dafür wie man es NICHT machen sollte.
              [SIZE="1"]Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript.[/SIZE]

              Kommentar


              • #8
                gibt es denn für sowas eine allgemein gültige regel? was ist an diesen Vorschlägen den generell schlecht und warum ist der Vorschlag mit ::before und ::after der beste?

                Kommentar


                • #9
                  Ist er doch gar nicht. Jedenfalls nicht pauschal. Dein (erster) Vorschlag ist offensichtlich einfacher umzusetzen.

                  Es ging lottikarotti darum, nicht Bilder oder zusätzliche HTML-Tags zu verwenden.

                  Kommentar


                  • #10
                    hmm nagut

                    Kommentar


                    • #11
                      Hallöchen,

                      Zitat von easyAnfaenger26 Beitrag anzeigen
                      gibt es denn für sowas eine allgemein gültige regel? was ist an diesen Vorschlägen den generell schlecht und warum ist der Vorschlag mit ::before und ::after der beste?
                      Ich verstehe überhaupt nicht wieso a) du dich durch mein Post angegriffen fühlst (in welcher Form auch immer) und b) du mir unterstellst behauptet zu haben, diese Lösung wäre per se die beste.

                      Generell hat meine Lösung einen Vorteil, weshalb ich sie erwähnenswert finde und auch bevorzugen würde: das Markup richtet sich nicht nach dem Design. HTML wurde geschaffen um Inhalte auszuzeichnen. Die Optik ist eigentlich Sache von CSS. Das lässt sich in der Praxis nicht immer zu 100% durchziehen, aber in vielen Fällen eben schon.

                      Wieso die Lösung mit den Bildern oder den zwei Div-Elementen in Bezug auf die Anforderung des TE absoluter Humbug ist, muss ich ja jetzt nicht erläutern.

                      Die Lösung mit dem Wrapper ist gängige Praxis, deshalb hatte ich da auch nichts einzuwenden. Was die Klassennamen angeht, solltest du allerdings nochmal ein wenig üben

                      Viele Grüße,
                      lotti
                      [SIZE="1"]Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript.[/SIZE]

                      Kommentar


                      • #12
                        Wenn ich das design so sehe wird mir anders, welchen optischen und / oder funktionalen Mehrwert haben denn deine ... Linien ?
                        [URL="https://gitter.im/php-de/chat?utm_source=share-link&utm_medium=link&utm_campaign=share-link"]PHP.de Gitter.im Chat[/URL] - [URL="https://raindrop.io/user/32178"]Meine öffentlichen Bookmarks[/URL] ← Ich habe dir geholfen ? [B][URL="https://www.amazon.de/gp/wishlist/348FHGUZWTNL0"]Beschenk mich[/URL][/B].

                        Kommentar


                        • #13
                          hey,ich fühl mich doch garnicht angegriffen
                          Das war eigentlich ganz neutral gemeint..nach dem motto ok ich als anfänger sehe da nicht wo jetzt hier die verbesserung liegt,klar das mit den divs und dem bild war ja auch nur beispielhaft gemeint,ebenso wie die namengebeung der klasse,die nur verdeutlichen sollte um was es geht.
                          wenn man aber z.B. Linien haben will die nach links und rechts hin transparent werden oder noch zusätzlich irgendwie gekrümmt oder sonstwas sind,kann man doch bilder verweden?
                          (klar es gibt da auch den css-gardient creator,aber auf älteren browsern sieht man dann nix davon..)

                          Kommentar

                          Lädt...
                          X