variabler Rahmen nur mit HTML und CSS - Problem

Hoffy

Hi Ihr

ich brauch für eine website einen variablen Rahmen:
mit 3 bordern.
einen Oben einen unten und einen Links.
jedoch sollen die ecken immer gleich bleiben.

der "rahmen" besteht aus sich wiederholenden Bildern und einem Eckbild links oben und links unten.

folgendes problem:

ich will dass sich das bild links unten immer automatisch anpasst.
dies tut es aber nicht.

folgenden Quellcode hab ich hier:

HTML-Datei

HTML

<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<link href="rahmen.css" rel="stylesheet" type="text/css">
</head>


<body>
<div id="alles">


        <div class="randtest">
            <img src="bilder/strecke/ecken/ol.jpg" class="obenlinks">
            <img src="bilder/strecke/ecken/ul.jpg" class="untenlinks">
        </div>
        <div class="randtest">
            <img src="bilder/strecke/ecken/ol.jpg" class="obenlinks">
            <img src="bilder/strecke/ecken/ul.jpg" class="untenlinks">
        </div>
</div>


</body>
</html>

Alles anzeigen

CSS-Datei:

Code

@charset "utf-8";
/* CSS Document */


* {
    margin:0;
    padding:0;
}


#alles {
    left:auto;
    right:auto;
    width:800px;
    height:1200px;
    background:rgba(204,204,204,1);
    margin:25px auto;
    padding:55px;
}


.randtest {
    padding-bottom:20px;
    width:50px;
    height:100px;
    background:url(bilder/strecke/gerade/oben.jpg), url(bilder/strecke/gerade/unten.jpg), url(bilder/strecke/gerade/links.jpg)/*, url(bilder/strecke/ecken/ol.jpg), url(bilder/strecke/ecken/ul.jpg*/;
    background-position:top, bottom, left/*, top left, bottom left*/;
    background-repeat:repeat-x, repeat-x, repeat-y/*, no-repeat, no-repeat*/;
    margin-bottom:50px;
}


#randtest2 {
    padding-bottom:20px;
    width:200px;
    height:500px;
    background:url(bilder/strecke/gerade/oben.jpg), url(bilder/strecke/gerade/unten.jpg), url(bilder/strecke/gerade/links.jpg)/*, url(bilder/strecke/ecken/ol.jpg), url(bilder/strecke/ecken/ul.jpg*/;
    background-position:top, bottom, left/*, top left, bottom left*/;
    background-repeat:repeat-x, repeat-x, repeat-y/*, no-repeat, no-repeat*/;
}

.obenlinks {
    width:20px;
    height:20px;
    float:left;
    margin-right:0px;
}


.untenlinks {
    width:20px;
    height:20px;
    float:left;
    margin-top:100%;
    margin-left:-20px;
}

Alles anzeigen

also das ist mein aktueller stand, nach mehreren stunden rumprobieren.
ich will eben später den width und height dur mein template definieren lassen und dass sich der rand durch die klasse eben automatisch anpasst.

das funzt auch soweit bis auf das bild links unten...

das bild unten links (.untenlinks) nutzt ja den margin-top-befehl für die positionierung.
jedoch wird nicht die höhe, sondern die breite als höhe genutzt...

wenn ich etz zb width 200px angebe sitzt das bild links unten 200px vom oberen rand entfernt
un wenn ich width 100px angebe sitzt das bild nur 100px vom oberen rand entfernt

ändere ich aber den height befehl tut sich an dem bild links unten nix...

wo ist mein denkfehler oder der fehler in meinem code??
und wie kann ich das lösen ( ich habe leider keine ahnung von php oder javascript soviel vorneweg)
bin am verzweifeln

achja ich hatte eig noch vor NACH den bildern noch inhalt reinzustopfen, oda wäre es sinnvoller den inhalt vor den img-rags einzufügen??
achja und ich darf leider keine weiteren DIV-tags oder section-tags einfügen
geht das überhaupt?? bitte um schnelle hilfe die seite soll freitag schon online gehen

