zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Anordnung von Submenüelementen...

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 02.04.2005, 03:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.03.2005
Beiträge: 14
sAt. befindet sich auf einem aufstrebenden Ast
Standard Anordnung von Submenüelementen...

Kurz und bündig:

Das ist die Seite: http://satdot.com/projekt/test/ie/layout1.htm

Im FF werden die Untermenüelemente richtig nebeneinander dargestellt, im IE werden sie untereinander dargestellt.

Kann mir jemand sagen, wie ich es auch im IE schaffe, diese nebeneinander darstellen zu lassen?

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:absolute;
left:-2000px;
width:100%;
}

.space2 {
	display:inline;
	float:left;
	height:25px;
	width:150px;
	}

#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
			[*]<span class="space2"></span>
				[/list]			
			[*]Künstler
			[*]Projekte
			<li class="trigger">Information
				<ul>
				[*]<span class="space2"></span>
				[*]<span class="space2"></span>
			[*]Grundsätze
			[*]Entstehung
			[*]Kontakt</style>
				[/list]			
		[/list]		
		</div>
		


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

Inhalt
Inhalt
Inhalt
Inhalt
Inhalt
Inhalt
Inhalt
Inhalt
...</p>
	</div>
	
    <div id="foot">
    	Menü
    </div>
	</body>
</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.04.2005, 13:30
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Beiträge: 696
wahsaga befindet sich auf einem aufstrebenden Ast
Standard Re: Anordnung von Submenüelementen...

hm, ziemliche suppe, die du da gekocht hast ...

das problem scheint mit der absoluten positionierung zusammenzuhängen, die du benutzt um die unterpunkt-ULs "auszublenden" - sobald ich diese ein-/ausblendung durch veränderte displays ersetze, klappt's (was die horizontale darstellung angeht, die position der unterpunkte stimmt dann natürlich nicht mehr) - zumindest für ressorts, bei information geht's immer noch nicht.

aber generell erscheint mir die struktur überdenkenswürdig -
Code:
<li class="trigger">Information
				<ul>
				[*]<span class="space2"></span>
				[*]<span class="space2"></span>
			[*]Grundsätze
			[*]Entstehung
			[*]Kontakt</style>
				[/list]
- bestensfalls als "suboptimal" zu bezeichnen, oder?
auf die leeren listenelemente zu verzeichten, und stattdessen position oder margin-left oder padding-left zu benutzen, erscheint mir doch um einiges sinnvoller ...
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.04.2005, 15:41
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
  #4 (permalink)  
Alt 02.04.2005, 21:02
Neuer Benutzer
neuer user
 
Registriert seit: 02.04.2005
Beiträge: 1
knister befindet sich auf einem aufstrebenden Ast
Standard

hi,

es gibt eine ganz einfache lösung:

anstatt:

Code:
<ul>[*]Bildende Kunst[*]Literatur[*]Musik[*]Film[*]<span class="space2"></span>[/list]
Code:
<ul>[*]Bildende Kunst[*]Literatur[*]Musik[*]Film[*]<span class="space2"></span>[/list]
also die liste in eine zeile schreiben und schon sollte der bug von ie überrumpelt sein.

gruß knister
Mit Zitat antworten
  #5 (permalink)  
Alt 04.04.2005, 14:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.03.2005
Beiträge: 14
sAt. befindet sich auf einem aufstrebenden Ast
Standard

war das ein verspäteter aprilscherz?
Mit Zitat antworten
  #6 (permalink)  
Alt 04.04.2005, 15:19
Webstandards-Evangelist
neuer user
 
Registriert seit: 25.07.2003
Ort: Mainz
Beiträge: 93
Flocke befindet sich auf einem aufstrebenden Ast
Standard

Ich kann mir gut vorstellen, daß das Problem darin liegt, daß die umfassenden Listenelemente links floaten und die eingebetteten Listenelemente (Submenüs) rechts floaten. Und das ohne jegliches Clearing. Zudem gibt es keine Notwendigkeit dafür.
Also lösch doch mal das clear: right.
Eine funktionierende Navigation findest Du beispielsweise bei Maxdesign. (Wo sonst?) Bekannt ist auch der Kalsey-Ansatz.
__________________
Grüße aus Mainz,

Jens
------------------------------------------------------
[webkrauts.de]
[blog.grochtdreis.de]
Mit Zitat antworten
  #7 (permalink)  
Alt 04.04.2005, 18:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.03.2005
Beiträge: 14
sAt. befindet sich auf einem aufstrebenden Ast
Standard

habs jetzt mit hilfe dieser seite hinbekommen: http://www.tjkdesign.com/articles/dropdown/demo.asp

trotzdem danke für alle antworten!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Frage zur Anordnung von div´s blamaster CSS 2 11.05.2011 14:38
Probleme DIV Höhe, Anordnung kran CSS 4 07.11.2010 11:23
Bildergallerie - Anordnung reeky CSS 3 08.08.2010 14:00
Gleichmäßige, browserübergreifende Thumbnail Anordnung Lizzylein CSS 10 15.01.2010 20:31
css dropdown navi mit js -- Probleme mit Anordnung d. Listen Nars CSS 3 15.03.2008 20:24


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:37 Uhr.