Schrift
Wiki:Tipp zum Debugging: use Data::Dumper; local $Data::Dumper::Useqq = 1; print Dumper \@var;
[thread]2343[/thread]

CSS und height auto



<< >> 10 Einträge, 1 Seite
jan10001
 2007-06-14 10:26
#25133 #25133
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 )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?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
#25134 #25134
User since
2003-08-04
14371 Artikel
ModeratorIn
[Homepage] [default_avatar]
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
#25135 #25135
User since
2005-04-14
684 Artikel
BenutzerIn
[Homepage] [default_avatar]
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
#25136 #25136
User since
2003-08-14
962 Artikel
BenutzerIn
[default_avatar]
@renee
Leider nicht besser.\n\n

<!--EDIT|jan10001|1181806493-->
renee
 2007-06-14 11:34
#25137 #25137
User since
2003-08-04
14371 Artikel
ModeratorIn
[Homepage] [default_avatar]
min-height wird erst ab IE7 unterstützt.
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/
jan10001
 2007-06-14 11:58
#25138 #25138
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

<!--EDIT|jan10001|1181808003-->
GwenDragon
 2007-06-14 12:43
#25139 #25139
User since
2005-01-17
14748 Artikel
Admin1
[Homepage]
user image
[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

<!--EDIT|GwenDragon|1181811520-->
jan10001
 2007-06-14 14:17
#25140 #25140
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
#25141 #25141
User since
2005-12-17
1615 Artikel
HausmeisterIn
[Homepage]
user image
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
#25142 #25142
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.
<< >> 10 Einträge, 1 Seite



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