Sie sind nicht angemeldet.

    • [CSS] Simple Layout

    • 1
    • 2

    1

    Freitag, 5. Februar 2010, 18:04

    Simple Layout

    Beschreibung

    In diesem Tutorial zeige ich euch wie ihr ein simples Layout in xHTML und CSS codet. Das Layout wird mit Hilfe von div-Containern gecodet und die Navigation mit Hilfe einer Liste.


    Vorschau




    Online-Videovorschau

    Versteckter Text Versteckter Text

    Dieser Text wurde vom Autor versteckt.



    Informationen
    • Hoster: Grufix-Board.de
    • Format: Windows Media Video (WMV)
    • Größe: 40 MB


    Schwierigkeitsgrad
    • Anfänger: [ x ]
    • Fortgeschrittene: [ _ ]
    • Profis: [ _ ]

    Download

    Versteckter Text Versteckter Text

    Dieser Text wurde vom Autor versteckt.
    currently: JavaScript (basics) & Prolog

    software project: Java MP3-Player

    next tutorials: JOIN Operations, CREATE Procedure

    skills: (x)HTML, CSS(3), PHP, SQL, Java, Haskell, Prolog
    Es haben sich bereits 39 registrierte Benutzer bedankt.

    Benutzer die sich bedankten:

    driftstyle (20.08.2010), blurb32 (21.09.2010), jay2 (22.09.2010), _abstracT (24.09.2010), ThePlague (25.09.2010), do0m (25.09.2010), KlausWuschel (26.09.2010), Diamond (26.09.2010), Terra (27.09.2010), DuffmanxD (02.10.2010), Timeless93 (05.10.2010), cythux (06.10.2010), __L9 (08.10.2010), PNDESIGNz (08.10.2010), Spriter (14.10.2010), Rokky93 (21.10.2010), Kaeese (20.11.2010), Miikeee (20.11.2010), laughingGUY (29.11.2010), ChrisID (01.12.2010), Freeway (07.12.2010), WTH (20.12.2010), OjiS@n (03.01.2011), ohmygod (05.01.2011), Mr Hood (10.01.2011), delta (13.01.2011), ingomc (23.01.2011), invader35 (27.01.2011), bobbes (30.01.2011), Allroundblog (31.01.2011), MindFreak17 (13.02.2011), Stroebi (24.02.2011), lato (26.02.2011), mctekk (30.04.2011), flizzy (02.05.2011), Mirschegal (07.06.2011), BloodyInsane (12.06.2011), iWebaholic (02.07.2011), Lightning (15.01.2012)

    2

    Freitag, 5. Februar 2010, 18:19

    Grins genau der der darauf gewartet hat ist auch als erster da . Danke dir endlich mal etwas in diesem Bereich das man auch verstehen kann :thumbup:

    3

    Freitag, 5. Februar 2010, 18:33

    Ist es verständlich, ja? Ich hatte erst so meine Zweifel, ob ich nicht doch zu wenig erklärt habe oder nicht, aber ich wollte jetzt auch keine ganze Stunde auf dem Tutorial reden und habe es dann einfach mal in 30 Minuten gemacht.
    currently: JavaScript (basics) & Prolog

    software project: Java MP3-Player

    next tutorials: JOIN Operations, CREATE Procedure

    skills: (x)HTML, CSS(3), PHP, SQL, Java, Haskell, Prolog

    4

    Samstag, 6. Februar 2010, 16:23

    Du machst das richtig gut nur ich merke das CSS einem keinen Fehler verzeiht. Sitze am Video und mache ja natürlich mit. Schreibe so wie du es machst die CSS na ja fast so. Speichern und was passiert es sieht nicht aus wie bei dir. Also wieder mal Fehler suche und ich hab ihn gefunden.

    #navigation von dir
    # navigation von mir

    So ein Mist durch ein Leerzeichen funzt es nicht. CSS ist gemein.
    Also ich denke mal das Video2brain keinen Fehler drin hatte sondern ich wieder mal mit dem rechten Daumen zuschnell auf der Taste war.

    5

    Samstag, 6. Februar 2010, 16:34

    Ja das mit diesem schönen Leerzeichen kenne ich. :zahn_weg:
    Und schnelle Finger sind zwar gut, aber man vertippt sich dann doch irgendwann mal und dann sucht man ewig den Fehler. Gut bei solch einer kurzen CSS findet man den Fehler schnell, aber wenn man dann mal eine etwas größere CSS hat, dann kann das schon nerven. :rolleyes:
    currently: JavaScript (basics) & Prolog

    software project: Java MP3-Player

    next tutorials: JOIN Operations, CREATE Procedure

    skills: (x)HTML, CSS(3), PHP, SQL, Java, Haskell, Prolog

    6

    Samstag, 6. Februar 2010, 21:03

    Ich sage ja da muss man einfach aufpassen das ist nich so einfach da ich immer auf Geschwindigkeit arbeiten muss und dann soll ich auf einmal langsam machen. ;(

    7

    Sonntag, 21. Februar 2010, 20:58

    Hammer! Ich bin ganz neu beim Coding dabei - und ich habe alles vertanden! ;)

    8

    Sonntag, 21. Februar 2010, 21:17

    Danke schön, werd ich mir mal antun ;)

    9

    Sonntag, 21. Februar 2010, 21:49

    schön erklärt, danke!
    Aber warum machst du den Resetcode so umständlich? Geht anstelle von html, body, ... nicht auch ein einfaches Sternchen (*)?

    10

    Sonntag, 21. Februar 2010, 22:05

    Ich hab mir das Tutorial jetzt nicht angesehen, aber hast du http://jigsaw.w3.org/css-validator/ darin auch erwähnt? Dort kann man überprüfen lassen, ob der CSS Code den man geschrieben hat Fehlerfrei (valid) ist.

    @Carsten8 Ja das "*" geht auch, dieser spricht ja alle Tag´s an, soweit ich weiß.
    Vielleicht sehe ich mir diesen Tutorial mal an, aktuell bin ich ja mit den Video2Brain Videos beschäftigt. :)

    11

    Montag, 22. Februar 2010, 04:49

    Sehr hilfreich, habs mir gerade geladne. Gefällt mir sehr gut.... besonders weil ich auch mit Coding angefangen habe und so weiter. ^^ Thx und so..
    [ Interface Tutorials ]
    <3 <3 <3 <3 <3
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Find me on:
    Dribbble - DevART - Twitter - LoveDsgn - Youtube
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

    12

    Montag, 22. Februar 2010, 09:17

    Zitat von »Macitus«

    Ich hab mir das Tutorial jetzt nicht angesehen, aber hast du http://jigsaw.w3.org/css-validator/ darin auch erwähnt? Dort kann man überprüfen lassen, ob der CSS Code den man geschrieben hat Fehlerfrei (valid) ist.

    @Carsten8 Ja das "*" geht auch, dieser spricht ja alle Tag´s an, soweit ich weiß.
    Vielleicht sehe ich mir diesen Tutorial mal an, aktuell bin ich ja mit den Video2Brain Videos beschäftigt. :)



    Wurde nicht erwähnt aber sollte man selbst als Anfänger schon wisse denn egal wo man schaut wird immer darauf hingewiesen das man dort mal nachprüfen soll.

    13

    Sonntag, 4. April 2010, 18:52

    Das Design sieht shcick aus :D
    Ich kann mih nicht bedanken.
    Ich hoffe es wird nicht als Spam gesehen.

    14

    Freitag, 4. Juni 2010, 11:44

    Hallo,
    erstmal super Tutorial, aber irgendwie will es bei mir nicht funktionieren.
    Hier ist mal meine Seite:http://ul.to/deqldt
    Ich hoffe jemand kann mir helfen.
    Habe den Fehler selber gefunden.


    Und noch eine Frage, wenn ich jetzt dieses aus deineme Tutorial abgewandeltes Design hochlade, ist bei dir dann noch der Copyright?

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »pasi2010« (4. Juni 2010, 15:54)

    15

    Freitag, 4. Juni 2010, 16:10

    Solange du es selber erstellst, liegt der Copyright bei dir. Tutorials sind da um anderen zu helfen und da wird kein Tutorial-Ersteller ein Copyright für jedes Design fordern, welches erstellt wurde nachdem man sein/ihren Tutorial gesehen hat. ;)

    16

    Freitag, 4. Juni 2010, 16:20

    Danke für die Hilfe, ich hatte es mir zwar schon gedacht, aber ich frage lieber nach bevor irgendwas passiert.

    17

    Freitag, 4. Juni 2010, 17:17

    Solange du das Template aus dem Tutorial nicht 1 zu 1 übernimmst, geht das in Ordnung. Es sollte jedoch schon erkenntlich sein, dass dort auch dein eigenes Handeln mitgewirkt hat.

    Aber es freut mich, dass ich mit dem Tutorial den ein oder anderen weiterhelfen kann.

    Ich wollte eigentlich schon längst weitere Tutorials erstellen, aber habe dafür leider wenig Zeit.

    Aber in den Sommerferien wird dann bestimmt etwas Neues kommen.

    MfG Grievous
    currently: JavaScript (basics) & Prolog

    software project: Java MP3-Player

    next tutorials: JOIN Operations, CREATE Procedure

    skills: (x)HTML, CSS(3), PHP, SQL, Java, Haskell, Prolog

    18

    Sonntag, 6. Juni 2010, 15:12

    Sehr nettes Tutorial ;)
    Werde es mir aufjedenfall mal anschauen.

    19

    Freitag, 24. September 2010, 20:20

    Schönes Design

    Hallo an alle,

    das ist ein sehr schönes design!

    Was nicht schlecht wäre, wenn man wüsste wie man die einzelnen Verknüpfungen / Links in dem Bereich content / eintrag / eintrag p einfügt!

    Mit php include () ?

    Oder per javascript?

    Bitte um Hilfe!

    Mit freundlichen Grüssen

    blurb32

    20

    Freitag, 24. September 2010, 22:57

    Zitat

    Was nicht schlecht wäre, wenn man wüsste wie man die einzelnen Verknüpfungen / Links in dem Bereich content / eintrag / eintrag p einfügt!

    Mit php include () ?

    Oder per javascript?
    Ehrlich gesagt verstehe ich deine Frage nicht ganz. :rolleyes:
    Du meinst jetzt wie man normale Links einfügt, oder wie?

    Quellcode

    		 
    1
2
3
4

    <div class="eintrag">
<h3>Willkommen auf deine-domain.de</h3>
<p><a href="index.html">Lorem ipsum dolor sit amet</a></p>
</div>


    MfG Grievous
    currently: JavaScript (basics) & Prolog

    software project: Java MP3-Player

    next tutorials: JOIN Operations, CREATE Procedure

    skills: (x)HTML, CSS(3), PHP, SQL, Java, Haskell, Prolog
    • 1
    • 2

    Zur Zeit ist neben Ihnen 1 Benutzer in diesem Thema unterwegs:

    1 Besucher

    Ähnliche Themen

    Verwendete Tags

    CSS, Layout, simple

    • Grufix-Board.de - GFX Webdesign Foto & Coding Community

    Grafik-Tutorials | Coding-Tutorials | Ressourcen | SEO | Webdesign | HTML5
    W3C Validator

    Forensoftware: Burning Board® 3.1.6, entwickelt von WoltLab® GmbH