• 27.04.2024, 21:24
  • Registrieren
  • Anmelden

  • Sie sind nicht angemeldet.

 

HTML / CSS - Innere Div höher wie äußere Div

Man_In_Blue

Moderator

Beiträge: 22 707

HTML / CSS - Innere Div höher wie äußere Div

Samstag, 1. September 2012, 22:13

Hi,

ich hab hier mal wieder etwas Div-Salat...

und zwar hab ich ein HTML Designe das aus mehreren ineinander verschatelten Divd besteht...

Nun ist es so, das die äußeren Divs auf einmal die Höhe der inneren Div ignorieren, das Designe zerreist daduch.

HTML

Quellcode

 
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

<%@page import="beans.MenuBean"%>
<%@page import="beans.ContentBean"%>

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

  <link href="../css/template.css" rel="stylesheet" type="text/css"/>



</head>

<body>

<jsp:useBean id="menu" class="beans.MenuBean" scope="session" />
<jsp:useBean id="content"  class="beans.ContentBean" scope="session" />
<div id="body_box">


  <div id="head_box">
  </div>
  
	
 
  <div id="main_box">
  		<img src="../jpg/space.jpg"></img>
  		<div id="menu_box"><br />
  		<jsp:getProperty name="menu" property="htmlMenu" />
  		</div>
  		
  		
		
		<div id="spacer">
		</div>
		<div id="content_box">
		<br /> <br />
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
		Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
 		</div>
	</div>
 
   <div id="bottom_box">
   <center><a href="LogoutAppl.jsp">Logout</a></center>
  </div>

</div>


</body>
</html>


Den JSP Kram könnter einfach ignorieren... funktional tut alles was es soll...

die ensprechenden ausschnitte aus der CSS

Quellcode

 
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

body { font-size: 14px;
	font-family: Helvetica,Arial,sans-serif;
	background-color: #ffffff;
	padding: 0px;
	margin: 0px;
	text-align: center;
	}



  #body_box {
  border: 0px;
  width: 100%;
  text-align: center;
  padding: 0px;
  }


  #main_box {
  border: 0px;
  text-align: center;
  padding: 0px;
  width: 1000px;
  float: center;
  height: 100%;
  margin: auto;
  background-image: url(../jpg/mid.jpg);
  background-repeat:repeat-y;
  }

  #head_box {
  height: 110px;
  border: 0px;
  width: 1000px;
  text-align: center;
  padding: 0px;
  background-image: url(../jpg/top.jpg);
  float: none;
	margin:auto;
  }

spacer
{
	float: right;
	width: 730px:
}


  #content_box {
  width: 700px;
  height: 100%;
  float: left;
  margin-left: 20px;
  font-size:14px;
  }



Änder ich in der Content_Box den Wert "float" so stimmt es zwar nun wieder, das die äußere Div sich um die inneren spannt, aber dann wird diese Div unter dem Menü angeordnet und das ist auch quatsch...

Vielleicht sieht ja jemand den Fehler, ich habe da gerade ein Brett vorm Kopf.

Sören
A sinking ship is still a ship!

Man_In_Blue

Moderator

Beiträge: 22 707

Sonntag, 2. September 2012, 13:13

Problem mit overflow gelöst...
A sinking ship is still a ship!

Ähnliche Themen