 CSS Problem |
Dennis0 
Mitglied
Dabei seit: 15.06.07
Beiträge: 169
Fähigkeiten: WBB3 Fortgeschritten; WBB2 Fortgeschritten
Herkunft: Backnang (nähe Stuttgart)
Forenversion: 3.0; 2.3
 |
|
Hallo,
ich habe ein kleines Problem, wo ich nciht mehr weiter weis.
Der Text geht über die ganzen DIV-Container hinaus:
| Dateianhang: |
 hp.png (38 KB, 114 mal heruntergeladen)
|
| 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:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
|
@charset "utf-8";
/* CSS Document */
body {
background-color:#6a89ac;
}
#content_behind {
background-color:#FFF;
position:absolute;
width:auto;
min-height:90%;
height:auto;
top:5%;
left:5%;
right:5%;
-moz-border-radius:30px;
-khtml-border-radius:30px;
}
#content {
position:absolute;
top:177px;
left:1%;
right:1%;
bottom:31px;
height:auto;
width:auto;
}
#header {
-moz-border-radius-topleft:30px;
-moz-border-radius-topright:30px;
-khtml-border-radius-topleft:30px;
-khtml-border-radius-topright:30px;
background-color:#4f6b8d;
position:absolute;
top:0%;
left:0%;
height:150px;
width:100%;
}
#navigation {
position:absolute;
width:100%;
height:26px;
background-color:#1e395a;
top:150px;
left:0px;
}
#footer {
background-color:#4f6b8d;
-moz-border-radius-bottomleft:30px;
-moz-border-radius-bottomright:30px;
-khtml-border-radius-bottomleft:30px;
-khtml-border-radius-bottomright:30px;
position:absolute;
bottom:0%;
height:30px;
width:100%;
} |
|
Ich habe high auf auto, ghet aber trotzdem nicht!
Danke!
Gruß Dennis
|
|
27.12.09 10:38 |
E-Mail
Finden
Als Freund hinzufügen
|
|
Dennis0
Mitglied
Dabei seit: 15.06.07
Beiträge: 169
Fähigkeiten: WBB3 Fortgeschritten; WBB2 Fortgeschritten
Herkunft: Backnang (nähe Stuttgart)
Forenversion: 3.0; 2.3
Themenstarter 
|
|
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="design/design.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="content_behind">
<div id="header"><center><img src="design/images/logo.png" width="736" height="150" /></center></div>
<div id="navigation"></div>
<div id="footer"><center><strong></strong></center></div>
</div>
</body>
</html> |
|
|
|
|
27.12.09 19:23 |
E-Mail
Finden
Als Freund hinzufügen
|
|
Dizzy.w3
Brain Damage
Dabei seit: 18.07.07
Beiträge: 1.431
Herkunft: Österreich
Forenversion: 3.0
|
|
Hm,
also, 1 Problem ist, dass absolute Divs bei Bedarf nicht expandieren. Die Faustregel hier ist, dass du so wenig wie moeglich positionierst, und wenn, dann relativ.
Ich hab dir ein Beispiel angehaengt, in dem gaenzlich auf Positionierung verzichtet wurde. - Die Divs expandieren, sind aber immernoch zentriert.
| 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:
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:
|
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
body, html
{
background-color:#6a89ac;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
vertical-align: middle;
padding: 0 auto;
margin: 0 auto;
color: #FFF;
}
#global, #header, #navi, #content, #footer
{
width: 900px;
}
#global
{
margin: 0 auto;
text-align: left;
}
#header
{
background: #69F;
height: 150px;
}
#navi
{
background: #6CF;
height: 35px;
text-align: center;
}
#navi ul, #navi li
{
list-style: none;
list-style-type: none;
margin: 0;
padding: 0;
padding-top: 3px;
padding-left: 25px;
padding-right: 25px;
}
#navi li
{
display: inline;
}
#navi a
{
color: #000;
font-size: 20px;
}
#content
{
background: #69F;
padding: 10px;
width: 880px;
}
#content h1
{
font-size: 24px;
color: #666;
}
#footer
{
background: #6CF;
height: 35px;
}
</style>
</head>
<body>
<div id="global">
<div id="header">
</div>
<div id="navi">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>
<div id="content">
<h1>Header</h1>
<p>BlindtextBlindtextBlindtextBlindtext<br />BlindtextBlindtext</p>
<p>BlindtextBlindtextBlindtextBlindtext<br />BlindtextBlindtext</p>
<p>BlindtextBlindtextBlindtextBlindtext<br />BlindtextBlindtext</p>
<p>BlindtextBlindtextBlindtextBlindtext<br />BlindtextBlindtext</p>
<p>BlindtextBlindtextBlindtextBlindtext<br />BlindtextBlindtext</p>
<p>BlindtextBlindtextBlindtextBlindtext<br />BlindtextBlindtext</p>
<p>BlindtextBlindtextBlindtextBlindtext<br />BlindtextBlindtext</p>
</div>
<div id="footer">
</div>
</div>
</body>
</html> |
|
__________________
Gruß Dizzy
the rest is silence
|
|
|
27.12.09 21:27 |
E-Mail
Finden
Als Freund hinzufügen
|
|
|
