CSS und height auto (HTML, CSS und Javascript)

[thread]2343[/thread]

CSS und height auto

jan10001

2007-06-14 10:26

User since
2003-08-14
962 Artikel
BenutzerIn
[default_avatar]

Nach zig Versuchen und wirklich viel Google'n geb ich es auf, während der IE7 das Ganze hier sauber darstellt siehts unter Firefox und Opera schlecht aus. Bevor ich jetzt wieder zum Tabellendesign wechsel, frage ich mal lieber, vielleicht weiß ja einer Rat. Das Problem liegt beim height auto, denn bei festen Größen wird die Seite auch im Firefox und Opera sauber dargestellt. Problem ist nur auf height auto mag ich nicht verzichten da das Ganze für ein CMS ist.

Code: (dl )

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>Unbenannte Seite</title>
<style type="text/css" media="screen"><!--
#rahmen  { visibility: visible; margin: 0 auto; width: 955px; height: auto; border: solid 3px #b863ce; -moz-border-radius: 10px }
#oben1   { visibility: visible; margin: 5px 5px 20px; width: auto; height: 60px }
#oben2   { visibility: visible; margin-right: 5px; margin-bottom: 10px; margin-left: 5px; width: auto; height: 90px }
#mitte   { visibility: visible; margin-right: 5px; margin-bottom: 10px; margin-left: 5px; width: 945px; height: auto }
#unten   { visibility: visible; margin-right: 5px; margin-bottom: 5px; margin-left: 5px; width: 945px; height: auto }

#werbung1  { background-color: yellow; visibility: visible; width: 468px; height: 60px; float: left }
#werbung2  { background-color: yellow; visibility: visible; width: 468px; height: 60px; float: right }
#logo      { background-color: gray; visibility: visible; width: 180px; height: 90px; float: left }
#menutop   { background-color: purple; visibility: visible; margin-left: 10px; width: 755px; height: 90px; float: right }
#menuleft  { background-color: purple; visibility: visible; width: 180px; height: 300px; float: left }
#inhalt    { background-color: orange; visibility: visible; margin-left: 10px; width: 755px; height: auto; float: right }
#fusszeile { background-color: green; visibility: visible; width: 945px; height: 50px}
--></style>
</head>

<body bgcolor="#ffffff">
<div id="rahmen">
<div id="oben1">
<div id="werbung1">werbung</div>
<div id="werbung2">werbung</div>
</div>
<div id="oben2">
<div id="logo">logo</div>
<div id="menutop">Bildnavigation</div>
</div>
<div id="mitte">
<div id="menuleft">Menünavigation</div>
<div id="inhalt">Inhalte</div>
</div>
<div id="unten">
<div id="fusszeile">Fußzeile</div>
</div>
</div>
</body>
</html>

renee

2007-06-14 10:49

User since
2003-08-04
14371 Artikel
ModeratorIn

Mach mal beim CSS von "rahmen" noch ein overflow: auto;, hilft das?

OTRS-Erweiterungen (http://feature-addons.de/)
Frankfurt Perlmongers (http://frankfurt.pm/)
--

Unterlagen OTRS-Workshop 2012: http://otrs.perl-services.de/workshop.html
Perl-Entwicklung: http://perl-services.de/

kristian

2007-06-14 11:31

User since
2005-04-14
684 Artikel
BenutzerIn

Hallo

Ich denke man könnte min-height verwenden, dann gibt es wie wenig Content ein "Tabellen-Bild", bei viel Content oder größerer Schrift werden die Divs automatisch größer. (ungetestet)

Gruß
Kristian

jan10001

2007-06-14 11:33

User since
2003-08-14
962 Artikel
BenutzerIn
[default_avatar]

@renee
Leider nicht besser.\n\n

renee

2007-06-14 11:34

User since
2003-08-04
14371 Artikel
ModeratorIn

min-height wird erst ab IE7 unterstützt.

jan10001

2007-06-14 11:58

User since
2003-08-14
962 Artikel
BenutzerIn
[default_avatar]

@renee
Mit overflow: auto umfließt zwar der Rahmen jetzt den Bereich mitte, aber der Bereich unten der die Fußzeile enthält wird immernoch nicht richtig positioniert.

@kristian
min-height ist keine Lösung, sobald der Bereich für die Inhalte die min Höhe überschreitet sieht es wieder scheußlich aus.

Irgendwie scheint er gar nicht automatisch die Höhe zu berechnen, denn anders kann ich mir die Positionierung der Elemente nicht erklären.\n\n

GwenDragon

2007-06-14 12:43

User since
2005-01-17
14746 Artikel
Admin1

[quote=jan10001,14.06.2007, 08:26]während der IE7 das Ganze hier sauber darstellt siehts unter Firefox und Opera schlecht aus.[/quote]
Der IE stellt es auch eben falsch dar, weil er eine ganz andere Interpretation des CSS box model hat, als das W3C vorsieht.

Code: (dl )

#fusszeile { clear: both; background-color: green; visibility: visible; width: 945px; height: 50px}

Dann sitzt die Fußzeile unten.\n\n

die Drachin Gwen

Meine Perl-Artikel · perldev – verschiedene Perl-Versionen unter Windows starten

jan10001

2007-06-14 14:17

User since
2003-08-14
962 Artikel
BenutzerIn
[default_avatar]

@GwenDragon
Ah, das hilft doch schon weiter. Nur stellt sich noch die Frage warum margin-bottom: 10px ignoriert wird und inhalt und fusszeile zusammenkleben. Normalerweise sollten zwischen #mitte und #unten 10px Abstand sein.

bloonix

2007-06-14 16:01

User since
2005-12-17
1615 Artikel
HausmeisterIn

Wenn du die Fußzeile immer 10px vom unteren Rand fern halten
möchtest, dann mach das doch mit body { padding-bottom: 10px; } :)

What is a good module? That's hard to say.
What is good code? That's also hard to say.
One man's Thing of Beauty is another's man's Evil Hack.

jan10001

2007-06-14 16:38

User since
2003-08-14
962 Artikel
BenutzerIn
[default_avatar]

@opi
Da hast du etwas falsch gelesen, margin-bottom: 5px bei #unten sorgt dafür das die Fusszeile 5px Abstand vom Rand hat und das geht ja auch.

Nur wird das margin-bottom bei #mitte(Inhalt) ignoriert, die Folge ist das zwischen #mitte(Inhalt) und #unten (Fusszeile) kein Abstand ist. Naja aber ein padding-top funktioniert wenigstens, dennoch wüßte ich gern warum margin an dieser Stelle nicht funktioniert.

View all threads created 2007-06-14 10:26.