Text verschiebt sich

tobee · 15. April 2008

Ich habe ein Menü mit CSS und JavaScript erstellt.
Leider verschiebt sich der Menüpunkt Bearbeiten wenn ich auf Datei klicke.

HTML:

<?php
echo "<?xml version=\"1.0\" encoding=\"ISO-8859-1\" ?>";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>

	<title>database</title>
	
	<style type="text/css">
	*	{
		font:12px verdana;
		padding:0;
		margin:0;
	}
	
	#menu	{
		list-style-type:none;
		background:#d4d0c8;
		width:100%;
		height:26px;
	}
	
	.menu	{
		float:left;
		padding:2px;
	}
	
	.menu_head	{
		padding:4px;		
	}
	
	.menu_content	{
		border:1px solid grey;
		background:#d4d0c8;
		width:150px;
	}
	</style>

</head>
<body>

<div id="menu">

	<div class="menu">
		<div id="menu_file_head" class="menu_head"><a href="javascript:;" onclick="document.getElementById('menu_file_content').style.display = document.getElementById('menu_file_content').style.display == 'block' ? 'none' : 'block';">Datei</a></div>
		<div id="menu_file_content" class="menu_content" style="display:none; cursor:hand; cursor:pointer;">
			<?php
			for($i = 0; $i < 10; $i++)	{
			?>
			<div onmouseover="this.style.background = '#0a246a'; this.style.color = '#fff';" onmouseout="this.style.background = '#d4d0c8'; this.style.color = '#000';">
				<div style="padding:4px;">&Ouml;ffnen</div>
			</div>
			<?php } ?>
		</div>
	</div>
	
	<div class="menu">
		<div id="menu_edit_head" class="menu_head"><a href="javascript:;" onclick="document.getElementById('menu_edit_content').style.display = document.getElementById('menu_edit_content').style.display == 'block' ? 'none' : 'block';">Bearbeiten</a></div>
		<div id="menu_edit_content" class="menu_content" style="display:none; cursor:hand; cursor:pointer;">
			<?php
			for($i = 0; $i < 10; $i++)	{
			?>
			<div onmouseover="this.style.background = '#0a246a'; this.style.color = '#fff';" onmouseout="this.style.background = '#d4d0c8'; this.style.color = '#000';">
				<div style="padding:4px;">Zur&uuml;ck</div>
			</div>
			<?php } ?>
		</div>
	</div>
	
</div>

</body>
</html>

Vielen Dank für Tipps

Maik · 15. April 2008

Hi,

wenn ich im Selektor #menu die Eigenschaft list-style-type:none lese, frage ich mich, wieso du das Menü nicht mit einer verschachtelten Liste erzeugst? Oder wofür soll ansonsten diese Deklaration gut sein?

Als Arbeitsvorlage könnten beispielsweise Stu Nicholls' A variable width drop-down definition list oder A refined and improved CSS only drop-down menu dienen.

Der Artikel Divitis. Ein paar Gedanken zum übermäßigen Gebrauch von <div> dürfte für dich in diesem Zusammenhang auch ganz interessant sein.

Text verschiebt sich

tobee

Erfahrenes Mitglied

Maik

Neue Beiträge