• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

CSS Layout

Sambuco

New member
Hallo,

ich habe ein Problem wofür ich keine Browser unabhängige Lösung finde. Im Prinzip ist es einfach:

Es gibt einen header (div), der über die ganze Breite der Seite geht und Randlos links, oben und rechts anliegt und eine feste Höhe hat, genau so einen Footer (div), bei der sein 100px hoch.
Dazwischen möchte ich einen div Kontainer positionieren, der immer genau 10px Abstand vom Header und Footer hat und vertikal scrollt, wenn zu viel Inhalt da ist. Das Browserfenster an sich soll nie Scrollbalken darstellen...

Dieser Code funktioniert im Firefox, aber nicht im IE. Im IE lässt sich der div content nicht scrollen. Außerdem hat der div content keine Höhe, wenn ich dort div container hineinsetze.

Code:
#header {id: header;
	position: absolute;
	width: 105%;
	height: 100px;
	z-index: 6;
	left: 0px;
	top: 0px;
	background-image: url(pics/header-filmservice.jpg);
	background-repeat: repeat-x;
	background-attachment: fixed
	}
#logo {id: logo;
	position: absolute;
	width: auto;
	height: auto;
	top: 0px;
	right: 0px;
	z-index: 6;
	}
#navi {id: navi;
	position: absolute;
	width: 80%;
	height: auto;
	z-index: 7;
	left: 8px;
	top: 39px;
	text-decoration: none;
	font: 10pt Verdana;
	font-weight: bold
	}
#footer {id: footer;
	position: absolute; top: auto;
	width: 105%;
	height: 100px;
	z-index: 6;
	left: 0px;
	bottom: -1px;
	background-image: url(pics/footer-filmservice.jpg);
	background-attachment: fixed;
	background-position: bottom;
	}
#content {id: content;
	padding: 1px;
	width: 99%;
	overflow: auto;
	position: absolute;
	height: auto;
	top: 110px;
	bottom: 110px;
	z-index: 2;
	height: auto;
	font: 8pt Verdana;
	color: #C0C0C0;
	}

Hat jemand eine Idee?

Danke
Sambuco
 
Ok, hier nochmal:

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" xml:lang="de"> 
<head>
<title>Filmservice</title>
<style type="text/css">
 /*<![CDATA[*/ 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//en"

body {
	overflow-x:hidden;
	background: #000000;
	font: 8pt Verdana; 
	color: #C0C0C0; 
	margin: 2px;
	}
html {
	overflow-x:hidden;
	overflow-y:hidden;
	}
p { 
	font: 8pt Verdana;
	color: #C0C0C0;
	margin-top: 2px;
	margin-bottom: 2px; 
	text-align: justify
	}
h3 { 
	font: 11pt Verdana;
	font-weight: bold;
	letter-spacing: 1px;
	margin-top: 5px; 
	margin-bottom: 5px; 
	color: #D2B48C;
	text-align: left;
	}
h4	{
	font: 8pt Verdana;
	color: #C0C0C0;
	margin-top: 2px;
	margin-bottom: 12px; 
	text-align: left;
	}
b	{
	font: 8pt Verdana;
	font-weight: bold;
	color: #C0C0C0;
	margin-top: 2px;
	margin-bottom: 2px; 
	text-align: justify
	}
a:link { 
	text-decoration: none; 
	color: #D2B48C
	}
a:visited { 
	text-decoration: none; 
	color: #D2B48C
	}
a:hover, a:active { 
	color: #D2B48C
	}
#header {
	position: absolute;
	width: 105%;
	height: 100px;
	z-index: 6;
	left: 0px;
	top: 0px;
	background-image: url(pics/header-filmservice.jpg);
	background-repeat: repeat-x;
	background-attachment: fixed
	}
#logo {
	position: absolute;
	width: auto;
	height: auto;
	top: 0px;
	right: 0px;
	z-index: 6;
	}
#navi {
	position: absolute;
	width: 80%;
	height: auto;
	z-index: 7;
	left: 8px;
	top: 39px;
	text-decoration: none;
	font: 10pt Verdana;
	font-weight: bold
	}
