• 28.04.2024, 16:10
  • Registrieren
  • Anmelden

  • Sie sind nicht angemeldet.

 

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

Lieber Besucher, herzlich willkommen bei: Aqua Computer Forum. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

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