nicht angemeldet
höhe über bildschirm und float
Hallo!
Ich bin gerade dabei eine Seite in XHTML und CSS zu bauen. Dabei sollen zwei Container (per float) nebeneinander positioniert werden. Die Höhe der Kästen soll dabei immer so hoch wie das Browserfenster sein, es sei denn der Inhalt ist größer, dann muss halt gescrollt werden.
Ich habe nun hier in einem Posting gelesen, dass dies nur mit Tabellen ginge - Ist dem wirklich so? Dann würde ich das Design noch einmal überarbeiten.
Der Norde
-
Hi Der,
Ich habe nun hier in einem Posting gelesen, dass dies nur mit Tabellen ginge - Ist dem wirklich so? Dann würde ich das Design noch einmal überarbeiten.
Du kannst eine Tabelle nicht scrollen.
Um die DIV's auf die Höhe des Browserfensters zu bekommen, sollte
height: 100%;genügen (eventuell noch ein Workaround für IE?). Das mit dem Scrollen eines DIV's kriegst du durch[link:http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow@title=overflow:] scroll;hin.MfG, Dennis.
--
Mein SelfCode: ie:{ fl:( br:> va:) ls:[ fo:) rl:( n4:# ss:) de:] js:| ch:{ sh:( mo:} zu:|
That's life - Es gibt im Leben[tm] keine Zurück-Taste. (Fabian Transchel)-
Hallo Denis!
Du kannst eine Tabelle nicht scrollen.
Das heißt also, dass Tabellen immer position:fixed sind? Ok, der IE kennt das nicht und ist überfordert. Aber was erzählst Du eigentlich hier für einen Mist?
Schönen Gruß
Afra
--
Heute schon gepixelt? http://www.pixel-plaza.de/index.php?module=profile&subName=house&itemID=154-
Hi afra,
Du kannst eine Tabelle nicht scrollen.
Das heißt also, dass Tabellen immer position:fixed sind? Ok, der IE kennt das nicht und ist überfordert. Aber was erzählst Du eigentlich hier für einen Mist?
Ich meinte den _Inhalt_ einer Tabelle! Die Tabelle als ganzes kannst du natürlich scrollen ;-)
MfG, Dennis.
--
Mein SelfCode: ie:{ fl:( br:> va:) ls:[ fo:) rl:( n4:# ss:) de:] js:| ch:{ sh:( mo:} zu:|
Die Definition des SelfCodes ist hier zu finden, es gibt auch einen Encoder.-
Hallo Dennis!
Ich meinte den _Inhalt_ einer Tabelle! Die Tabelle als ganzes kannst du natürlich scrollen ;-)
_Das_ wollte der User aber gar nicht beantwortet haben.
Schönen Gruß
Afra
--
Heute schon gepixelt? http://www.pixel-plaza.de/index.php?module=profile&subName=house&itemID=154-
Hi afra,
Ich meinte den _Inhalt_ einer Tabelle! Die Tabelle als ganzes kannst du natürlich scrollen ;-)
_Das_ wollte der User aber gar nicht beantwortet haben.
Sicher? Ich mir nicht.
Die Frage war doch wie das hier geht:
"Dabei sollen zwei Container (per float) nebeneinander positioniert werden. Die Höhe der Kästen soll dabei immer so hoch wie das Browserfenster sein, es sei denn der Inhalt ist größer, dann muss halt gescrollt werden."
Und das geht mit der CSS Eigenschaft overflow.
MfG, Dennis.
--
Mein SelfCode: ie:{ fl:( br:> va:) ls:[ fo:) rl:( n4:# ss:) de:] js:| ch:{ sh:( mo:} zu:|
Das Leben ist kein Warenhaus - es nimmt nichts zurück. (Anette Louisan)-
Hallo Dennis!
Wieso kompliziert wenn es einfach geht. Wenn eine Seite höher ist als das anzeigende Browserfenster dann scrollt jeder vernünftige Browser automatisch, es sei denn man stellt es bewusst mit Tricks ab.
Schönen Gruß
Afra
-
-
-
-
-
-
Hi,
ich hab gerade erfolgreich folgendes im Firefox ausprobiert:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}#a, #b {
width: 50%;
height: 100%;
}#a {
float: left;
background-color: #f00;
}#b {
float: right;
background-color: #0f0;
}
</style>
</head>
<body><div id="a">
</div><div id="b">
</div></body>
</html>Grüsse, Lucien
-
Hallo!
Hier funktioniert es nicht:
CSS:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
/* Hauptbox: Zentrierung des Inhalts */
#main-bk {
position: relative;
width: 760px;
visibility: visible;
text-align: left;
margin: 10px 0 0 -380px;
padding: 0;
overflow: visible;
}
/* Navigation oben */
#nav {
height: 140px;
background-color: #CCDCF1;
width: 760px;
overflow: hidden;
margin: 0;
padding: 0;
float: none;
}
/* Inhalt von #nav */#navigation {
margin-top: 60px;
margin-left: 100px;
float: left;
color: white;
background-color: #8AACDA;
}/* Der Inhaltsteil; #main umschliesst #links und #content und soll eine gemeinsame Hintergrundfarbe für den Contentteil bereitstellen */
#main {
padding: 10px;
margin-top: 10px;
background-color: #CCDCF1;
float: left;
height: 100%;
}#links {
background-color: #F9E7D5;
padding: 8px;
margin-top: 10px;
margin-left: 0px;
width: 124px;
float: left;
}#content {
background-color: #F9E7D5;
padding: 8px;
margin-top: 10px;
margin-left: 10px;
width: 574px;
float: left;
}XHTML:
<body>
<div id="main-bk">
<div id="nav"> </div>
<div id="main">
<div id="links"><p>fhggfgfhg</p></div>
<div id="content"><p>Dies ist der Contentteil, in dem die Inhalte stehen. Daher
auch "Content" (englisch: "Inhalt"). Dies ist nur ein
Fliesstext, der dazu dient, die Inhalte im vorgesehenen Design zu sehen
und zu begutachten. Daher schreibe ich jetzt einfach mal drauf los, ohne,
dass alles, was hier steht, unbedingt gelesen werden sollte.</p></div>
</div>
</div>
</body>Das mit den 100% und margin=0 funktioniert wohl nur dann, wenn keine Inhalte in den Boxen stehen, oder?
-
Hallo.
<body>
Höhe: 100% des sichtbaren Bereiches.
<div id="main-bk">
Höhe: So groß wie nötig
<div id="main">
Höhe: 100% von "So groß wie nötig" (s. o.), also ebenfalls so groß wie nötig
</div>
</div>
</body>Das mit den 100% und margin=0 funktioniert wohl nur dann, wenn keine Inhalte in den Boxen stehen, oder?
"margin=0" funktioniert in CSS nie.
MfG, at-
"margin=0" funktioniert in CSS nie.
http://www.w3.org/TR/CSS1#length-units: After a '0' number, the unit identifier is optional.
Oder wie hast du das gemeint??
Grüsse, Lucien
-
Hallo.
"margin=0" funktioniert in CSS nie.
http://www.w3.org/TR/CSS1#length-units: After a '0' number, the unit identifier is optional.Oder wie hast du das gemeint??
Ungefähr so: After '=' instead of ':' all values will be ignored.
MfG, at
-
-
Hallo!
Das mit dem Gleichheitszeichen ist schon klar; wenn Du Dir meinen oben geposteten Code ansiehst, dann sollte Dir das klar sein.Deine Änderungsvorschläge bringen hier leider nichts, hast Du vielleicht einen Beispiellink o.ä.?
Der Norde
-
-
-
-
Hallo Norde!
Verwende min-height (Mindesthöhe) mit relativen Angaben und für den IE height, der dies annähernd so interpretiert wie vernünftige Browser.
Schönen Gruß
Afra
--
Heute schon gepixelt? http://www.pixel-plaza.de/index.php?module=profile&subName=house&itemID=154