<li> element mit 2 Links

[mo]

hi!
ich würde gern im folgenden code 2 elemente in das <li> schreiben, also z.b. 2 links.
wenn ich das tue, habe ich automatisch eine neue zeile, ich hätte das aber gerne nebeneinander.

<style>
p, ul, ol {
	margin-bottom: 1.5em;
	line-height: 170%;
	text-align: justify;
}
ul, ol {
	list-style-type:none;
}
//QUICKNAV
#navi, #navi ul { list-style-type:none; padding:0; }
/* Style-Reset */
#navcontainer { height:15px; position:relative; margin-left:42px; filter:alpha(opacity=85);-moz-opacity:.85;opacity:.85; z-index:1 }
#navi { position:absolute; }#navi > li { width:73px; float:left; } /* Horizontale Anordnung */
#navi > li { height:24px; overflow:hidden; } /* Normalzustand eingeklappt */
#navi > li:hover { height:auto; overflow:visible; } /* Ausgeklappt */
#navi a { font-weight:bold; display:block; height:20px; width:150px; padding:2px; font-family:arial,helvetica }
#navi a:link, #navi a:visited { color:#FFF; background:#00377e; text-decoration:none; }
#navi a:active, #navi a:hover { color:#000; background:#a8cff0; text-decoration:none; }
</style>
<div id="navcontainer">
<ul id="navi">
		<li><a href="#">A1</a>
			<ul>
		  		<li><a class="lightwindow" href="doc_quickinfo_show.php?id=153" title="Quickinfo">abc</a> 123</li>
		  		<li><a class="lightwindow" href="doc_quickinfo_show.php?id=153" title="Quickinfo">abc</a> 123</li>
		  		<li><a class="lightwindow" href="doc_quickinfo_show.php?id=153" title="Quickinfo">abc</a> 123</li>
		  		<li><a class="lightwindow" href="doc_quickinfo_show.php?id=153" title="Quickinfo">abc</a> 123</li>
			</ul>
		</li>
  
		<li><a href="#">A2</a>
			<ul>
		  		<li><a class="lightwindow" href="doc_quickinfo_show.php?id=153" title="Quickinfo">abc</a> 123</li>
		  		<li><a class="lightwindow" href="doc_quickinfo_show.php?id=153" title="Quickinfo">abc</a> 123</li>
		  		<li><a class="lightwindow" href="doc_quickinfo_show.php?id=153" title="Quickinfo">abc</a> 123</li>
				<li><a class="lightwindow" href="doc_quickinfo_show.php?id=202" title="Quickinfo">def</a> 123</li>
			</ul>
		</li>
  
  </ul>
</div>

jemand ne idee?

[anna55]

Du meinst, dass abc und 123 nebeneinander stehen?
123 in ein span-Element packen und in den style

#navi li:hover span{ position:relative; top:-23px; left:170px;} 

[mo]

hi,
danke dir.
aber klappt leider nicht, zumindest nicht im safari. da sind dann die oberpunkte untereinander statt nebeneinander.

[anna55]

Hm, Safari hab ich hier nicht, im FF2 und IE7 gehts so. Und wenn Du als Bezeichnung im style nur span schreibst?

[anna55]

Was sagt denn Safari (der im Übrigen Recht hat mit seiner Anzeige) dazu:

#navi li:hover ul li span { display:none; }
#navi li ul li:hover span { display:inline; position:relative; top:-23px; left:170px; }

außerdem noch hier eine Ergänzung

#navi  li:hover { height:auto; overflow:visible; margin-bottom:-27px; } /* Ausgeklappt */

getestet mit IE7, FF2 und Opera9

[mo]

hier mal mein aktueller code

<style>
p, ul, ol {
	margin-bottom: 1.5em;
	line-height: 170%;
	text-align: justify;
}
ul, ol {
	list-style-type:none;
}

//QUICKNAV
#navi, #navi ul { list-style-type:none; padding:0; } /* Style-Reset */

#navcontainer { height:15px; position:relative; margin-left:42px; filter:alpha(opacity=85);-moz-opacity:.85;opacity:.85; z-index:1 }

#navi { position:absolute; }

#navi > li { width:73px; float:left; } /* Horizontale Anordnung */

#navi > li { height:24px; overflow:hidden; } /* Normalzustand eingeklappt */
#navi  li:hover { height:auto; overflow:visible; margin-bottom:-27px; } /* Ausgeklappt */

#navi li:hover ul li span { display:none; }
#navi li ul li:hover span { display:inline; position:relative; top:-23px; left:170px; }

#navi a { font-weight:bold; display:block; height:20px; width:150px; padding:2px; font-family:arial,helvetica }
#navi a:link, #navi a:visited { color:#FFF; background:#00377e; text-decoration:none; }
#navi a:active, #navi a:hover { color:#000; background:#a8cff0; text-decoration:none; }
</style>
<div id="navcontainer">
<ul id="navi">
		<li><a href="#">A1</a>
			<ul>
			  <li><span><a class="lightwindow" href="doc_quickinfo_show.php?id=1">123</a>&nbsp;<a href=""><img src="gfx/info.png" alt="Info" width="16" height="" /></span></li>
			  <li><span><a class="lightwindow" href="doc_quickinfo_show.php?id=191">123</a>&nbsp;<a href=""><img src="gfx/info.png" alt="Info" width="16" height="" /></span></li>
		 	</ul>
		</li>
  
		<li><a href="#">A2</a>
			<ul>
			  <li><span><a class="lightwindow" href="doc_quickinfo_show.php?id=1">123</a>&nbsp;<a href=""><img src="gfx/info.png" alt="Info" width="16" height="" /></span></li>
			  <li><span><a class="lightwindow" href="doc_quickinfo_show.php?id=191">123</a>&nbsp;<a href=""><img src="gfx/info.png" alt="Info" width="16" height="" /></span></li>
		 	</ul>
		</li>
  
  </ul>
</div>

mit dem es aber leider im safari nicht klappt...

[anna55]

Im Markup steht auch noch die class="lieghtwindow", die nicht im style angegeben ist. Vielleicht macht das den Unterschied, denn bei mir im FF2 (unter WIN XP)sieht das Ganze mit dem geposteten Code so aus
hover.jpg

[anna55]

So hab jetzt auch daheim Safari

Wie siehts so bei Dir aus?

<style type="text/css" >
p, ul, ol {
    margin-bottom: 1.5em;
    line-height: 170%;
    text-align: justify;
}
ul, ol {
    list-style-type:none;
}

//QUICKNAV
#navi, #navi ul { list-style-type:none; padding:0; }
/* Style-Reset */
#navcontainer { height:15px; position:relative; margin-left:42px; filter:alpha(opacity=85);-moz-opacity:.85;opacity:.85; z-index:1 }
#navi { position:absolute; }#navi > li { width:77px; float:left; } /* Horizontale Anordnung */
#navi > li { height:24px; overflow:hidden; } /* Normalzustand eingeklappt */
#navi  li:hover { height:auto; overflow:visible; margin-bottom:-23px; } /* Ausgeklappt */
#navi a { font-weight:bold; display:block; height:20px; width:150px; padding:2px; font-family:arial,helvetica }
#navi a:link, #navi a:visited { color:#FFF; background:#00377e; text-decoration:none; }
#navi a:active, #navi a:hover { color:#000; background:#a8cff0; text-decoration:none; }
#navi li:hover ul li span a { display:none; }
#navi li ul li:hover span a { display:block; position:relative; top:-23px; left:154px; }
</style>

<div id="navcontainer">
<ul id="navi">
        <li><a href="#">A1</a>
            <ul>
                  <li><a class="lightwindow" href="doc_quickinfo_show.php?id=153" title="Quickinfo">abc</a> <span><a href=""><img src="gfx/info.png" alt="Info" width="16" height="" /></a></span></li>
                  <li><a class="lightwindow" href="doc_quickinfo_show.php?id=153" title="Quickinfo">abc</a> <span><a href=""><img src="gfx/info.png" alt="Info" width="16" height="" /></a></span></li>
            </ul>
        </li>

        <li><a href="#">A2</a>
            <ul>
                  <li><a class="lightwindow" href="doc_quickinfo_show.php?id=153" title="Quickinfo">abc</a> <span><a href=""><img src="gfx/info.png" alt="Info" width="16" height="" /></a></span></li>
                  <li><a class="lightwindow" href="doc_quickinfo_show.php?id=153" title="Quickinfo">abc</a> <span><a href=""><img src="gfx/info.png" alt="Info" width="16" height="" /></a></span></li>
            </ul>
        </li>

  </ul>
</div> 

[mo]

hm, da gibts probleme mit den anderen styles irgendwie..
alleine funktionierts, dafür danke!
nur sobald ichs in die seite reinsetze, ist wieder alles untereinander.

gibts ein alternatives drop-down menu (meinetwegen auch mit etwa JS)?

[anna55]

Na ja, Menüs gibts wie Sand am Meer. Hab gedacht, dass evtl. die Vorlage von Stu etwas für Dich wäre. Das Problem taucht aber dann wieder auf, wenn ich a und img in den Description-Text setze.

Alternativ kannst Du mir mal nen Link mailen und ich schau mir an, ob man mein Beispiel - eventuell mit ner zusätzlichen Klasse - auf Deine Seite adaptieren kann.