✔ Menü Links,Rechts,Oben und Unten

Status
Nicht offen für weitere Antworten.
N

Nob

Mitglied
Hallo zusammen

Ich versuche schon seit längerer Zeit diese 2 Layouts so zu entwerfen, dass sie im Mozilla und im IE funktionieren - leider ohne Erfolg.
Beide Layouts sind 100% in der Höhe und Breite.

Kann mir da jemand helfen?

Besten Dank
 

Anhänge

  • 26715attachment.jpg
    26715attachment.jpg
    20,1 KB · Aufrufe: 257
Wie sieht denn der bisherige Quellcode (HTML + CSS) der Seite aus, und was funktioniert in welchem der beiden Browsern nicht wie gewünscht?
 
Hallo, danke für deine Antwort.

Ich habe es nun mit Iframes gelöst, leider ein bisschen unschön (vorallem auch für mein PHP-Skript) aber immerhin funktioniert es auf jedem Browser.

Hier ist mein Ansatz mit Divs:

HTML: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title></title>
	<style type="text/css">
		body
		{ 
			position:absolute;
			background:#ffffff;
		}
		html, body
		{ 
			top:0; left:0; right:0;
			min-height:100%;
			margin:0;
			padding:0;
			width:100%;
		}
		#contHeader 
		{
			position:fixed;
			top:0; left:0; right:0;
			text-align:center;
			margin:0;
			height:3em;
			z-index:3;
		}

		#header 
		{
			position:absolute;
			top:0; left:0; right:0; bottom:0;
			height:100%;
			background:#efefef;
			z-index:3;
			margin:0;
			padding:0.2em;
		}
		#menu
		{
			position:fixed;
			top:0; bottom:0; left:0; right:0;
			width:9em;
			border: 3px dotted #dedede;
			padding:0em;
			padding-top:4.85em;
			margin:0;
		}
		#content
		{
			margin:0;
			padding-top:4.85em;
			padding-left:12em;
			padding-bottom:3em;
			z-index:2;
		}
		#contTop
		{
			margin:0;
			padding-top:4.85em;
			padding-left:12em;
			z-index:2;
			border-bottom:1px solid #FF0;
		}
		#contBottom
		{
		/*
			margin-top:4.85em;
			padding-top:4.85em;
			*/
			padding-left:12em;
			
			/*
			padding-bottom:3em;
			*/
			z-index:2;
			border-top:1px solid #F00;
		}
		#contFooter
		{
			position:fixed;
			bottom:0; left:0; right:0;
			text-align:center;
			margin:0;
			height:2em;
			z-index:3;
		}
		#footer 
		{
			position:absolute;
			top:0; left:0; right:0; bottom:0;
			background:#efefef;
			z-index:3;
		}
		
		/* Nun für den MSIE */
		* html, * html body 
		{
			overflow:hidden;
			bottom:0;
			height:100%;
		}
		* html #contHeader, * html #contFooter
		{
			position:absolute;
			width:100%;
			padding-right:16px;
		}
		* html #menu
		{
			height:100%;
			position:absolute;
		}
		* html #header,* html #footer
		{
			height:100%;
			position:static;
		}
		* html #content 
		{
			position:absolute;
			top:0; bottom:0; left:0; right:0;
			height:100%;
			width:100%;
			margin:0;
		}
		* html #contTop 
		{
			position:absolute;
			top:0; bottom:0; left:0; right:0;
			height:50%;
			width:100%;
			overflow:auto;
			margin:0;
		}
		* html #contBottom 
		{
			position:absolute;
			top:50%; bottom:0; left:0; right:0;
			height:50%;
			width:100%;
			overflow:auto;
			margin:0;
		}
		
		#menu li
		{
			list-style: none;
			margin:0;
			padding:0.3em;
		}
		#menu li#active
		{
			padding:0.5em;
			text-decoration:underline;
		}
		#menu a:link, #menu a:visited
		{
			display:block;
			background:#eeeeee;
			color:black;
			text-decoration:none;
			margin:0;
			padding:0.2em;;
		}
		#menu a:hover
		{
			background:#4f4f4f;
			color:#ffffff;
			text-decoration:underline;
		}
		* html #menu
		{
			margin:0;
			width:10.5em;  
		}
	</style>
</head>
<body>
	<div id="contHeader">
		<h1 id="header"></h1>
	</div>
	<ul id="menu">
		<li><a href="">Test</a></li>
	</ul>
	<div id="contTop"></div>
	<div id="contBottom"></div>
	<div id="contFooter">
		<div id="footer"></div>
	</div>
</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück