site layout ohne tabelle...

[obstbauer]

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

 

[xenxox]

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.

 

[Prophet]

Falls du noch kleine Hilfen brauchst:

Barrierefreiheit
Layouts zum Anschauen
Listamatik so macht man aus Listen Menüs (Stichwort: Semantik)
Seybold - Warum Layout mit Tabellen dumm ist - Das braucht man dir wahrscheinlich nicht mehr erzählen aber trtozdem immer wieder interessant

 

[stk]

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 . 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

 

[obstbauer]

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?

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...

 

[stk]

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

 

[Prophet]

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.

 

[stk]

Moin,

...zumindest für 800x600 ...

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

 

[Prophet]

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

 

[obstbauer]

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...

 

[obstbauer]

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?

 

[obstbauer]

Moin,

Siehe auch:

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

hab ich gleich an den kunden weitergereicht... aber ichdenke da wird sich nix machen lassen

 

[stk]

Moin,

wenn ich dann text einfüge soll an der 300px marke die zeile umbrechen.

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

 

[obstbauer]

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.

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...

 

[stk]

Moin,

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

 

[obstbauer]

ja vielen dank... selfhtml hat mir auch schon sehr weitergeholfen...

danke dir!!!