PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : div-Box die ganz nach unten geht


Nicolas
18-11-2003, 16:33
Hallo!

Ich gestalte gerade mit CSS eine Webseite. Leider gelingt es mir nicht, den Browser dazu bewegen, dass die div-Box (Menü), die ich mit float:left an den linken Rand gelegt habe bis ganz an das Seitenende zu verlängern. Dieses Menü wird immer nur so lang wie der Inhalt lang ist. Ich habe jetzt einfach noch ein paar <br />-Tags eingefügt, aber das ist auch nicht das Wahre.

Weis jemand eine Möglichkeit, wie ich es ohne JavaScript und ohne Tabellen bewerkstellige, dass das Menü bis ganz ans Seitenende verlängert wird.

Nicolas
Jana
18-11-2003, 20:08
Probier es mal mit:
Es hat aber Ausfälle z.B.NS4
Und nicht jeder weiß wie groß 100% des Bildschirms sind.

<HTML><HEAD><TITLE>Full Screen</TITLE>

<style>

.colLeft {position:absolute; width:100%; height:100px;
left: 0px; top:50px;
background: blue;layer-background-color:blue;
}

</style>


<div class="colLeft" width=1em;>
iouiuiou uiuiouiuiu iuoiuoiuoi uoiuoiuiouoi
uiuiuoiuoiuo
iuoiuiouoiuo
iuoiuoiu </div>

</BODY></HTML>
anda_skoa
18-11-2003, 20:10
Sollte das nicht bei height 100% sein und bei width eine fixe Größe?

Ciao,
_
Jana
18-11-2003, 20:13
Oh, ja natürlich!!


<HTML><HEAD><TITLE>Full Screen</TITLE>

<style>

.colRight {position:absolute; width:100px; height:100%;
left: 0px; top:0px;
background: blue;layer-background-color:blue;
}

</style>


<div class="colRight" width=1em;>
iouiuiou uiuiouiuiu iuoiuoiuoi uoiuoiuiouoi
uiuiuoiuoiuo
iuoiuiouoiuo
iuoiuoiu </div>

</BODY></HTML>
Nicolas
18-11-2003, 21:50
Vielen Dank erstmal für die Hilfe!

Jetzt habe ich aber das Problem, dass der Textbereich von der Menüleiste verdeckt wird. Wie kann ich denn jetzt dieses Problem sauber lösen?

Nicolas
Pingu
18-11-2003, 22:24
Setzte doch einfach den "margin-left" entgsprechend.

Pingu
Jana
19-11-2003, 10:20
Benutze einfach eine div-Box für das Menü und eine Zweite für den Text.


<style>

.menue{position:absolute; width:200px; height:100%;
left: 0px; top:0px;
background: blue;layer-background-color:blue;
}

.text {position:absolute; width:600px; height:100%; overflow:visible;
left: 200px; top:50px;
background: green;layer-background-color:green;
}


</style>


<div id="menue" class="menue"> Menü </div>
<div id="text" class="text"> Text</div>
Nicolas
19-11-2003, 13:12
Aber ich weis doch gar nicht wie breit der Anwender vom Monitor ist. Naja, ich kann auch sagen, ich benutze einfache einen Ausschnitt vom Bildschirm und nicht den gesamten, da ich ja nicht weis, wie breit der Bildschirm ist.
Jana
19-11-2003, 15:10
Mit Javescript läßt sich das ändern.
js_Dateien bei http://www.cross-browser.com


................
<style>

.menue{position:absolute; width:200px; height:500;
left: 0px; top:100px;
background: blue;layer-background-color:blue;
}

.text {position:absolute; width:600px; height:500; overflow:visible;
left: 200px; top:100px;
background: green;layer-background-color:green;
}


</style>

<script type='text/javascript' src='cbe/cbe_core.js'></script>
<script type='text/javascript' src='cbe/cbe_slide.js'></script>
<script type='text/javascript' src='cbe/cbe_slide2.js'></script>
<script type='text/javascript' src='cbe/cbe_event.js'></script>


<script type="text/javascript"><!--
function resizeListener(e) {init();}
function init() {
with (menue= cbeGetElementById('menu).cbe) {
background('white');
resizeTo(200,document.cbe.height());
moveTo(0,100);
zIndex(5);
show();}

with (text= cbeGetElementById('text').cbe) {
resizeTo(document.cbe.width()-200,document.cbe.height());
moveTo(200,100);
zIndex(6);
show();
}
window.cbe.addEventListener("resize", init, false);
}
</script>


</head>
<body>
<div id="menue" class="menue"> Menü </div>
<div id="text" class="text"> Text</div>

--------------------------------------------------------------------------------