[CSS] DIV Positionierung

[Salzi]

Tach zusammen.

Versuche gerade mein erstes etwas komplexere Layout in CSS mit Div's zu gestalten. Bisher hab ich das immer mit Tabellen gemacht. Von daher beschränkt sich mein Wissen in Sachen CSS Layouten doch schon stark.

Vorneweg: Ich habe mich schon versucht auf diversen Seiten einzulesen. Allerdings komme ich mit dem Wissen was da vermittelt wird nicht wirklich zum Ziel. Ich weiss auch nicht ob das wirklich so funktioniert wie ich mir das Vorstelle. Aber gut mal zum Problem:

Die Seite hat oben folgenden Aufbau:

Ganz links oben in der Ecke ist ein div mit dem Logo. Soweit ganz simpel nur daneben folgt ein weiteres Div Element. Dieses soll eine Variable Breite haben. Halt immer so breit wie das eigentliche Browserfenster es zulässt. Dieses eine Div element hat mehre Div Elemente drin und zwar:

Links und rechts ist eine fixe Grafik. Genau in der Mitte dieser beiden Grafiken ist eine weitere Grafik die immer zentriert zu den beiden Randgrafiken sein soll. Ist das Browserfenster so breit, dass ein Freiraum vorhanden ist soll der bereich gefüllt werden mit 2 weiteren Grafiken. Aber diese ist links und rechts NICHT die selbe...

Soviel geschrieben und hat wohl keiner verstanden ^^darum hier eine kleine Skizze...

Meine Fragen:

- geht sowas überhaupt?

wenn ja:

