[CSS] Problem: mit DIVs einen Rahmen darstellen



  • Hi,
    ich möchte mit DIVs einen Rahmen um einen Text darstellen und dann mit background-image ein Bild reinladen (um dann so einen grafischen Rahmen zu erzeugen)..
    Das ganze soll dann so aussehen:

    www.alexander-sulfrian.de/images/rand.gif (also schematisch)

    Die Ecken haben je eine Größe von 4pxx4px und die Höhe und Beite des gesamte Rahmens soll 100% des "Eltern"-Divs sein (schwarzer Rand in der Grafik).
    Wie kann ich das machen?

    MfG

    Alexander Sulfrian

    PS: In der Grafik soll dann in das dunkle der Text und in das Helle die Randstücken reingeladen werden....



  • Mit divs vermutlich gar nicht, da jedes div einen eigenen Absatz bildet. Du könntest entweder versuchen, span-Tags zu verwenden oder (meine favorisierte Lösung) eine blinde Tabelle, die sich in deinem Fall ja noch recht einfach realisieren ließe.



  • Hi,
    mit Tabellen will ich das nicht machen! Begründung:
    Warum soll ich Tabellen nicht als Layouthilfsmittel missbrauchen?

    MfG

    Alexander Sulfrian



  • Kontra: Tabellen sind zur Zeit leider das einzige Gestaltungsmittel, dass von allen (wichtigen) Browsern wenigstens annähernd gleich aussieht. Du darfst auch nicht davon ausgehen, dass jeder deinen Browser (nicht einmal dieselbe Version) hat. Und dann kann, wenn du alles schön mit div und co. zurechtgeschoben hast, das bei jemand anderen einen völlig durcheinandergeratenen Krautsalat ergeben. CSS ist schön und ich freue mich auch schon auf den Moment, wo man es ohne Einschränkungen verwenden kann, aber leider ist es noch nicht soweit.

    Ein paar der in deinem Luink aufgeführten Argumente sind auch nicht ganz nachvollziehbar. Schließlich lassen sich Tabellen und CSS miteinander verbinden.



  • Das sollte sich mit div's schon realisieren lassen, nur wird es sicher schwer möglich sein, das es in allen gängigen Browsern (Mozilla, IE, Opera) gleich aus sieht. Mozilla und IE sollte sich machen lassen, aber bei Opera wirds dann schon kritisch.

    Dasd schrieb:

    Mit divs vermutlich gar nicht, da jedes div einen eigenen Absatz bildet.[...]

    Dafür gibts ja die CSS-Eigenschaft "float" mit deren hilfe auch div's nebeneinander plaziert werden können. 😉



  • Soll der Hintergrund so "sandig" sein? Weil wenn ja, dann brauchst du sowieso ein background-image. Dann würd ich vielleicht 3 divs untereinander machen und dann ne 5pixel grafik die sich wiederholt oder so. Ist das nur in der Breit nicht variabel.
    Ansonsten halt lauter einzelne bereiche und die Ränder formatieren. Sollte aber machbar sein denke ich.

    und noch:

    Dasd schrieb:

    Kontra: Tabellen sind zur Zeit leider das einzige Gestaltungsmittel, dass von allen (wichtigen) Browsern wenigstens annähernd gleich aussieht. Du darfst auch nicht davon ausgehen, dass jeder deinen Browser (nicht einmal dieselbe Version) hat. Und dann kann, wenn du alles schön mit div und co. zurechtgeschoben hast, das bei jemand anderen einen völlig durcheinandergeratenen Krautsalat ergeben. CSS ist schön und ich freue mich auch schon auf den Moment, wo man es ohne Einschränkungen verwenden kann, aber leider ist es noch nicht soweit.

    Ein paar der in deinem Luink aufgeführten Argumente sind auch nicht ganz nachvollziehbar. Schließlich lassen sich Tabellen und CSS miteinander verbinden.

    Was verstehst du denn unter "allen wichtigen Browsern" ? Also auf den aktuellen läuft CSS eigentlich recht problemlos. Klar hier und da ein paar Tücken, vor allem beim IE. Aber die Probleme mit margins, paddings etc. hat man auch mit Tabellen. Wenn es auf einem Browser wirklich nicht geht (Netscape 4.7 oder sowas) dann bekommt der halt kein stylesheet und alle infos schön (logisch) ordentlich untereinander, das geht sogar noch im IE2, versuch das mal mit nem Tabellen-Layout 😉 Und IE2 oder Netscape 4.7 sind für mich nahezu gleich veraltet und gehören allein schon aus Sicherheitsgründen erneuert. Man schliesst sie durch CSS aber halt weniger aus, als mit Tabellen.

    mfg
    tobi



  • Tow-B.de schrieb:

    Was verstehst du denn unter "allen wichtigen Browsern" ? Also auf den aktuellen läuft CSS eigentlich recht problemlos. Klar hier und da ein paar Tücken, vor allem beim IE.

    Die Probleme liegen größtenteils im Detail, da gebe ich dir Recht. Aber genau das ist das Problem, wenn man exakt platzieren will. Opera macht da einfach mal ein Pixel mehr oder weniger Abstand als der IE 6, der IE 5 behandelt das wieder ganz anders. Außerdem sind viele Benutzer noch beim IE 5.x, da mit den neueren Versionen jede Menge Sicherheitslücken dazugekommen sind. Die aktuellste Unterstüzung von CSS kann also nicht einfach so vorrausgesetzt werden.



  • Opera macht da einfach mal ein Pixel mehr oder weniger Abstand als der IE 6, der IE 5 behandelt das wieder ganz anders

    Richtig! Und das ist bei Tabellen rein gar nix anderes. Ausserdem habe ich mich schon vor längerem von der Vorstellung entfernt eine Seite so bauen zu wollen das Sie überall bis auf den Pixel gleich aussieht. Das schafft man eh nicht. Und es interessiert auch kein Sch****. Das wichtigse Gut was Internetseiten haben sind ihre Informationen oder Dienste die sie anbieten. Das Design kommt WEIT! dahinter. Solange eine Seite einigermaßen seriös wirkt und sich einfach bedienen lässt wird Sie benutzt. Sofern Sie gute Dienste oder Infos bietet. Eine supertolle Seite ohne Inhalt interessiert fast keinen, egal ob sie auf allen Browsern gleich aussieht.
    Daher teste ich mit den wichtigsten Browsern in der aktuellsten Version und optimiere Hinterher zum Beispiel für den IE5.0 und 5.5 noch leicht nach. Man will ja auch noch produktiv sein und nicht stundenlang nur pixel für jeden Browser einzeln korregieren 🙂

    Fühl dich bitte nicht persönlich Angegriffen. Ich halte persönlich nur nichts von oben genannter Arbeitsweise. Ich verstehe nicht wo der Sinn darin liegen soll 🙄

    mfg
    tobi



  • Tow-B.de schrieb:

    Fühl dich bitte nicht persönlich Angegriffen. Ich halte persönlich nur nichts von oben genannter Arbeitsweise. Ich verstehe nicht wo der Sinn darin liegen soll 🙄

    Ich fühle mich nicht angegriffen. :p Und gebe dir in allen Punkten voll und ganz Recht. Obwohl ich Tabellen noch immer bevorzuge.



  • Loggy hatte da mal etwas gebastelt: du nimmst einfach ein div und plazierst darin die verschiedenen Bilder (4 Ecken und 4 Seiten) absolut 🙂


Anmelden zum Antworten