nicht angemeldet
Dreispaltiges Layout
Hi,
ich verwende ein dreispaltiges Layout (die ganze Browser Höhe einnehmend) mittels CSS. Die mittlere Spalte enthält den eigentlichen Content.
Nun möchte ich erzwingen, das der Browser (wenn ich das Browserfenster verkleinere) erst dann die horizontale Scrollbar anzeigt, wenn das Fenster kleiner wird als der Content. Die Scrollbars sind jedoch im Moment schon sichtbar, wenn ich kleiner werde als die rechte spalte.
Hat jemand ne Idee?
Gruss Tom
-
Hi,
ich verwende ein dreispaltiges Layout (die ganze Browser Höhe einnehmend) mittels CSS. Die mittlere Spalte enthält den eigentlichen Content.
Nun möchte ich erzwingen, das der Browser (wenn ich das Browserfenster verkleinere) erst dann die horizontale Scrollbar anzeigt, wenn das Fenster kleiner wird als der Content. Die Scrollbars sind jedoch im Moment schon sichtbar, wenn ich kleiner werde als die rechte spalte.
Hat jemand ne Idee?
Gruss Tom
Meines Wissens sollte das funktionieren wenn du der mittleren Spalte einen festen Wert gibst, z.B.
width = "500px";
und bei den anderen beiden Spalten jeweils eine Breite von
width = "*";
angibst.
MfG,
McKentire
-
Hi,
ich verwende ein dreispaltiges Layout (die ganze Browser Höhe einnehmend) mittels CSS. Die mittlere Spalte enthält den eigentlichen Content.
Nun möchte ich erzwingen, das der Browser (wenn ich das Browserfenster verkleinere) erst dann die horizontale Scrollbar anzeigt, wenn das Fenster kleiner wird als der Content. Die Scrollbars sind jedoch im Moment schon sichtbar, wenn ich kleiner werde als die rechte spalte.
Hat jemand ne Idee?
Gruss Tom
Meines Wissens sollte das funktionieren wenn du der mittleren Spalte einen festen Wert gibst, z.B.
width = "500px";
und bei den anderen beiden Spalten jeweils eine Breite von
width = "*";
angibst.
MfG,
McKentire
Hi,
vielen Dank für die prompte Antwort, ich habe mal das Beispiel angehängt:
@charset "utf-8";
.border_left {
position:absolute;
top:0px;
left:50%;
height: 100%;
width:20px;
margin-left:-439px;
background-color: #717171;
background-image: url(images/backborder_left.gif);
}
.zentriert {
position:absolute;
top:0px;
left:50%;
height: 100%;
width:838px;
margin-left:-419px;
background-color: #FCF6DD;
overflow: hidden;
}.border_right {
position:absolute;
top:0px;
left:50%;
height: 100%;
width:20px;
margin-left:419px;
background-color: #717171;
background-image: url(images/backborder_right.gif);
}.pagebanner {
position: absolute;
left: 10px;
top: 0px;
}Das HTML dazu:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>ThermSystec</title>
<style type="text/css">
<!--
html, body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
height: 100%;
}
body {
background-color: #717171;
}
-->
</style>
<link href="thermsystec.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="border_left"></div>
<div class="zentriert"><div class="pagebanner"><img src="images/banner.jpg" width="817" height="297" /></div>
</div>
</div>
<div class="border_right"></div>
</body>
</html>Ich möchte also nur erreichen, das die Scrollbar im Browser erst dann erscheint, wenn die Breite des Browser kleiner als die des div Elements (div class="zentriert") wird.
-
Ich möchte also nur erreichen, das die Scrollbar im Browser erst dann erscheint, wenn die Breite des Browser kleiner als die des div Elements (div class="zentriert") wird.
Ich habe deinen Beispielcode einmal ausprobiert.
Sowohl bei Internet Explorer (7) als auch beim Firefox (2) funktioniert es problemlos. Die horizontale Scrollbar erscheint erst wenn das Browserfenster kleiner als die mittlere Spalte ist.
MfG,
McKentire
-
Das dachte ich anfangs auch, wenn man die beiden Spalten rechts und links jedoch ein wenig breiter macht, sieht man das der Browser hier auch schon zu scrollen beginnt.
@charset "utf-8";
.border_left {
position:absolute;
top:0px;
left:50%;
height: 100%;
width:40px;
margin-left:-459px;
background-color: #717171;
background-image: url(images/backborder_left.gif);
}
.zentriert {
position:absolute;
top:0px;
left:50%;
height: 100%;
width:838px;
margin-left:-419px;
background-color: #FCF6DD;
overflow: hidden;
}.border_right {
position:absolute;
top:0px;
left:50%;
height: 100%;
width:40px;
margin-left:419px;
background-color: #717171;
background-image: url(images/backborder_right.gif);
}.pagebanner {
position: absolute;
left: 10px;
top: 0px;
}Ich möchte also nur erreichen, das die Scrollbar im Browser erst dann erscheint, wenn die Breite des Browser kleiner als die des div Elements (div class="zentriert") wird.
Ich habe deinen Beispielcode einmal ausprobiert.
Sowohl bei Internet Explorer (7) als auch beim Firefox (2) funktioniert es problemlos. Die horizontale Scrollbar erscheint erst wenn das Browserfenster kleiner als die mittlere Spalte ist.
MfG,
McKentire
-
-
-