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

<li> element mit 2 Links

mo

mo

Administrator
Teammitglied
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.
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; } /* 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?
 
Du meinst, dass abc und 123 nebeneinander stehen?
123 in ein span-Element packen und in den style
PHP: 
#navi li:hover span{ position:relative; top:-23px; left:170px;}
 
hi,
danke dir.
aber klappt leider nicht, zumindest nicht im safari. da sind dann die oberpunkte untereinander statt nebeneinander.
 
Hm, Safari hab ich hier nicht, im FF2 und IE7 gehts so. Und wenn Du als Bezeichnung im style nur span schreibst?
 
Was sagt denn Safari (der im Übrigen Recht hat mit seiner Anzeige) dazu:
Code: 
#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
Code: 
#navi  li:hover { height:auto; overflow:visible; [COLOR="red"]margin-bottom:-27px;[/COLOR] } /* Ausgeklappt */

getestet mit IE7, FF2 und Opera9
 
hier mal mein aktueller code
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> <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> <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> <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> <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...
 
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
 
So hab jetzt auch daheim Safari ;)

Wie siehts so bei Dir aus?
PHP: 
<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>
 
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)?
 
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.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben