✔ Problem mit Layout und Bilder

kcyberbob

kcyberbob

Erfahrenes Mitglied
Hallo zusammen,

ich habe folgendes Problem, ich möchte folgendes Bild als Layout umsetzten, doch leider bekomme ich das nicht ganz hin so wie es sein soll.

http://img5.imagebanana.com/img/d2xi5w9c/layout_test.jpg

Vielleicht könnt ihr mir sagen wie das am besten geht, denn ich hab es mit Tabellen probiert aber da bekomme ich den Content nicht so richtig hin und ich denke auch das es nicht gerade gut ist das Layout mit Tabellen zu lösen.

Mit CSS bzw. Div´s habe ich es probiert aber dort verschiebt es mir immer die Seite wenn man die Auflösung kleiner macht als das gesamte Breite des Bildes.


Mit freundlichen Grüßen

Andy
 

Anhänge

  • layout_test.jpg
    layout_test.jpg
    54,7 KB · Aufrufe: 16
Hi,

wie sollen sich denn in diesem Layout überhaupt die benachbarten und drei darunterliegenden Bilder verhalten, wenn der Seiteninhalt zunimmt und die Viewporthöhe überschreitet?

Bei deinem Versuch, es mit CSS umzusetzen, hat wohl die Angabe zur Mindestbreite min-width gefehlt, damit das Layout beim Skalieren des Fensters nicht in sich zusammenfällt.

Wie sieht denn dein Versuch überhaupt konkret aus?

mfg Maik
 
So wie ich das verstanden habe soll der Sockel immer ganz unten stehen und sich nach oben hin mit schwarzem Hintergrund verlängern.
Insgesamt sehe ich das aber sehr skeptisch. Vor allem wenn das Vorschaubild die Originalgröße darstellt, werden wohl die meisten User nicht viel von dem Sockel zu sehen bekommen. Die meistverbreitete Auflösung sind wohl immer noch 1024 x 768. Und danach sollte man sich richten. Es ist auch nur mit JS Einsatz möglich, das Bild gleich in die Mitte zu schieben.
Ich würde den Hintergrund eher als fixes Bild einsetzen und nur den Content Bereich scrollen. Damit haben alle User was vom Bild.
 
Also wenn der Inhalt größer wird dann soll das Bild oben links/rechts wiederholt werden.

Meinen CSS-Versuch habe ich geköscht, da ich überhaupt nicht auf einen grünen Zweig gekommen bin. Aber ich werde es weiter probieren. Hoffe aber auch das mir hier einer weiterhelfen kann.
 
Wenn sich das Layout auf der X- und Y-Achse dynamisch verhalten soll, seh ich da leider keine Lösungsmöglichkeit für dich.

mfg Maik
 
Code: 
<table border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="350" style="background-image:url(images/bottom_left_03.jpg); background-repeat:repeat-y; background-position:right;">&nbsp;</td>
    <td>&nbsp;</td>
    <td width="350" style="background-image:url(images/bottom_right_03.jpg); background-repeat:repeat-y; background-position:left;">&nbsp;</td>
  </tr>
  <tr>
    <td width="350" height="489" style="background-image:url(images/bottom_left_02.jpg); background-repeat:no-repeat; background-position:right bottom;">&nbsp;</td>
    <td>&nbsp;</td>
    <td width="350" height="489" style="background-image:url(images/bottom_right_02.jpg); background-repeat:no-repeat; background-position:left;">&nbsp;</td>
  </tr>
  <tr>
    <td width="350" style="background-image:url(images/bottom_left_01.jpg); background-repeat:no-repeat; background-position:right;">&nbsp;</td>
    <td><img src="images/bottom_center_01.jpg" width="900" height="300" /></td>
    <td width="350" style="background-image:url(images/bottom_right_01.jpg); background-repeat:no-repeat; background-position:left;">&nbsp;</td>
  </tr>
</table>

So würde das verhalten der Bilder passen aber leider nicht das mit dem Content nicht wenn mehr rein kommt als die höhe ist.
 
Müssten demnach die Hintergrundbilder "bottom_left_02.jpg" und "bottom_right_02.jpg" nicht vertikal wiederholt werden?

Mit DIV-Blöcken und CSS lässt sich dieses Verhalten leider nicht reproduzieren, dass die Hintergrundbilder in den benachbarten Blöcken wiederholt werden, wenn im mittleren Block der Inhalt zunimmt.

mfg Maik
 
Ich hab die Lösung und sie ist so einfach das ich da nicht vorher drauf gekommen bin.
Aber trotzdem danke für alle die geholfen haben.

Code: 
<table border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="350" valign="bottom" style="background-image:url(images/bottom_left_03.jpg); background-repeat:repeat-y; background-position:right;"><div style=" height:489px; background-image:url(images/bottom_left_02.jpg); background-repeat:no-repeat; background-position:right;">&nbsp;</div></td>
    <td><p>&nbsp;</p></td>
    <td width="350" valign="bottom" style="background-image:url(images/bottom_right_03.jpg); background-repeat:repeat-y; background-position:left;"><div style=" height:489px; background-image:url(images/bottom_right_02.jpg); background-repeat:no-repeat; background-position:left;">&nbsp;</div></td>
  </tr>
  <tr>
    <td width="350" style="background-image:url(images/bottom_left_01.jpg); background-repeat:no-repeat; background-position:right;">&nbsp;</td>
    <td><img src="http://www.tutorials.de/forum/images/bottom_center_01.jpg" width="900" height="300" /></td>
    <td width="350" style="background-image:url(images/bottom_right_01.jpg); background-repeat:no-repeat; background-position:left;">&nbsp;</td>
  </tr>
</table>

Als ich das ganze hochgeladen hab sind zwischen den einzelnen Bildern kleine Abstände könnt ihr mir vielleicht sagen wie ich diese weg bekomme?
 
Zuletzt bearbeitet:
Kannst du mal den Link zur hochgeladenen Seite nennen?

Ohne die eingebundenen Grafiken ist da von den Abständen nichts zu erkennen.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück