Anzeige

Wie ist dieses CSS Design aufgebaut!?

Wie ist dieses CSS Design aufgebaut!? | PSD-Tutorials.de

Erstellt von maromedia84, 06.11.2008.

  1. maromedia84

    maromedia84 Aktives Mitglied

    Dabei seit:
    19.09.2008
    Beiträge:
    309
    Geschlecht:
    männlich
    Software:
    Phase 5, PS, Corel, Indesign
    Kameratyp:
    Casio Exilim Z 1000 | Nikon D3200
    Wie ist dieses CSS Design aufgebaut!?
    Hier

    Wie kann ich dieses Template vom Aufbau her nachbauen, bin leider ein Anfänger auf dem Gebiet CSS und wäre dankbar über jede hilfe!

    Beispiel Quelltexte oder dergleichen würden mir schon sehr weiterhefen!!!

    Thx
    maromedia84
     
    #1      
  2. microdns

    microdns Guest

    Wie ist dieses CSS Design aufgebaut!?
    AW: Wie ist dieses CSS Design aufgebaut!?

    hallo

    ich würde mal einfach googeln. ich bin mir sicher, dass du da viel nützliche informationen findest.

    lg, microdns
     
    #2      
  3. kaaaay

    kaaaay Lissitzky

    61
    Dabei seit:
    24.04.2008
    Beiträge:
    552
    Geschlecht:
    männlich
    Wie ist dieses CSS Design aufgebaut!?
    #3      
  4. mikegee

    mikegee Noch nicht viel geschrieben

    Dabei seit:
    23.02.2008
    Beiträge:
    14
    Geschlecht:
    männlich
    Wie ist dieses CSS Design aufgebaut!?
    AW: Wie ist dieses CSS Design aufgebaut!?

    Probiers mal hiermit -> FIREBUG

    Gruß
    Gee
     
    #4      
  5. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    Wie ist dieses CSS Design aufgebaut!?
    AW: Wie ist dieses CSS Design aufgebaut!?

    Um deine Frage möglichst treffend zu beantworten ...

    Die Seite ist schlecht aufgebaut


    Veraltetes Table Layout.

    Ansonsten um an solche infos zu kommen ... hat "mikegee" schon
    auf das richtige Firefox Plugin Verwiesen.
     
    #5      
  6. maromedia84

    maromedia84 Aktives Mitglied

    Dabei seit:
    19.09.2008
    Beiträge:
    309
    Geschlecht:
    männlich
    Software:
    Phase 5, PS, Corel, Indesign
    Kameratyp:
    Casio Exilim Z 1000 | Nikon D3200
    Wie ist dieses CSS Design aufgebaut!?
    AW: Wie ist dieses CSS Design aufgebaut!?


    Welches Layout bzw. Table Layout würdest Du denn empfehlen!?
     
    #6      
  7. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    Wie ist dieses CSS Design aufgebaut!?
    AW: Wie ist dieses CSS Design aufgebaut!?

    grob kann man sagen das 90% der Seiten sich
    mit einem div basierten Layout mit ca. 5 groben
    Bereichen realisieren lassen.


    • Umrandung
      • Kopf (1)
      • vertikale Mitte
        • links (2)
        • (horizontale) Mitte (3)
        • rechts (4)
        • (clearspan oder so)
      • Fuß (5)
    Dabei sind die Bereiche so geschachtelt wie in der Liste zu sehen.
    Die Bereiche 2,3 udn 4 werden dabei durch "float:left"
    nebeneinander gebracht. Das "clearspan" ist unter diesen drei
    ein Element was den float aufhebt (sinn versteht man dann wenn man
    sich etwas mit dem prinzip beschäftigt hat).

    In all diese Bereiche kann man wiederrum weitere Elemente setzen.
    Hat man aber erstmal verstanden wie das grob funktioniert,
    kann man auch leicht in den Bereichen weitere unter Bereiche
    setzen.

    z.B.

    • Umrandung
      • Kopf (1)
        • logo
        • rechts
          • oben
            • links
            • mitte
            • rechts
          • unten
            • links
            • rechts
            • mitte
      • vertikale Mitte
        • links (2)
        • (horizontale) Mitte (3)
        • rechts (4)
        • (clearspan oder so)
      • Fuß (5)
        • links
        • rechts
    etc.

    Zu den Tables ... Tbales sind nicht zum layouten gedacht sondern für
    tabelarsiche Inhalte.

    Nähere Informationen findest du im hier im Forum (Webbereich -> Allgemein -> Wie stell ich meine Frage Richtig)
     
    #7      
  8. maromedia84

    maromedia84 Aktives Mitglied

    Dabei seit:
    19.09.2008
    Beiträge:
    309
    Geschlecht:
    männlich
    Software:
    Phase 5, PS, Corel, Indesign
    Kameratyp:
    Casio Exilim Z 1000 | Nikon D3200
    Wie ist dieses CSS Design aufgebaut!?
    AW: Wie ist dieses CSS Design aufgebaut!?

    Danke erst mal für die ausführliche Antwort!

    Habe das mal soweit verstanden mit den Tables, dass die für die Tabelarischen Inhalte sind!

    Jedoch tut sich mir die Frage aus wie deine oben gennanten Beispiele in der Grafischen Umsetzung den Aussehen könnten!?

    Bisschen Bilder oder Links zu entsprechenden Sites wäre hilfreich!

    Danke mal vorerst
     
    #8      
  9. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    Wie ist dieses CSS Design aufgebaut!?
    #9      
  10. mk666

    mk666 Noch nicht viel geschrieben

    Dabei seit:
    22.08.2007
    Beiträge:
    4
    Geschlecht:
    männlich
    Wie ist dieses CSS Design aufgebaut!?
    #10      
  11. maromedia84

    maromedia84 Aktives Mitglied

    Dabei seit:
    19.09.2008
    Beiträge:
    309
    Geschlecht:
    männlich
    Software:
    Phase 5, PS, Corel, Indesign
    Kameratyp:
    Casio Exilim Z 1000 | Nikon D3200
    Wie ist dieses CSS Design aufgebaut!?
    AW: Wie ist dieses CSS Design aufgebaut!?

    Thanks werde da denke ich erst mal bisschen haben zum mich einlesen und einzuarbeiten
     
    #11      
  12. Arya_Svitkona

    Arya_Svitkona Nicht mehr ganz neu hier

    Dabei seit:
    12.07.2008
    Beiträge:
    107
    Geschlecht:
    männlich
    Ort:
    Schweiz
    Software:
    Photoshop CS3, Cinema 4D R13, Final Cut Pro
    Wie ist dieses CSS Design aufgebaut!?
    AW: Wie ist dieses CSS Design aufgebaut!?

    Ich gib dir n Tipp:
    CSS 4 You - The Finest in Stylesheets
    Ist ne gute page wenn du nicht weisst was ein attribut (zb. background) alles für werte (z.b. no repeat) hat.
    Gehe auf ganz normale Seiten und lies den HTML Text.... meistens wird oben der Link angegeben der mit CSS endet. Kopier in und setz ihn hinter die Adresse im browser und schon siehst du das css...

    Als Beispiel:
    Arya's Webpage

    im Text steht....:
    link href="main.css

    was folgende Adresse ergibt:
    http://bluebear.sbw-media.ch/~srutishauser/main.css
    Gruss
    arya
     
    #12      
  13. Georg.K1

    Georg.K1 MultiTalent Kreativ-Flatrate-User

    Dabei seit:
    22.04.2007
    Beiträge:
    62
    Geschlecht:
    männlich
    Wie ist dieses CSS Design aufgebaut!?
    AW: Wie ist dieses CSS Design aufgebaut!?

    richtig auf der seite war ich neulich, is richtig hilfreich :)

    mfg georg
     
    #13      
  14. maromedia84

    maromedia84 Aktives Mitglied

    Dabei seit:
    19.09.2008
    Beiträge:
    309
    Geschlecht:
    männlich
    Software:
    Phase 5, PS, Corel, Indesign
    Kameratyp:
    Casio Exilim Z 1000 | Nikon D3200
    Wie ist dieses CSS Design aufgebaut!?
    AW: Wie ist dieses CSS Design aufgebaut!?

    THX habt mir sehr geholfen obwohl sich immer wieder neue Fragen auftun! aber das Leben ist nun mal ein ewiger lernprozess!!!
     
    #14      
  15. Arya_Svitkona

    Arya_Svitkona Nicht mehr ganz neu hier

    Dabei seit:
    12.07.2008
    Beiträge:
    107
    Geschlecht:
    männlich
    Ort:
    Schweiz
    Software:
    Photoshop CS3, Cinema 4D R13, Final Cut Pro
    Wie ist dieses CSS Design aufgebaut!?
    AW: Wie ist dieses CSS Design aufgebaut!?

    aber immer doch...auch wenn es heftig ist (kenne es von Cinema 4D)

    Was hat sich den nun für eine Frage gestellt?
    Immer raus damit ;)




    Lade dir für den Firefox das Add-on: Firebug herunter.
    Dann kannst du rechts unten beim Browser ( Firefox) den Käfer anklicken und bei Untersuchen einmal klicken.
    Schon kannst du über die Website fahren und du siehst den quelltext immer für jeden div, jedes image etc.
    z.b. http://plone.org/documentation/tutorial/creating-plone-themes/firebug.gif
     
    Zuletzt bearbeitet: 20.11.2008
    #15      
x
×
×
teststefan