Timur: einfaches css problem?

SELF-Forum

einfaches css problem?

Timur
– Informationen zu den Bewertungsregeln

Hallo,

ich habe diesen Code mir gerade geschrieben. Ich scheitere gerade daran, die Links nebeneinander zu haben und nicht untereinander! Könnt Ihr mir dabei helfen?

<html>  
<head>  
<style type="text/css">  
#navitem{padding:0px; margin:0px;}  
#navitem a{margin:0px; padding:6px 6px; position:relative; display:block;}  
#navitem ul {margin:0px; padding:6px 6px; display:none; list-style-type:none;}  
#navitem ul li a:hover {margin:0px; padding:6px 6px; list-style-type:none; background:red;}  
  
.nav1{width:160px;}  
</style>  
</head>  
<body>  
<div id="links">  
			<ul id="navitem">  
				<li><a href="#">Nachrichten</a>  
					<ul>  
						<li class="nav1"><a href="nachrichtneu.php">Nachrichten eingeben</a></li>  
						<li class="nav1"><a href="nachrichtanzeigen.php">Nachrichten anzeigen</a></li>  
						<li class="nav1"><a href="nachrichtneu.php">Nachrichten eingeben</a></li>  
						<li class="nav1"><a href="nachrichtanzeigen.php">Nachrichten anzeigen</a></li>  
					</ul>  
				</li>  
				<li><a href="#">Nachrichten</a>  
					<ul>  
						<li class="nav1"><a href="nachrichtneu.php">Nachrichten eingeben</a></li>  
						<li class="nav1"><a href="nachrichtanzeigen.php">Nachrichten anzeigen</a></li>  
						<li class="nav1"><a href="nachrichtneu.php">Nachrichten eingeben</a></li>  
						<li class="nav1"><a href="nachrichtanzeigen.php">Nachrichten anzeigen</a></li>  
						<li class="nav1"><a href="nachrichtneu.php">Nachrichten eingeben</a></li>  
						<li class="nav1"><a href="nachrichtanzeigen.php">Nachrichten anzeigen</a></li>  
					</ul>  
				</li>  
			</ul>  
  
</div>  
	<script type="text/javascript">  
	/* <![CDATA[ */  
	var navitem = document.getElementById("navitem").getElementsByTagName("UL");  
	for (i=0;i<navitem.length;i++)  
	{  
	navitem[i].setAttribute("id","navitem"+i)  
		if (navitem[i].parentNode.nodeName == "LI")  
		{  
		navitem[i].parentNode.onmouseover = function ()  
			{  
			this.lastChild.style.display = "block";  
			}  
		navitem[i].parentNode.onmouseout = function ()  
			{  
			this.lastChild.style.display = "none";  
			}  
		}  
	}  
	/* ]]> */  
	</script>  
</body>  
</html>

Gruß
Timur

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. einfaches css problem?

    LX
    – Informationen zu den Bewertungsregeln

    Block-Elemente, die nebeneinander gestellt werden sollen, müssen wahlweise mit "display: inline;" in den Textfluss gesetzt, mit "float: left;" in einen virtuellen Textumfluss gesetzt oder mit "position: absolute; left: ...px" manuell positioniert werden.

    Gruß, LX

    --
    RFC 1925, Satz 6: Es ist einfacher, ein Problem zu verschieben (...), als es zu lösen.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. einfaches css problem?

      Timur
      – Informationen zu den Bewertungsregeln

      Hallo,

      ich habe es jetzt mit float:left gemacht. Nun sind die Hauptlinks in einer reihe, aber dafür ist das Untermenü nicht untereinander... Wie kriege ich das Problem behoben?

      Hier nochmal der Code:

      <html>  
<head>  
<style type="text/css">  
#navitem{padding:0px; margin:0px; display:block; list-style-type:none;}  
#navitem a{margin:0px; padding:6px 6px; display:block;}  
#navitem li{padding:0; margin:0; float:left; list-style:none;}  
#navitem ul{margin:0px; padding:6px 6px; display:none; list-style-type:none;}  
#navitem ul li a:hover{margin:0px; padding:6px 6px; list-style-type:none; background:red;}  
  
.nav1{width:160px;}  
</style>  
</head>  
<body>  
<div id="links">  
	<ul id="navitem">  
		<li><a href="#">Nachrichten</a>  
			<ul>  
				<li class="nav1"><a href="nachrichtneu.php">Nachrichten eingeben</a></li>  
				<li class="nav1"><a href="nachrichtanzeigen.php">Nachrichten anzeigen</a></li>  
				<li class="nav1"><a href="nachrichtneu.php">Nachrichten eingeben</a></li>  
				<li class="nav1"><a href="nachrichtanzeigen.php">Nachrichten anzeigen</a></li>  
			</ul>  
		</li>  
		<li><a href="#">Nachrichten</a>  
			<ul>  
				<li class="nav1"><a href="nachrichtneu.php">Nachrichten eingeben</a></li>  
				<li class="nav1"><a href="nachrichtanzeigen.php">Nachrichten anzeigen</a></li>  
				<li class="nav1"><a href="nachrichtneu.php">Nachrichten eingeben</a></li>  
				<li class="nav1"><a href="nachrichtanzeigen.php">Nachrichten anzeigen</a></li>  
				<li class="nav1"><a href="nachrichtneu.php">Nachrichten eingeben</a></li>  
				<li class="nav1"><a href="nachrichtanzeigen.php">Nachrichten anzeigen</a></li>  
			</ul>  
		</li>  
	</ul>  
</div>  
<script type="text/javascript">  
/* <![CDATA[ */  
var navitem = document.getElementById("navitem").getElementsByTagName("UL");  
for (i=0;i<navitem.length;i++)  
{  
	navitem[i].setAttribute("id","navitem"+i)  
	if (navitem[i].parentNode.nodeName == "LI")  
	{  
	navitem[i].parentNode.onmouseover = function ()  
		{  
			this.lastChild.style.display = "block";  
		}  
	navitem[i].parentNode.onmouseout = function ()  
		{  
		this.lastChild.style.display = "none";  
		}  
	}  
}  
/* ]]> */  
</script>  
</body>  
</html>
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. einfaches css problem?

        Steel
        – Informationen zu den Bewertungsregeln

        Hi!

        ich habe es jetzt mit float:left gemacht. Nun sind die Hauptlinks in einer reihe, aber dafür ist das Untermenü nicht untereinander... Wie kriege ich das Problem behoben?

        Indem Du unterschiedliche Menüs auch unterschiedlich behandelst. Erstelle also CSS Regeln für jede Art Menü, die du nutzt.

        Entscheide Dich, ob Klassen oder komplexere Selektoren für Dich in Frage kommen.

        --
        "Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
              - T. Pratchett
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln