List Elemente um einen Kreis fliessen lassen

F

FunkFlex

Mitglied
Hi, ich schon wieder :-)
also, ich würde gern die list Elemente eines Vertikalen Navigationsmenüs um einen Kreis fliessen lassen, also quasi ihre Position mittels margin-left und margin-top verändern.
Aber jedes List Element anders. Ich habe schon jedem List element eine eigene ID gegeben, nur irgendwie funktioniert das nicht so richtig. Achja das es ein ausklappbares Menü ist, sollte ich noch dazu sagen, hier die grund html und css:
HTML: 
<div id="leftcol">
<ul id="Navigation">
    <li id="navi1"><a href="#">Punkt 1</a></li>

    <li id="navi2"><a href="#">Punkt 2</a>
      <ul>
        <li><a href="#">Punkt 2a</a></li>
        <li><a href="#">Punkt 2b</a></li>
      </ul>
    </li>

    <li id="navi3"><a href="#">Punkt 3</a></li>

    <li id="navi4"><a href="#">Punkt 4</a>
      <ul>
        <li><a href="#">Punkt 4a</a></li>
        <li><a href="#">Punkt 4b</a></li>
        <li><a href="#">Punkt 4c</a></li>
      </ul>
    </li>

    <li id="navi5"><a href="#">Punkt 5</a></li>
  </ul>

Hier das CSS:
Code: 
#leftcol {
	width:300px;
	height:450px;
	background-image:url(leftback.gif);
	float:left;
	display:block;
}

  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    position: relative;
    margin: 0; padding: 0;
  }
  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    display: none; 
  }

  ul#Navigation li:hover ul {
    display: block;  
	top:0px;
	left:60px;
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
  }

  ul#Navigation a, ul#Navigation span {
  
    width: 110px;  
    padding: 0;
    text-decoration: none; font-weight: bold;
    color:#fff; 
  }

ul#navigation #navi1 {
	margin-left:50px;
	margin-top:50px;
}

So in der Art wie navi1 will ich die anderen auch verschieben, nur klappen tuts net. Weder beim ersten, noch bei allen anderen. Und wie vlt zu erkennen ist, liegen sie in einer Box.
Vielen Dank für eure Hilfe.
MFG FunkFlex
 
Um welchen Kreis?

margin-left:50px und margin-right:50px dienen eh nicht dazu, sondern um einen linken und rechten Außenabstand für das Eement zu definieren, und ich kenne auch keine CSS-Technik, um Elemente um eine Kreislinie zu ziehen.
 
Da kommen dann noch so Sachen wie floats, etc. dazu.

Ich würde dir raten:
Gib der Box eine relative Positionierung und die restlichen Elemente positionierst du absolut. Dadurch kannst du sie pixelgenau anordnen.
 
Grundsätzlich schon.

CSS unterscheidet aber strikt zwischen Groß- und Kleinschreibung, d.h. Navigation ist nicht gleich navigation, und genau aus diesem Grund greift in deinem gezeigten Stylesheet der letzte Selektor für Nachfahren auch nicht, da für ihn überhaupt keine Übereinstimmung in deinem HTML-Code existiert.
 
Zuletzt bearbeitet:
Überhaupt nicht. Einfach den ID-Bezeichner im letzten Selektor dem HTML-Code entsprechend mit großem "N" schreiben :rolleyes:

Auf genau diesen Fehler bei Verwendung des gleichen ID-Bezeichners wurdest du übrigens schon mal in einem deiner vergangenen Themen aufmerksam gemacht. Da hast du ganz offensichtlich keinen Meter dazugelernt, damit er dir nicht erneut unterläuft, was?!
 
Zuletzt bearbeitet:
Was heisst keinen Meter dazu gelernt, ich denke mal Tippfehlter unterlaufen jedem...
Und wenn man programmiert fehtl einem oft der "Abstand" um so einen Fehler zu finden
Trotzdem danke....
 
Klar, auch mir unterlaufen (Tipp)Fehler.

Aber eigentlich hättest du den Tippfehler selbst erkennen müssen, wenn du aus dem vergangenen Fehler und dem Hinweis darauf etwas "aktiv" dazugelernt hättest, sprich das hinzugewonnene Wissen in dein Langzeitgedächtnis überführt hättest.

So aber vermittelt es doch vielmehr den Eindruck, dass es den Weg aus dem Kurzzeitgedächtnis nicht gefunden hat, und du daher im Vorfeld deinen Code nicht auf mögliche Schreibfehler überprüft hast.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück