Home | Registrieren | Einloggen | Suchen | Aktuelles


Forum » Auszeichnungssprachen » CSS LAyer mit 100% Höhe Antworten
CSS LAyer mit 100% Höhe

patrickpaulsen
Otto-Normal-Poster


Beiträge: 62


Hallo

Ich bin ja eigentlich nicht sonderlich begriffsstutzig, aber irgendwie...

Folgendes Problem:

Ich möchte gerne mehrere CSS DIV Layer 100% Höhe zuweisen, so das diese sich dem Inhalt anpassen. Aber leider schaffe ich es nur, das er die Bildschirmhöhe komplett ausfüllt. Scrolle ich nun weiter nach unten, um den restlichen Kontent zu sehen, hört der Layer auf.

Schwer zu erklären... deshalb >>> http://www.designerkompetenz.de/templates/dk_templ/index.php

Wäre über Hilfe dankbar...


---
Patrick Paulsen
================

http://www.designerkompetenz.de

  Profil   Website   Editieren   Zitieren

skc.tiddy
Otto-Normal-Poster


Beiträge: 81


man kann divs auch verschachteln....

oder du gibts dem div mit dem main-content nen hintergrund und ne fest breite...

---
...blah.

Diese Nachricht wurde geändert von: skc.tiddy
  Profil   Website   Editieren   Zitieren

sondermuelli
Quasselstrippe


Beiträge: 369


du hast dich wohl noch nicht wirklich mit css beschäftigt? bei dem katastrophen-code ist es jedenfalls kein wunder, dass das nicht so klappt wie gedacht.

1. du hast sieben divs. brauchen würdest du nur eines.
2. die divs sind zwar verschachtelt, aber alle absolut positioniert. damit nimmst du sie aus dem textfluss raus --> das umschliessende div wird also auch nicht soweit wie der inhalt nach unten gestreckt.
3. funktioniert das mit der höhe 100% spätestens wenn du einen gescheiten doctype verwendest in den modernen browsern eh nicht mehr.
4. wenn du willst, dass sich das div soweit streckt wie der inhalt, dann lass die höhen angabe weg oder schreibe height:auto.
5. was soll die xml-declaration am anfang vom dokument, wenn du weder einen xhtml-doctype angibst, noch xhtml-markup verwendest?

---
wer hilft mir beim geschirr spülen?

  Profil   E-Mail   Website   Editieren   Zitieren

patrickpaulsen
Otto-Normal-Poster


Beiträge: 62


Hallo

Danke erstmal euch beiden...

zu1: Ich benötige mehrere Divs, weil ich an bestimten Positionen verschiedene Includes einbauen will.
zu5: Tja, warum ich die eingebaut habe, weiß ich auch net...!

Hast aber Recht mit der Aussage, das ich mich noch nicht wirklich mit css beschäftigt habe.

Hab jetzt mal nach euren Anweiungen gehandelt, aber immer noch kein wirklich positives Ergebniss. Zwar passt sich der Layer nun dem Text an, aber dafür ist nun nicht mehr der gesammte Text zu sehen.

---
Patrick Paulsen
================

http://www.designerkompetenz.de

  Profil   Website   Editieren   Zitieren

patrickpaulsen
Otto-Normal-Poster


Beiträge: 62


Keiner ne Lösung??

---
Patrick Paulsen
================

http://www.designerkompetenz.de

  Profil   Website   Editieren   Zitieren

sondermuelli
Quasselstrippe


Beiträge: 369


ich hab eben mal was gemacht, was hoffentlich ungefähr das ist, was du brauchst. es wäre wahrscheinlich irgendwie noch einfacher oder besser gegangen, dürfte aber ganz brauchbar sein.

>> Klick

---
wer hilft mir beim geschirr spülen?

  Profil   E-Mail   Website   Editieren   Zitieren

patrickpaulsen
Otto-Normal-Poster


Beiträge: 62


Vielen Dank... vielleicht bringt mich das jetzt weiter!

---
Patrick Paulsen
================

http://www.designerkompetenz.de

  Profil   Website   Editieren   Zitieren

patrickpaulsen
Otto-Normal-Poster


Beiträge: 62


Hallo nochmal

Vielen Dank, hat geklappt. Ich gelobe Besserung

Unter der bereits genannten URL könnt ihr übrigens die Fortschritte beobachten, wenn ihr Lust habt. Und wenn ihr mögt, könnt ihr mir auch gerne weiterhin Tips und Verbesserungsmöglichkeiten nennen.

Danke nochmal....!

---
Patrick Paulsen
================

http://www.designerkompetenz.de

  Profil   Website   Editieren   Zitieren

skc.tiddy
Otto-Normal-Poster


