[CSS] Frage zur Positionierung - verschiedene Auflösungen

[TMP2k1]

Hallo!

Ich bin nun erst seit kurzer Zeit auf dem Gebiet des CSS-Layouts unterwegs, da ich der Meinung bin, dass das mit diesem ewigen Tabellengeschreibsel in jeder einzelnen Unterseite so nicht weitergehen kann.
Jetzt habe ich allerdings gleich bei meinen ersten Gehversuchen mit einem kleinen Test-Layout kleine Probleme.
Auf meinem netten 22"er (1680x1050) sieht das genau so aus, wie ich es haben will, wie es zuvor im Photoshop als Grundentwurf und später in HTML tabellenbasiert aussah.
Unschön wird es nur, wenn ich es auf einem anderen Monitor mit einer anderen Auflösung angucke
Ist ja an sich auch ziemlich klar. Meine Frage wäre jetzt: wie kann ich das hinkriegen, dass sich das Layout quasi mit der Auflösung und der daraus resultierenden Änderung der "absoluten" Positionen automatisch mit ändert? In meinem konkreten Beispiel geht es darum, dass der Text außerhalb des Polaroid-Rahmens platziert wird.

Ich poste mal die Seite, weil ich denke, dass der Code alleine ohne die Hintergrundgrafik hier vielleicht wenig Sinn ergibt.
Falls es zu viel Umstände macht, über die Page in den Quellcode zu gucken, kann ich ihn auch trotzdem gerne hier noch mal reinkopieren.

Seite:


Alternativversuche mit anderen Stylesheets:






Ach ja: ich bitte nur um Denkanstöße, nicht darum, dass mir einer meine Site schreibt

Danke!

 

[sokie]

AW: [CSS] Frage zur Positionierung - verschiedene Auflösungen

wenn du der seite einen umschliessenden container(div) gibst mit einer festen Breite und höhe in px und den mit margin:auto; zentrierst, passt das schon mal in jeder Auflösung.
hintergrundbild ist auch in diesem Container zu positionieren. alle weiteren positionen innerhalb es containers bleiben auch bei jeder Auflösung an der selben Stelle.
der Body bekommt in dem falle nur allgemeine Angaben wie hintergrundfarbe und schriftfamilie...

 

[Dissolution]

AW: [CSS] Frage zur Positionierung - verschiedene Auflösungen

margin: auto
padding: auto

Bei verschachtelten Div's dann halt alle anpassen, wie benötigt
sollte Denkanstoß genug sein


Da du sagst, dass du erst mit CSS begonnen hast... gratulation zu diesem Schritt, ich hab mich auch ewig dagegen gewährt und habs dann mit "learning by doing" verinnerlicht indem ich joomla-styles analysiert hab und damit herumexperimentiert habe.

Ich möchte dir hiermit noch das Addon "

Bitte kostenlos registrieren, damit du die Links siehst.

" für den Firefox (für Version 1-3) empfehlen, da es die Arbeit erleichtert, besonders was solche Dinge wie die Bildschirmgröße angeht, da gibts denn Unterpunkt "Size" oder so, wo der Browser sich direkt an die von dir eingegebene Größe anpasst.

Auch sonst ist das Addon erste Sahne und vom Browser bin ich, als Hobbycoder und Programmierer sehr angetan, selten ein Problemchen.

Ansonsten gibts ähnliche Addons sicherlich für die gängigen Browser, da müsstest dich allerdings selber schlau machen!

 

[TMP2k1]

AW: [CSS] Frage zur Positionierung - verschiedene Auflösungen

@ sokie:

Ah! Genial
Das war's. Danke Dir!

Ich hab sogar schon mit so ner umschließenden DIV experimentiert, hab dem Container dann aber im Stylesheet die falschen bzw. nicht alle nötigen Infos zugeordnet. Ich hatte eher versucht, um die Text-DIV eine "Rahmen"-DIV anzulegen und den Text darin auszurichten .... hat aber nicht so recht geklappt :lol:

@ Dissolution:

Danke Dir auch! Naja, CSS hat halt schon so einige Vorteile, wenn man es erst mal durchschaut ... was ja an sich nicht sooo schwer ist. Gibt halt einige kleine Stolperfallen und insgesamt erst mal einiges zu lernen
Thx auch für den Link, werd ich mir auf jeden Fall mal ansehen.

 

[Emporia]

AW: [CSS] Frage zur Positionierung - verschiedene Auflösungen

Ein zusätzlicher Bonus bei CSS ist die rasche Hilfe/Unterstützung, und die unzähligen wirklich guten Infos, die man über CSS im Netz findet. Ich bin auch vor längerer Zeit umgestiegen und war so schnell "in CSS drinnen", wie man es kaum sonst schaffen kann.

Schönes Layout , finde ich.

 

[TMP2k1]

AW: [CSS] Frage zur Positionierung - verschiedene Auflösungen

Danke ;}

Ja, das ist schon der Wahnsinn, was man alles finden kann. Allein selfhtml bietet so viel Infos ... und das ist ja bei weitem nicht das einzige.
Man muss ja schon fast aufpassen, unter der Infoflut nicht verschüttet zu werden :lol:
Und dann muss man das Gelesene auch noch richtig kombinieren und zu einem Ganzen zusammensetzen ... aber genau das macht Spaß, wenn man sieht, wie so eine Seite langsam Gestalt annimmt und sich immer mehr an das Geplante annähert. Außerdem fördert das Suchen nach Lösungen für ein Vorhaben meistens massenhaft neue coole Möglichkeiten zu Tage
Nur ab und an brauch ich gerade anfangs mal noch Input von außen.

 

