bjoern: Wie genau slicen und in DIV anordnen?

Hallo liebe Selfhtml-Gemeinde :),

bin gerade kräftig dabei meine eigene Page zu erstellen. Erste versuchen waren auch scho online, aber man möchte sich ja weiterentwickeln ;).

Ich habe bereits ein Template in Photoshop erstellt, aber nun stellt sich für mich die Frage, wie genau ich es slicen bzw. wie ich es eher in DIVs anordnen soll.

Wie ich selbige definiere ist mir klar nur weiß ich nicht wie ich es gestalten soll, dass sichder ganze Bereich an den Inhalt anpasst.

In den Content Bereich kommt ein Iframe in wechen die Seiten geladen werden. Das mit dem Anpassen klappt, aber wie krieg ich es hin, dass sich auch der Navibereich nach unten hin verlängert?

Soll ich als Grund-DIV eine Box erstellen und darauf dann das Logo und die Navi? Aber ich hab gehört man soll DIVs nicht schachteln?!

Zum Verständnis hab ich mal eine Skizze gemacht wie ich das meine.
Hoffe ihr könnt mir helfen :).

[URL=http://img147.imageshack.us/my.php?image=unbenannt1kopierh2.jpg][IMG]http://img147.imageshack.us/img147/5540/unbenannt1kopierh2.th.jpg[/IMG][/URL]

Grüße
Björn

  1. Mist, das klappt ja so garnich mit dem Bild. Also nochmal:

    Beispiel

  2. Lieber bjoern,

    so soll das also aussehen?

    In den Content Bereich kommt ein Iframe

    Das ist eine mächtig schlechte Idee. Informiere Dich über die Nachteile von (I-)Frames! Das Archiv hier ist voll von Hinweisen dazu.

    Soll ich als Grund-DIV eine Box erstellen und darauf dann das Logo und die Navi? Aber ich hab gehört man soll DIVs nicht schachteln?!

    Informiere Dich, wozu das <div> Element gedacht ist und nutze es dementsprechend. Glauben heißt "nicht wissen" und das kannst Du hier http://de.selfhtml.org/html/text/bereiche.htm#block@title=ändern.

    Im Grunde willst Du doch runde Ecken haben, oder? Dann definiere doch einmal folgendes:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
    <head>  
        <title>Meine Seite</title>  
    </head>  
    <body>  
        <div id="content">  
            <h1>Meine Seite</h1>  
            <p>Hier geht's voll ab, Mann!</p>  
        </div>  
        <div id="navi">  
            <h2>Navigation</h2>  
            <ul>  
                <li><a href="impressum.html">Impressum</a></li>  
                <li><a href="links.html">weitere Links</a></li>  
            </ul>  
        </div>  
    </body>
    

    So, und jetzt kannst Du ans Gestalten gehen, eher nicht. Kein Iframe und nix, sondern nur sinnvolle Struktur. So sollte das (immer!) sein. Wenn Du soweit bist, und meine Vorlage etwas mit Deinem Inhalt gefüllt und hochgeladen hast, dann kannste Dich wieder melden. Ich helfe Dir dann wieder weiter.

    Liebe Grüße,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
    1. Das ist eine mächtig schlechte Idee. Informiere Dich über die Nachteile von (I-)Frames! Das Archiv hier ist voll von Hinweisen dazu.

      Also auf vielen Seiten habe ich gelesen, dass ein Iframe die einzig gute Möglichkeit ist, darin eine Seite zu öffnen. Denn soweit ich es mitbekommen habe, kann ich einen Link nicht in einem div-Element öffnen. Ich wollte es einfach umgehen, dass die Seite immer erneut geladen wird. Oder ist das eigentlich egal?

      Im Endeffekt hast du Recht, ich willfür den Contentbereich ein "Feld" mit Rundenecken. Das krieg ich soweit auch hin...nur stellt sich für mich die Frage wie ich das ganze anordne.

      Mach ich einen großen Block für den Inhalt, dersich dynmaisch an den Inhalt anpasst und lege dann darauf rechts dann das Logo und die Navi mit 2 extra Blöcken? Oder werden diese ineinander verschachtelt?

      Das Logo und die Navi sollen also immer an der gleichen Position bleiben...nur diese anze Box im Gesamten soll sich nach unten verlängenr bzw nach rechts.

      Hoffe wir reden nicht aneinander vorbei :)

      Gruß

      1. Lieber bjoern,

        Also auf vielen Seiten habe ich gelesen, dass ein Iframe die einzig gute Möglichkeit ist, darin eine Seite zu öffnen.

        das Internet wird auch gerne als "die weltweite Müllhalde" bezeichnet. Du findest dort jeden Mist - auch solche technischen Falschaussagen.

        Denn soweit ich es mitbekommen habe, kann ich einen Link nicht in einem div-Element öffnen.

        Du hast das Prinzip vom Verlinken von HTML-Dokumenten begriffen? Das eine Dokument verweist auf ein anderes. Das ist bereits alles. Weiterführende Gedanken, wie Du sie gerade geschrieben hast, haben mit der Logik des Verlinkens von Dokumenten nichts zu tun.

        Du hast jetzt sicherlich nicht das <http://de.selfhtml.org/html/verweise/projektintern.htm#anker@title=Verlinken zu einer Stelle innerhalb eines Dokumentes> gemeint, oder?

        Ich wollte es einfach umgehen, dass die Seite immer erneut geladen wird. Oder ist das eigentlich egal?

        Definiere bitte "die Seite"! Ich sprach gerade von "(HTML-)Dokumenten"

        Mach ich einen großen Block für den Inhalt, dersich dynmaisch an den Inhalt anpasst und lege dann darauf rechts dann das Logo und die Navi mit 2 extra Blöcken? Oder werden diese ineinander verschachtelt?

        Das Logo und die Navi sollen also immer an der gleichen Position bleiben...nur diese anze Box im Gesamten soll sich nach unten verlängenr bzw nach rechts.

        Hoffe wir reden nicht aneinander vorbei :)

        Doch, das tun wir. Ich hatte von _Struktur_ geredet, Du von Layout. Erst kommt Struktur und dann kommt das Layout. Ich hatte bereits einen Vorschlag zur Struktur gemacht...

        Liebe Grüße,

        Felix Riesterer.

        --
        ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
        1. das Internet wird auch gerne als "die weltweite Müllhalde" bezeichnet. Du findest dort jeden Mist - auch solche technischen Falschaussagen.

          Ich meinte, dass ich es gelesen hab, dass man einen Link nur in einem Iframe oder in nem Frame öffnen kann. Also mit target="framename". Wenn es eine bessere Möglichkeit gibt, dann kannst du sie mir ja sagen. Wäre nett.

          Du hast das Prinzip vom Verlinken von HTML-Dokumenten begriffen? Das eine Dokument verweist auf ein anderes. Das ist bereits alles. Weiterführende Gedanken, wie Du sie gerade geschrieben hast, haben mit der Logik des Verlinkens von Dokumenten nichts zu tun.

          Du hast jetzt sicherlich nicht das <http://de.selfhtml.org/html/verweise/projektintern.htm#anker@title=Verlinken zu einer Stelle innerhalb eines Dokumentes> gemeint, oder?

          Wie die eigentliche Verlinkung funktioniert ist mir schon klar^^. Das Anker-Setzen innerhalb eines Dokumentes meinte ich nicht, nein.

          Ich will es umgehen, dass alles erneut geladen werden muss, also die Ecken der Contentbox, das Logo, die Navi, etc.. Eigentlich solte das zwar lokal gespeichert sein und nicht neu geladen werden, aber ich wollte einfach eine index.html haben und über die links dort in der Navi sollen sich dann die entsprechenden Seiten im Contentbereich in einem IFrame öffnen. Dieser passt sich mittels JavaScript dynamisch an das geladene Dokument an.
          Funktioniert an sich auch ganz gut.

          Doch, das tun wir. Ich hatte von _Struktur_ geredet, Du von Layout. Erst kommt Struktur und dann kommt das Layout. Ich hatte bereits einen Vorschlag zur Struktur gemacht...

          Ja dein Vorschlag war ja auch ganz nett, aber soweit krieg ich das schon auch noch hin. Mir geht es einfach nur um den logischen Gedanken wie ich meine Seite aufbauen soll. Nicht dass ich irgendwie anfang und merk, dass es so nichts bringt.

          Mach ich ein großes Blockelement worüber ich dann zwei andere für die Navi und das Logo setze?

          Damit man nochmal sieht um was es genau geht, hier mal eine genauere Skizze :

          Die vorherige war vllt etwas ungenau...bzw das mit dem Logo war nicht ganz klar.

          1. Hi,

            Ich meinte, dass ich es gelesen hab, dass man einen Link nur in einem Iframe oder in nem Frame öffnen kann. Also mit target="framename".

            Nein, man kann ihn auch einfach im aktuellen Fenster oeffnen - ganz ohne target.

            Ich will es umgehen, dass alles erneut geladen werden muss,

            Das brauchst du nicht.
            Die "Ersparnis" waere minimal, wenn ueberhaupt vorhanden. Die Nachteile einer (I)Frame- oder JavaScript-"Loesung" waeren jedoch massiv.

            also die Ecken der Contentbox, das Logo, die Navi, etc.. Eigentlich solte das zwar lokal gespeichert sein und nicht neu geladen werden,

            Werden sie auch nicht, Browser haben einen Cache.
            Lediglich ein bisschen HTML-Code "drumherum" muss also mit neu geladen werden - faellt aber nicht ins Gewicht.

            aber ich wollte einfach eine index.html haben und über die links dort in der Navi sollen sich dann die entsprechenden Seiten im Contentbereich in einem IFrame öffnen. Dieser passt sich mittels JavaScript dynamisch an das geladene Dokument an.
            Funktioniert an sich auch ganz gut.

            Die zahlreichen Nachteile hast du also noch nicht entdeckt - aber frueher oder spaeter wuerdest vermutlich auch du mit Fragen dazu hier auchtauchen, so wie so gut jeder Neuling, der sich auf diesen Irrweg begibt. ("Suchmaschine verlinkt immer auf einzelne Unterseiten ohne mein Grundgeruest drumherum", "Groesse anpassen funzt ohne JavaScript nicht", "von mir gefundenes Script XY funktioniert nur, wenn ich es ohne Frames benuzte, aber sobald ich es in den Iframe packe nicht mehr", etc. pp.)

            Bitte tue dir, uns - und vor allem den Nutzern deiner Seite - diese massive Verschlechterung ihrer Qualitaet nicht an.

            MfG ChrisB

            --
            „This is the author's opinion, not necessarily that of Starbucks.“
          2. Lieber bjoern,

            dass man einen Link nur in einem Iframe oder in nem Frame öffnen kann. Also mit target="framename". Wenn es eine bessere Möglichkeit gibt, dann kannst du sie mir ja sagen. Wäre nett.

            Ja: Verlinke Dokumente. Punkt.

            Wie die eigentliche Verlinkung funktioniert ist mir schon klar^^.

            Na, also! Das ist doch schon ein Fortschritt. Über alles Andere mache Dir bitte keine Gedanken. Welche Teile Deiner Seite deswegen immer wieder neu geladen werden müssen, weil sie sich in den verschiedenen Dokumenten ähneln, bzw. identisch sind - wie gesagt, mach Dir darüber bitte keine Gedanken. Du verlinkst Dokumente. Das ist der Grundgedanke des WWW gewesen und das ist auch heute noch der kleinste gemeinsame Nenner. Alles andere ist im Grunde genommen Quark.

            Das Anker-Setzen innerhalb eines Dokumentes meinte ich nicht, nein.

            Gut. Dann reden wir ab jetzt bitte nicht mehr aneinander vorbei.

            Ich will es umgehen, dass alles erneut geladen werden muss, also die Ecken der Contentbox, das Logo, die Navi, etc..

            Runde Ecken sind Grafiken, die als Hintergrundbilder über CSS gesteuert werden und im Cache des Browsers vorgehalten werden. Einmal geladen sind sie auf jeder weiteren Seite Deiner Webpräsenz ohne Neuladen sofort da.

            Eigentlich solte das zwar lokal gespeichert sein und nicht neu geladen werden, aber ich wollte einfach eine index.html haben und über die links dort in der Navi sollen sich dann die entsprechenden Seiten im Contentbereich in einem IFrame öffnen. Dieser passt sich mittels JavaScript dynamisch an das geladene Dokument an.
            Funktioniert an sich auch ganz gut.

            Vergiss JavaScript und Frames! Glaub es halt, wenn Dir gleich mehrere (Stamm-)Poster hier sagen, dass das ein Irrweg ist! So rudimentäre Dinge wie eine Verlinkung oder eine Navi müssen (wenn die Seite sinnvoll gemacht sein soll) ohne alles rein mit den Mitteln von HTML benutzbar sein. Später kann dann mittels CSS noch das Layout angepasst werden, und vielleicht mit JavaScript kleine Verschönerungen oder Vereinfachungen angeboten werden, aber im Grunde muss die Funktionalität der Seite davon absolut unabhängig sein!

            Ja dein Vorschlag war ja auch ganz nett, aber soweit krieg ich das schon auch noch hin.

            Ich hatte ehrlich gesagt nicht den Eindruck. Schau Dir meinen Vorschlag nocheinmal sehr genau an. So simpel er Dir vielleicht auf den ersten Blick erscheinen mag, so kompliziert kann Dein Unterfangen trotzdem werden. Unterschätze das alles nicht! Wenn ich Deinen ursprünglichen Post richtig verstehe, dann bist Du eben gerade _nicht_ von einer sinnvollen Seitenstruktur ausgegangen! Und gerade dort habe ich angesetzt.

            Du musst meine Hilfe nicht in Anspruch nehmen. Sie ist zwar umsonst (sprich "kostenlos"), aber nicht unbedingt umsonst (sprich "vergeblich", oder "unnütz"), wenn Du sie annimmst.

            Mir geht es einfach nur um den logischen Gedanken wie ich meine Seite aufbauen soll. Nicht dass ich irgendwie anfang und merk, dass es so nichts bringt.

            Tja, gerade dann solltest Du meinen Ratschlag beherzigen. Ich habe mit einem größeren Projekt bereits etwas an Erfahrung sammeln können - weshalb ich Dir von dieser Erfahrung ausgehend eben genau so geraten habe, und nicht etwa weil ich Dich für dumm verkaufen wollte.

            Mach ich ein großes Blockelement worüber ich dann zwei andere für die Navi und das Logo setze?

            Nö, nicht unbedingt. Ich setze mein content-Element zuerst im Quelltext an, danach kommen dann bei mir andere Blockelemente. Mit CSS kann ich dann die Darstellung frei anpassen. Das klappt bei mir recht gut und stabil.

            Damit man nochmal sieht um was es genau geht, hier mal eine genauere Skizze :

            Verlinke die Bilddatei direkt, nicht das PHP-Script, das ein HTML-Dokument generiert (soviel zu Deinem bisherigen Verständnis vom Verlinken von Dokumenten...)!

            Die vorherige war vllt etwas ungenau...bzw das mit dem Logo war nicht ganz klar.

            Oh, Deine vorherige Skizze war sehr klar. Dir war nur nicht klar, dass Dein Denkansatz zu ihrer Umsetzung in eine völlig ungeeignete Richtung ging. Und Dir war es anscheinend nicht möglich einzusehen, dass Du hier schon in die richtige Richtung geschickt wirst.

            Du bekommst hier nicht immer das zu lesen, was Du gerne lesen möchstest, sondern das, was Dir hier am ehesten weiterhilft. Auch wenn der Unterschied nicht immer leicht verdaulich ist, so ist er doch heilsam.

            Liebe Grüße,

            Felix Riesterer.

            --
            ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
            1. Ich hatte ehrlich gesagt nicht den Eindruck. Schau Dir meinen Vorschlag nocheinmal sehr genau an. So simpel er Dir vielleicht auf den ersten Blick erscheinen mag, so kompliziert kann Dein Unterfangen trotzdem werden. Unterschätze das alles nicht! Wenn ich Deinen ursprünglichen Post richtig verstehe, dann bist Du eben gerade _nicht_ von einer sinnvollen Seitenstruktur ausgegangen! Und gerade dort habe ich angesetzt.

              Das ich von einer richtigen Struktur ausgehe war mir auch klar. Deshalb wollte ich ja hier nachfragen und mir Rat holen. Ich weiß ess ich es wohl mit div-Elemten löse, aber mehr auch nich.

              Das mit dem Frame und Javascript, habe ich jetzt echt dazu gelernt.
              Auf den Frame kann ich gut und gerne verzichten, aber andere Elemente auf der Seitebasieren wohl oder übel auf Javascript..und ich denke die "Zielgruppe" meiner Seite wird das wohl packen. Nicht destotrotz ist der Gedanke von euch natürlich richtig - keine Frage. Aber diese Sachen sind dann Zukunftsmusik. Ich will erst einmal das Grundgrüst stehen haben.
              Und da ist halt der Punkt wo ich unsicher war, wie genau ich das anpack.

              Du musst meine Hilfe nicht in Anspruch nehmen. Sie ist zwar umsonst (sprich "kostenlos"), aber nicht unbedingt umsonst (sprich "vergeblich", oder "unnütz"), wenn Du sie annimmst.

              Andere Hilfe nehme ich gern in Anspruch...sonst hätte ich hier ja nicht nachgefragt ;)...bin auch froh, dass es überhaupt noc User gibt die Hilfbereit sind und sich dazu bemühen mal Antworten in richtigen Sätzen rauszubrignen - das ist heutzutage imo keine altäglichkeit mehr.

              Nö, nicht unbedingt. Ich setze mein content-Element zuerst im Quelltext an, danach kommen dann bei mir andere Blockelemente. Mit CSS kann ich dann die Darstellung frei anpassen. Das klappt bei mir recht gut und stabil.

              Ehrlich gesagt verstehe ich das immernoch nicht als vollwertige Antwort auf meine Frage. Das mit den div-Elementen ist mir ja alles klar, aber so wie du es schreibst...habe ich das doch auch gemeint...oder nicht?!

              Ich würde halt gern wissen wie ich am besten Anfange...welche Bildteile sollten gesliced werden und danach als Blöcke umgesetzt werden. Die Anwordnung usw. werde ich mir dann schon selbst aneignen.

              Verlinke die Bilddatei direkt, nicht das PHP-Script, das ein HTML-Dokument generiert (soviel zu Deinem bisherigen Verständnis vom Verlinken von Dokumenten...)!

              Ja..gut..da hab ich nich ganz gecheckt^^...kenn das aus Foren immer anders. Aber man lernt wiegesagt ja immer dazu.

              Oh, Deine vorherige Skizze war sehr klar. Dir war nur nicht klar, dass Dein Denkansatz zu ihrer Umsetzung in eine völlig ungeeignete Richtung ging. Und Dir war es anscheinend nicht möglich einzusehen, dass Du hier schon in die richtige Richtung geschickt wirst.

              Du bekommst hier nicht immer das zu lesen, was Du gerne lesen möchstest, sondern das, was Dir hier am ehesten weiterhilft. Auch wenn der Unterschied nicht immer leicht verdaulich ist, so ist er doch heilsam.

              Ich bin auch froh Hilfe zu erhalten mit der ich etwas anfangen kann. Aber meist bin ich etwas misstrauig...wer sagt mir, dass das was ihr sagt nicht genauso "Unsinn" ist, wie das andere was so im Internet steht. Ihr habt mich aber zu Recht von eurer Meinung überzeugt.
              Nur deshalb zeige ich mich of etwas störrig ;).

              Grüße

              bjoern

              1. Hallo,

                Das ich von einer richtigen Struktur ausgehe war mir auch klar. Deshalb wollte ich ja hier nachfragen und mir Rat holen. Ich weiß ess ich es wohl mit div-Elemten löse, aber mehr auch nich.

                und ich glaube, hier liegt schon ein kleines Einstiegsproblem. Fixiere dich nicht so sehr auf div-Elemente - sie sind dazu da, andere Elemente zu gruppieren, zusammenzufassen. Aber nicht unbedingt, um ein Layout nur damit aufzubauen.
                Oft sind andere Elemente, die sinnvoll anhand der Dokumentstruktur gewählt werden, schon völlig ausreichend, um mit CSS darauf aufzusetzen.

                Ich will erst einmal das Grundgrüst stehen haben.

                Und wir versuchen dir klarzumachen, dass eben dieses Grundgerüst auch ohne CSS, ohne Javascript und andere optionale Techniken zunächst prinzipiell funktionieren sollte - so wie eine Messerklinge erstmal die richtige Form und den richtigen Schliff haben muss, bevor man daran geht, ein Monogramm einzugravieren oder den Griff zu verzieren.

                Ich würde halt gern wissen wie ich am besten Anfange...welche Bildteile sollten gesliced werden

                Gar keine - wozu denn auch? Lass doch am Stück, was zusammengehört.

                Verlinke die Bilddatei direkt, nicht das PHP-Script, das ein HTML-Dokument generiert (soviel zu Deinem bisherigen Verständnis vom Verlinken von Dokumenten...)!
                Ja..gut..da hab ich nich ganz gecheckt^^...kenn das aus Foren immer anders.

                Das hat doch mit irgendwelchen anderen Foren nichts zu tun. Du willst ein Bild einbinden, verlinkst aber in Wirklichkeit ein Script, das eine HTML-Ressource erzeugt. Das würde in keinem Kontext funktionieren.

                Ich bin auch froh Hilfe zu erhalten mit der ich etwas anfangen kann. Aber meist bin ich etwas misstrauig...wer sagt mir, dass das was ihr sagt nicht genauso "Unsinn" ist, wie das andere was so im Internet steht.

                Das kann dir niemand garantieren. Letztendlich musst du selbst entscheiden, was für dich und deinen Anwendungsfall sinnvoll ist. Wir können dich nur auf Vor- und Nachteile bestimmter Lösungen und Methoden hinweisen und dir Ratschläge geben.
                Was du für dich daraus machst, ist natürlich deine Sache.

                So long,
                 Martin

                --
                There are 10 types of people in the world: Those who understand the binary system, and those who don't.
                1. und ich glaube, hier liegt schon ein kleines Einstiegsproblem. Fixiere dich nicht so sehr auf div-Elemente - sie sind dazu da, andere Elemente zu gruppieren, zusammenzufassen. Aber nicht unbedingt, um ein Layout nur damit aufzubauen.
                  Oft sind andere Elemente, die sinnvoll anhand der Dokumentstruktur gewählt werden, schon völlig ausreichend, um mit CSS darauf aufzusetzen.

                  Und wir versuchen dir klarzumachen, dass eben dieses Grundgerüst auch ohne CSS, ohne Javascript und andere optionale Techniken zunächst prinzipiell funktionieren sollte - so wie eine Messerklinge erstmal die richtige Form und den richtigen Schliff haben muss, bevor man daran geht, ein Monogramm einzugravieren oder den Griff zu verzieren.

                  Ja aber welche Elemente soll ich denn sonst nehmen oO, wenn kein Flash, CSS oder JavaScript?! Jeder sagt Tabellen sind müll, man soll doch das Layout mit div-Blöcken machen...jeder behauptet echt was anderes..

                  Gar keine - wozu denn auch? Lass doch am Stück, was zusammengehört.

                  Ich habe ein Layout in Photoshop gemacht. Dieses muss ich nun Slicen um daraus Container zu bauen die sich dann dynmaisch anpassen ganz einfach. Das kann ich doch nich als ganzes Bild lassen.

                  Das hat doch mit irgendwelchen anderen Foren nichts zu tun. Du willst ein Bild einbinden, verlinkst aber in Wirklichkeit ein Script, das eine HTML-Ressource erzeugt. Das würde in keinem Kontext funktionieren.

                  Ja kp, es hat mit der Bildeinfügefunktion hier nicht funktioniert, so wie in anderen Foren mit nem Link von imageshack ebenso wenig und dann hab ich den Schnipsel aus dem vorherigen Post kopiert...und da ging es auch nich. Naja egal..

                  1. Lieber bjoern,

                    Ich habe ein Layout in Photoshop gemacht. Dieses muss ich nun Slicen um daraus Container zu bauen die sich dann dynmaisch anpassen ganz einfach. Das kann ich doch nich als ganzes Bild lassen.

                    stimmt. Ich habe das mal für Dich skizziert. Schau doch mal rein...

                    Der Ehrlichkeit halber habe ich nochmals an der Struktur der Seite gebastelt. Sie sieht jetzt so aus:

                    <body>  
                        <div id="content">  
                            <h1>Meine Seite</h1>  
                            <p>Hier geht's voll ab, Mann!</p>  
                            <p id="footer"><span></span></p>  
                        </div>  
                        <div id="navi">  
                            <h2>Navigation</h2>  
                            <ul>  
                                <li><a href="#impressum.html">Impressum</a></li>  
                                <li><a href="#links.html">weitere Links</a></li>  
                            </ul>  
                        </div>  
                        <p id="logo"><span></span></p>  
                    </body>
                    

                    Ich halte es nach wie vor für sinnvoll, vor die Navi eine Unterüberschrift zu setzen, da ohne CSS die Seite damit besser strukturiert wird.

                    Des weiteren habe ich zwei inhaltlich vollkommen sinnfreie Elemente im Code: "footer" (ein Textabsatz) und "logo" (auch ein Textabsatz). Beide Elemente sind nur dazu da, um die runden Ecken auf jeden Fall darstellen zu können, ohne auf CSS-Pseudoklassen wie :after, :last-child oder :first-child auszuweichen, die noch nicht von allen Browsern genügend unterstützt werden.

                    IE7, FF3, Safari und Opera machen klaglos mit. IE6 und darunter habe ich nicht getestet.

                    Liebe Grüße,

                    Felix Riesterer.

                    --
                    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
                    1. stimmt. Ich habe das mal für Dich skizziert. Schau doch mal rein...

                      Also...ich muss erstmal sagen vielen Dank für die Mühe....nur so wie ich mir das vorstelle klappt es leider nicht.
                      Vielleicht hätte ich dazu sagen sollen, dass der ganze "Kasten" horizontal zentriert sein soll. Ist aber eigentlich kein Problem mit einem "wrapper-div" mit margin-left und margin-right auf auto.
                      Darüber hinaus sollte der Kasten aber nach unten hin und nach rechts erweiterbar bzw. relativ zur Auflösung sein. Also so 70% breit oder so.
                      An sich klappt das ja, aber in meinem Layout aus photoshop liegt hinter der weißen Fläche ein Schatten, dass heißt die Kanten müssen genauso wie die Ecken Bilder sein. Ein Kleiner 1px breiter Streifen reicht in dem Fall ja aus. Dann auf repeat-x bzw repeat-y..schon sollte es klappen.

                      Ich steh nur immernoch auf dem Schlauch wie ich das nun verschachtele. Wo fang ich dann, was kommt vor was oder dahinter?...

                      Genauso hab ich das Problem, dass wenn ich mein Logo einfüge, dann ist es immer außerhalb des "wrappers".
                      Also ich habe zuerst um es zu vereinfachen einen Head-Bereich gesliced, nen Middle-Teile und den Fußbereich. Klappt...jetz habe ich eine weiße Box mit runden Ecken welche sich dynamisch nach unten aber logisch nicht nach rechts anpasst. Wenn ich nun das Logo, welche nicht mit Tranzparenz arbeitet wie in deinem Beispiel, dann krieg ich es nicht auf diese weiße Fläche...

                      Ich halte es nach wie vor für sinnvoll, vor die Navi eine Unterüberschrift zu setzen, da ohne CSS die Seite damit besser strukturiert wird.

                      Den Punkt versteh ich nicht ganz ?

                      Des weiteren habe ich zwei inhaltlich vollkommen sinnfreie Elemente im Code: "footer" (ein Textabsatz) und "logo" (auch ein Textabsatz). Beide Elemente sind nur dazu da, um die runden Ecken auf jeden Fall darstellen zu können, ohne auf CSS-Pseudoklassen wie :after, :last-child oder :first-child auszuweichen, die noch nicht von allen Browsern genügend unterstützt werden.

                      Das heißt?...du hast halt Bilder benutzt um die Ecken/Rundungen darzustellen? Das war mir klar, daszu wäre ich auch in gewisser Weise gezwungen da ich dadrunter ja nen Schatten haben will.

                      Ich werde mich jetzt nochmal an die verinfachte Version (nur nach unten hin dynamisch) versuchen. Vielleicht klappt es ja..

                      Grüße
                      bjoern

                      1. Lieber bjoern,

                        je genauer Du Dein Problem beschreibst, desto genauer kann man Dir auch raten.

                        Ich habe das mal für Dich skizziert.

                        Meine Skizze berücksichtigt alles, was Du bisher genannt hast. Ob der Außenabstand eine feste Pixelbreite, oder einen Prozentwert erhält, ist für das Layout sowas von schnuppe... und die Sache mit dem Schatten musst Du in Deinen Hintergrundbildern einbauen. Das hätte ich in der Skizze auch schon machen können, wenn von Dir entsprechende Vorgaben in Deiner Fragestellung gewesen wären.

                        Also...ich muss erstmal sagen vielen Dank für die Mühe

                        Es war mir ein Vergnügen, da ich diese Herausforderung mochte.

                        ....nur so wie ich mir das vorstelle klappt es leider nicht.

                        Mir scheint, Du hast wieder zu wenig selbst daran herumprobiert...?

                        Vielleicht hätte ich dazu sagen sollen, dass der ganze "Kasten" horizontal zentriert sein soll.

                        Ist er das in meiner Skizze etwa nicht? Der Abstand nach außen ist rechts und links gleich groß.

                        Ist aber eigentlich kein Problem mit einem "wrapper-div" mit margin-left und margin-right auf auto.

                        Wozu das denn? Bei dieser Vorgabe ist ein Wrapper-Div nicht notwendig, siehe meine Skizze.

                        Darüber hinaus sollte der Kasten aber nach unten hin und nach rechts erweiterbar bzw. relativ zur Auflösung sein. Also so 70% breit oder so.

                        Hast Du Dir nichteinmal die Mühe gemacht, Dein Browserfenster in der Größe zu verändern???

                        An sich klappt das ja,

                        Wollte schon meinen...

                        aber in meinem Layout aus photoshop liegt hinter der weißen Fläche ein Schatten, dass heißt die Kanten müssen genauso wie die Ecken Bilder sein.

                        Wo liegt da das Problem? Schatten hin oder her, am Ende stehen Hintergrundbilder im CSS referenziert. Was kapierst Du denn daran nicht?

                        Ein Kleiner 1px breiter Streifen reicht in dem Fall ja aus. Dann auf repeat-x bzw repeat-y..schon sollte es klappen.

                        Wie Du meinst.

                        Ich steh nur immernoch auf dem Schlauch wie ich das nun verschachtele. Wo fang ich dann, was kommt vor was oder dahinter?...

                        Wenn Du rechts und links einen Schatten willst, dann solltest Du dem <body> ein Hintergrundbild spendieren, das den einen Schatten-Rand definiert. Viel Spaß bei den Browserunterschieden!

                        Genauso hab ich das Problem, dass wenn ich mein Logo einfüge, dann ist es immer außerhalb des "wrappers".

                        Was passt Dir an meiner Lösung nicht?

                        Also ich habe zuerst um es zu vereinfachen einen Head-Bereich gesliced, nen Middle-Teile und den Fußbereich. Klappt...jetz habe ich eine weiße Box mit runden Ecken welche sich dynamisch nach unten aber logisch nicht nach rechts anpasst.

                        ? Ich muss das jetzt nicht kapieren.

                        Wenn ich nun das Logo, welche nicht mit Tranzparenz arbeitet wie in deinem Beispiel, dann krieg ich es nicht auf diese weiße Fläche...

                        Was hindert Dich daran, die "transparenten Bereiche" mit weißer Hintergrundfarbe zu befüllen, damit Dein Logo auf einem weißen Hintergrund entsprechend zur Geltung kommt? Anstatt einen transparenten Hintergrund hätte ich auch die entsprechenden Hintergrundfabe_n_ einsetzen können, um den Übergang von Weiß auf Blau schon in der Logo-Grafik drin zu haben.

                        Ich halte es nach wie vor für sinnvoll, vor die Navi eine Unterüberschrift zu setzen, da ohne CSS die Seite damit besser strukturiert wird.

                        Den Punkt versteh ich nicht ganz ?

                        Schaue Dir die Seite im FF doch einmal ohne Styles an. Dann siehst Du _sofort_ was ich meine.

                        Ich werde mich jetzt nochmal an die verinfachte Version (nur nach unten hin dynamisch) versuchen. Vielleicht klappt es ja..

                        Poste doch Deine Zwischenergebnisse, damit man sich das anschauen, und Dir weiter raten kann!

                        Liebe Grüße,

                        Felix Riesterer.

                        --
                        ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
                  2. Hi,

                    Und wir versuchen dir klarzumachen, dass eben dieses Grundgerüst auch ohne CSS, ohne Javascript und andere optionale Techniken zunächst prinzipiell funktionieren sollte - so wie eine Messerklinge erstmal die richtige Form und den richtigen Schliff haben muss, bevor man daran geht, ein Monogramm einzugravieren oder den Griff zu verzieren.
                    Ja aber welche Elemente soll ich denn sonst nehmen oO, wenn kein Flash, CSS oder JavaScript?!

                    das haben wir doch schon gesagt: Verwende die HTML-Elemente, die die Struktur des Dokuments am besten beschreiben. Das können Überschriften, Textabsätze, Listen, Fieldsets in Formularen sein - oder auch mal eine Tabelle, wenn dieser Teil des Dokuments strukturell den Charakter einer Tabelle hat. Vereinzelt mag es auch sinnvoll sein, mehrere dieser Elemente mit einem div zu einer Gruppe zusammenzufassen.
                    Und *dann* gehst du her und formatierst dieses Gerüst mit CSS.

                    Jeder sagt Tabellen sind müll

                    Als Layoutwerkzeug: Ja.

                    man soll doch das Layout mit div-Blöcken machen

                    Das ist keine Alternative, sondern auch ein Missbrauch eines Elements für einen Zweck, für den es nicht gedacht ist.

                    Lass doch am Stück, was zusammengehört.
                    Ich habe ein Layout in Photoshop gemacht.

                    Nein. Du hast ein BILD in Photoshop gemacht. Das ist ein Riesenunterschied.
                    Du möchtest schließlich nicht das gesamte Dokument starr wie Druckguss haben, sondern flexibel und anpassungsfähig. Da ist es nicht hilfreich, sich an einem Bild festzukrallen, das *eine* mögliche Erscheinungsform des Layouts zeigt.

                    Dieses muss ich nun Slicen um daraus Container zu bauen die sich dann dynmaisch anpassen ganz einfach. Das kann ich doch nich als ganzes Bild lassen.

                    Nein, aber warum malst du dann erst ein Bild, das die ganze Seite zeigen soll? Bilder, die INHALT vermitteln, sollten sowieso am Stück bleiben. Andere Bilder, die nur der Verzierung dienen (Hintergrundbilder), möchte man doch am besten gleich für das jeweilige Element malen.
                    Wozu erst ein Fertighaus bauen und komplett verputzen, um es dann wieder abzubauen, die Teile einzeln trtansportieren und woanders mit anderem Grundriss wieder aufbauen?

                    So long,
                     Martin

                    --
                    Ist die Katze gesund,
                    freut sich der Hund.
                    1. [latex]Mae  govannen![/latex]

                      Lass doch am Stück, was zusammengehört.
                      Ich habe ein Layout in Photoshop gemacht.

                      Nein. Du hast ein BILD in Photoshop gemacht. Das ist ein Riesenunterschied.

                      Der Term "Ich habe ein Layout in Photoschop gemacht" ist in der Regel aus Autorensicht wie Resthaar-Viagra.
                      Sie stehen zu Berge, soweit noch vorhanden ;)

                      Cü,

                      Kai

                      --
                      Ash nazg durbatulûk, ash nazg gimbatul,ash nazg thrakatulûk, agh burzum-ishi krimpatul
                      selfcode sh:( fo:| ch:? rl:( br:< n4:# ie:{ mo:| va:) js:) de:> zu:) fl:( ss:| ls:?
                      Mein Selfhtml-Kram
                    2. das haben wir doch schon gesagt: Verwende die HTML-Elemente, die die Struktur des Dokuments am besten beschreiben. Das können Überschriften, Textabsätze, Listen, Fieldsets in Formularen sein - oder auch mal eine Tabelle, wenn dieser Teil des Dokuments strukturell den Charakter einer Tabelle hat. Vereinzelt mag es auch sinnvoll sein, mehrere dieser Elemente mit einem div zu einer Gruppe zusammenzufassen.
                      Und *dann* gehst du her und formatierst dieses Gerüst mit CSS.

                      Aber dann hab ich ja nur ne stinknormale HP, ich wil ja eine die nach was aussieht. Und mit htl-Elemnte kann ich das wohl nicht so aufbauen wie mit Div-Blöcken...

                      man soll doch das Layout mit div-Blöcken machen
                      Das ist keine Alternative, sondern auch ein Missbrauch eines Elements für einen Zweck, für den es nicht gedacht ist.

                      Aber es funktioniert doch und nahezu jeder macht es der eine Seite hat die nach was aussieht...

                      Nein. Du hast ein BILD in Photoshop gemacht. Das ist ein Riesenunterschied.
                      Du möchtest schließlich nicht das gesamte Dokument starr wie Druckguss haben, sondern flexibel und anpassungsfähig. Da ist es nicht hilfreich, sich an einem Bild festzukrallen, das *eine* mögliche Erscheinungsform des Layouts zeigt.

                      Ja, sry...hab mich verschrieben. Natürlich ein Bild, aber in gewisser Weise auch ein Layout, aber egal.

                      Nein, aber warum malst du dann erst ein Bild, das die ganze Seite zeigen soll? Bilder, die INHALT vermitteln, sollten sowieso am Stück bleiben. Andere Bilder, die nur der Verzierung dienen (Hintergrundbilder), möchte man doch am besten gleich für das jeweilige Element malen.
                      Wozu erst ein Fertighaus bauen und komplett verputzen, um es dann wieder abzubauen, die Teile einzeln trtansportieren und woanders mit anderem Grundriss wieder aufbauen?

                      Hab nie gesagt, dass es so aufgebaut werden soll wie ich es in Photoshop gemacht hab. Sondern dynamisch, hab aber eigentlich nie was anderes behauptet ?!

                      1. @@bjoern:

                        das haben wir doch schon gesagt: Verwende die HTML-Elemente, die die Struktur des Dokuments am besten beschreiben. […]
                        Und *dann* gehst du her und formatierst dieses Gerüst mit CSS.

                        Aber dann hab ich ja nur ne stinknormale HP, ich wil ja eine die nach was aussieht. Und mit htl-Elemnte kann ich das wohl nicht so aufbauen wie mit Div-Blöcken...

                        Das ist Unsinn. Du kannst CSS auf *jedes* HTML-Element anwenden. Also nicht nur auf 'div', sondern auch auf die sinvoll eingesetzten Elemente.

                        Aber es funktioniert doch und nahezu jeder macht es der eine Seite hat die nach was aussieht...

                        Nein. Nein.

                        Und außerdem: Millionen von Fliegen können nicht irren? [ZITAT256, ZITAT292]

                        Live long and prosper,
                        Gunnar

                        --
                        Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
                        1. Das ist Unsinn. Du kannst CSS auf *jedes* HTML-Element anwenden. Also nicht nur auf 'div', sondern auch auf die sinvoll eingesetzten Elemente.

                          Moep...mist, jetzt hab ich blödsinn geschrieben. Stimmt ja. Aber sehr hilfreiche Antworten bekomm ich trotzdem nie.
                          Nur das ist schwachsinn, das ist blöd, machs anders....aber wie >.<.

                          Aber es funktioniert doch und nahezu jeder macht es der eine Seite hat die nach was aussieht...

                          Nein. Nein.

                          Und außerdem: Millionen von Fliegen können nicht irren? [ZITAT256, ZITAT292]

                          Wenn ihr mal konkrete Beispiel aufzeigt wo man den Nachteil von solch einer Seitengestaltung sieht, dann glaub ich euch das gern. Aber imo ist das doch nur Gerede. :/
                          Ich kenn niemanden der kein JavaScript und CSS im Browser unterstützt.

                          Ist ja auch egal. Im Endeffekt muss ich mir das wohl selber aneignen.

                      2. Yerf!

                        Aber dann hab ich ja nur ne stinknormale HP, ich wil ja eine die nach was aussieht. Und mit htl-Elemnte kann ich das wohl nicht so aufbauen wie mit Div-Blöcken...

                        Wo genau siehst du den Unterschied zwischen einem DIV und den anderen HTML-Elementen? CSS jedenfalls sieht da keinen[1]. Mein Liebling ist ein

                        head,script {display:block;color:red}

                        Javascript-Ausgabe ohne document.write ;-)

                        Oder anders ausgedrückt: HTML bietet eine Vielzahl an Elmenten, nutze sie! Ein DIV ist dazu da andere Elemente zu Gruppieren. Wenn es nur ein Element enthält kann es meistens auch entfallen wenn die CSS-Formatierung einfach auf das innere Element angewendet wird.

                        Gruß,

                        Harlequin

                        [1] ok, der IE hat ein paar Probleme mit CSS, aber im großen und ganzen gehts da auch. Nur Tabellen und die Elmente im HEAD sträuben sich etwas.

                        --
                        <!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
      2. @@bjoern:

        Das ist eine mächtig schlechte Idee. Informiere Dich über die Nachteile von (I-)Frames! Das Archiv hier ist voll von Hinweisen dazu.

        Warum Frames out sind (und es schon immer waren...)

        Also auf vielen Seiten habe ich gelesen, dass ein Iframe die einzig gute Möglichkeit ist, darin eine Seite zu öffnen.

        Du liest die falschen Seiten.

        Ich wollte es einfach umgehen, dass die Seite immer erneut geladen wird. Oder ist das eigentlich egal?

        Dir geht es um von Seite zu Seite gleich bleibende Teile? Die Sitenavigation?

        Ja, die paar Bytes für diese (Text-)Teile sind egal. Bilder, die auf allen Seiten verwendet werden, werden nur einmal übertragen und dann aus dem Cache geholt. Ebenso (externe) Styelsheets und JavaScripte.

        Von Seite zu Seite gleich bleibende Teile muss kann man in einer Datei notieren und diese dann einbinden.

        Im übrigen sollte die Sitenavigation gar nicht von Seite zu Seite gleich bleibend sein. „Verlinke niemals auf die aktuelle Seite.“ (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

        Aber auch das lässt sich beim Einbinden mit SSI oder PHP erreichen, dass man den Menüpunkt fur die aktuelle Seite nicht verlinkt.

        Live long and prosper,
        Gunnar

        --
        Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
        1. Dir geht es um von Seite zu Seite gleich bleibende Teile? Die Sitenavigation?

          Von Seite zu Seite gleich bleibende Teile muss kann man in einer Datei notieren und diese dann einbinden.

          Im übrigen sollte die Sitenavigation gar nicht von Seite zu Seite gleich bleibend sein. „Verlinke niemals auf die aktuelle Seite.“ (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

          Aber auch das lässt sich beim Einbinden mit SSI oder PHP erreichen, dass man den Menüpunkt fur die aktuelle Seite nicht verlinkt.

          Das hört sich doch schonmal sehr hilfreich an. Man lernt immer wieder dazu.

          Ich hatte immer gedacht dass es besser ist eine index.html zu haben und dann immer in einem Frame zu verlinken.

          Nun ist natürlich das Problem, dass ich die Navi dann auf jeder Seite ändern muss, falls ein weiterer Menüpunkt dazukommt - falls ich die aktuelle Seite kenzeichne will auf der sich ein User befindet. Für den anderen Fall gibts ja include mit php.

          Das kuck ich mir dann mal genauer an.

          Wobei mein eigentliches Problem immer noch nicht gelöst ist^^...wie ich jetzt nun am besten anfange.

          1. @@bjoern:

            Nun ist natürlich das Problem, dass ich die Navi dann auf jeder Seite ändern muss, falls ein weiterer Menüpunkt dazukommt - falls ich die aktuelle Seite kenzeichne will auf der sich ein User befindet. Für den anderen Fall gibts ja include mit php.

            Lies nochmal:

            Aber auch das lässt sich beim Einbinden mit SSI oder PHP erreichen, dass man den Menüpunkt fur die aktuelle Seite nicht verlinkt.

            Live long and prosper,
            Gunnar

            --
            Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
          2. Das hört sich doch schonmal sehr hilfreich an.

            ich hoffe, den tag erleben zu dürfen, an dem sich von gunnar genanntes nicht als hilfreich erweist :)

  3. Schade, wenn man sich mal die Mühe gemacht hat, und dann der Fragesteller aufgrund seiner eigenen Engstirnigkeit nicht mehr vorbeikommt.

    Liebe Grüße,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
    1. Moin,

      man könnte die Forumssoftware z.B insoweit erweitern, als dass ein Antwortender seine "wegweisende" Antwort (Einschätzung durch den Schreibenden selbst) erst dann als komplett lesbar freigibt, wenn der ursprünglich Fragende sich bedankt hat oder andere festzulegende "Taten" vollbracht hat. Bis dahin könnte das "eingeschränkte" Posting nur für bestimmte (mögliche Eigenschaften: /my/; hat in dem Thread schon mitdiskutiert; Account hat die (neue) Eigenschaft "inner circle"; etc ...) Forumsleser komplett lesbar sein. Ähnliche Einschränkungen wären auch für das Archiv denkbar.
      Solche oder ähnliche Maßnahmen könnten den Anreiz, konstruktiv mitzuwirken, erhöhen - denn darum geht es ja eigentlich, oder? Zudem erhöht es die Bindungswirkung an das Forum. Andererseits widersprechen solche Beschränkungen der Idee eines freien Informationszugangs. Es gibt also gute Argumente für und wider solche Lösungen.

      Grüße

      Swen