Anzeige

Liquid CSS Design und neue Seiten

Liquid CSS Design und neue Seiten | PSD-Tutorials.de

Erstellt von GomFotoDesign, 01.03.2008.

  1. GomFotoDesign

    GomFotoDesign Noch nicht viel geschrieben

    Dabei seit:
    28.02.2008
    Beiträge:
    7
    Geschlecht:
    männlich
    Liquid CSS Design und neue Seiten
    Hallo,

    so mein erster Beitrag hier.

    Folgendes Problem beschäftigt mich zur Zeit. Möchte gern eine Seite im Liquid CSS Design aufbauen. Arbeite mit GoLive CS2.

    Die Seite mit Frames aufzubauen ist kein Problem doch will ich mich in CSS einarbeiten. Dabei habe ich es noch nicht geschafft, im CSS Design eine neue Seite aufzubauen. Ich meine das folgendermaßen. Ich definiere einen Kopfbereich und drei Spalten darunter, wobei die mittlere beweglich ist. Im Kopfbereich sind einige Buttoms, die in der Mitte darunter neue Seiten erscheinen lassen sollen. Die 2. Seite enthält wiederum in der linken festen Spalte Links auf neue Seiten. Und genau das funktioniert nicht.

    Habs mit Aktionen probiert, geht leidlich, da jede Aktion natürlich alle anderen Seiten die ebenfalls erscheinen können erst ausschalten müssen um die neue anzeigen zu können.

    Würde mich sehr freuen, wenn mir jemand hier weiterhelfen kann.

    Vielen Dank schon mal im Voraus.
     
    #1      
  2. stb_87

    stb_87 Web-Sheriff - ohne Bild

    Dabei seit:
    13.05.2007
    Beiträge:
    1.895
    Geschlecht:
    männlich
    Software:
    dies & das
    Liquid CSS Design und neue Seiten
    AW: Liquid CSS Design und neue Seiten

    Ich versuche mal das zu verstehen:

    Du hast eine horizontale Navigation, die "Hauptnavigation", und in der linken Spalte entsprechend zu den Links aus der Hauptnavigation weitere "Sublinks", also ist die Navigation in der linken Spalte die "Subnavigation"!? - Richtig soweit?

    Wenn du das jetzt ohne großen Programmieraufwand erledigen möchtest, dann musst du für jeden Link der "Hauptnavigation" eine Unterseite mit der Entsprechenden Subnavi anlegen und für die Subnavi wiederrum jeweils einzelne Unterseiten, die auch den aktiven Link aus der Hauptnavigation beinhalten.

    Habe ich das so richtig verstanden?
     
    #2      
  3. GomFotoDesign

    GomFotoDesign Noch nicht viel geschrieben

    Dabei seit:
    28.02.2008
    Beiträge:
    7
    Geschlecht:
    männlich
    Liquid CSS Design und neue Seiten
    AW: Liquid CSS Design und neue Seiten

    Richtig verstanden. Die Hauptnavigation soll wichtige Seiten im direkten Zugriff anzeigen, wie Home, Trainings, Impressum, Portfolio (als PDF).

    Wird nun der Buttom Trainings geklickt, erscheint die Trainingseingangsseite, mit Links auf der linken Seite.

    Und ich weiß weder, wie ich über die Hauptleiste eine Seite aufrufen kann, noch in der Subseite.

    Mit Frames habe ich Targets aber in CSS?
     
    #3      
  4. stb_87

    stb_87 Web-Sheriff - ohne Bild

    Dabei seit:
    13.05.2007
    Beiträge:
    1.895
    Geschlecht:
    männlich
    Software:
    dies & das
    Liquid CSS Design und neue Seiten
    AW: Liquid CSS Design und neue Seiten

    Oha, ein Spezialfall...

    Ganz simpel:

    Du erstellst dir auf deinem Webspace oder lokal eine Verzeichnisstruktur:

    • Hauptpunkt 1
    • Hauptpunkt 2
    • Hauptpunkt 3
    • Hauptpunkt 4




    Für jeden Punkt ein Verzeichnis. In das jeweilige Verzeichnis packst du dann die einzelnen Index-Datei, für das Verzeichnis, und die Subnavipunkte.

    Im Root-Verzeichnis (die erste Seite, die aufgerufen wird) hast du eine Index-Datei, die die Hauptpunkte beinhaltet und die Subnavi kann leer sein. Die Links der Hauptnavigation verlinken auf die Index-Datei des entsprechenden Unterverzeichnisses.

    In dieser aufgerufenen Index-Datei werden weiterhin die Links in der Hauptnavigation angezeigt und des Weiteren die Sublinks des entsprechenden Verzeichnisses.

    Der Nachteil:
    Du musst für jeden Link auf deiner Seite eine HTML-Datei anlegen.

    Mit CSS hat das an sich wenig zu tun, da du mit CSS nur die Formatierungen vornimmst.


    Viel einfacher, allerdings mit Programmieraufwand verbunden, ist diese Lösung:
    #php/QuakeNet Tutorial - 3-Spalten-Layout

    Hier wird beschrieben, wie man mit einem CSS-Basierten Layout frames simuliert. Dies kann dann beliebig erweitert werden.
     
    #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
    Liquid CSS Design und neue Seiten
    AW: Liquid CSS Design und neue Seiten

    *grins*

    Ich glaub die fehlen noch einige Grundlagen.
    Ich Versuche es mal kurz anzureißen, das sollte
    dir das ganze Verdeutlichen.

    Frage: Was ist CSS?
    Anwtort:
    Siehe auch Cascading Style Sheets - Wikipedia

    Frage: Was ist HTML/XHTML
    Antwort:
    Frage: Was is PHP?
    Antwort:
    Wie du also siehst, ist CSS nicht dafür da das grundsätzlich Verhalten
    von Seiten zu steuern. Sondern mit CSS werden die Inhalte einer Seite
    optisch Aufbereitet. Dabei trifft man definitionen immer für bestimmte
    struktur Elemente einer Seite (tags wie a, div, span, form, usw.).

    Mit HTML erstellt man diese Struktur. Anfänglich wurden Inhalte statisch
    in dieses Grundgerüst eingefügt. Das heisst man erstellte für jede
    Unterseite einer Website) eine Datei (kopierte z.B. einfach eine andere
    und änderte die Inhalte (aber nicht das Gerüst!).
    Etwas mehr Dynamik
    bzw. Modularität kam mit den Frames. Man definierte Frames für Inhalte
    und die Navigation. Aber an sich immer noch staatisch, da die Inhalte
    fest in den Datein zu finden sind. Der Unterschied lag an sich nur darin das man eben nur einen Teil des sichtbaren Bereichs veränderte (also z.B.
    nur in den rechten bereich eine neue Datei geladen hat, während der
    linke Bereich weiter das Menü enthielt)

    Was macht man dagegen? Wie umgeht man das Problem das man für jede
    Inhaltsseite eine Datei aufrufen muss? Das man die HTML kennen muss
    selbst um nur Inhalte zu verändern?

    PHP ... mit Php schrieb/schreibt man Scripte. Man lädt so z.B. in ein und
    die Selbe Datei verschiedene Inhalte. Eben je nachdem welche "Befehle"
    an die Datei übergeben werden.

    So hat man z.B. ein Menü ... das hat natürlich mehrere Menüpunkte.
    Da aber die Struktur bei allen die gleiche bleibt (weil sich z.B. nur Texte
    ändern), gehen alle links auf die Datei "index.php". Damit das Php Script
    aber nun weiß welchen Inhalt es anzeigen soll und welche Untermenü es
    aufrufen soll geben wir je nach link "aboutme", "service", etc. als befehl
    im link mit.
    Das im Php Script sorgt dieser Befehl dann dafür das z.B. aus einer
    Datenbank alles geladen wird was mit "aboutme" zu tun hat oder aber
    mit "service".

    Das ist gewissermaßen und sehr vereinfacht der Stand der Dinge wie
    man Webseiten heutzutage erstellt/erstellen kann.

    ---

    Zu deinem Problem ... erkundige dich eventl. ob dein Hoster Php und
    MySQL unterstützt.

    Es gibt Unmengen kostenlose CM-Systeme die gut Dokumentiert sind
    und dir ermöglichen ein modernes, benutzerfreundliches und barrierefreies
    Layout zu erstellen ohne dich unbedingt mit Programmierung zu beschäftigen.

    Hoffe das war etwas aufschlussreich ...
     
    #5      
  6. GomFotoDesign

    GomFotoDesign Noch nicht viel geschrieben

    Dabei seit:
    28.02.2008
    Beiträge:
    7
    Geschlecht:
    männlich
    Liquid CSS Design und neue Seiten
    AW: Liquid CSS Design und neue Seiten

    Vielen Dank für eure Hilfe.

    @stb_87
    Verstehe nicht ganz was die einzelnen Verzeichnisse bewirken sollen. Das ich html-Seiten codieren muß ist schon klar, die sind ja auch schon so gut wie fertig.

    Der Link ist sehr gut brauchbar, hab mal den Inhalt überflogen. In den nächsten Tagen werde ich das probieren, denn da wird offensichtlich mein Problem behandelt.


    @jackprince
    Die Grundlagen sind mir bekannt, denn ich arbeite damit shcon seit geraumer Zeit. Allein der seitenaufruf ohne Frames ist mein Problem.


    Möglicherweise habe ich mich einfach falsch ausgedrückt. Mir gehts allein um die Tatsache, wie ich eine Seite ohne Frames aufbauen kann und in der Mitte unterschiedliche Inhalte (html-seiten) aufrufen kann. Dort wird mit Containern gearbeitet und da blicke ich einigermaßen durch.
     
    #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
    Liquid CSS Design und neue Seiten
    AW: Liquid CSS Design und neue Seiten

    anscheinend sind dir die grundlagen doch noch nicht ganz klar ... sonst hättest du verstanden was ich damit sagen will bzw. würdest erkennen
    das du wohl ohne php es nicht hinbekommen wirst eine frame basierte
    seite zu ersetzen.

    Und das willst du ja machen ... oder willst du deine ganze webseite in eine einzige datei packen? Glaub kaum aber da könnte man mit js was machen.

    Lies dir mein posting eventl. noch mal agnz langsam durch ... vielleicht verstehst du auf was ich hinaus wollte.

    btw: da du bisher noch mit frames gearbeitet hast bist du für meine begriffe
    noch gaaanz am anfang und da du wohl erst anfängst mit css hast du noch
    viel vor dir und hast vielleicht die hälfte grundkentnisse inne.
     
    #7      
  8. GomFotoDesign

    GomFotoDesign Noch nicht viel geschrieben

    Dabei seit:
    28.02.2008
    Beiträge:
    7
    Geschlecht:
    männlich
    Liquid CSS Design und neue Seiten
    AW: Liquid CSS Design und neue Seiten

    Möchte dir nicht zu Nahe treten, hab das jetzt 3 mal gelesen und bin nicht weiter. Eine Programmierung ala C kommt für mich nicht in Frage. CM's hab ich mir auch schon mal angesehen, bin da allerdings eher unentschlossen diese einzusetzen.

    Seit kurzem lerne ich über CSS mit einer DVD von Galileo. Die dort verwendeten Beispiele sind ohne PHP und funktionieren. Leider verstehe ich eben einfach nicht wie die mittels Menu den rechten (oder mittleren) Bereich der Seite füllen. Dazu sind offensichtlich divs notwendig. Leider läßt sich das Video nur sehr ungenau über diesen Bereich aus.
     
    #8      
  9. Uepfel

    Uepfel Noch nicht viel geschrieben

    Dabei seit:
    18.11.2006
    Beiträge:
    41
    Liquid CSS Design und neue Seiten
    AW: Liquid CSS Design und neue Seiten

    Sie laden nicht nur einen bestimmten Teil der Seite, sondern eine komplett neue Seite, die allerdings einen identischen Aufbau hat, wie die Ursprungsseite. Nur der Text(Inhalt) ist anders.

    Jede Seite hat eine eigene Navigation im Quelltext.
    Da es aber gerade bei vielen Unterseiten extrem aufwändig wird, wenn man z.B. eine Unterseite zusätzlich im Menü verlinken will (da man dann ja in jeder Seite einzeln diesen Link hinzufügen muss), hilft man sich z.B. mit PHP.

    Wie das (grob) funktioniert, steht ja im vorletzten Post von jackprince ;)


    Ich hoffe, dir das Prinzip etwas deutlicher gemacht zu haben :)

    Schönen Gruß,

    Uepfel
     
    #9      
  10. 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
    Liquid CSS Design und neue Seiten
    AW: Liquid CSS Design und neue Seiten

    also ich find ich hab das schon recht verständlich erklärt ...

    aber kurz und eindeutig nochmal ... mit css und html allein
    bekommt man keine webseiten hin die ohne viele dateien
    auskommen und/oder nur bestimmte teile der seite neu füllen.

    Wenn man ohne neu laden der seite bestimmte inhalte
    austauschen möchte, kommt man wohl oder übel nicht
    an ajax vorbei. Zumindest wenn man es vernünftig machen
    möchte.

    Siehe z.B. auf Gerichtsvollzieher am Amtsgericht Bitterfeld ... da lädt die seite nicht neu sondern der inhalt wird dynamisch ausgetauscht.

    Das ist dann aber schon "php+xml+js+mysql"
     
    #10      
  11. 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
    Liquid CSS Design und neue Seiten
    AW: Liquid CSS Design und neue Seiten

    Was ich mir vorstellen kann ist das die bei der DvD einfach über per hover über bestimmte Bereiche was aus- und einblenden.

    Wenn dem so ist wäre ne modifizierte variante von dem dort geposteten
    bsp. etwas für dich

    http://www.psd-tutorials.de/modules...blenden-wenn-anderes-eingeblendet-wird-2.html

    Modifiziert zu betrachtren z.B. auf der (noch im aufbau befindlichen)
    seite ... Anhalt-WittenbergWillkommen im neuen brainCMS

    Dort siehst du oben die Box ... wenn man über die einzelnen Tabs geht wird
    das dazugehörige div per js eingeblendet (also der zustand von display geändert). Vielleicht ist es das was du vorstellst.

    Ist aber nicht das wahre für eine Hauptnavigation ... da abhängig von "js"
     
    #11      
  12. GomFotoDesign

    GomFotoDesign Noch nicht viel geschrieben

    Dabei seit:
    28.02.2008
    Beiträge:
    7
    Geschlecht:
    männlich
    Liquid CSS Design und neue Seiten
    AW: Liquid CSS Design und neue Seiten

    Also nocheinmal vielen Dank für eure Hilfe!

    Wir kommen der Sache näher. Es ist fast so wie auf deinem letzten Link gepostet. Der Unterschied liegt einzig darin. dass mit der oberen Navigation unterhalb des Kopfes neue Seiten aufgebaut werden sollen. Wenn ich ein Framebasiertes Konzept verfolge, ist das kein Problem. In der DVD wird eben von einem CSS basiertem Liquid-Design gesprochen.

    Und eine dieser Seiten sollte links eine Navigation haben und in der Mitte neuen Inhalt anzeigen. Der kann ruhig als jeweilige html Seite abgelegt sein.

    Möchte gern mal ein Beispiel aus der DVD posten (hoffe das ist ok), wie bekomme ich hier ein iframe hin? Der Code ist etwas lang.
     
    #12      
  13. stb_87

    stb_87 Web-Sheriff - ohne Bild

    Dabei seit:
    13.05.2007
    Beiträge:
    1.895
    Geschlecht:
    männlich
    Software:
    dies & das
    Liquid CSS Design und neue Seiten
    AW: Liquid CSS Design und neue Seiten

    Im erweiterten Editor den entsprechenden Button klicken, um CODE einzufügen. Alternativ geht auch ['code] hier Code einfügen ['/code]
    Bitte bei
    Code (Text):
    1.  die ' weglassen, da der Editor sonst automatisch das Fenster daraus macht!
    2.  
    3. [CODE]
    4. HTML
    5. CSS
    6. PHP
    7. und und und
    8.  
    Das mit den Verzeichnissen war nur ein Beispiel, damit da eine klare Struktur hinter steckt!

    Dein Hauptproblem einfach nur ist, dass du dich viel zu sehr an Frames orientierst! Lass das doch mal los!
     
    #13      
x
×
×