CSS Problem

Dennis0

Hallo,

ich habe ein kleines Problem, wo ich nciht mehr weiter weis.

Der Text geht über die ganzen DIV-Container hinaus:

[attach]32456[/attach]

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

DrPCox

nimm die height angabe mal komplett raus. block-elemente sollten sich eigentlich immer auf die nötige höhe "zurecht-stutzen".

alternativ kannst du dich mal mit "overflow" auseinandersetzen.

Dennis0

Overflow ist ja das mit dem scrollen?

Das wollte ich eigentlich nicht, möchte, das die gesamte Siete größer wird.

Gruß Dennis

edit: Jetzt geht es, aber es geht über den footer hinaus:

[attach]32457[/attach]

Dizzy.w3

Zeig mal den HTML-Code.

Dennis0

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>

Dizzy.w3

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>

Forensoftware: Burning Board, entwickelt von WoltLab GmbH