Formatierungsproblem

[Flemli200]

Hi,
ich möchte das das Bild (main_pic) im Vordergrund steht und dahinter text (main_text) läuft, wie wenn man einen iframe setzt nur das die scrollleiste an der rechten seite bleibt...
Ich bekomm das aber selber nicht hin... könntet ihr mir helfen??

Hier die beiden codestücke, die im moment existieren:

<div id="main">
    <div id="main_pic">
        <div id="main_text">
            <!-- Text -->
            
        </div>
    </div>
</div>

#main
    {
    position:        relative;
    width:             1000px;
    min-height:        800px; 
    top:            30px;
    bottom:            0px;
    margin:         0px auto;
    background-color:    black;
    z-index:        1;        
    }
#main_pic
    {
    position:        fixed;
    width:             1000px;
    height:            800px;
    background-image:    url(Pics/background_main.gif);    
    z-index:        2;
    }
#main_text
    {
    position:        absolute;
    width:             800px;
    height:            auto;
    left:            80px;
    top:            120px;
    right:            30px;
    color:            white;    
    z-index:        1;    
    }

Danke schonmal für die Hilfe

 

[_Thor_]

Ich sehe weder Text noch eine Grafik, hinter der der Text sein soll. Mal abgesehen davon wäre Text hinter einer Grafik nicht sichtbar. Bist du sicher, dass du nicht eine Hintergrundgrafik meinst?

Dafür brauchst du keine 3 divs, dafür reicht ein p und etwas CSS.

<p>Text</p>

p {
  width: 15em;
  height: 15em;
  background-image: url('image.png');
  overflow: scroll;
}

 

[Flemli200]

das weiße ist das BIld... das Schwarze ist die HIntergrundfarbe und NUR auf dem Blauen teil soll der Text laufen und hoch sowie runterscrollbar sein
Anhang anzeigen 1387

 

[Efchen]

Deine Grafik ist das Hintergrundbild und das Blaue ist ein Element, in das Du den Content stellst. Nix mit Image im Vordergrund.

Aber ich halte so ein pixelgenaues Layout für fragwürdig. Aber ich glaube, das hatten wir schonmal...

 

[Flemli200]

Ich möchte halt das weiße 'Bild' so in den Vordergrund stellen, das der Text dahinterliegt und das Bild sich an die höhe der Seite anpasst... ausserdem sollte der Text hinter dem unteren und oberen Rand des 'Bildes' verschwinden und trotzedm scrollbar sein... könnte man das iwie hinkriegen??

 

[Efchen]

Ich hab Dir auf Deine Frage schon geantwortet, wenn Du nochmal nachliest.
So wie Du Dir das vorstellst, ist es halt nicht zu lösen, aber eben anders, dass am Ende der selbe Effekt dabei raus kommt.

Du willst doch nicht wirklich den Text hinter dem Bild haben, Du willst doch den Content der Seite in dem mittleren Teil haben, oder?

Aber als Hintergrundbild passt es sich tatsächlich nicht dem Viewport an. Aber wenn es sich anpassen sollte, dann besser auch nicht nur der Höhe, sondern auch der Breite. Wenn Du Deinen Browser aber mal beliebig groß ziehst, dann musst Du zugeben, dass das sch*lecht aussieht. Ob der Viewport nun 771x981px groß ist oder 673x289pc oder 1692x333px, das ist nur bei einem bestimmten Seitenverhältnis noch einigermaßen ansehnlich.

Besser wäre es, den Rahmen (denn es ist ja nur ein Rahmen) so zu zerschneiden, dass Du 4 Ecken und 4 Ränder bekommst. Die Ränder (oben, links, rechts, unten jeweils mitte) sollten kachelbar sein. Dann kann man den Rahmen auch so umsetzen, dass er sich an den Viewport anpasst. Das ist aber alles andere als trivial, vor allem aufgrund Deines Designs, kachelbar ist da halt schwierig... und wenn Deine Kachel dann 20px groß wäre und Du aber 27px Platz für den Rahmen hättest, hättest Du einen Versatz.

Ich sag ja, dass das zwar gut aussieht, aber nicht wirklich WWW-geeignet ist.