1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

site layout ohne tabelle...

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von obstbauer, 05.05.06.

  1. obstbauer

    obstbauer Weisser Rosenapfel

    Dabei seit:
    09.09.04
    Beiträge:
    792
    ich möchte das layout im anhang (sehr stark vereinfacht dargestellt)
    OHNE unbedingt html-tabellen einzusetzten umsetzen da diese
    browserübergreifend erfahrungsgemäß sehr unatraktiv sind.

    ich habs mit css div layern probiert aber leider ohne annehmbaren erfolg... (positionierung/zentrierung/content einsetzen auf bilder)

    der container soll so gross sein wie das bild und horizontal mittig im browser zentriert sein, die links sind auch bilder evtl. mit rollover.
    auf das bild layout soll in der content zelle natürlich auch typo drauf.

    es gäbe aber auch die möglichkeit die zelle mit dem content einfarbig
    zu machen um das ganze zu vereinfachen.

    was würdet ihr mir vorschlagen,
    php oder doch xhtml..oder gleich was anders...?

    bin dankbar über jede meinung
     

    Anhänge:

    #1 obstbauer, 05.05.06
    Zuletzt bearbeitet: 05.05.06
  2. xenxox

    xenxox Macoun

    Dabei seit:
    08.02.05
    Beiträge:
    122
    Ganz einfach:

    Eine Div, für diese via CSS das Hintergrundbild als Background-Image definieren. Die Div muss die gleichen Maße wie das genutze Hintergrundbild haben. Dann setzt du den margin noch auf auto und die Ebene ist zentriert.

    Ich entnehme aus deiner Skizze dass es sich um ein dreispaltiges Layout handeln soll.

    Du erstellst in der ersten Div zwei weitere, diese bekommen jeweils die float Eigenschaft via CSS zugewiesen. In einer der entstanden Ebenen fügst du zwei weitere Divs hinzu und weist diesen im Prinzip auch nur noch die Float-Eigenschaft zu. Schwups die wups hast du ein dreispaltiges Layout das zentriert im Browser erscheint. Sollte bis zum IE5.2 for Mac und allen anderen aufwärts funktionieren.

    Aber strukturier das Dokument vorher korrekt, (X)HTML ist eine Strukturierungssprache - die Gestaltung kannst du dann später in CSS festlegen.

    Wer sauber strukturiert und dann ein wenig mit CSS spielt erhält ruck-zuck valide Seite, die nett aussehen und in jedem Browser ihre Funktion erfüllen.
     
  3. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    Moin,

    als erstes solltest Du Dir Klarheit verschaffen, was mit Deinem Layout bei Benutzereingriffen passieren soll:
    • Was passiert wenn der Benutzer die Schrift anpasst (vergrößert/verkleinert). Wächst dann die komplette Gestaltung mit oder werden nur die Buchstaben größer (mit der Folge das auch mal nur ein Wort in einer Zeile steht!).
    • Was passiert wenn sich der Viewport ändert? Klassisch: unterschiedliche Bildschirm- und/oder Fenstergrößen. Gibt's dann einen Rand drumherum, wächst auch hier die Gestaltung mit, füllt das Hintergrundbild auf?
    Der schiere Rest braucht etwas ordentliche Semantik, die nach der ersten Inaugenscheinnahme wahrscheinlich nicht mal großartig extra DIVs braucht (außer aus der Beantwortung der o.g. Fragen ergäbe sich noch ein Bedarf). Und dann schlägt das Box-Model zu :p. Auch von mir 'n Linktipp:

    http://www.andreas-kalt.de/webdesign/tutorials/

    @der Faktor: das ist mitnichten ein 3-spalter wenn links nur das Logo steht ;).

    Gruß Stefan
     
  4. obstbauer

    obstbauer Weisser Rosenapfel

    Dabei seit:
    09.09.04
    Beiträge:
    792
    euch vielen lieben dank für die tollen tipps: werde das alles ausprobieren.
    3 spalter layout müsste hinkommen obwohl ich das mit den links/rollovers noch nicht ganz verstehe. ausserdem sollen in den footer unten rechts auch noch 1-2 image links. hätte nicht gedacht das bei so simplem aufbau so ein "vorübelegung" nötig ist bis man endlich mit dem content anfangen kann...


    @stk:
    -hinter dem recht simplen aufbau steht ein CMS welches nach möglichkeit
    dem benutzer recht enge vorgaben zum eingriff gibt. also ich hoffe ich bekomme das so hin das derjenige der die site pflegt eine schriftgrösse hat die er auch nur verwenden kann. sollte er den content mit dieser schriftgrösse "zu voll packen"
    sollte eine scrollbar für den text erscheinen (iframe/fakeiframe mit scrollbar=auto?)
    kann ich das so machen?

    -sollte der viewport varieren passiert nichts: grösseres fenster wandert der container einfach mit dem margin in die mitte und die typo ändert sich auch nicht, das hintergrundbild füllt demnach nicht auf (was meinst du mit rand?) also wen du einfach einen farbigen rand meinst. nein den gibt es nicht die site schliesst mit dem bild ab. grösse ist 640x480px

    danke nochmal an euch für die hilfreichn tipps ich werde spätestens morgen von meinen versuchen/erfolgen berichten.

    so jetzt muss ich aber los... :cool:
     
  5. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    Moin,

    mit Benutzer meinte ich den, der die Seite aufruft. Schade das Du das tolle Design mit so eingeschränkter Anzeige ausstatten wilst - es hätte besseres verdient!

    Wenn ich auf einem 1200 x 1024 Monitor mir das Teil ansehen will, bekomme ich eine Gestaltung von 640 x 480. Macht 75 % Verlust für den umlaufenden Rand!

    Und innerhalb der Gestaltung bekomme dann eine Spalte mit Content (also mal grob gerechnet 1/3, mit Rändern eher 25 %) den ich mir nicht vergrößern kann - also 25 % x 25 % = etwa 6,5 % meines Bildschirms geben mir Information über Deine Webseite - findest Du das nicht etwas arm?!

    Gruß Stefan
     
  6. Prophet

    Prophet Gast

    Ja da hat stk recht. Es wäre sinnvoll die Seite zumindest für 800x600 zu gestalten. Das ist eine Standard auflösung die die meisten professionellen Designer wählen. Dynamisch anpassend ist natürlich noch besser aber das geht natürlich nicht bei jedem design.
     
  7. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    Moin,
    Dann hätten wir immerhin schon rund 10 % ;).

    Nein, ernsthaft. Wenn das Layout "eingefroren" bleiben soll, kann man sich immer noch mit einem zweiten, größeren CSS helfen, das abhängig von der Fenstergröße angezogen wird. Siehe auch:

    http://www.themaninblue.com/writing/perspective/2004/09/21/

    Ich hab das mal hier und hier für Kunden adaptiert und umgesetzt.

    Gruß Stefan
     
  8. Prophet

    Prophet Gast

    Problem nur bei deinen Hintergrund bildern ist das diese Ziemlich verpixelt und unscharf wirken...
     
  9. obstbauer

    obstbauer Weisser Rosenapfel

    Dabei seit:
    09.09.04
    Beiträge:
    792
    das ist durchaus shr schade! ich wollte eigentlich lieber ein nach unten offenes design haben aber der kunde hat ausdrücklich diese grösse gewünscht. das layout ist auch schon länger fertig und der content beläuft sich auf kurze info des kunden und veranstaltungshinweise etc. ist also eher ein minisite...
     
  10. obstbauer

    obstbauer Weisser Rosenapfel

    Dabei seit:
    09.09.04
    Beiträge:
    792
    dank eurer hilfe bin ich schon echt ein sehr grosses stück weitergekommen, super!

    jetzt habe ich aber eine frage zur formatierung, und zwar möchte ich das
    der content-layer ein feste breite hat z.b. 300px.(ist auch angegeben)
    ...
    #content
    {
    float: right;
    width: 300px;
    height: 460px;
    }
    ...

    wenn ich dann text einfüge soll an der 300px marke die zeile umbrechen.
    ich habe schon versucht ein tabelle in den layer zu legen aber das problem
    bleibt, wie kann ich das erzwingen?
     
  11. obstbauer

    obstbauer Weisser Rosenapfel

    Dabei seit:
    09.09.04
    Beiträge:
    792
  12. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    Moin,
    Wenn Du eine Silbentrennung meinst - die gibt es im Web nicht. Paßt das Wort noch hin ist gut, wenn nicht kommt's in die nächste Zeile.

    Bestenfalls kannst Du mit text-align= justify für Blocksatz arbeiten. Das stellt zwar das letzte Wort an die 300er Marke erzeugt aber im Extrem recht große Wortlücken.

    Gruß Stefan
     
  13. obstbauer

    obstbauer Weisser Rosenapfel

    Dabei seit:
    09.09.04
    Beiträge:
    792
    also ich meinte weniger die silbentrennung sondern eher die tatsache dass es der text
    nicht über den rand gehen soll sondern einfach dort mit dem letzten wort umbrechen.
    irgendendwie geht es jetzt auch?! wer weis was ich da verschnuselt habe...;)
    trotzdem danke für den justify tip! kann ich sicher auch mal noch brauchen.

    ABER:
    kennt jemmand eine möglichkeit in einen div layer content einzufügen den
    man dann im layer scrollen kann?
    also so wie ein iframe aber eben mit einer anderen technik...
     
  14. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    Moin,

    Code:
    div#layer {
      height: 400px;
      width: 600px;
      overflow: auto;
      }
    baut Dir ein div mit 600 x 400 px Anzeigegröße. Wenn mehr Text vorhanden ist als in dieses Feld reinpaßt wird ein Scrollbalken erzeugt. Du kennst SelfHTML und die dortige, sehr gute CSS Sektion?

    Gruß Stefan
     
  15. obstbauer

    obstbauer Weisser Rosenapfel

    Dabei seit:
    09.09.04
    Beiträge:
    792
    ja vielen dank... selfhtml hat mir auch schon sehr weitergeholfen...

    danke dir!!!
     

Diese Seite empfehlen