nicht angemeldet
Ränder links und rechts durchgängig
Hallo zusammen,
ich hab ein Problem bei dem ich nicht mehr weiter weiss. Ich möchte einen <div> zentriert auf einer Seite haben (in den später weiterer Inhalt kommt). Dieser div soll links und rechts eine Grafik als Rand haben. Dieser Rand soll mindestens 100% Höhe haben, wenn die Seite größer wird um man scrollen muss, soll der Rand auch durchgängig sein. Nur krieg ich das nicht hin. Firefox zeigt mir mit unten stehenden Code das Ergebnis richtig an, Opera läßt allerdings ein kurzes Stück am Ende weg, der IE macht nur zwei kurze Stücke des Randes. Kann mir da jemand helfen? Das Problem kann man hier sehen: http://abraxaz.gmxhome.de/cssproblem/
und hier noch kurz der Code:
CSS:
_____________________________________________________
.main {
position:absolute;
left:50%;
min-height:100%;
padding:0px;
}
.navi {
position:absolute;
width:14px;
top:0px;
left:50%;
height:100%;
min-height:100%;
bottom:0px;
}
html:
____________________________________________________
<body topmargin="0" bgcolor="#3A4049">
<div class="main" style="background-color:white; width:746px; margin-left:-370px; text-align:center;">
<!-- Platz verbrauchen -->
oben<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />unten
<!-- /Platz verbrauchen -->
<div class="navi" style="background:url(side_r.jpg) 0% 0% repeat-y; margin-left:364px; "> </div>
<div class="navi" style="background:url(side_l.jpg) 0% 0% repeat-y; margin-left:-384px;"> </div>
</div>
</body>
Bin für jeden Tip dankbar.
Gruß, Matthias
-
Hallo Matthias.
min-height:100%;
Damit kann der IE nichts anfangen. Du solltest für ihn eine Alternative mit height zur Verfügung stellen.
Gruß, Ashura
--
Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:( ls:# js:|-
min-height:100%;
Damit kann der IE nichts anfangen. Du solltest für ihn eine Alternative mit height zur Verfügung stellen.
Du meinst <div height="100%"... ?
Hat nix gebracht :(
Gruß, Matthias
-
Du meinst <div height="100%"... ?
Hat nix gebracht :(
Wundert mich nicht, denn Prozentangaben beziehen sich auf die Größe des Elternelements (in dem Fall: body).
Probier mal, auch für body eine 100%-Größe anzugeben.
Gruß
L00NIX-
Wundert mich nicht, denn Prozentangaben beziehen sich auf die Größe des Elternelements (in dem Fall: body).
Hm, das die beiden divs der Klasse navi ja innerhalb des main-div liegen müssten sie sich doch auf die Höhenangabe von main beziehen, oder?
Probier mal, auch für body eine 100%-Größe anzugeben.
Auch net :(
Habt ihr mal auf die Website geguckt und könnt die Probleme bzw. die Korrektheit von Firefox bestätigen?
Unten nochmal der Code wie er jetzt aussieht:
_______________________________________________________________
<body topmargin="0" height="100%" bgcolor="#3A4049"><div class="main" height="100%" style="background-color:white; width:746px; margin-left:-370px; text-align:center;">
oben<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />unten
<div class="navi" height="100%" style="background:url(side_r.jpg) 0% 0% repeat-y; margin-left:364px; "> </div>
<div class="navi" height="100%" style="background:url(side_l.jpg) 0% 0% repeat-y; margin-left:-384px;"> </div>
</div>
</body>
-
-
-
-
Meinst du so?
<html>
<head><title>test</title>
<style type="text/css">body,html
{
height: 100%;padding: 0px;
margin: 0px;
}#aussen
{
width: 50%;
height: 100%;background-image: url("strip.png");
background-repeat: repeat-y;
background-position: top left;margin-left: auto;
margin-right: auto;
}#innen
{
height: 100%;padding-left: 60px;
padding-right: 60px;background-image: url("strip.png");
background-repeat: repeat-y;
background-position: top right;
}</style>
</head>
<body><div id="aussen">
<div id="innen">
Die Mitte
</div>
</div></body>
</html>-
Danke, sieht gut aus. Ich hab mich allerdings in der Zwischenzeit für ne andere Lösung entschieden, indem ich den Hintergrund nicht mit zwei sondern mit einem Bild fülle (also transparent zwischen den beiden Rändern). Ich hab mir deine Lösung gespeichert und behalts im Hinterkopf fürs nächste mal :)
Auch danke an Ashura, wusste nicht, dass der IE das net kann. Hab mir jetzt n CSS-Hack gesucht um für ihn das 100% Höhe extra einzufügen. Zwar net schön in meinen Augen, aber solangs wirkt...
Gruß, Matthias
-