Einzelnen Beitrag anzeigen
  #3 (permalink)  
Alt 02.04.2005, 15:41
sAt. sAt. ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.03.2005
Beiträge: 14
sAt. befindet sich auf einem aufstrebenden Ast
Standard

erstmal danke für die antwort.

habe die platzhalter im untermenü nun rausgenommen und die untermenüs mit 'margin-left' platziert. allerdings war das ja nur ein schönheitsfehler und hängt nicht direkt mit der anordnung der listenelemente zusammen.

habe deshalb noch bisschen mit 'position' der liste herumgespielt und diese mal auf 'relative' gesetzt und durch ein 'float:right' ergänzt. nun werden immerhin schonmal die untermenüpunkte nebeneinander dargestellt. das ganze sieht so aus: http://satdot.com/projekt/test/ie/position/layout1.htm.
kennt jemand eine möglichkeit nun die obermenüelemente wieder nebeneinander zu platzieren und das design im IE wieder zu korrigieren?

CSS:
Code:
html {
	height:100%;
	max-height:100%;
	overflow:hidden;
	padding:0;
	margin:0;
	border:0;
	background:rgb(209,205,193);
	font-size:76%;
	font-family:Verdana,Arial,Helvetica,sans-serif;
	}

body {
	height:100%;
	max-height:100%;
	overflow:hidden;
	padding:0;
	margin:0;
	border:0;
	background:rgb(209,205,193);
	}

#content {
	display:block;
	overflow:auto;
	position:absolute;
	z-index:3;
	top:125px;
	bottom:52px;
	width:750px;
	margin-left:-376px;
	left:50%;
	border-left:1px solid #000;
	border-right:1px solid #000;
	background:#fff;
	}

* html #content {
	top:0;
	bottom:0;
	height:100%;
	width:752px;
	border-top:129px solid #fff;
	border-bottom:50px solid #fff;
	}

#head {
	background-image:url(header.jpg);
	position:absolute;
	margin-left:-376px;
	left:50%;
	top:0;
	width:750px;
	min-width:750px;
	height:125px;
	background-color:lightblue;
	font-size:1em;
	z-index:5;
	border:1px solid #000;
	}

* html #head {
	top:2px; width:752px; height:98px;
	}

* html #space {width:750px; height:25px; padding:0; position:absolute; margin:0; background-image:url(header.jpg); background-repeat:no-repeat; background-position:0% 100%; border-bottom:1px solid black;}

#menu {
	background-image:url(header.jpg);
	position:relative;
	margin-top:75px;
	margin-left:-375px;
	left:50%;
	top:0;
	width:750px;
	height:50px;
	background-color:lightblue;
	background-image:url(header.jpg);
	background-repeat:no-repeat;
	background-position:0% 100%;
	font-size:1em;
	z-index:5;
}

* html #menu {
    width:750px;
	height:50px;
	margin-left:-375px;
	}


#navlist
{
background:lightblue;
height:25px;
border-top:1px solid black;
border-bottom:1px solid black;
margin:0;
padding:0;
margin-top:0px;
}

#navlist ul
{
padding:0;
margin:0;
list-style:none;
}

#navlist li
{
float: left;
margin: 0px;
padding: 0px;
list-style: none;
display:inline;
}

#navlist li a:link, #navlist li a:visited
{
font-size:1em;
font-weight:bold;
color:#000;
text-decoration:none;
text-align:center;
line-height:25px;
height:25px;
display:block;
overflow:hidden;
text-align:center;
width:150px;
}

#navlist li a:hover, #navlist li a:active
{
background:orange;
width:150px;
}

#navlist li:hover ul {left:0;}
#navlist li.msieFix ul {left:0;}

#navlist li ul
{
position:relative;
left:-2000px;
width:100%;
float:right;
}

#navlist ul a:link, #navlist ul a:visited
{
}

#navlist ul a:hover, #navlist ul a:active
{
background:blue;
}


#foot {
	text-align:center;
	position:absolute;
	margin-left:-376px;
	left:50%;
	bottom:0;
	width:750px;
	min-width:750px;
	height:50px;
	background:url(header2.jpg); background-position:0 100px;
	font-size:1em;
	z-index:5;
	border:1px solid #000;
	font-family: trebuchet MS, tahoma, verdana, arial, sans-serif;
	font-weight:bold;
	color:#000;
	}

* html #foot {
	bottom:2px; width:752px; height:48px;
	}


#content p {
	padding:5px; text-align:justify;
	}
.boldhead {
	font-size:1.5em;
	font-weight:bold;
	}
.bold {font-weight:bold;}
.left {float:left; margin:10px; border:1px solid #000;}
.right {float:right; margin:10px; border:1px solid #000;}
.lefttext {float:left; width:300px; text-align:justify;}
.righttext {float:right; width:300px; text-align:justify;}

* html .lefttext {float:left; width:310px; text-align:justify;}
* html .righttext {float:right; width:310px; text-align:justify;}
HTML:
Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" >

   <head>
      <title>Layout 1</title>
      <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />

      
      <style type="text/css" media="screen">
  	  
      </style>
      
	  <link rel="stylesheet" href="msie.css" type="text/css" />
	  
	  <script type="text/javascript">
		<!--
			if(document.styleSheets) document.styleSheets[1].disabled=true
		//-->
	  </script>
	  
	  <script type="text/javascript">
		<!--// Setting the Event Handlers Dinamically
		function swap(){this.className="msieFix"}
		function swapBack(){this.className="trigger"}
		function TJKSetEvents(){
		var l = document.getElementsByTagName("li");
		var lA= l.length;
			for(var i=0;i<lA;i++){
			if(l[i].className=="trigger"){
				l[i].onmouseover=swap;
				l[i].onfocus=swap;
				l[i].onmouseout=swapBack;
				l[i].onblur=swapBack;
				}
			}
		}
		//-->
	  </script>
	  
	  <!--[if IE 5]>
	  <style type="text/css" media="screen">
	  * html #navlist li ul {top:2.2em}
	  * html #navlist li ul li a {line-height:1.4em;height:1.4em}
      </style>
	  <![endif]-->
	  
	</head>

 	<body onload="TJKSetEvents()">
   
	<noscript>
	<!--[if IE 5]>
	<style type="text/css" media="screen">
	* html #navlist li ul {top:0}
	* html #TJKDDM #current ul {top:0}
	* html #navlist ul a:hover {line-height:17px}
	</style>
	<![endif]-->
	</noscript>
   
   	<div id="head">
   	
   	    <div id="menu">
   		
   	    <ul id="navlist">
  			[*]Aktuelles
			<li class="trigger">Ressorts
			    <ul>
			[*]Bildende Kunst
			[*]Literatur
			[*]Musik
			[*]Film
				[/list]			
			[*]Künstler
			[*]Projekte
			<li class="trigger">Information
				<ul style="margin-left:300px;">
			[*]Grundsätze
			[*]Entstehung
			[*]Kontakt</style>
				[/list]			
		[/list]		
		</div>
		


	</div>
   
   	<div id="content">
		

Inhalt
Inhalt
Inhalt
Inhalt
Inhalt
Inhalt
Inhalt
...


	</div>
	
    <div id="foot">
    	Menü
    </div>
	</body>
</html>
Mit Zitat antworten