Ich sehe meine grössten Probleme im Moment daran die Grafik zwischen den beiden Randgrafiken genau auf diese beiden zu zentrieren. Wie gehe ich das an? (Will mir bisher einfach nicht funktionieren er zentriert mir immer auf mitte des Browserfenster statt auf die Grafiken.
Weiter weiss ich nicht wirklich wie ich die Füllgrafik auf beiden Seiten unterschiedlich hin kriege.

Besten Dank schon mal allen Helfern

Gruss

Salzi

 

[fraggle]

Hast du evtl. einen richtigen Screen zur Verfügung? Es gibt viele Wege sowas mit CSS umzusetzen. Hierzu müsste man allerdings genau wissen wo z.B. Hintergründe sind die sich wiederholen sollen, feste Breiten einzusetzen sind etc.

Wie gesagt, ein Screen wäre hilfreich.

 

[Salzi]

Hallo fraggle

Danke für deine Antwort. Ich habe alle Grafiken hochgeladen:

-Das Logo: Ganz oben links mit einer festen Grösse
-Die beiden Begrenzer des dynamischen Bereichs (links / rechts). Neben dem Logo direkt anschliessend sollte der Linke Begrenzer kommen. Ganz rechts am Rand des Browserfensters sollte die Rechte Begrenzung sein.
-genau Zentriert zwischen den beiden Begrenzern sollte der Verlauf platziert sein.
-falls nötig sollten links und rechts vom Verlauf 2 unterschiedliche "Füllgrafiken" den leeren Raum füllen.

Das ganze Teil sollte also in der Breite Variabel sein und die obigen Bedingungen erfüllen. Habe heute den ganzen Abend rumprobiert. Der Code ist mitlerweilen so zerschossen das ich selber nicht mehr sehen wofür was ist. Darum poste ich jetzt mal keinen code...

Abschliessend noch ein Screen wie es zusammengesetzt aussehen soll. Leider ist es da nicht dynamisch ...

Danke allen Helfern und Gruss

Salzi

 

[gruenlink]

Also rein mit CSS würde ich sagen: Nö geht nicht. Die Füllgrafiken werden das Problem. Um auf die möglichen Bildschirmauflösungen bzw. Browserfensterbreiten Einfluss nehmen zu können müsste man JavaScript einsetzen. Das geht aber meines Wissens auch nicht dynamisch, sondern nur beim Ladevorgang, also nur am Anfang. Ändert der Benutzer dann die Fensterbreite, aus welchen Gründen auch immer, bekommt er Murks zu sehen.

 

[Nathea]

Warum soll das mit CSS nicht gehen?

Ohne Anspruch auf Perfektion und mit den in Relation zu unseren Webdesignern hier geringen CSS-Kenntnissen habe ich mal ein wenig gebastelt und das Ergebnis erzielt, das in der nachstehenden Datei zu sehen ist.

Tip: Die Grafik für den gewünschten variablen Verlauf braucht nur 1px breit zu sein.

Lieben Gruß,
Nathea

P.S. Habe leider (da auf Arbeit) keine andere Chance, einen Upload zu machen, daher bitte ich um Nachsicht, dass die Datei eine .txt ist. Sollte aber keine Schwierigkeit sein, die Dateiendung zu verändern oder den Text in Deine HTML-Datei einzufügen, stimmts?

 

[Salzi]

Hallo Nathea

Besten Danke für deine bemühungen. Ich habe deinen Quellcode gleich einmal hochgeladen: Hier zu sehen. Der Ansatz ist ja schon sehr gut. Nur leider noch nicht ganz das was ich brauche.

Der Text Kopf ist zwar zentriert nur sollte dort als Hintergrund "verlauf_festegroesse.jpg" als no repeat rein kommen. Eigentlich könnte man diesen ja normal per <img>-Tag ins HTML nehmen allerdings kommt da schon ein Text drauf nacher, so dass es als Hintergrund sein muss. ich habe dann versucht:

background-image: url(verlauf_festegroesse.jpg);

Der Hintergrund wird eingebaut allerdings linksbündig und er wiederholt sich immer. (was leider nicht geht da dieser wie der Name schon sagt ein Verlauf hat und dann sieht das ja doof aus).

Also habe ich

background-image: url(verlauf_festegroesse.jpg) no repeat;

versucht. Allerdings kommt dann gar kein Bild mehr ...

Das grössere Problem allerdings ist eben das Links und Rechts von diesem "verlauf_festegroesse.jpg" eine andere Füllgrafik kommen soll und nicht auf beiden Seiten die selbe...

Noch jemand irgendwelche Ideen? Bin für alles hilfreiche Dankbar!

Gruss

Salzi

 

[Nathea]

Aus dem "Screen" (da hattest du eine Grafik hinterlegt, wie es später mal aussehen soll), geht nicht hervor, dass da unterschiedliche Inhalte drin stehen sollen.

Es wäre vielleicht hilfreich, zu erfahren, wie das, was Du willst, tatsächlich als Grafik aussehen/wirken soll. Die Skizze ist zwar nett, aber was diese von Dir gewünschten unterschiedlichen variablen Hintergründe gestalterisch bringen sollen, geht nicht wirklich daraus hervor. Zu wissen, "warum" etwas so sein soll, hilft manchmal erheblich bei den Überlegungen zum "wie".

Ja ich weiss, das klingt nach blanker Neugier

Lieben Gruß,
Nathea

P.S.
Aus dem Quelltext hast Du eine .html-Datei gemacht. Leider ist dabei der Verlauf, den ich via Grafik-Programm aus Deinem fixen Hintergrund generiert hatte, natürlich nicht zu erkennen und daher der Hintergrund nicht als Verlauf erkennbar, sondern "blank".

Nur zur Erklärung, damit nicht jemand beginnt an mir zu zweifeln

 

[Salzi]

Hallo

So ich versuch das nochmal zu Präzisieren.

Ich denke die Sache mit dem Logo ist klar. Das ist einfach links in der Ecke. Der Gesammte Freiraum zwischen Logo und dem rechten Browserrand soll mit einer zweiten Box gefüllt werden. Diese Box ist links und rechts durch eine Grafik begrenzt. (ich denke soweit haben wir uns auch verstanden ).

Die Box dient nachher im Design 2 Banner untereinander auf. Darum ist in der Mitte dieser Box auch so eine Trennlinie (horizontal).
Die Box hat einen horizontalen Verlauf und darum würde es wohl doof aussehen wenn überall die die selbe füllgrafik ist da es dann einen Harten Rand/Übergang geben würde.

Und nochmal anders erklärt:

Zwischen den beiden Randgrafiken soll die Grafik "Verlauf_festegroesse.jpg" Platz nehmen (zentriert). Auf diese drauf sollten dann 2 Banner platziert werden (welche dann folglich auch zentriert zwischen den beiden Randgrafiken sind). Der Freiraum zwischen den Randgrafiken und "Verlauf_festegroesse.jpg" sollen mit Grafiken gefüllt werden. Da aber nicht beide Seiten den gleichen grauton haben müssen das links und rechts unterschiedliche sein.

Hoffe so war es verständlich, sonst einfach nochmal nachfragen

Danke für die Hilfe im Voraus und Gruss

Salzi

 

[Nathea]

Habe ich das richtig verstanden: Die Banner sollen untereinander stehen?

Dann wird mir noch viel weniger klar, was Du mit den links und rechts unterschiedlichen Hintergründen machen willst. Logischer wäre da für mich eine horizontale optische Trennung der Bereiche, vielleicht ist es genau das, was mich dabei verwirrt.

Du hast nicht zufällig einen neuen Screenshot, mit einem Paar "fertig eingefügter" Banner und einem von Dir grafisch gestalteten Hintergrund?

Lieben Gruß,
Nathea

 

[Salzi]

mit Banner? bittesehr

Wichtig ist halt, dass die Banner im Zentriert im kasten sind und der Kasten soll sich auf die Breite des Browsers einstellen. Beim Screen ist das ja offensichtlich NICHT der Fall...

Wie das am Ende aufgebaut ist, ist mir relativ egal. Wie schon mal gesagt habe ich nicht wirklich die Erfahrung wie man das genau angeht.

Gruss
salzi

PS: Kann dir gar nicht genug danken, dass du dich dem Problem so annimmst

 

[schwaiger]

hier mal n ansatz.

is nicht auf ie getestet !

wenns dir sehr brennt meld dich !

ps.: is ne 5 min sache aber müsst passen

 

[Salzi]

Auch dir Danke schwaiger.

Allerdings hat auch dein Ansatz das Problem mit der "Harten Kante" im Verlauf.

Hier zu sehen.

Gruss
Salzi

 

[Nathea]

... Allerdings hat auch dein Ansatz das Problem mit der "Harten Kante" im Verlauf. ...

Die von Dir genannte "harte Kante" ist aber eigentlich nur darin begründet, dass der von Dir erstellte verlauf_festgroesse.jpg farblich nicht mit den beiden seitlichen Begrenzern übereinstimmt. Der Verlauf ist rechts dunkler als links, was sich natürlich auf variable Fenster immer auswirken wird. Oder ist es genau dieser Farbunterschied, den Du mit "2 Farben" meinst? Solche Feinheiten sind eigentlich etwas, was mit fixen Breiten noch am ehesten "wirkt". Jeder aufgefüllte Zwischenraum (egal ob links oder rechts) wird den optischen Eindruck verfälschen und - bei entsprechenden Breiten - das Ergebnis nicht mehr wie aus einem Guss erscheinen lassen, davon bin ich überzeugt.

Stell Dir einfach mal solch ein verzerrtes Bild mit Deinen beiden dann relativ winzigen, schmalen Bannern auf einem 20 " Bildschirm und mit breitem Browserfenster vor. Meinst du, das wirkt dann noch so wie Du es möchtest?

Und auch wenn ich mich wiederhole, zum Thema Hintergrundverläufe:

Ich sehe keinen wirklich guten Grund, warum Du diesen Verlauf als eine feste Grafik mit fixer Größe definierst, anstatt sie in einen Verlauf mit 1 px Breite zu verwandeln und diesen dann mit repeat den divider "füllen zu lassen". Das Ergebnis ist das selbe, aber die bei einem Homepage-Aufruf zu übertragende Dateimenge wird kleiner. So baut sich Deine Page rascher komplett auf.

Gruß,
Nathea

 

[Salzi]

Hallo Nathea.

Es ist zum verzweifeln Ich glaube nicht, dass das jemals so wirkt wie gewünscht.

Die von Dir genannte "harte Kante" ist aber eigentlich nur darin begründet, dass der von Dir erstellte verlauf_festgroesse.jpg farblich nicht mit den beiden seitlichen Begrenzern übereinstimmt. Der Verlauf ist rechts dunkler als links, was sich natürlich auf variable Fenster immer auswirken wird. Oder ist es genau dieser Farbunterschied, den Du mit "2 Farben" meinst?

Richtig gerade weil es ja ein Verlauf ist braucht es 2 unterschiedliche Füllgrafiken. eine die zum linken teil und eine die zum rechten Teil passt.

Solche Feinheiten sind eigentlich etwas, was mit fixen Breiten noch am ehesten "wirkt". Jeder aufgefüllte Zwischenraum (egal ob links oder rechts) wird den optischen Eindruck verfälschen und - bei entsprechenden Breiten - das Ergebnis nicht mehr wie aus einem Guss erscheinen lassen, davon bin ich überzeugt.

Stell Dir einfach mal solch ein verzerrtes Bild mit Deinen beiden dann relativ winzigen, schmalen Bannern auf einem 20 " Bildschirm und mit breitem Browserfenster vor. Meinst du, das wirkt dann noch so wie Du es möchtest?

Leider muss ich wohl einsehen dass du da mal wieder recht hast

Und auch wenn ich mich wiederhole, zum Thema Hintergrundverläufe:

Ich sehe keinen wirklich guten Grund, warum Du diesen Verlauf als eine feste Grafik mit fixer Größe definierst, anstatt sie in einen Verlauf mit 1 px Breite zu verwandeln und diesen dann mit repeat den divider "füllen zu lassen". Das Ergebnis ist das selbe, aber die bei einem Homepage-Aufruf zu übertragende Dateimenge wird kleiner. So baut sich Deine Page rascher komplett auf.

Die Füllergrafiken (weiter oben verlinkt) sind ja jeweils nur einen Pixel breit. Aber eben das ganze wird so wohl nie wie aus einem Guss wirken ...

Sollte trotzdem noch wer eine gloreiche Idee haben nur zu ich bin ganz Ohr.

Gruss Salzi

 

[Nathea]

Eine der Ideen wäre, auf die variable Breite zu verzichten, dann käme der eigentlich hübsche schwache Farbverkauf auf der rechten Seite so zur Geltung, wie er im Grafikprogramm entstanden ist.

Richte Deine Seitengestaltung auf eine Bildschirmbreite z.B. von 1024 aus (wird noch von vielen genutzt, Statistiken gibts auch, aber ich find den Link gerade nicht) und suche Dir für all jene, die breitere Bildschirme nutzen und die Browserfenster gern voll(er) aufziehen, einen optisch passenden Seitenhintergrund aus, dann wirst Du weniger Probleme haben.

Wichtig ist halt nur, dass Du eine fixe Breite nutzt.

Ist nicht optimal, aber in Deinem Falle wohl angebracht. Tut mir leid, dass mir nix anderes einfällt, aber dass die anderen Web-Design-Spezialisten hier schweigen, lässt mich vermuten, dass ich so falsch nicht liegen kann.

Probiers einfach aus und lass uns wissen, was draus wird.
Lieben Gruß,
Nathea

 

[Hilarious]

...
Ist nicht optimal, aber in Deinem Falle wohl angebracht. Tut mir leid, dass mir nix anderes einfällt, aber dass die anderen Web-Design-Spezialisten hier schweigen, lässt mich vermuten, dass ich so falsch nicht liegen kann.
...

Ich gebe zu, dass ich die Aufgabestellung nicht ganz verstanden habe. :-[

 

[Salzi]

Ich gebe zu, dass ich die Aufgabestellung nicht ganz verstanden habe. :-[

Ich muss auch langsam zugeben, dass ich nicht mehr weiss wie ich das anders erklären kann. Wo klemmts denn genau?

Gruss

Salzi

 

[Ultrasonic]

Also ich kann Dir sagen, in css ist ansich alles möglich. Sogar noch mehr als mit Tabellen. Allerding steige ich bei Deinem Plan auch nur halb durch und frage mich??? muss das überhaut sein? Mein Vorschlag wäre, baue das doch mal mit Tabellen vor, damit man parktisch sieht was du genau meinst und dann kann man das auch besser mit css nachbauen.

 

[Salzi]

Die Frage ist, ob das mit Tabellen überhaupt geht... Ich geb mir Mühe und versuchs mal. Melde mich wieder.

Danke für die Hilfe

Salzi

 

[Nathea]

Ich versuche noch einmal eine Erklärung, mal gucken ob ich es richtig verstanden habe:
(Bilder siehe unten)

Die Banner bleiben immer statisch in der Mitte, rechte und linke "Abschlüsse" ebenso. Lediglich die schmalen Bereiche direkt neben den Bannern (rot markiert) sollen sich variabel verhalten und sich der Fensterbreite gleichmäßig anpassen.

Problem ist hier: Der Bereich links vom Banner ist heller als der rechts vom Banner.

Richtig so, Salzi?

Gruß,
Nathea