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

  • rodaN
    hat ein Thema erstellt [Erledigt] Design Frage - Umsetzung.

    [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

  • easyAnfaenger26
    antwortet
    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..)

    Einen Kommentar schreiben:


  • tr0y
    antwortet
    Wenn ich das design so sehe wird mir anders, welchen optischen und / oder funktionalen Mehrwert haben denn deine ... Linien ?

    Einen Kommentar schreiben:


  • lottikarotti
    antwortet
    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

    Einen Kommentar schreiben:


  • easyAnfaenger26
    antwortet
    hmm nagut

    Einen Kommentar schreiben:


  • monolith
    antwortet
    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.

    Einen Kommentar schreiben:


  • easyAnfaenger26
    antwortet
    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?

    Einen Kommentar schreiben:


  • lottikarotti
    antwortet
    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.

    Einen Kommentar schreiben:


  • easyAnfaenger26
    antwortet
    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...

    Einen Kommentar schreiben:


  • lottikarotti
    antwortet
    Hallöchen,

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

    Viele Grüße,
    lotti

    Einen Kommentar schreiben:


  • monolith
    antwortet
    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.

    Einen Kommentar schreiben:


  • easyAnfaenger26
    antwortet
    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 */

    Einen Kommentar schreiben:


  • monolith
    antwortet
    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.)

    Einen Kommentar schreiben:

Lädt...
X