• Liebe User, bitte beachtet folgendes Thema: Was im Forum passiert, bleibt im Forum! Danke!
  • Hallo Gemeinde! Das Problem leidet zurzeit unter technischen Problemen. Wir sind da dran, aber das Zeitkontingent ist begrenzt. In der Zwischenzeit dürfte den meisten aufgefallen sein, dass das Erstellen von Posts funktioniert, auch wenn das Forum erstmal eine Fehlermeldung wirft. Um unseren Löschaufwand zu minimieren, bitten wir euch darum, nicht mehrmals auf 'Post Reply' zu klicken, da das zur Mehrfachposts führt. Grußworte.

HTML+CSS: mal wieder ein dynamisches Layout

Mitglied seit
08.03.2004
Beiträge
1.574
Reaktionen
0
Ich hatte schonmal einen Thread zu fast dem gleichen Thema. Es war uns aber in einem viererteam und ein paar Monaten rumprobieren und überlegen nicht möglich bisher eine Lösung zu finden. Vielleicht fällt euch ja was ein.

Allgemeines Problem: Ich möchte ein DIV Element so gestalten, dass ich eine Überschrift und einen beliebigen nicht näher definierten Content einfügen kann. Außerdem sollen per pngs Ränder und Ecken erstellt werden können, die das DIV schmücken. Soweit es das Layout zulässt soll es möglichst kein Content von Strukturierungselementen wie Tabellenspalten oder divs daran gehindert werden, sich in alle Richtungen auszubreiten und bis zum Rand des DIVs auszudehnen. Dabei sollen so wenig wie möglich (also 100% des Bereichs der nicht durch die pngs verdeckt wird) weiterhin zugreifbar sein. Der letzte Punkt wird dadurch erschwert, dass ein div was über einem anderen div liegt, es unmöglich macht, auf dem unteren zu clicken (oder zumindest haben wir noch nicht herausgefunden wie).
Das einfügen der pngs in die Ecken und Ränder des DIVs soll nicht mit javascript realisiert werden. CSS und HTML müssen dafür genügen!

Der Grund für die Weigerung JS dafür einzusetzen, liegt an unseren bisherigen Erfahrungen. Wir haben bereits eine fast vollständig funktionierende Lösung mit JS, CSS und HTML. Aber keiner weiß, wo sich welches JS, CSS oder style-Attribut eines DIVS auswirkt (nicht mal der Coder dieser Variante), so dass wir nicht in der Lage sind, das Layout zu modifizieren. Ein klarer Fall von schlechter wartbarkeit.

Deshalb suchen wir jetzt nach einer Lösung, die flexibel (sich z.B. an die Größe des Inhalts anpasst) und wartbar ist. Ich bin für jede Hilfe dankbar. :)
 
Mitglied seit
02.08.2002
Beiträge
2.781
Reaktionen
0
eine skizze wäre fürs verständnis wohl recht hilfreich, aber es klingt für mich auf jeden fall nach einem lösbaren problem, da man imo die rand-divs für den rahmen absolut positionieren können sollte. für den text-container muss man sich dann was überlegen, aber mit geeigneten margins/paddings sollte das funktionieren (wenn ich dein problem richtig verstanden habe)
 
Mitglied seit
24.08.2001
Beiträge
3.008
Reaktionen
0
hört sich für mich nach ner sache für faux-columns an... einfach mal googlen.
 
Mitglied seit
08.03.2004
Beiträge
1.574
Reaktionen
0
Struktur eines Content DIVs:
58517484uv1.png


-grün: Rahmenbilder und Eckbilder
-gelb Kopfbereich
- rot Contentbereich
-wie man sieht, sollen die grünen Bereiche die roten Überdecken

hier mal ein Beispiel mit einer GoogleMap, wo man nochmal genau sieht, wie es im Moment aussehen soll. Wir wollen aber eben auch nicht nur das momentane Layout abbilden sondern uns auch die möglichkeit offen lassen, das später schnell zu ändern, wenn wir unser Layout umstellen wollen.

gmapjq5.png
 
Mitglied seit
08.03.2004
Beiträge
1.574
Reaktionen
0
siehst du die runden ecken? das sind bilder. das sind mehr als 2 divs. und wenn du dir das eingangspost durchgelesen hast, dann weisst du, dass die größe nicht fest definiert ist. da soll alles rein können.
Im Moment siehts so aus:
- 1 div außen rum
- 2 divs für title und content
- 7 img-tags (auch mit divs außen rum, aber die sind vermutlich nicht nötig)

und diese sollen so angeordnet werden, dass die untere linke ecke immer in der unteren linken ecke _über_ den content gemalt wird.

Wenn du eine einfache hast, immer her damit.
 
Mitglied seit
08.03.2004
Beiträge
1.574
Reaktionen
0
ist das problem immernoch unklar oder hat keiner eine lösung dafür?
 
Mitglied seit
31.10.2004
Beiträge
289
Reaktionen
0
setz den z-index für die border-divs höher als den des contents und setz ein geeignetes padding für das content-div (falls nötig)
 
Mitglied seit
24.08.2001
Beiträge
3.008
Reaktionen
0
was soll das helfen?

das ding wär ja recht easy, wenn es statisch ist.. der content soll aber dynamisch sein richtig?

Ich würde es halt so machen:

1 div für den oberen teil des grünen rahmens, der die überschrift beinhaltet (noch n div oder sonstiges blockelement)

1 div für den grünen rahmen links und rechts, wo ein teil dann einfach per background-repeat wiederholt wird. dieses div beinhaltet dann das div für den content (das rote) --> rahmen passt sich dem inhalt an; zumindest vertikal. horizontal wird das ganze etwas ekliger.. da würde ich mir überlegen, ob die bildränder das ganze wert sind.

1 div dann für den footer. wenn das grüne das rote überlagern soll muss man die bilder halt richtig vorbereiten und dann per margin-top nach oben verschieben.
 
Oben