sejuma

Da du im Voraus nicht weißt, wie hoch #alles inklusive Inhalt wird, solltest du bei den unteren Ecken auf den margin-top-Wert verzichten. Mit 100% ist ja ebenfalls unklar, auf welchen Basiswert sich diese 100% beziehen.

Für die seitlichen Rahmen sieh dir mal hier die Demo 2 (vertikale Röhren) an.

Für die oberen Ecken kannst du einen Div drüber setzen, oder du bastelst eine entprechend breite Grafik und fügst diese direkt als image ein.

Zur Platzierung der unteren Ecken gibt es vermutlich mehrere Möglichkeiten:
Du könntest sie einfach in einen div packen und diesen nach dem Schließen von #alles anfügen.
Dann sollten sie sich nahtlos an das Ende von #alles anfügen.

Eine weitere Möglichkeit wäre, #alles relativ zu positionieren.
Nach dem Öffnen von #alles fügst du dann ebenfalls einen div mit den unteren Ecken ein und positionierst dieses absolut zu #alles mit "bottom: 0" bzw. einem entsprechenden Pixel-Wert in abhähnigkeit von der Grafikhöhe.

Hoffy

danke für die schnelle hilfe,

das problem ist aber das mit einem cms gearbeitet wird und ich dementsprechend die vorgabe habe nur mit 1 div zu arbeiten

mien #alles hat ja feste werte

das einzige was sich immer anpassen soll ist
die höhe und die breite des rahmens

der rahmen liegt innerhalb eines Divs im #alles

mein design sieht ungefähr so aus:
3-zeiliges layout:
20%oben für nav un header
70%inhalt
10%footer
der inhalt ist 2 zeilig 50%-50%
wobei die untere zeile 2spaltig ist 75% 25%
und die rechte spalte davon wird nochmal horizontal in der mitte geteilt
(ich hab leider grad nicht die genauen werte im kopf)

ich hoffe das war verständlich...

und diese letzten beiden divs sollte ich nicht unnötig mit weiteren divs füllen,
dass das mit divs ist einfach glaub ich gerne.

es klappt ja auch alles wunderbar, bis auf das bild in der unteren linken ecke
das nimmt nämlich für den margin-top wert, die breite des div-containers in welchem es liegt

wären meine divs quadratisch würde es sogar klappen aber das sind sie ja leider nicht

Hoffy

ok problem gelöst
es gibt nen css3 border-image befehl da bin ich heid zufällig drüber gestolpert

lukasn

Ja, weil dir CSS3 ja die korrekte Darstellung bei allen Besuchern garantiert... Naja, für nicht-essentiele dinge (*hust*abgerundeteecken*hust*) verwend ich ja auch CSS3, also was solls.

Hoffy

ich weiß worauf du anspielst...

naja aber eine bessere lösung hab ich nicht gefunden
weil sich das bild eben falsch positioniert

ich hab auch schon geschaut ob es nciht vllt ein positions befehl bei position:relative oda position:absolute gibt der das bild innerhalb
der randtest - divs unten links positioniert

aber irgendwie wollte das auch nicht...

ja und wie schon gesagt die positionierung sollte innerhalb des randtest-divs passieren und keine weiteren divs erstellt werden

mein erster gedanke war mit dem: background:url(pic1, pic2, usw)
und dann mit den positionierungsbefehlen den rand und und die bilder erstellen
aber sobald ich im css die kommentar tags entferne (der code ist auch in meinem code-schnipsel oben angegeben) dann zeigt mir der browser schon gar keinen rand an...

darum eben der versuch mit den img-tags und den margin-top befehl...
funktioniert aber eben nur wenn der container eben rechteckig ist, andernfalls wird beim selben container die breite als höhenangabe für margin-top genommen
klingt komisch, ist aber so

falls ihr ne bessere lösung habt als zig tausend divs bin ich offen dafür, denn wie schon gesagt vorgabe war es keinen maximal 1 weiteren div zu erstellen
und es soll mit so wenig code wie möglich passieren

Tags