| von nisita |
kein problem.. bei weiteren fragen.. einfach hier posten...
gute nacht.. |
| von deviance |
vielen Dank für deine Tipps! 
Habe das ganze Ding mal entrümpelt und neu aufgebaut. Das hat mir die Augen geöffnet *g*
Jetzt funktioniert's einwandfrei und ist valide! 
Viele Grüße
deviance |
| von nisita |
hallihallo..
also, wenn du nicht so einen html kauterwelche und css gefrickel gesprichen hättest, wäre dir das problem bestimmt aufgefallen... das problem ist einfach das dem header eine höhe von 106px zugewiesen wurde, und der der body etc noch im header liegen...
und das opera es in deinen augen richtig anzeigt, leigt nur an deinem doctype, da geht opera in einen anderen modus.. nimm da einfach:
1:
2:
3: | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html> |
denn so würde es opera wie der firefox richtig anzeigenm aber halt für dich falsch ;)
desweiteren, soltlest du auf sowas wie bgcolor="#FFFFFF" für den body bereich weglassen, das geht schließlich auch per css..
und zum quellcode nochmal.. versuche da echt die ganzen divs etc ordentlich einzurücken, so hat man auch eine bessere übersicht.. und verwende bitte taps, anstatt haufend leerzeichen... bzw. anstatt dem tab ein leerzeichen, aber nicht wie bei den haufend li's >10 leerzeichen..
viele grüße,
nisita |
| von deviance |
Hi all,
ich möchte ein einfaches tabellenfreies Template erstellen, bei dem sich die Contentbox dynamisch dem Inhalt anpasst. Das Template sollte dabei folgendermaßen aufgebaut sein:
+Header+
+Navigation+
+Content in Contentbox verschachtelt (siehe Code)+
+Footer+
Ich habe es auch soweit schon im IE & Opera zum Laufen bekommen. Nur im Firefox hat sich der Content nicht der Contentbox angepasst. Nach vielen erfolglosen Versuchen habe ich nun folgenden Code zusammengebaselt, bei dem zwar der Inhalt in allen Browsern darbestellt wird, aber das Layout ziemlich zerrissen wird:
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: | <!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>testseite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">@import "style.css";</style>
</head>
<body bgcolor="#FFFFFF">
<div id="page-wrapper">
<div id="container">
<div id="header">
<div id="navtop">
<a href="Startseite.html">Startseite</a> | <a href="Test1.html">Test1</a>
</div>
<!-- ----------------------------- -->
<!-- NAVIGATION END -->
<!-- ----------------------------- -->
<div id="content_bg">
<div id="content">
<p class="bodytext"><img src="fileadmin/template/img/bild.gif" alt="" /><br>
</p> TEXT
<p class="bodytext"><b>TEXT </b></p><ul>
<li>TEXT </li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
</ul>
</div>
<div id="bottom">
</div>
</div>
</div>
</div>
</body>
</html> |
und hier die passende CSS-Datei:
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: |
body {
text-align: center;
}
body, th, td, select, input {
font-family: verdana, sans-serif, helvetica;
font-size: 12px;
}
#page-wrapper {
margin: 20px auto 20px auto;
padding: 0;
width: 800px;
text-align: left;
background: transparent url(img/cont_bg.gif) repeat-y;
}
#container {
width: 800px;
height: 100%;
background: url(img/cont_bg.gif);
margin: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0px;
border: 1px solid #000000;
text-align: left;
}
#header {
width: 800px;
height: 106px;
margin: 0px;
margin-left: 0px;
padding: 0px;
background: url(img/top.jpg) top left no-repeat;
}
#navtop {
width: 800px;
height: 21px;
background-color: #ffffff;
text-align: left;
padding-top: 3px;
padding-left: 37px;
font-size: 12px;
}
#navtop A {
color: #003366;
text-decoration: none;
}
#navtop A:hover {
color: #FF9900;
text-decoration: underline;
}
#navtop a#nav-cur{
color:#FF9900;
}
#content_bg {
margin: 20px auto 20px auto;
padding: 0px;
text-align: left;
width: 100%;
height: 100%;
border: 0px;
#margin: 0px;
#margin-left: 0px;
#margin-right: 0px;
padding: 0px;
}
#content {
position: relative;
width: 720px;
border: 1px solid #000000;
background-color: #ffffff;
margin: 20px;
margin-left: 40px;
padding: 20px;
}
/*#content {
margin: 15px 0px 15px 15px;
/* falsche margin-Werte für alle Versionen des IE Win (inkl. 6.0) */
padding: 0;
width: 480px;
float: left;
}
html>body #content {
/* korrekte Werte für Browser, die nicht unter den IE-Bugs leiden */
margin-top: 30px;
margin-left: 30px;
}
*/
#bottom {
width: 800px;
height: 46px;
border: 0px;
background: url(img/bottom.jpg);
margin: 0px;
margin-left: 0px;
padding: 0px;
}
#bottom_footer {
margin: 0px;
margin-top: 20px;
margin-bottom: 20px;
background-color: #ffffff;
padding: 2px;
color: #404040;
font-family: Tahoma, Sans-Serif, Helvetica;
font-size: 11px;
text-align: center;
}
|
Über Hilfestellungen wäre ich sehr dankbar.
Gruß
deviance.
|
|
