 |
Contenthöhe auf Browserhöhe anpassen
| von onliner |
Danke! Du hast mir gerade die Augen geöffenet. Mit einem HG Bild wird alles so einfach. Danke auch für den Hinweis auf den body tag im Template. Den hatte ich völlig übersehen, da er vom Stylesheet überschrieben wird. Ist wie gesagt meine erste Div Seite  und das nächste mal mach ich ein eigenes Thema auf.
Greetings,
Onliner |
| von nisita |
hallo,
so wie du es haben willst, das geht leider nicht.. jedenfalls ist dieses problem mir schon oft untergekommen, aber es gibt nicht DIE ideale lösung...
sowas wird dann meistens so gelöst, dass das bei dir das reihe3 div ein hitnergrundbild bekommt, was in y-richtung wiederholt wird, und die anderen 3 spalten bekommen keinen hintergrund.. dadurch kann man ein 3-spalten layout so wie du es haben willst "andeuten"... -wird z.b. auch bei fast alles bloggs etc so verwendet.. um mal einen bekannten zu nenen: (http://www.justwatchthesky.com/index.asp) -dort ist auch die rechte leiste auf den inhalt so "angepasst"...
ach ja.. wenn du schon gerade noch am anfang der seite steht.. z.b. die center tags, solltest du rausmachen, genauso sowas wie '<body bgcolor="#FFFFFF" topmargin="0">' -definiere sowas doch einfach in der css datei...
und die seite, ist definitiv zu breit -würde ich so vom gefühl her sagen.. am besten wäre es, wenn du sie abhängig der breite des browsers amchen würdest, oder halt ein bisschen kleiner..
viele grüße,
nisita
PS: mache bitte beim nächsten mal ein neues topic auf, und beziehe dich z.b. per link auf diesen beitrag... das macht es einfacher.. |
| von onliner |
Hallo zusammen,
durch Zufall und auf der Suche nach einer anderen Frage bin ich auf diesem interessanten Thread gelandet. Ich habe gerade angefangen, mich mit tabellenfreiem Design zu beschäftigen und mit einiger Arbeit, der passenden Doctype Definition und einem Taschenrechner mein erstes Design gebaut. Nun habe ich ein ähnliches Problem. Ich habe in jeder Zeile mehrere Boxen mit unterschiedlichen Abständen.
Zwei Reihen oben mit jeweils zwei Boxen, dann eine Contentreihe mit Navigation rechts und Links und als Abschluss einen Footer. Mein Problem ist, dass die Navigation links und rechts neben dem Content nicht mit gestreckt wird. Ich habe versucht, meinen Code an Hand des Beispiels hier umzubauen, bin aber gescheitert :( Vielleicht habt ihr ja einen Tipp, wie die beiden Menüs mit dem Content wandern
Hier der Code:
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: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>meineseite.de</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="divdesign.css" type="text/css">
</head>
<body bgcolor="#FFFFFF" topmargin="0">
<div align="center">
<div id="outline">
<div id="reihe1">
<div id="obenlinks">Ich bin eine Infozeile</div>
<div id="obenrechts"></div>
</div>
<div id="reihe2">
<div id="logo"><a href="index.html" target="_top"><img src="http://www.campus-dieburg.de/asta/gruen.gif" width="602" height="77" align="center" border="0"></a></div>
<div id="shoutbox"><img src="http://www.campus-dieburg.de/asta/weiss.gif" width="300" height="77" align="center" border="0"></div>
</div>
<div id="reihe3">
<div id="menu" class="navi">Menu-L</div>
<div id="content-main">Hier ist der Inhalt, der den contentframe streckt <!--
<br /><br /><br /><br /><br /><br /><br /><br />
-->
</div>
<div id="menu-right"><center>
<img src="http://www.campus-dieburg.de/asta/gruen.gif" width="88" height="32" border="0">
<img src="http://www.campus-dieburg.de/asta/gruen.gif" width="88" height="32" border="0">
</center>
Menu-R
</div>
</div>
<div id="reihe4">
<div id="footer" class="navi">Ich bin der Footer</div>
</div>
</div>
</div>
</body>
</html> |
und hier das Stylesheet dazu...
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:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142: | html {
height: 100%;
min-height: 100%;
max-height: 999%;
}
body {
margin: 0;
padding: 0;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: silver;
}
#outline {
width: 912px;
height: 100%;
min-height: 600px;
max-height: 999%;
background-color: silver;
}
#reihe1 {
width: 912px;
height: 22px;
}
#obenlinks {
width: 700px;
height: 18px;
background-color: white;
border: 1px solid #313D27;
float: left;
text-align: left;
margin: 0px 0px 2px 0px;
padding: 0px 0px 0px 2px;
}
#obenrechts {
width: 200px;
height: 18px;
background-color: white;
text-align: left;
border: 1px solid #313D27;
float: right;
margin: 0px 0px 2px 2px;
padding: 0px 2px 0px 2px;
}
#reihe2 {
width: 912px;
height: 81px;
}
#logo {
width: 602px;
height: 77px;
background-color: white;
border: 1px solid #313D27;
margin: 0px 2px 2px 0px;
float: left;
}
#shoutbox {
width: 300px;
height: 77px;
background-color: white;
text-align: left;
border: 1px solid #313D27;
float: right;
margin: 0px 0px 2px 0px;
padding: 0px 2px 0px 2px;
}
#reihe3 {
width: 912px;
height: 100%;
min-height: 100%;
max-height: 999%;
}
#menu {
width: 140px;
height: 100%;
background-color: white;
min-height: 100%;
max-height: 999%;
text-align: left;
border: 1px solid #313D27;
padding: 5px 0px 0px 2px;
margin: 0px 2px 2px 0px;
float: left;
}
#content-main {
width: 648px;
height: 100%;
background-color: white;
min-height: 100%;
max-height: 999%;
text-align: left;
border: 1px solid #313D27;
padding: 5px 5px 0px 5px;
margin: 0px 2px 2px 0px;
float: left;
}
#menu-right {
width: 102px;
height: 100%;
background-color: white;
min-height: 100%;
max-height: 999%;
border: 1px solid #313D27;
padding: 5px 0px 0px 0px;
margin: 0px 0px 2px 0px;
float: right;
}
#reihe4 {
width: 912px;
height: 22px;
}
#footer {
width: 910px;
background-color: white;
height: 18px;
border: 1px solid #313D27;
margin: 2px 0px 0px 0px;
float: left;
}
div {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height:16px;
border-color:#313D27;
}
|
Viele Grüße,
Onliner |
| von diwie |
super! das war es. 
Vielen Dank, ich hoffe ich kann bei evtl. weiteren Problemen wieder hier anklopfen?! ;) |
| von nisita |
probiers mal mit: für #site
jedenfalls habe ich das problem jetzt nicht mehr, allerdings bin ich mir nicht ganz sicher, ob ich nicht nochwas geändert habe.. ansonsten poste ich nochmal die ganze css datei..
mfg
nisita |
| von diwie |
ich danke dir vielmals, tausend dank. jetzt klappt es auch bei mir. ;)
allerdings wäre es sehr ungewöhnlich, hätte ich nicht schon wieder neue probleme hätte. ;)
einige konnte ich schon selbst lösen, wie z.b. die unterschiedliche interpretation von margin werten in IE und FF.
aber eines habe ich im moment noch.
da das layout bei mir zentriert ist, macht die angabe position:relative in der klasse header, beim ändern der breite des browserfenster im IE probleme. der rest passt sich der neuen breite an, nur eben nicht der header, der bleibt so stehen.
nehme ich das position heraus, ist dieses verhalten zwar unterbunden, aber funktioneren dann nicht mehr die menues die sich in der header klasse in form eigener divs befinden. ich sehe zwar die menupunkte, es funktionieren aber weder die hover effekte noch kann man die punkte anklicken. gibt es dafür noch eine lösung?
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19: | <div id="header">
<div id="menu1">
<ul id="m1_nav">
</ul>
</div>
<div id="header_logo"></div>
<div id="menu2">
<ul id="m2_nav">
</ul>
</div>
<div id="menu3">
<ul id="m3_nav">
</ul>
</div>
<div id="header_bottom"></div>
</div> |
nochmals vielen dank für die 1A Hilfe! ich fühle mich hier sehr gut aufgehoben. ;) |
| von nisita |
sorry, war mein fehler.. im opera ging es, und da bin ich davon ausgegangen, dass der firefox es dann auch richtig macht.. der scheiterte aber an einemfehlenden height: 100%... und so ergaben sich mehrere neu probleme :(
naja, habe jedenfalls jetzt nach mehmaligen probieren etc jetzt eine lösung gefunden, die in allen 3en geht...
html (hat sich nicht viel verändert...):
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: | <!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="style5.css" />
</head>
<body>
<div id="site">
<div id="header">head</div>
<div id="content">
<div id="contentbox">
<div id="contentboxoben"> </div>
content box...
<br />
<!--
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
umbruch
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
umbruch
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
umbruch
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />sdfsd<br />sdf<br />
umbruch
-->
text
asfasdfdas
<div id="contentboxunten"> </div>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html> |
css:
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:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79: | * {
margin: 0px;
padding: 0px;
}
html {
height: 100%;
min-height: 100%;
max-height: 999%;
}
body {
height: 100%;
min-height: 100%;
max-height: 999%;
width: 818px;
background-color: #652B2A;
text-align: left;
font-family: Georgia, "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
font-size: 13px;
color: #8C8B84;
}
/* HACK nur für IE */
* html body {
height: 100%;
}
* html body #site #content {
height: 100%;
}
/* Ende IE HACK*/
#site {
height: 100%;
min-height: 100%;
max-height: 999%;
width: 818px;
background-color: Green;
}
#header {
height: 50px;
width: 798px;
background-color: Lime;
z-index: 2;
position: relative;
}
#content {
min-height: 100%;
max-height: 999%;
width: 818px;
background: url("images/content_bg.gif") repeat-y;
background-color: Aqua;
margin-top: -50px; /* so groß wie die höhe des headers */
z-index: 1;
}
#contentbox {
background-color: Red;
}
#contentboxunten {
height: 30px; /* muss so groß sein wie der footer */
}
#contentboxoben {
height: 50px; /* muss so groß sein wie der header*/
}
#footer {
height: 30px;
width: 818px;
background-color: Fuchsia;
float: left;
margin-top: -30px; /* so groß wie die höhe des footers */
z-index: 3;
} |
ich hoffe dochmal, bei dir sieht das genauso aus wie bei mir
mfg
nisita |
| von diwie |
| ich habe jetzt ausgehend von deinem gerüst einiges ausprobiert. leider funktioniert dein quellcode bei mir nicht im firefox, die gesamthöhe wird dort leider noch nicht auf 100% höhe gestreckt. im IE schon. hat es bei dir funktioniert? ich habe die version FF 1.0.3 im einsatz. |
| von diwie |
vielen dank für deine mühe! ;)
ich werde es heute abend gleich mal ausprobieren und feedback geben, wird aber etwas später werden. bis denne! |
| von nisita |
also habe jetzt auch eine version, die in beiden geht.. aber nur mit ie hack...
html:
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: |
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="style5.css" />
</head>
<body>
<div id="site">
<div id="header">head</div>
<div id="content">
<div id="contentbox">
content box...
<br />
<!--
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
umbruch
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
umbruch
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
umbruch
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />sdfsd<br />sdf<br />
umbruch
-->
text
asfasdfdas
<div id="contentboxunten"> </div>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
|
style5.css: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:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72: |
* {
margin: 0px;
padding: 0px;
}
html {
height: 100%;
}
body {
min-height: 100%;
max-height: 999%;
width: 818px;
text-align: center;
font-family: Georgia, "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
font-size: 13px;
color: #8C8B84;
background-color: #652B2A;
}
/* HACK nur für IE */
* html body {
height: 100%;
}
/* Ende IE HACK*/
#site {
height: 100%;
min-height: 100%;
max-height: 999%;
width: 818px;
background-color: Green;
}
#header {
height: 50px;
width: 798px;
background-color: Lime;
}
/* content style */
#content {
height: 100%;
min-height: 100%;
max-height: 999%;
width: 818px;
background: url("images/content_bg.gif") repeat-y;
background-color: Aqua;
float: left;
}
#contentbox {
background-color: Red;
}
#contentboxunten {
height: 30px; /*muss so groß sein wie der footer*/
}
#footer {
clear:both;
float: left;
height: 30px;
width: 818px;
background-color: Fuchsia;
position: relative;
margin-top: -30px;
}
|
muss leider wieder los, woltle es aber noch schnell schicken.. kannst es ja erstmal ausprobieren, ob es deinen wünschen entspricht... |
| von nisita |
also für den ie habe ich eine funktionierende lösung, und auch für firefox / opera... da blöde ist nur, es geht nicht beides... bzw. ich habe noch keine lösung gefunden... probiere noch ein bisschen...
mfg
nisita |
| von nisita |
| ich bezweifle mal, ob es da etwas gibt, was in allen browser -wenn überhaupt- funktioniert.. werds mir aber mal anschauen... |
| von diwie |
nisita schrieb am 16.05.2005 17:00
nur schnell ne frage.. was ist wenn deri nhalt in content höher ist, als die seite??? dann scrollen??? |
ja bitte. ein scrollen der ganzen seite. |
| von nisita |
| nur schnell ne frage.. was ist wenn deri nhalt in content höher ist, als die seite??? dann scrollen??? |
| von diwie |
ich muss doch nochmal nach hilfe rufen. ;) ich bekomme es nicht zufreidenstellend hin. im firefox schaut es schon ganz gut aus, bei wenig text im content bereich. im IE ist header und footer nicht zu sehen, trotz höherer werte für z-index als bei content.
dann gibt es noch ein problem bei längerem text im content bereich, da schreibt er über den footer.
kannst du vielleicht bitte nochmal ein grundlegendes beispiel css konstrukt einreichen? das wäre lieb.
+--------------------------------------------------------------------+
| Header (Höhe 354px) |
+--------------------------------------------------------------------+
| |
| Content |
| (Höhe auf Browserhöhe auffüllen) |
| |
| |
| |
+-------------------------------------------------------------------+
| Footer (Höhe 30px) |
+-------------------------------------------------------------------+
Scrollbar sollten alle container sein, also kein fixierten header oder footer bereiche.
Vielen Dank für die Mühe! |
| von diwie |
vielen vielen dank für deine schnelle hilfe. beim lesen habe ich soweit alles verstanden ;)
mal schaun wie ich das umsetzen kann. vielen dank für deine anregung, bei problemen melde ich mich nochmal. |
| von nisita |
hallo..
habe leidern icht viel zeit, weswegen ich es dir nur kurz versuche zu erklären... falls du das dann nicht hinbekommst, könnte ich dir das auch später machen..
das problem ist, das das height: 100% ja die browergröße ist, bzw. 100% von einem umschließenden anderen div... allerdigns nur, wenn das "äußere" mit einer genauen höhe angebenen ist...
dadurch wird die seite höher, da nunmal die browserhöhe +footer+header dazu kommt... meine lösung dafür wäre, dass du dem footer und header position: abosulute gibst, beim footer nochh bottom: 0px; undn atürlich den z-index nicht vergessen (ansonsten macht deri e glaube schierigkeiten), und dem content gibst du position: relative...
jetzt stimmt das zwar, dass das 100% hoch ist, allerding ist der obere inhelt von content nicht sichtbar, da ja der header "darüber" ist... weswegen du im content div noch ein anderes div einfügen solltest, was genauso hoch ist, wie der header.. sozusane als "leeres" div..
ichh offe, ich habe das irgendwie verständlich erklärt... und wie gesagt, wenn es probleme gibt, und du das genauer an deinem beispiel haben willst, nochmal schreiben...
mfg
nisita |
| von diwie |
hallo,
ich möchte zum erstenmale eine webdesign ohne tabellen erstellen. dabei stosse ich bei CSS auf die selben probleme wie seinerzeit bei tabellen. die rede ist von der 100% Höhenangabe für bestimmte Elemente.
Ich habe also oben einen festen Headerbereich und unten einen festen Footer. Der Contentbereich dazwischen soll sich über die jeweilige Broserhöhe ausdehnen. Das klappt leider nicht richtig. Die Höhe des Contents erscheint so (s.u.) immer mit einer Höhe der jeweiligen gesamten Browserfensterhöhe?
Ich habe schon stundenlang gegoggled und gefrickelt, nix brachte den gewünschten Erfolg. Vielleicht weiß ja jemand von Euch eine Hilfestellung.
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:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57: | <!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div id="site">
<div id="header_left"></div>
<div id="header">
<div id="menu1">
<ul id="m1_nav">
<li><a id=" href="index.php?page=01"><span>01</span></a></li>
</ul>
</div>
<div id="header_logo"></div>
<div id="menu2">
<ul id="m2_nav">
<li><a id="p06 href="index.php?page=06"><span>06</span></a></li>
</ul>
</div>
<div id="menu3">
<ul id="m3_nav">
<li><a id="p07" href="index.php?page=07"><span>07</span></a></li>
</ul>
</div>
<div id="header_bottom"></div>
</div>
<div id="header_right"></div>
<div id="content">
<div id="content_left">
</div>
<div id="content_right">
</div>
<div id="footer">
</div>
</div>
</div>
</body>
</html> |
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:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221: | html {
height: 100%;
}
body {
height: 100%;
width: 818px;
margin: 0px auto;
text-align: center;
font-family: Georgia, "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
font-size: 13px;
color: #8C8B84;
background-color: #652B2A;
}
#site {
height: 100%;
width: 818px;
background-color: #EAE8DC;
}
a {
text-decoration: none;
color: #8C8B84;
}
a:hover {
text-decoration: none;
background-color: #BDD361;
}
/* header style */
#header_left {
height: 354px;
width: 10px;
background: url("images/header_left.gif") no-repeat;
float: left;
}
#header {
height: 354px;
width: 798px;
float: left;
}
#menu1 {
height: 42px;
width: 798px;
background: url("images/menu1_bg.gif") no-repeat;
}
#m1_nav {
clear: both;
list-style: none;
padding: 17px 0 0 0;
margin: 0 0 0 472px;
height: 15px;
}
#m1_nav li {
display: inline;
}
#m1_nav #p01 {display: block; width: 46px; height: 15px; float: left; background: url("images/menu1_01.gif") no-repeat 0 0;}
#m1_nav #p02 {display: block; width: 66px; height: 15px; float: left; background: url("images/menu1_02.gif") no-repeat 0 0;}
#m1_nav #p03 {display: block; width: 49px; height: 15px; float: left; background: url("images/menu1_03.gif") no-repeat 0 0;}
#m1_nav #p04 {display: block; width: 82px; height: 15px; float: left; background: url("images/menu1_04.gif") no-repeat 0 0;}
#m1_nav #p05 {display: block; width: 76px; height: 15px; float: left; background: url("images/menu1_05.gif") no-repeat 0 0;}
#m1_nav a#p01:hover {background: url("images/menu1_01.gif") no-repeat 0 -15px;}
#m1_nav a#p02:hover {background: url("images/menu1_02.gif") no-repeat 0 -15px;}
#m1_nav a#p03:hover {background: url("images/menu1_03.gif") no-repeat 0 -15px;}
#m1_nav a#p04:hover {background: url("images/menu1_04.gif") no-repeat 0 -15px;}
#m1_nav a#p05:hover {background: url("images/menu1_05.gif") no-repeat 0 -15px;}
#m1_nav #p01_aktiv {display: block; width: 46px; height: 15px; float: left; background: url("images/menu1_01_aktiv.gif") no-repeat 0 0;}
#m1_nav #p02_aktiv {display: block; width: 66px; height: 15px; float: left; background: url("images/menu1_02_aktiv.gif") no-repeat 0 0;}
#m1_nav #p03_aktiv {display: block; width: 49px; height: 15px; float: left; background: url("images/menu1_03_aktiv.gif") no-repeat 0 0;}
#m1_nav #p04_aktiv {display: block; width: 82px; height: 15px; float: left; background: url("images/menu1_04_aktiv.gif") no-repeat 0 0;}
#m1_nav #p05_aktiv {display: block; width: 76px; height: 15px; float: left; background: url("images/menu1_05_aktiv.gif") no-repeat 0 0;}
#m1_nav li a span {display: none;}
#header_logo {
height: 204px;
width: 798px;
background: url("images/header.jpg") no-repeat;
}
#menu2 {
height: 42px;
width: 798px;
background: url("images/menu2_bg.gif") no-repeat;
}
#m2_nav {
clear: both;
list-style: none;
padding: 11px 0 0 0;
margin: 0 0 0 145px;
height: 15px;
}
#m2_nav li {
display: inline;
}
#m2_nav #p06 {display: block; width: 102px; height: 15px; float: left; background: url("images/menu2_06.gif") no-repeat 0 0;}
#m2_nav #p07 {display: block; width: 63px; height: 15px; float: left; background: url("images/menu2_07.gif") no-repeat 0 0;}
#m2_nav #p08 {display: block; width: 80px; height: 15px; float: left; background: url("images/menu2_08.gif") no-repeat 0 0;}
#m2_nav #p09 {display: block; width: 84px; height: 15px; float: left; background: url("images/menu2_09.gif") no-repeat 0 0;}
#m2_nav #p10 {display: block; width: 73px; height: 15px; float: left; background: url("images/menu2_10.gif") no-repeat 0 0;}
#m2_nav #p11 {display: block; width: 76px; height: 15px; float: left; background: url("images/menu2_11.gif") no-repeat 0 0;}
#m2_nav #p12 {display: block; width: 105px; height: 15px; float: left; background: url("images/menu2_12.gif") no-repeat 0 0;}
#m2_nav #p13 {display: block; width: 63px; height: 15px; float: left; background: url("images/menu2_13.gif") no-repeat 0 0;}
#m2_nav a#p06:hover {background: url("images/menu2_06.gif") no-repeat 0 -15px;}
#m2_nav a#p07:hover {background: url("images/menu2_07.gif") no-repeat 0 -15px;}
#m2_nav a#p08:hover {background: url("images/menu2_08.gif") no-repeat 0 -15px;}
#m2_nav a#p09:hover {background: url("images/menu2_09.gif") no-repeat 0 -15px;}
#m2_nav a#p10:hover {background: url("images/menu2_10.gif") no-repeat 0 -15px;}
#m2_nav a#p11:hover {background: url("images/menu2_11.gif") no-repeat 0 -15px;}
#m2_nav a#p12:hover {background: url("images/menu2_12.gif") no-repeat 0 -15px;}
#m2_nav a#p13:hover {background: url("images/menu2_13.gif") no-repeat 0 -15px;}
#m2_nav #p06_aktiv {display: block; width: 102px; height: 15px; float: left; background: url("images/menu2_06_aktiv.gif") no-repeat 0 0;}
#m2_nav #p07_aktiv {display: block; width: 63px; height: 15px; float: left; background: url("images/menu2_07_aktiv.gif") no-repeat 0 0;}
#m2_nav #p08_aktiv {display: block; width: 80px; height: 15px; float: left; background: url("images/menu2_08_aktiv.gif") no-repeat 0 0;}
#m2_nav #p09_aktiv {display: block; width: 84px; height: 15px; float: left; background: url("images/menu2_09_aktiv.gif") no-repeat 0 0;}
#m2_nav #p10_aktiv {display: block; width: 73px; height: 15px; float: left; background: url("images/menu2_10_aktiv.gif") no-repeat 0 0;}
#m2_nav #p11_aktiv {display: block; width: 76px; height: 15px; float: left; background: url("images/menu2_11_aktiv.gif") no-repeat 0 0;}
#m2_nav #p12_aktiv {display: block; width: 105px; height: 15px; float: left; background: url("images/menu2_12_aktiv.gif") no-repeat 0 0;}
#m2_nav #p13_aktiv {display: block; width: 63px; height: 15px; float: left; background: url("images/menu2_13_aktiv.gif") no-repeat 0 0;}
#m2_nav li a span {display: none;}
#menu3 {
height: 20px;
width: 798px;
border-top: 2px solid #CCCBBD;
border-bottom: 2px solid #CCCBBD;
background: url("images/menu3_bg.gif") no-repeat;
}
#m3_nav {
clear: both;
float: right;
list-style: none;
padding: 0;
margin: 0;
height: 20px;
}
#m3_nav li {
display: inline;
}
#m3_nav #p06s01 {display: block; width: 82px; height: 20px; float: left; background: url("images/menu3_06_01.gif") no-repeat 0 0;}
#m3_nav #p06s02 {display: block; width: 80px; height: 20px; float: left; background: url("images/menu3_06_02.gif") no-repeat 0 0;}
#m3_nav #p07s01 {display: block; width: 96px; height: 20px; float: left; background: url("images/menu3_07_01.gif") no-repeat 0 0;}
#m3_nav #p07s02 {display: block; width: 121px; height: 20px; float: left; background: url("images/menu3_07_02.gif") no-repeat 0 0;}
#m3_nav #p07s03 {display: block; width: 93px; height: 20px; float: left; background: url("images/menu3_07_03.gif") no-repeat 0 0;}
#m3_nav a#p06s01:hover {background: url("images/menu3_06_01.gif") no-repeat 0 -20px;}
#m3_nav a#p06s02:hover {background: url("images/menu3_06_02.gif") no-repeat 0 -20px;}
#m3_nav a#p07s01:hover {background: url("images/menu3_07_01.gif") no-repeat 0 -20px;}
#m3_nav a#p07s02:hover {background: url("images/menu3_07_02.gif") no-repeat 0 -20px;}
#m3_nav a#p07s03:hover {background: url("images/menu3_07_03.gif") no-repeat 0 -20px;}
#m3_nav #p06s01_aktiv {display: block; width: 82px; height: 20px; float: left; background: url("images/menu3_06_01_aktiv.gif") no-repeat 0 0;}
#m3_nav #p06s02_aktiv {display: block; width: 80px; height: 20px; float: left; background: url("images/menu3_06_02_aktiv.gif") no-repeat 0 0;}
#m3_nav #p07s01_aktiv {display: block; width: 96px; height: 20px; float: left; background: url("images/menu3_07_01_aktiv.gif") no-repeat 0 0;}
#m3_nav #p07s02_aktiv {display: block; width: 121px; height: 20px; float: left; background: url("images/menu3_07_02_aktiv.gif") no-repeat 0 0;}
#m3_nav #p07s03_aktiv {display: block; width: 93px; height: 20px; float: left; background: url("images/menu3_07_03_aktiv.gif") no-repeat 0 0;}
#m3_nav li a span {display: none;}
#header_bottom {
height: 42px;
width: 798px;
background: url("images/header_bottom.gif") no-repeat;
}
#header_right {
height: 354px;
width: 10px;
background: url("images/header_right.gif") no-repeat;
float: left;
}
/* content style */
#content {
height: 100%;
width: 818px;
float: left;
background: url("images/content_bg.gif") repeat-y;
}
#content_left {
width: 563px;
height: 100%;
padding: 0 10px 0 20px;
text-align: left;
float: left;
}
#content_right {
width: 194px;
height: 100%;
border-left: 1px dashed #BDD361;
padding: 0 20px 0 10px;
text-align: left;
float: right;
}
#footer {
height: 30px;
width: 818px;
} |
|
|
|
|
