Einzelnen Beitrag anzeigen
  #6 (permalink)  
Alt 27.07.2006, 11:05
Skeeve Skeeve ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.07.2006
Ort: Berlin
Beiträge: 21
Skeeve befindet sich auf einem aufstrebenden Ast
Standard Wie macht man 100% minus 220px?

Edit:

Habs hinbekommen. FF und IE6.0 zeigen alles so an wie ich das möchte. Jetzt installiere ich gerade ein paar VMs, um Betriebssysteme und Browservarianten zu checken.

Hier der Code, falls jemand ein ähnliches Layout braucht (habs noch nicht schöngeräumt)

Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>CSS Layout</title>
	<link rel="stylesheet" media="all" type="text/css" href="style.css" />
	<link rel="stylesheet" media="all" type="text/css" href="navi.css" />	
</head>
<body>
	
	<!-- Rahmen um den Content -->
	<div id="contentframe">
	
	<!-- Anfang des Contentbereichs -->
	<div class="content">
		<h1>Topic</h1>
		<p>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Praesent in turpis eu tortor viverra laoreet. Donec faucibus tristique magna. Suspendisse vel arcu ac arcu lacinia vestibulum. Fusce tempus ligula ut nisl. Sed porttitor vulputate elit. Fusce porta, est in porttitor viverra, nisl mi posuere lacus, sit amet posuere odio nibh at leo. Integer nisl enim, venenatis in, nonummy ut, ullamcorper ac, diam. Aenean ultrices, tortor at mollis dapibus, nisi turpis fringilla erat, non iaculis lorem risus vitae lacus. Etiam mi lorem, scelerisque et, scelerisque nec, dapibus consequat, ante. Donec iaculis sodales leo. Aliquam feugiat. Sed sed mi et turpis pulvinar fringilla. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vitae nulla a est aliquam.
		</p>
	</div>
	<!-- Ende des Contentbereichs -->

	</div>
	<!-- Ende des Contentframes -->
	
	<!-- Navigation -->
	<div class="navi">
		<img src="header_klein.gif" alt="Header" />
		<ul>
			<li><a href="index2.html" target="_self">Link 1</a></li>
			<li><a href="index2.html" target="_self">Link 2</a>
				<ul class="subnavi">
					<li><a href="index.html" target="_self">Link 2.1</a></li>
					<li>
						<a href="index.html" target="_self">Link 2.2</a>
						<ul>
							<li><a href="index.html" target="_self">Link 2.2.1</a></li>
							<li><a href="index.html" target="_self">Link 2.2.2</a></li>
							<li><a href="index.html" target="_self">Link 2.2.3</a></li>
						</ul>														
					</li>
					<li><a href="index.html" target="_self">Link 2.3</a></li>
				</ul>
			</li>
			<li><a href="index.html" target="_self">Link 3</a></li>
			<li><a href="index.html" target="_self">Link 4</a></li>
			<li><a href="index.html" target="_self">Link 5</a></li>
			<li><a href="index.html" target="_self">Link 6</a></li>
			<li><a href="index.html" target="_self">Link 7</a></li>
			<li><a href="index.html" target="_self">Link 8</a></li>
		</ul>			
	</div>
	<!-- Ende der Navigation -->
	
	<!-- Bannerbereich: Topnavigation etc -->
	<div class="head">
		<div class="logo">
			<img src="logo.gif" width="210" height="65" alt="Logo" />
		</div>
		<ul class="topnavi">
			<li><a href="index.html">Link 1</a></li>			
			<li><a href="index.html">Link 2</a></li>
			<li><a href="index.html">Link 3</a></li>
			<li><a href="index.html">Link 4</a></li>
			<li><a href="index.html">Link 5</a></li>
			<li><a href="index.html">Link 6</a></li>
		</ul>
	</div>
	<!-- Ende des Bannerbereichs -->	
</body>
</html>
Code:
body{ 
   max-height:100%; width: auto;
   background: #fff url(lightblue.gif) repeat-y 0 0;   
   color: #000;
   font-size: 100.01%;
   font-family:Verdana,Arial,Geneva,sans-serif; 
   margin: 0px; padding: 0px;
   overflow: hidden;    
   }

.head{ 
   position:absolute; top:0px; left:0px;
   margin: 0px; padding: 0px;
   width: 100%; height: 90px;
   background-image: url(header.gif); 
   display:block;
   }

#contentframe{
   position:fixed; top: 90px; left:0; right: 0px; bottom: 0px;
   margin: 0; padding-left: 220px;
   overflow:auto;
}


  
.content{ 
   width: 480px;
   margin: 0;
   padding:40px 50px 200px 50px; 
/*   padding: 0px; padding-left:50px; padding-right:50px; padding-top: 40px; */
   background-color: #cccccc;
}

						
.content p{	
   font-family:Verdana,Geneva,Arial,sans-serif; 
   font-size:11px; 
   color: #000000; 
   line-height: 18px	
}
						
.content h1{	
   font-size:14px; color: #3f4c59; font-weight: bold; line-height: 16px	
}


.logo{
   position:absolute; top:12px; left:12px;
   margin:0px; padding: 0px;
}

.navi{
   position:absolute; top: 90px; bottom: 0px;
   width: 220px;
   margin: 0px;  
   background-color: #d9e6f3; 
   font-family:Arial,Verdana,Geneva,sans-serif; 
}

/*
######################
ie hacks
######################
*/
/* Contentbereich erst bei 90 Pixeln von oben starten lassen */
* html body {
  padding:90px 0 0 0; 
  }

/* Contenframebox auf 100% bringen da die innere Box die Contentframbox auf über 100% dehnt und kein overflow zustande kommt */
* html #contentframe {
   height: 100%;
   }
   
* html .content {
   height: 100%;
   width: 580px;
   }
   
   
/*
######################
Hacks Ende
######################
*/
Danke für die Unterstützung!

Geändert von Skeeve (27.07.2006 um 15:25 Uhr)
Mit Zitat antworten