#footer {
	position: absolute;
	width: 105%;
	height: 100px;
	z-index: 6;
	left: 0px;
	bottom: -1px;
	background-image: url(pics/footer-filmservice.jpg);
	background-attachment: fixed;
	background-position: bottom;
	}
#content {
	position: absolute;
	overflow: auto;
	padding: 1px;
	width: 99%;
	height: auto;
	top: 110px;
	bottom: 110px;
	z-index: 2;
	height: auto;
	font: 8pt Verdana;
	color: #C0C0C0;
	}

 /*]]>*/ 
</style> 
</head> 

<body bgcolor="#000000">
<div id="navi">
	<table border="0" width="100%" height="50" id="table15">
		<tr>
			<td>
			<a href="../index.htm">HOME</a></td>
		</tr>
	</table>
</div>
<div id="footer">
</div>
<div id="header">
</div>

<div id="content">

<center>
<table border="0" cellspacing="8" id="table4">
  <tr>
    <td>
    <h3>Filmservice für München</h3>
    <p>
    Neben Musik zählt für uns das Kino zu den wichtigsten Dingen im Leben. Deswegen betreut  
    verschiedene Filmtheater in München <b>-</b>als fester Partner der Gasteig 
    München GmbH und der Pinakothek der Moderne. Wir übernehmen in 
    Zusammenarbeit mit <a target="_blank" href="http://www.nightfrog.com">NIGHTFROG</a> als 
    technischer Dienstleister die Abwicklung sämtlicher Projektionsdienste im 
    Haus. 35mm, 16mm, Video und Dia. Natürlich auch im Rahmen des 
    Internationalen Münchner Filmfestes...
    </p>
    <br>
    <p>Nehmen Sie Kontakt zu uns 
    auf: </a></td>
    <td> </td>
    <td><img border="0" src="pics/cinema_pegasus.jpg" width="307" height="230"></td>
  </tr>
</table>
</center>
<center>
<table border="0" cellspacing="3" id="table5">
  <tr>
    <td><a target="_blank" href="http://www.gasteig.de">
    <img border="0" src="pics/logo-gasteig.gif" width="102" height="53"></a></td>
    <td> </td>
    <td>
    <p>
    Betreut von Carl Amadeus Hiller und Henning Hoffmann-Heyden arbeitet ein Team aus erfahrenen 
    Vorführern, um an Kinoton Projektoren und verschiedenen Videoprojektoren 
    neuester Bauart für immer brillianten Ton und scharfe Bilder zu sorgen.
    </p>
    </td>
  </tr>
</table>
</center>
<div align="center">
<table border="0" cellspacing="4" id="table6">
  <tr>
    <td>
    <p>
    Neben dem Internationalen 
    Münchner Filmfest zählen der Fernsehsender arte, die Stadtbibliothek, die 
    Volkshochschule München sowie verschiedene ausländische Kulturvereine zu den 
    festen Kunden der Gasteig München GmbH und der Pinakothek der Moderne. Sie 
    alle können sich auf die zuverlässige Abwicklung der Filmvorführungen durch 
    den Projektionsservice von Pegasus51 verlassen.
    </p>
    </td>
    <td><a target="_blank" href="http://www.pinakothek.de/pinakothek-der-moderne/">
    <img border="0" src="pics/logo-pinakothek.gif" width="141" height="66"></a></td>
  </tr>
</table>

</div>

</div>


</body> 
</html>
 
Zuletzt bearbeitet:
Ich ahne, was Du erreichen möchtest.
Das ist aber nicht ganz trivial, wie Du auch schon selber richtig erkannt hast.
Leider gibt es zu viele Abweichungen in den verschiedenen Browsern, hauptsächlich ist allerdings der IE das Sorgenkind...
Eventuell kann man für den IE etwas via body{width:100%;height:100%;} machen.
Ansonsten sollte man css-basierte Layouts das tun lassen, wofür sie am Besten geeignet sind, nämlich die Inhalte 'fliessen' lassen...
Ich will jetzt wirklich nicht überheblich rüberkommen, aber beseitige erstmal Deine Fehler, welche nicht xhtml-konform sind.
 
Zurück
Oben