ilch Forum » Allgemein » HTML, PHP, SQL,... » [Tutorial] Einfaches HTML Design

Geschlossen
  1. #1
    User Pic
    MaddinXx Mitglied
    Registriert seit
    15.02.2007
    Beiträge
    793
    Beitragswertungen
    40 Beitragspunkte
    Hallo zusammen,

    Ich habe heute eine kleine Tutorial Reihe zum Erstellen eines einfachen Designs erstellt, welches zeigt wie ihr ein Design via DIV/CSS anpasst und das ganze dann ilch tauglich macht.

    Naja meine Stimme bzw. einige Sprachfehler nicht beachten lachen

    Würde mich über Feedbacks freuen und bei Fragen stehe ich zur Verfügung.

    Tutorials CSS/DIV

    Tutorials CSS/DIV (inkl. Slicen)

    Gruss

    Maddin

    betroffene Homepage: screenr.com/user/impresdesign


    Zuletzt modifiziert von MaddinXx am 06.09.2011 - 21:49:20
    8 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    TK814 Mitglied
    Registriert seit
    07.03.2009
    Beiträge
    60
    Beitragswertungen
    0 Beitragspunkte
    Hey,

    sehr gut, werde mir auf jeden Fall alle anschauen, aber könntest du in den css Eigenschaften für Ilch auch mal erklären welche Definition was macht? Wäre nett.

    Mit freundlichen Grüßen

    TK814
    Wer Rechtschreibfehler findet, darf sie behalten
    0 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    MaddinXx Mitglied
    Registriert seit
    15.02.2007
    Beiträge
    793
    Beitragswertungen
    40 Beitragspunkte
    Hey TK814

    Ich werde dann wohl noch ein weiteres machen und auf die CSS Eigenschaften näher eingehen. Ich glaube sowieso, CSS ein wenig vernachlässigt zu haben lächeln

    Einfach die Tage die Liste ab und an anschauen und gucken ob es oben ist, wird denke ich morgen der Fal sein.

    Gruess
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    On3-Sho7 Mitglied
    Registriert seit
    06.07.2010
    Beiträge
    234
    Beitragswertungen
    10 Beitragspunkte
    0 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    TK814 Mitglied
    Registriert seit
    07.03.2009
    Beiträge
    60
    Beitragswertungen
    0 Beitragspunkte
    Danke schön.

    @On3-Sho7

    habe ich mir schon mal angeschaut, aber die haben das etwas unübersichtlich gemacht...


    Ja ein bisschen hast du es vernachlässigt zwinker
    Wer Rechtschreibfehler findet, darf sie behalten
    0 Mitglieder finden den Beitrag gut.
  6. #6
    User Pic
    ekie Mitglied
    Registriert seit
    25.04.2008
    Beiträge
    531
    Beitragswertungen
    7 Beitragspunkte
    Ich könnte mich in dich verlieben lachen ...wäre ich eine Sie lachen

    Echt nice was du gemacht hast, suche schon lange nach soetwas. zwinker

    0 Mitglieder finden den Beitrag gut.
  7. #7
    User Pic
    Jan Hall Of Fame
    Registriert seit
    17.01.2007
    Beiträge
    3.648
    Beitragswertungen
    54 Beitragspunkte
    "ilsch", "natürlisch", "gleisch", "nischt" zwinker

    Deine Videos machen einen guten Eindruck, ich denke du hast einigen Usern sehr geholfen. Yes

    Liebe Grüße
    Jan
    0 Mitglieder finden den Beitrag gut.
  8. #8
    User Pic
    Recognize21 Mitglied
    Registriert seit
    06.06.2010
    Beiträge
    289
    Beitragswertungen
    14 Beitragspunkte
    Ohne deine Stimme zu beachten würde es schwer werden zunge
    Auf jeden Fall Tolle, hilfreiche Videos!
    Visit my website: www.Motion-M.de/
    Nun auch auf Facebook!
    0 Mitglieder finden den Beitrag gut.
  9. #9
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.261
    Beitragswertungen
    1114 Beitragspunkte
    Von mir auch einen Daumen, sehr gutes Tutorial, welches auf jedem Fall viele Fragen beantwortet! Guter Beitrag zur Community!
    rules :: doku :: faq :: linkus
    1 Mitglieder finden den Beitrag gut.
  10. #10
    User Pic
    MaddinXx Mitglied
    Registriert seit
    15.02.2007
    Beiträge
    793
    Beitragswertungen
    40 Beitragspunkte
    ZitatZitat geschrieben von jankrug

    "ilsch", "natürlisch", "gleisch", "nischt" zwinker

    Da ist der Schweizer mit der Aussprache überfordert lachen

    Auf jeden Fall freut es mich, dass die Videos gut ankommen. Werde wohl noch einige Teile machen die mehr in CSS gehen und evtl. Template (Login, News etc.) Styling. lächeln
    0 Mitglieder finden den Beitrag gut.
  11. #11
    User Pic
    OloX Hall Of Fame
    Registriert seit
    25.02.2006
    Beiträge
    991
    Beitragswertungen
    23 Beitragspunkte
    Gute Arbeit MaddinXx !
    ps. müssen die Download Pop-ups sein ? zunge

    MfG OloX
    PHP, JavaScript, C/C++, CSS, HTML
    0 Mitglieder finden den Beitrag gut.
  12. #12
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.261
    Beitragswertungen
    1114 Beitragspunkte
    Interessant währe ja evtl. eine Tutorialsektion in ilch.de.
    rules :: doku :: faq :: linkus
    1 Mitglieder finden den Beitrag gut.
  13. #13
    User Pic
    sCar Mitglied
    Registriert seit
    21.10.2008
    Beiträge
    232
    Beitragswertungen
    15 Beitragspunkte
    da muss ich Lord voll und ganz recht geben, wäre durchaus interessant und beliebt lächeln
    0 Mitglieder finden den Beitrag gut.
  14. #14
    User Pic
    Chapter Hall Of Fame
    Registriert seit
    21.10.2007
    Beiträge
    5.951
    Beitragswertungen
    226 Beitragspunkte
    ich kann zwar nix versprechen, aber ich denk mal mit dem neuen design wird hier nohc einiges passieren, und evtl auch tutorials...
    Spamming, sinnlose Beiträge, Pushing, Doppelposting und Werbung sind verboten
    www.engelsblut-saarland.com
    0 Mitglieder finden den Beitrag gut.
  15. #15
    User Pic
    ekie Mitglied
    Registriert seit
    25.04.2008
    Beiträge
    531
    Beitragswertungen
    7 Beitragspunkte
    Hab mich jetzt an ein Design rangesetzt, aber ich versteh noch nicht ganz, wie man jetzt 2 DivContainer nebeneinadern positioniert bekommt. Wie geht das?
    Bei mir sind die immer untereinander. traurig

    Vielen Dank jetzt schon einmal zwinker

    0 Mitglieder finden den Beitrag gut.
  16. #16
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.261
    Beitragswertungen
    1114 Beitragspunkte
    Wird doch im Tutorial beschrieben! Das Stichwort ist float:left!
    rules :: doku :: faq :: linkus
    1 Mitglieder finden den Beitrag gut.
  17. #17
    User Pic
    ekie Mitglied
    Registriert seit
    25.04.2008
    Beiträge
    531
    Beitragswertungen
    7 Beitragspunkte
    Ja, ich hab das benutzt nur hat das dann komischerweise auch nichts daran geändert.

    Mhh mal weitergrübeln. Irgendwo wahrscheinlich ein Fehler in meiner css. Miese briese...

    0 Mitglieder finden den Beitrag gut.
  18. #18
    User Pic
    MaddinXx Mitglied
    Registriert seit
    15.02.2007
    Beiträge
    793
    Beitragswertungen
    40 Beitragspunkte
    ZitatZitat geschrieben von ekie

    Hab mich jetzt an ein Design rangesetzt, aber ich versteh noch nicht ganz, wie man jetzt 2 DivContainer nebeneinadern positioniert bekommt. Wie geht das?
    Bei mir sind die immer untereinander. traurig

    Vielen Dank jetzt schon einmal zwinker


    Also generell setzt man 2 DIVs wie folgt nebeneinander:

    <div style="float: left; width: 200px;"></div>
    <div style="float: left; width: 780px;"></div>
    <br style="clear: both;" />


    Das style="" natürlich via id="" oder class="" in die externe CSS auslagern.

    Gruss
    1 Mitglieder finden den Beitrag gut.
  19. #19
    User Pic
    MaddinXx Mitglied
    Registriert seit
    15.02.2007
    Beiträge
    793
    Beitragswertungen
    40 Beitragspunkte
    Hallo liebe Leute

    Ich wollte mal nachfragen, was weitere Tutorial Wünsche sind. Bin gerade dabei meinen Blog ein bisschen zu füllen & dachte ich schreib gleich mal ein paar Artikel, welche euch weiterhelfen.

    Wenn möglich sollten das generelle HTML/CSS/JS Sachen sein und nicht allzu fest auf ilch bezogen (geht schon auch).

    Könnt mir gerne auch per PM schicken.

    Liebe Grüsse
    MaddinXx
    0 Mitglieder finden den Beitrag gut.
  20. #20
    User Pic
    MaddinXx Mitglied
    Registriert seit
    15.02.2007
    Beiträge
    793
    Beitragswertungen
    40 Beitragspunkte
    Sorry für 3-fachen Post in einer Linie, denke aber ein Edit ist in diesem Falle nicht sinnvoll.

    Ich habe heute eine 2te Serie Tutorials erstellt, welche auch minimal das Slicen umfasst. Auf jeden Fall sind die Videos eine gute Ergänzung zu den ersten.

    Allzu fest wird auch hier nicht ins Detail gegangen, ich hoffe aber dennoch, dass sie hilfreich sind. Oftmals ist man ja bereits froh, etwas einfach einmal gesehen bzw. gehört zu haben.

    Also dann, viel Spass beim Gucken & nicht vergessen, Thumbs up lächeln

    Grüsse
    MaddinXx
    0 Mitglieder finden den Beitrag gut.
  21. #21
    User Pic
    KoernerWS gelöschter User
    CSS Verläufe nicht ausgereift? Das würde ich mal gar nicht behaupten - Geht sogar im IE6 mit dem Filter^^
    0 Mitglieder finden den Beitrag gut.
  22. #22
    User Pic
    Jan Hall Of Fame
    Registriert seit
    17.01.2007
    Beiträge
    3.648
    Beitragswertungen
    54 Beitragspunkte
    Hab mir das Thema nicht genau angeschaut, aber ich möchte dennnoch einfach mal meinen Senf dazugeben. lächeln

    Simpler CSS-Farbverlauf ohne Bild:
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr=#ffffff, EndColorStr=#aaddff)"; /* Internet Explorer (alte Versionen) */
    			background:-moz-linear-gradient(top, #fff, #adf); /* Firefox */
    			background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#adf)); /* Safari, Chrome (alte Versionen) */
    			background:-webkit-linear-gradient(top, #fff, #adf); /* Safari, Chrome */
    			background:-o-linear-gradient(top, #fff, #adf); /* Opera */
    			background:-ms-linear-gradient(top, #fff, #adf); /* Internet Explorer */
    			background:linear-gradient(top, #fff, #adf); /* W3C Standard */
    			filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#ffffff, EndColorStr=#aaddff); /* Internet Explorer (alte Versionen) */

    Hoffe das passt hier hin. zwinker

    Liebe Grüße
    Jan
    4 Mitglieder finden den Beitrag gut.
  23. #23
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.261
    Beitragswertungen
    1114 Beitragspunkte
    Danke für den Tip Yes
    rules :: doku :: faq :: linkus
    1 Mitglieder finden den Beitrag gut.
  24. #24
    User Pic
    Boy83Ol Mitglied
    Registriert seit
    23.01.2008
    Beiträge
    396
    Beitragswertungen
    12 Beitragspunkte
    Super Tut nur währe es mal gut eins zu sehen anhand eines komplexeren design's, habe nach deinem tut mich auch mal rangewagt nur musste ich feststellen das ich mich mit einer navbar mit rollover wieder ins alte raster reinfallen lasse und tabellen nehme^^ wo bei ich doch mal alles ohne tabellen haben wollte xD^^

    oder mal erleuern wie code ich die loginbox oder feste boxen ;-)


    Zuletzt modifiziert von Boy83Ol am 06.02.2012 - 22:14:08
    Gestern noch zu blöd, den Computer einzuschalten,
    heute schon die eigene Homepage
    0 Mitglieder finden den Beitrag gut.
  25. #25
    User Pic
    designprinzess Mitglied
    Registriert seit
    23.04.2012
    Beiträge
    3
    Beitragswertungen
    0 Beitragspunkte
    Huhu,
    habe hier auch mal ein vielleicht doch etwas übersichtlicheres Tutorial für Einsteiger www.techfacts.de/tutorial/eigene-website-erstellen-teil-5 beizutragen, mit Vorlagen und allem drum und dran. Freue mich immer zu sehen, wenn Leute ihr Interesse an Webdesign entdecken, da ich selbst Design studiere.
    Viel Spaß damit. lächeln
    0 Mitglieder finden den Beitrag gut.
  26. #26
    User Pic
    neo1967 Mitglied
    Registriert seit
    20.02.2013
    Beiträge
    32
    Beitragswertungen
    0 Beitragspunkte
    Nur mal so als Tipp:

    Um Farbverläufe für alle Browser hinzukriegen nutze ich den hier:
    www.colorzilla.com/gradient-editor/

    Und wenn man mit Farbe "spielt", sollten die Farben aus einer "Farben-Familie" kommen, dann neige ich dazu, den hier zu beauftragen:
    colorschemedesigner.com/

    Gruß
    Jürgen
    Alles wird gut!
    0 Mitglieder finden den Beitrag gut.
  27. #27
    User Pic
    htmlwarrior Mitglied
    Registriert seit
    24.11.2015
    Beiträge
    3
    Beitragswertungen
    0 Beitragspunkte
    @MaddinXx

    Vielen Dank, dass du dir so mühe gegeben hast. Ich habe erst vor kurzem angefagen mich mit dem Thma zu befassen. Dein Tut hat mir hierbei sehr gut geholfen!! lächeln
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten