css templates

Status
Nicht offen für weitere Antworten.
H

heikovogl

Grünschnabel
Hallo!

Ich hab ein Problem mit einem CSS-Template. Das Tempalte soll eine variable Höhe haben. Leider macht die Vorlage nur eine Spalte auf und nicht alle vier Spalten die im Template vorgesehn sind.

danke für eure hilfe

index.htm

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
	<title>Pädagogische Hochschule Steiermark</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>


<body>
<center>

<div align="center" id="container">
	<div id="banner" >
		<div id="topmenu" >
		| <a href="#">TOP 1</a> | <a href="#">TOP 2</a> | <a href="#">TOP 3</a> | <a href="#">TOP 4</a> |
		</div>
		<div id="mainmenu" >
		| <a href="#">TOP 1</a> | <a href="#">TOP 2</a> | <a href="#">TOP 3</a> | <a href="#">TOP 4</a> |
		</div>
	</div>
	<div id="content_container">
		<div id="submenu">
		submain<BR/>submain<BR/>submain<BR/>submain<BR/>submain<BR/>submain<BR/>submain<BR/>submain<BR/>submain<BR/>
		</div>
		<div id="content_l">
		content_l
		</div>
		<div id="content_m">
		content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>content_m<br/>
		</div>	
		</div>
		<div id="content_r">
		content_r
		</div>						
	</div>
<div>
</center>
</body>

style.css
Code: 
/* Allgmeine Definitonen für den Stylesheet */
body {
 	background-color: #FFFFFF; 
	color:#000000;
	font: 10px Verdana, Arial;
	margin-left:0;
	margin-top:0;
	margin-bottom:0;
	marginwidth:0;
	marginheight:0
	}
td 	{
 	font: 10px Verdana,Arial; 
	text-align:left; 
	color:#000000;
	}
h1 	{
 	font: bold Tahoma
	}
h2 	{
 	font: bold Tahoma
	}
h3 	{
 	font: bold Tahoma
	}

A:link { color: #FFFFFF}
A:visited { color: #FFFFFF}
A:active { color: #FFFFFF}
A:hover { color: #CCCCCC}

#container
	{
	border: 10px solid black;
	width: 779px;
	text-align: left;
	background-color: #FFFFFF;
	}
/* Banner mit topmenue und hmainmenu */
	#banner
		{
		height:167px;
		background-image:url('../images/banner.png');
		background-repeat: no-repeat;
		background-position: 0 0;
		position: relative;
		}
	#topmenu
		{
		height:30px; width:613px; 
		margin-top:10px;
		margin-right:10px;
		float:right;
		text-align:right;
		color: #FFFFFF;
		}
			#topmenu a
				{
				color: #FFFFFF; 
				font: 10px Vedana, Arial;
				text-decoration:none;
				}
	
			#topmenu a:hover
				{
				color: #FFFFFF; 
				font: 10px Vedana, Arial;
				text-decoration:underline;
				}
	#mainmenu
		{
		height:20px; width:613px;
		margin-top:105px;
		margin-right:10px; 
		float:right;
		text-align:right;
		font: bold 12px Vedana, Arial;
		/* border: 1px solid black; */
		}
		#mainmenu a
			{
			color: #000000;
			text-decoration:none;
			}
		#mainmenu a:hover
			{
			/* color: #DC9E00; */
			color: #ffffff;
			text-decoration:underline;
			}
		#mainmenu a:active
			{
			/* color: #DC9E00; */
			color: #ffffff;
			text-decoration:underline;
			}
	/* content_container */
	#content_container
		{	
		}
		#submenu
			{
			background-color:#ffffff;
			width:166px;
			float:left;
			/* padding:30px 0px 0px 0px; */
			border: 1px solid black;
			height: 1em;
			}
		#content_l
			{
			background-color:#ffffff;
			width:100px;
			float:left;
			/* padding:30px 0px 0px 0px; */
			border: 1px solid black;

			}		
		#content_m
			{
			background-color:#ffffff;
			width:250px;
			float:left;
			/* padding:30px 0px 0px 0px; */
			border: 1px solid black;

			}
		#content_r
			{
			background-color:#FFDDDD;
			border: 1px solid black;

			}
 
Hi,

die Floatumgebung muss zum Abschluss noch "gecleart" werden, damit die umschliessende Box die vollständige Höhe annimmt:

Code: 
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
Die Klasse clearfix wird zusätzlich im DIV container aufgerufen:

Code: 
<div align="center" id="container" class="clearfix">...</div>
 
servus michael!

danke für deinen tipp! der container macht jetzt auf. wie schaffe ich es nun das <div id="submenu" , <div id="content_l">, <div id="content_r"> gleich hoch geöffnet wreden.

LG heiko
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück