backgroundpositionsproblem

judie6262 · 29.04.2011

Hallo,
möchte meinen contentbereich mit einem rahmen der transparent ist umrahmen. Der rahmen ist 8px dick. Derzeit ist der rahmen auf der gleichen ebene wie der contentbereich, somit ist der obere rahmen verdeckt. also möchte ich den rahmen nach oben verschieben. jedoch funktioniert das mit position:relative nciht, da ja so auch der contentberech mit verschoben wird! Kann mir jmd helfen?

Vielen Dank.
mfg Judie6262
#rahmen {
width: 865px;
height:659px;
background:url(../images/rahmencontent.png) no-repeat;
position:relative;
bottom: 8px;
}
#mainarea {
width: 849px;
height:643px;
background-color:#FFF;

}

<div id="rahmen">
<div id="mainarea">
</div>
</div>

kyle66 · 29.04.2011

Hallo,

border: 8px solid transparent;

oder du arbeitest einfach mit margins. Und was soll das bottom in deiner style-Angabe?

Grüße
kyle

Jetzt versteh ich, was du willst:

<html>
<head>
<style type="text/css">
#rahmen {
width: 865px;
height: 659px;
background:url(../images/rahmencontent.png) no-repeat;
padding: 8px;
}
#mainarea {
width: 849px;
height: 643px;
background-color:#FFF;
}
</style>
</head>
<body>
<div id="rahmen">
<div id="mainarea"></div>
</div>
</body>
</html>

Grüße
Kyle

übrigens solltest du noch einen Doctype angeben

judie6262 · 29.04.2011

AW: backgroundpositionsproblem

Nein. Mit dem tranparentem rahmen über border: 8px solid transparent. geht das net! hab ein png bild in photoshop angefertigt das meinen contentbereich umrahmen soll!das png ist genauso groß wie der content derbeich, welche transparent ist damit ich auch den content sehe! das png ist auf allen äußeren seiten 8 px rausgezogen, damit man ja den rahmen sieht der auch transparent ist damit man noch somit die darunter liegende seite sehenen kann! das problem ist dass die über ein geschachteltest div nur geht:
<div id="rahmen">
<div id="mainarea">
</div>
</div>

somit ist der rahmen und der contentbereich auf einer höhe! ich möchte jedoch das der rahmen ja 8 px über den content herrausragt! wie mach ich das ?

Sasha · 29.04.2011

AW: backgroundpositionsproblem

wenn ich Dich richtig verstanden habe, soll der Text in den mainarea, oder?
Dann lass doch mal das padding oder bottom beim rahmen weg und setzt dafür beim mainarea ein margin: 8px;

Ansonsten zeig doch mal was Du gemacht hast, sonst kann man es echt schwer verstehen.

Herr_D · 29.04.2011

AW: backgroundpositionsproblem

HTML:

<doctype html>
 <head>
         <title>Transparenter Rahmen</title>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

         <style type="text/css">
        <!--
        *       {
                margin:0;
                padding:0; }
        body    {
                background:#212129;
                color:#dedede; }

        #rahmen {
                padding:8px;
                width: 849px;
                background:transparent;
                border:1px solid #f00; /* Rahmen muss natuerlich wech, ist nur zum zeigen ;) */
                margin: 6em; /* abstand kann geändert werden */
                }

        #mainarea {
                width: 849px;
                height: 643px;
                background-color:#FFF;
                color:#212129;

                }

        -->
        </style>

 </head>
 <body>
        <div id="rahmen">
                <div id="mainarea">Mainarea</div>
        </div>
 </body>
 </html>