# List Elemente um einen Kreis fliessen lassen



## FunkFlex (9. August 2010)

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:

```
<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:

```
#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


----------



## Scherzkeks (9. August 2010)

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.


----------



## FunkFlex (9. August 2010)

Ja und wenn du den Außenabstand definierst, kannst die link Elemente doch positionieren wie du willst oder?


----------



## Flex (9. August 2010)

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.


----------



## SpiceLab (9. August 2010)

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.


----------



## FunkFlex (9. August 2010)

Und was meinst du wie ich die floats setzen sollte?


----------



## SpiceLab (9. August 2010)

Überhaupt nicht. Einfach den ID-Bezeichner  im letzten Selektor dem HTML-Code entsprechend mit großem "N" schreiben 

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?!


----------



## FunkFlex (10. August 2010)

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....


----------



## SpiceLab (10. August 2010)

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.


----------

