guten abend,
nachdem ich wieder mal 3 sunden vergeblich rumversucht habe, gibt es mal wieder keine andere möglichkeit, als mein problem mit euch zu teilen ;-)
es handelt sich um folgendes projekt: PROJEKT. (ich habe keine schuld an der werbeflut - webhoster...)
wenn ihr einmal so gut seid, und euer browserfenster groß und klein zieht, werdet ihr mein problem schnell erkennen.
und zwar bewegen sich alle elemente mit, andere sind fixiert, was sie auch sein sollen. ein scrollen fällt also nicht an! genau so will ich es auch, nur der "contentbereich (weißer bereich mit der mehrfachen aufschrift "asd" ist scrollbar, ab dem moment, wo der inhalt die containergröße überschreitet (overflow: scroll
.
nun zum problem, denn das bisher beschriebene ist eigentlich das, was ich so haben will.
--> wenn man das browserfenster so klein zieht, dass es nicht mehr möglich ist, den gesamten contentbereich zu sehen (von der breite gesehen) wird keine scrollfunktion angeboten. nicht innerhalb des containers, auch nicht übergeordnet. WIESO NICHT?
weiteres problem: "position-" und "margin-" eigenschaften innerhalb einer klasse vertragen sie bei mir nicht. (sowie im testbrowser bei phase5.6, als auch im mozilla3.6.2 nicht).
bei selfhtml/css4you werden jedoch mehrer beispiele mit beiden eigenschaften aufgeführt.
was kann da das problem sein, liegt der fehler evtl. bei MIR und nicht am browser (auch wenn ich mir das im geringsten nicht vorstellen kann ;-) )?
nun noch einmal meine vorstellungen, wie es sein soll: ab einer breite von weniger als 400px soll der browser ein scrollbalken anbieten. das gleiche ab einer höhe von weniger als 500px. der "content"-bereich (oben beschrieben, welcher das in meinem fall ist), soll mittig ausgerichtet sein.
bitte erschreckt euch nicht bei dem design: wird noch stark be-/überarbeitet.
hier einmal der KOMPLETTE code:
html:
UND FOLGEND DER CSS-CODE:
ich wäre sehr froh, wenn jmd helfen kann :-D
mfg und danke im voraus :-)
nachdem ich wieder mal 3 sunden vergeblich rumversucht habe, gibt es mal wieder keine andere möglichkeit, als mein problem mit euch zu teilen ;-)
es handelt sich um folgendes projekt: PROJEKT. (ich habe keine schuld an der werbeflut - webhoster...)
wenn ihr einmal so gut seid, und euer browserfenster groß und klein zieht, werdet ihr mein problem schnell erkennen.
und zwar bewegen sich alle elemente mit, andere sind fixiert, was sie auch sein sollen. ein scrollen fällt also nicht an! genau so will ich es auch, nur der "contentbereich (weißer bereich mit der mehrfachen aufschrift "asd" ist scrollbar, ab dem moment, wo der inhalt die containergröße überschreitet (overflow: scroll
.nun zum problem, denn das bisher beschriebene ist eigentlich das, was ich so haben will.
--> wenn man das browserfenster so klein zieht, dass es nicht mehr möglich ist, den gesamten contentbereich zu sehen (von der breite gesehen) wird keine scrollfunktion angeboten. nicht innerhalb des containers, auch nicht übergeordnet. WIESO NICHT?
weiteres problem: "position-" und "margin-" eigenschaften innerhalb einer klasse vertragen sie bei mir nicht. (sowie im testbrowser bei phase5.6, als auch im mozilla3.6.2 nicht).
bei selfhtml/css4you werden jedoch mehrer beispiele mit beiden eigenschaften aufgeführt.
was kann da das problem sein, liegt der fehler evtl. bei MIR und nicht am browser (auch wenn ich mir das im geringsten nicht vorstellen kann ;-) )?
nun noch einmal meine vorstellungen, wie es sein soll: ab einer breite von weniger als 400px soll der browser ein scrollbalken anbieten. das gleiche ab einer höhe von weniger als 500px. der "content"-bereich (oben beschrieben, welcher das in meinem fall ist), soll mittig ausgerichtet sein.
bitte erschreckt euch nicht bei dem design: wird noch stark be-/überarbeitet.
hier einmal der KOMPLETTE code:
html:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Webprojekt</title>
<link rel="stylesheet" type="text/css" href="styles/mainpage1.css">
</head>
<body>
<div class="total">
<div class="top">
<div class="forum">
<a href="http://wwww.board.3dl.am" title="Zum 3-Borad" target="_blank"></a>
</div>
<div class="businessbasket">
</div>
</div>
<div class="content">
asd<br />asd<br />asd<br />asd<br />asd<br />asd<br/>asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />
asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />
asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />
asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />
</div>
<div class="footer">
</div>
</div>
</body>
</html>UND FOLGEND DER CSS-CODE:
Code:
.total {
background-image: url(../images/background.png);
background-repeat: no-repeat;
width: 100%;
height: 100%;
display: block;
overflow: scroll;
position:fixed; top: 0px; left: 0px; bottom: 0px;
}
.top {
background-image: url(../images/top.png);
background-repeat: no-repeat;
width: 100%;
height: 185px;
position:fixed; top: 0px;
}
.businessbasket {
background-image: url(../images/businessbasket.png);
width: 54px;
height: 54px;
position:absolute; top: 65px; right: 100px;
}
.forum a {
background-image: url(../images/forum_off_font.png);
width: 186px;
height: 54px;
position:absolute; top: 65px; left: 33px;
}
.forum:hover a {
background-image: url(../images/forum_on_font.png);
width: 186px;
height: 54px;
position:absolute; top: 65px; left: 33px;
}
.content {
background-color: #fff;
display: block;
min-width: 400px;
max-width: 500px;
min-height: 200px;
max-height: 100%;
overflow: scroll;
position: absolute; bottom: 75px; top: 200px; left: 50%; right: 50%;
}
.footer {
background-image: url(../images/bottom.png);
background-repeat: no-repeat;
width: 100%;
height: 60px;
position:fixed; bottom: 0px; left: 0px;
}ich wäre sehr froh, wenn jmd helfen kann :-D
mfg und danke im voraus :-)
