height:100% Problem beim scrollen

D

deh3nne

Mitglied
http://black-horse-ranch.de/_index.html

Folgendes Problem:

Ich möchte natürlich, das meine Seite in allen Auflösungen (ab 1024*768) annehmbar aussieht.

Im Hintergrund befinden sich 2 divs mit den HolzBalken als Hintergrundgrafik und repeat-y.
Diese sind auf height:100% eingestellt, sodass sie immer über den ganzen Bildschirm reichen. Das funktioniert auch ganz gut so, bis man das Fenster so klein macht, sodass man scrollen muss um z.B. alle buttons links zu sehen. Scrollt man dann runter sieht man zwar die Buttons wieder jedoch geht der Holzbalken nicht mehr bis zum ender der seite...

Eine Teillösung wäre ja, das ich eine mindesthöhe des Balkens angebe, aber das kann ja nicht optimal sein.

Hier einigen QT auschnitte


HTML

Code: 
...
<body >

     <!--Hintergrund Balken-->

     <div class="balk1"></div>
     <div class="balk2"></div>

     <!--Menü-->

     <div class="menue">

         <img src="Graphics/unsere_pferde.png" alt="" border="0" width="235" height="43" style="position:absolute; top:95px; left:0px;">
         ...
         ...
         <img src="Graphics/template.png" alt="" border="0" width="235" height="43" style="position:absolute; top:595px; left:0px;">


     </div>
     <!--Inhalt-->

     <div class="cont">



     </div>

</body>
</html>

CSS

Code: 
/*Div Classes*/

div.balk1{
    background-image:url(../Graphics/Balken_vert.png);
    width:100%;
    height:65px;
    position:absolute;
    z-index: 3;
    top:20px;
    left:0px;
}

div.balk2{
    background-image:url(../Graphics/Balken.png);
    position:absolute;
    z-index: 3;
    left:200px;
    top:0px;
    width:45px;
    height:100%;
}

div.menue{

    position:absolute;
    top:5px;
    left:0px;
    z-index: 4;
}
 
Hi,

verwende den senkrechten Balken als Seitenhintergrund.

CSS: 
body{
    background:url(../Graphics/Balken.png) 200px 0 repeat-y;
}

Der DIV-Block .balk2 wird somit auch nicht benötigt.

mfg Maik
 
OK, das funktioniert ganz gut. Ich habe aber ja auch noch den horizontalen Balken (ja, vergessen zu erwähnen) , wie mache ich das das mit beiden so gut klappt? Ich kann ja schlecht zwei Hintergründe definieren oder?
 
Zuletzt bearbeitet:
Derzeit hast du für den vertikalen Balken aber eine absolute Höhe von 65px festgelegt :-)

Grundsätzlich ginge das so:

HTML: 
<body>
    <div id="wrap"> 
        <!-- Hier folgt dein Bestand ohne "balk1" u. "balk2"  --> 
    </div>
</body>
CSS: 
body {
background:url(../Graphics/Balken_vert.png) repeat-y;
}
#wrap{
background:url(../Graphics/Balken.png) 200px 0 repeat-y;
}

Und achte bitte in deinen Folgebeiträgen auf die erwünschte Groß- und Kleinschreibung.

mfg Maik
 
Da habe wir wohl aneinander vorbeigeredet ^^

Der Horizontale Balken soll sich natürlich nach rechts hin immer weiter verlängern, nicht nach unten hin. Deshalb stimmt das mit den 65px schon.
 
Zuletzt bearbeitet:
deh3nne hat gesagt.:
Da habe wir wohl aneinander vorbeigeredet ^^

Der Horizontale Balken soll sich natürlich nach links hin immer weiter verlängern, nicht nach unten hin. Deshalb stimmt das mit den 65px schon.:-)
Zum Vergrößern anklicken....
Bei solch widersprüchlichen Angaben bzw. Aussagen kein Wunder :p

Soso, nach links soll sich also das Hintergrundbild verlängern? :suspekt:

Du sprichst wohl eher vom rechten Fensterrand, wenn die Fensterbreite verringert wird ;-]

Eine Mindestbreite für balk1 mittels min-width schafft hier Abhilfe.

mfg Maik
 
ok, ähnliches Problem anderer Context:

Ich habe ein Iframe wie folgt absolute positioniert
Code: 
iframe.cont{
    border:0;

    position:absolute;
    top:85px;
    left:250px;
    min-width:735px;
    width:100%;
    min-height:530px;
    height:100%;
}

Es soll min. so groß wie angegeben sein, bei größerem Browserfenster aber noch größer werden...
Nun habe ich das Problem, dass wenn ich die Seite aufrufe der Iframe zwar genau die Größe des Browserfensters hat aber extra +200px in die Breite und +85px in der Höhe (durch die Positionierung denke ich...)

Gibt es eine Lösung für dieses Problem? Würde sich eine andere Lösung eher anbieten, z.B. ein dynamisches <div> per Php? Das ist ja einiges mehr an (richtigem) Programmieraufwand...

thx Henne
 
Es liegt tatsächlich an den Positionsangaben, dass der iFrame nun breiter und höher dargestellt wird, als der Viewport.

Du hast aber die Möglichkeit, den iFrame entsprechend zu positionieren:

CSS: 
iframe.cont{
    border:0;
    position:absolute;
    top:85px;
    right:0;
    bottom:0;
    left:250px;
}

Eleganter wäre hier aber ein DIV, das mittels eines server- oder clientseitigen Scripts befüllt wird.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück