Chris: Wie kann ich sowas in HTML / CSS umsetzen?

Hi :)

Eigentlich habe ich ja schön häufiger Websites erstellt, aber jetzt weiß ich leider nicht weiter :(

Hier ist das Screendesign Konzept:
http://www.rolfsdrachenkiste.de/SD.jpg

Wie mache ich denn sowas am besten?
Mit Tabellen wäre es recht kompliziert ich weiß gar nicht, denke nicht, dass das überhaupt gehen würde.
Die Tabellen müssten ja 100% breit sein und dann mittendrin plötzlich Zellen in Pixel größe haben, da die hellgraue Fläche feste Pixel Maße haben soll.

Mit CSS wüsste ich jetzt auch nicht weiter, für jede blaue Linie einen div Layer, aber wie würde ich X und Y korrekt platzieren, damit es auch mit der hellgrauen Fläche überein stimmt?

Könnt ihr mir helfen?

Danke schon mal
Chris

  1. Chris,

    http://www.rolfsdrachenkiste.de/SD.jpg

    http://www.rolfsdrachenkiste.de/SD.jpg, </faq/#Q-19>, danke.

    da die hellgraue Fläche feste Pixel Maße haben soll.

    Warum sollte die das? Horizontales Scrollen ist wohl bei keinem User auf der Beliebtheitsskala weit vorne.

    Gunnar

    --
    “I got my finger on the trigger / But I don’t know who to trust” (Bruce Springsteen, Devils and Dust)
    1. da die hellgraue Fläche feste Pixel Maße haben soll.

      Warum sollte die das? Horizontales Scrollen ist wohl bei keinem User auf der Beliebtheitsskala weit vorne.

      Denke mit 600 px Breite wird jeder Monitor zurecht kommen, ohne zu scrollen.
      Außerdem, will ich, dass mein Design bei jeder Auflösung erhalten bleibt.

      Aber das war ja auch gar nicht meine Frage ...

      1. Chris,

        Denke mit 600 px Breite wird jeder Monitor zurecht kommen, ohne zu scrollen.

        Was hat die Breite meines Browserfensters mit meiner Monitorauflösung zu tun? Du willst mich nicht zwingen, das Browserfenster als einziges zu sehen, oder?

        Woher willst du wissen, dass mein PDA überhaupt 600 Pixel in der Breite darstellen kann?

        Außerdem, will ich, dass mein Design bei jeder Auflösung erhalten bleibt.

        Webdesign ist kein Printdesign.

        Dein Anspruch ist von vornherein zum Scheitern verurteilt. Wenn der User die Schriftgröße seinen Wünschen anpasst (was du zum Glück nicht verhindern kannst), wird jedes pixelgenau geplante Layout unansehnlich.

        Aber das war ja auch gar nicht meine Frage ...

        Da du darüber offensichtlich noch nicht nachgedacht hattest, hielt ich es für umsomehr nötig, dich darauf hinzuweisen.

        Gunnar

        --
        “I got my finger on the trigger / But I don’t know who to trust” (Bruce Springsteen, Devils and Dust)
  2. Hi,

    mit Tabellen ist es nicht kompliziert (man kann % mit Pixel mischen), mit anderen Tags und CSS auch nicht.

    Das Design ist ziemlich nichtssagend, was soll das denn sein? Ich sehe da nur ein Raster. Aber wo kommt nicht Navigation hin, wo das Logo, der Inhalt, etc.. ???

    MfG
    Danny

    1. mit Tabellen ist es nicht kompliziert (man kann % mit Pixel mischen), mit anderen Tags und CSS auch nicht.

      Sicher, dass man das nach dem Standard darf?
      Ich meine irgendwann mal hier gelesen zu haben, dass man das nicht mischen darf :-/

      Problem ist dann aber immer noch, dass meine äußere Tabelle ja 100% hätte, dann müssten da 3 weitere rein, oben, mitte, unten, die haben auch je 100%, in der Mitte eine Zelle mit z.B. 500Px und die beiden äußeren Zellen, da gebe ich dann nichts an, oder wie?

      Das Design ist ziemlich nichtssagend, was soll das denn sein? Ich sehe da nur ein Raster. Aber wo kommt nicht Navigation hin, wo das Logo, der Inhalt, etc.. ???

      Ist nur das grobe Konzept, damit man sieht, worum es geht.
      Das wird natürlich noch aufgefüllt ;)

      1. Moin!

        Sicher, dass man das nach dem Standard darf?
        Ich meine irgendwann mal hier gelesen zu haben, dass man das nicht mischen darf :-/

        Dürfen darf man schon. Man sollte aber innerhalb einer einzigen Tabelle nicht Prozent und Pixel miteinander mischen - da geht einem garantiert die Pixelgenauigkeit flöten.

        Unter dem Strich also: Nicht empfehlenswert für exaktes Tabellendesign. Aber wer will das schon.

        • Sven Rautenberg
    2. Moinsen,

      Hi,

      mit Tabellen ist es nicht kompliziert (man kann % mit Pixel mischen), mit anderen Tags und CSS auch nicht.

      mit DIVs auch nicht.

      Du hast das dunkelgraue als Body-Hintergrundfarbe.
      Dann hast Du meientwegen einen zentrierten wrapper-DIV mit der gewünschten Breite, der alles weitere beinhaltet: je drei geflaotete DIVs pro Zeile. die jeweils linken und rechten schmaler machen als die mittleren Fertig.

      --
      cu,
      Maz
      1. Du hast das dunkelgraue als Body-Hintergrundfarbe.
        Dann hast Du meientwegen einen zentrierten wrapper-DIV mit der gewünschten Breite, der alles weitere beinhaltet: je drei geflaotete DIVs pro Zeile. die jeweils linken und rechten schmaler machen als die mittleren Fertig.

        Wird das von allen gängigen Browsern korrekt angezeigt?
        Bei CSS habe ich immer ein wenig Panik :-/

        Und was ist denn ein Wrapper-DIV und was sind gefloatete DIVs?
        Bin leider nicht so fit in CSS :-/

        1. Moinsen,

          Wird das von allen gängigen Browsern korrekt angezeigt?

          Nein, der IE macht fast alles falsch. Aber auch den kann man zur "richtigen" Anzeige bringen. In der Regel ohne doppelte Stylesheets und ohne Browserweiche.

          Bei CSS habe ich immer ein wenig Panik :-/

          muss man nicht, Panik sollte man haben, wenn man nur für den IE entwickelt und darauf testet.

          Und was ist denn ein Wrapper-DIV und was sind gefloatete DIVs?

          wrapper ist ein Rahmen, ein Umschlag. Was floats sind und was CSS alles kann, findest Du (neben dem Archiv) hier: http://www.css4you.de

          Bin leider nicht so fit in CSS :-/

          daran kann man arbeiten :-)

          --
          cu,
          Maz
  3. hi,

    Hier ist das Screendesign Konzept:
    http://www.rolfsdrachenkiste.de/SD.jpg

    *hust*
    bitte _wie_ nennst du das ...?

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Moinsen,

      *hust*
      bitte _wie_ nennst du das ...?

      *röchel*
      bitte, _was_ ist denn das wieder für ein Tonfall?

      --
      cu,
      Maz
      1. hi,

        *hust*
        bitte _wie_ nennst du das ...?

        *röchel*
        bitte, _was_ ist denn das wieder für ein Tonfall?

        lediglich ein sehr erstaunter.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. Moinsen,

          hi,

          *hust*
          bitte _wie_ nennst du das ...?

          *röchel*
          bitte, _was_ ist denn das wieder für ein Tonfall?

          lediglich ein sehr erstaunter.

          ahso.
          klingt manchmal aber sehr von oben herab. Zudem sind diese Aussagen wenig hilfreich, Du weisst ja schliesslich selber was der Mensch da ausdrücken wollte - es war nur nicht ganz fachgerecht ausgedrückt.

          Der Fragesteller fühlt sich bei solchen Antworten sicher verschaukelt oder als dumm dargestellt und das Forum verliert seinen Sinn, da man befürchten muss, von Nerds angepinkelt zu werden.

          PS: Zu einem anderes posting von Dir, wo Du mir (zugegeben) freundlich unterstellst, ich hätte ohne nachzudenken eine unpassende Hilfe angeboten, ergab sich später dann noch ne ungeahnte (oder hab ichs doch geahnt?) Wendung. (ich vermutete Layout-Tabellen und behilet am Ende Recht). Manchmal bringt nachfragen und konkretes darauf einlassen dann doch was...

          --
          cu,
          Maz
    2. *hust*

      wahsaga,
      Haste dich bei Ludger angesteckt? >;->

      In Sorge,
      Gunnar

      --
      “I got my finger on the trigger / But I don’t know who to trust” (Bruce Springsteen, Devils and Dust)