Beiträge: 81


Fatal error: Call to undefined function: mosloadmodules() in /homepages/30/d67073495/htdocs/com/templates/dk_templ/index.php on line 70

naja...das ist wohl noch kein fortschritt.

---
...blah.

Diese Nachricht wurde geändert von: skc.tiddy
  Profil   Website   Editieren   Zitieren

patrickpaulsen
Otto-Normal-Poster


Beiträge: 62


Hallo

Ist mehr oder weniger gewollt. Kommt durch ein paar Änderungen an den Pfaden der Includes!

---
Patrick Paulsen
================

http://www.designerkompetenz.de

  Profil   Website   Editieren   Zitieren

skc.tiddy
Otto-Normal-Poster


Beiträge: 81


was machste denn da gross mit includes......reicht doch...

1: 
2: 
3: 
4:
<?include("inc/header.php")?>
main content
main content
<?include("inc/footer.php")?>


was kann denn da gewollte sein ....


---
...blah.

  Profil   Website   Editieren   Zitieren

patrickpaulsen
Otto-Normal-Poster


Beiträge: 62


Naja...

Dahinter steckt ein CMS. Das ist auch für die Fehlermeldung verantwortlich.
Das CMS prüft ob eine Datei direkt geladen wird oder nicht.

Wenn ich nun die includes komplett in das meinige Template setze, wird Fehlermeldug angezeigt. Lade ich jedoch das CMS hoch und zeige es über das CMS an, wird es korrekt (ohne Fehlermeldung) angezeigt.

Wie auch immer... sollte hin und wieder mal eine Fehlermeldung erscheinen, ist dies mehr oder weniger miteingeplant. Gewollt ist vielleicht der falsche Ausdruck!

---
Patrick Paulsen
================

http://www.designerkompetenz.de

  Profil   Website   Editieren   Zitieren

patrickpaulsen
Otto-Normal-Poster


Beiträge: 62


Hallo

So, habe fertisch....! Ah... Richtiiiiiiich.... <Spass>

>>> hier zu sehen >>> www.designerkompetenz.de

Hab aber noch ein klitze kleines Problem...

Wenn man im Menü z.B. auf News klickt, erscheint der autom. dem Inhalt angepasste "Content-Layer". Die Submenüs und kleinen Blogs auf der rechten Seite werden nun jedoch eingrückt und erscheinen somit völlig unpositioniert.

Ich müsste den Layern nun also eine absolute Positionen geben! Wie??

Um meine Frage beantworten zu können, hier der Code meiner CSS Datei mit Angaben zu den Layern.

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:
/* <![CDATA[ */
body {
	background-color:#CCCCCC;
	background-image:url(../images/bg2.gif);
	text-align:center;
}
#container {
	width:800px;
	text-align:left;
	margin-right:10px;
	margin-left:10px;
	background-color:#FFFFFF;
	padding:10px 10px 10px 10px;
}
#bg {
	width:780px;
	height:250px;
	text-align:right;
	margin:0 0 0 0;
	background-image:url(../images/header.jpg);
	background-color:#FFFFFF;
	padding:10px 10px 10px 10px;
}
#pfad {
	width:780px;
	margin:0 0 0 0;
	background-color:#FFFFFF;
	padding:0 0 0 10px;
}
#header {
	width:780px;
	height:50px;
	margin:50px 10px 10px 10px;
	background-color:#CCCCCC;
	background-image:url(../images/head.gif);
	padding:10px 10px 10px 10px;
}
#content {
	width:480px;
	margin:50px 10px 10px 10px;
	background-color:#FFFFFF;
	float:left;
	background-image:url(../images/trans_pix.gif);
	padding:10px 10px 10px 10px;
}
#top {
	width:480px;
	margin:50px 10px 10px 10px;
	background-color:#FFFFFF;
	float:left;
	background-image:url(../images/trans_pix.gif);
	padding:10px 10px 10px 10px;
}
#right {
	width:150px;
	margin:50px 10px 10px 10px;
	float:right;
	background-color:#FFFFFF;
	background-image:url(../images/trans_pix.gif);
	padding:10px 10px 10px 10px;
}
#user1 {
	width:150px;
	margin:50px 10px 10px 10px;
	float:right;
	background-color:#FFFFFF;
	padding:10px 10px 10px 10px;
}
#footer{
	width:780px;
	margin:50px 0 0 0;
	background-color:#FFFFFF;
	clear:both;
	padding:10px 10px 10px 10px;
}
#blogleft{
	width:150px;
	margin:50px 10px 10px 10px;
	float:right;
	background-color:#FFFFFF;
	background-image:url(../images/trans_pix.gif);
	padding:10px 10px 10px 10px;
}
#blogright{
	width:150px;
	margin:50px 10px 10px 10px;
	float:right;
	background-color:#FFFFFF;
	background-image:url(../images/trans_pix.gif);
	padding:10px 10px 10px 10px;
}
#contContainer {
	width:780px;
	margin:0 0 0 0;
	background-color:#FFFFFF;
	background-image:url(../images/content_bg.gif);
}
/* ]]> */

