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>
<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>CSS-Datei:
@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;
}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
aber das sind sie ja leider nicht
da bin ich heid zufällig drüber gestolpert