[Emporia]

AW: [CSS] Frage zur Positionierung - verschiedene Auflösungen

Ja, die Infoflut ist echt irre. Kann man gut mit den aktuellen Lawinen vergleichen - aber: Wenn man brav auf den gekennzeichneten Pisten bleibt, dann passiert auch nix .

Aber du, ich mache jetzt schon "sooo lange" mit CSS herum, und immer und immer wieder kommen neue Anforderungen, wo ich kurz mal anstehe, mir NOCH ein Buch kaufe, stunden-/tagelang im Netz herumsuche - und schließlich (vielleicht auch mit Hilfe!) eine tolle Lösung habe.

Wenns interessiert, liste ich gern mal meine Lieblingsbücher auf (so viele sind das nämlich gar nicht - eigentlich erschreckend wenig).

 

[TMP2k1]

AW: [CSS] Frage zur Positionierung - verschiedene Auflösungen

Klar, gerne
Bin immer an empfehlenswerter Literatur interessiert.

 

[Top_Gun]

AW: [CSS] Frage zur Positionierung - verschiedene Auflösungen

padding: auto

Ich bin der Meinung auto ist bei padding gar nicht erlaubt...

 

[Dissolution]

AW: [CSS] Frage zur Positionierung - verschiedene Auflösungen

Ich bin der Meinung auto ist bei padding gar nicht erlaubt...

Das stimmt, da hab ich wohl etwas über die Stränge geschlagen, tut leid

zu CSS ist noch zu sagen, dass es weit weniger frustrierend ist, als PHP (gleiches gilt für Javascript, weitaus weniger frustrierend) weil man mMn viel schneller zu Ergebnissen gelangt.

 

[Emporia]

AW: [CSS] Frage zur Positionierung - verschiedene Auflösungen

@TMP2k1: Neben vielen superguten Büchern, wo ich mir mal da und mal dort was rausgepickt habe, sind meine 2 bzw. 3 Favoriten:

Little Boxes 1 + 2, das war damals super für den Umstieg auf CSS. Man muss ja nicht jede Seite lesen, wenn man in HTML schon drinnen ist, aber er geht wirklich auf jedes Detail ein, verzichtet auf diese ganzen Pseudoausdrücke und erklärt alles ganz genau.

Und dann: Transcending CSS, Neue kreative Spielräume im Webdesign. Genial, cool, kreativ, was zum Freuen für Grafiker ...

 

[TMP2k1]

AW: [CSS] Frage zur Positionierung - verschiedene Auflösungen

Hey!

Danke, werde ich mir auf jeden Fall alles mal näher ansehen. Vor allem das letzte klingt richtig interessant

@Top_Gun: Ich persönlich hab's hier auch mal lieber rein über margin:auto gelöst. Da hat der Validator nix dran auszusetzen.

 

[BlackHawk1000]

AW: [CSS] Frage zur Positionierung - verschiedene Auflösungen

Du könntest auch darüber nachdenken deinen Websitebesuchern ein alternatives Stylesheet per Styleswitcher anzubieten. So kannst du deine Website für verschiedene Auflösungen gestalten.
Einige gute Switcher kannst du bei

Bitte kostenlos registrieren, damit du die Links siehst.

finden.

Gruß

 

[Emporia]

AW: [CSS] Frage zur Positionierung - verschiedene Auflösungen

@TMP2k1: Also das Buch ist wirklich interessant und gut. Zugegeben nichts mehr für Anfänger, denn er beschreibt nicht mehr von der Basis weg und ins Detail gehend, sondern pickt die relevanten Punkte halt heraus. Aber für die Basis sind eh andere Bücher da. Mir taugts halt wirklich, weil ich als Grafiker die Programmierung bzw. Code-Schreibung nur als notwendiges (übles) Mittel zum Zweck sehe.
Siehst, fällt mir gerade ein: Wenn man rein an Layout (ohne HTML, Javascript, blabla) denkt, gibt es ein ganz feines Buch, das wirklich von der Basis weggeht (ein bissi Farbenlehre, ein bissi Schriften, Basisinfos wie Aufteilung mit goldener Schnitt natürlich usw.): Gelungenes Webdesign von Json Beaird.

 

[nostra87]

AW: [CSS] Frage zur Positionierung - verschiedene Auflösungen

Deswegen setze ich Seiten hauptsächlich in Tables um

 

[Dissolution]

AW: [CSS] Frage zur Positionierung - verschiedene Auflösungen

Deswegen setze ich Seiten hauptsächlich in Tables um

Was vor einigen Jahren aktuell war
Geht mal mit der Zeit, die Welt bleibt nicht stehen!

*wartet auf CSS3-Unterstützung der Browser*

border-image: wird soooooo geil

 

[Emporia]

AW: [CSS] Frage zur Positionierung - verschiedene Auflösungen

yep, schließ mich Dissolution voll an ... für eine gscheite Tabelle braucht man auch gutes HTML, muss auch geschrieben werden.