/* Links */
a {
	font-size: 11px
	font-family:  Verdana, Arial, Helvetica, sans-serif;
	color: #808080;
	text-decoration: none; }

a:hover {
	color: #ff6600;
	text-decoration: none; }

a:active {
	text-decoration:underline;
	color: #000066; }

/* Table Column */	
td {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333; }	

/* Horizontal Line */	
HR {
	background: #c0c0c0;
	height:2px;
   width:170px;
	border: 1px inset; }


	
/* --Default Class Settings-- */	

.articlehead {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
 	color: #333333 }
	
.button {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: bold;
	font-size: 11px;
	color: #000000;
	border-style: solid;
	border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px } 

.componentHeading {
	font: bold 11px Verdana, Arial, Helvetica, sans-serif;
	color: #333333;
	text-align: left }

.inputbox {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #666666;
	background: #FFFFFF;
	border: 1px solid; }

.newsarticle {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
	text-align: left }	

.newspane {
	background-color : White; }

.newspaneopen {
	border : 0px ridge #DCDCDC; }
	
.poll {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666666;
	line-height: 14px }
	
.popupwindow {
	background-color : #FFFFFF; }
	
.sectiontableentry1 {
	background-color : #FFFFFF; }

.sectiontableentry2 {
	background-color : #EBEBEB; }

.sectiontableheader {
	background-color : #999999;
	color : #FFFFFF;
	font-weight : bold; }
	
.small {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #ff6600;
	text-decoration: none; 
	font-weight: medium }
			
.smalldark {
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 11px; 
	color: #000000; 
	font-weight: normal }

li { list-style: inside url(../images/M_images/arrow.gif) 2px;
	list-style-image: url(../images/M_images/arrow.gif);
}
table.moduletable {
	margin: 0px 0px 0px 0px;
	width: 95%;
	border-left: solid 0px #000000;
	border-right: solid 0px #000000;
	border-top: solid 0px #000000;
	border-bottom: solid 0px #000000;
	}

table.moduletable th {
  font-size        : 11px;
  text-align: left
}


Ps.: Würde auch gerne ein paar Meinungen zum Design etc. hören.


---
Patrick Paulsen
================

http://www.designerkompetenz.de

Diese Nachricht wurde geändert von: patrickpaulsen
  Profil   Website   Editieren   Zitieren

sondermuelli
Quasselstrippe


Beiträge: 369


hm. das layout ist schwer augenkrebsverdächtig. viel zu kontratsreiche 45°-linien wo man hinschaut. das bild im header hingegen gefällt mir gut.

zu dem css:
1. ich verstehe nicht warum du dir die mühe gemacht hast, die layout-struktur mit divs und css zu machen, wenn du dann innerhalb der divs alles mit tabellen zuknallst.
2. das problem mit den wild positionierten "Submenüs und kleinen Blogs auf der rechten Seite" behebst du am besten, indem du die dinger alle ungefloatet in ein umschliessendes div reinsetzt.
3. du hast dich in keinster weise mit dem boxmodell auseinandergesetzt. deshalb wird das layout in allen browsern ausser dem ie zerschossen, weil dieser border- und padding-angaben falsch umsetzt solange er keinen doctype bekommt, der ihn in den standard-modus switcht (und das geht auch erst seit version 6). also musst du entweder versuchen auf padding-right und padding-left angaben zu verzichten (was ich in meinem beispiel getan habe) oder tanteks boxmodel-hack verwenden.



---
wer hilft mir beim geschirr spülen?

  Profil   E-Mail   Website   Editieren   Zitieren

patrickpaulsen
Otto-Normal-Poster


Beiträge: 62


Hallo

zu1.) Weil ich mich einfach mal mit dem Thema auseinander setzen wollte und somit lerne. Die Tabellen innerhalb der Div´s entstehen durch das CMS. Das werde ich aber später bereinigen... hoff ich.

zu2.) Hat geklappt.... Danke

zu3.) Nein, habe ich wirklich nicht. Ich versuche mal eine entsprechende Lösung zu finden und melden mich bei Erfolg oder Mißerfolg nochmal. Danke nochmal...

---
Patrick Paulsen
================

http://www.designerkompetenz.de

  Profil   Website   Editieren   Zitieren
Seite 1 | 2  

Antworten
Nach oben