Einzelne Navi Punkte verschieben

[Green_Horn]

Hallo Leute,

ich hab ein kleines Problem und glaube es kommt eher hier rein als unter CSS.

Und zwar habe ich eine Navi unter xHTML erstellt, die Punkte kann ich aber nur mit Margin und Padding verschieben. Habe sonst immer mit HTML gearbeitet und eine absolute Positionierung gemacht. Bin mir nicht sicher wie ich das lösen kann. Ich poste einfach mal den Code


CSS:

#hnavi01 {
padding-top: 12px;
width: 500px;
display: block;
margin-left: 43px;
}

#hnavi01 a {
padding-left:28px;
padding-right:10px;
color: #000000;
text-decoration: none;
font-weight:bold;
}

#hnavi01 a:hover {
color: #814d95;
padding-left:28px;
padding-right:10px;
text-decoration: none;
font-weight:bold;
}

XHTML:

<div id="navi">

<div id="hnavi01">
<a href="index.html">Startseite</a>
<a href="programm.html">Programm</a>
<a href="gallerie.html">Gallerie</a>
<a href="mitarbeiter.html">Mitarbeiter</a>
</div>


</div>

 

[prm]

Kommt drauf an, was du dir vorstellst.
Üblich ist es, dass man für eine Navi eine Liste mit ul/li verwendet.
Wenn die Links horizontal angeordnet werden sollen, kann man die Listeneinträge floaten.

Willst du die Links weder horizontal noch vertikal anordnen, dann kommt eine absolute Positionierung in Betracht.
In diesem Fall melde dich nochmal unter näherer Problembeschreibung.

Ansonsten findest du hier zahlreiche Navi-Beispiele mit HTML- und CSS-Code.

 

[Green_Horn]

Also die Navi habe ich ja schon, ich möchte eigentlich nur einen individuellen Abstand zwischen den einzelnen Buttons haben.

Hier mal das JPG von der Page, die Abstände sind alle gleich und da die Wortlänge variiert ist das ein bisschen doof :(

 

[prm]

Dan verwende am besten eine Liste, gib den li's ein "float: left" und einen entsprechenden margin-Wert.

 

[Green_Horn]

Ok vllt habe ich vergessen zu erwähnen das komplette Design habe ich mit Photoshop erstellt, auch die Hintergründe der Navi.

Also die Buttons bestehen nicht aus einem Code.

Habe es jetzt mal so probiert.

CSS:

#container {
  clear: both;
  float: left;
  width: 100%
}
    
#hnavi01 {
    padding-top: 12px;
  position: left;
  left: 50%;
  width: 1000px;
    margin-left: 43px;
  display: block;
     list-style-type: none;
}

#navi01 li {
  float: left;
  position: relative;
  right: 50%;
  }

#hnavi01 a {
  width: auto;
  display: left;
  padding-left:28px;
  padding-right:10px;
  color: #000000;
  text-decoration: none;
  font-weight:bold;
}

#hnavi01 a:hover {
  color: #814d95;
  width: auto;
  display: left;
  padding-left:28px;
  padding-right:10px;
  text-decoration: none;
  font-weight:bold;
}

 

[Efchen]

float und position gleichzeitig macht keinen Sinn.

 

[prm]

Ungetestet, aber so ähnlich sollte es klappen:

HTML

<div id="hnavi01">
<ul>
<li><a href="index.html">Startseite</a> </li>
<li><a href="programm.html">Programm</a></li>
<li><a href="gallerie.html">Gallerie</a></li>
<li><a href="mitarbeiter.html">Mitarbeiter</a></li>
</ul>
<div class="clear"> </div>
</div>

CSS

ul {
margin: 0;
padding: 0;
list-style-type: none;
}

li {
float: left;
margin-right: 20px;
}

.clear {
clear: both;
}

 

[Green_Horn]

Ist fast so wie ich mir das vorgestellt habe, nur der Punkt Mitarbeiter müsste noch ein wenig nach rechts aber egal was ich mache ich bekomms nich so hin -.- alle anderen könnten so bleiben.

#hnavi01 {
  padding-top: 12px;
    margin-left: 40px;

}

#hnavi01 ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  }

  
#hnavi01 clear {
  clear: both;
  }

#hnavi01 a {
  width: auto;
  display: inline;
  padding-left:28px;
  padding-right:10px;
  color: #000000;
  text-decoration: none;
  font-weight:bold;
}

#hnavi01 a:hover {
  color: #814d95;
  width: auto;
  display: inline;
  padding-left:28px;
  padding-right:10px;
  text-decoration: none;
  font-weight:bold;
}

a:active, a:focus{outline: none}

Und der HTML Code ist so wie prm ihn gepostet hat.

 

[prm]

Das fehlt noch, den margin-Wert kannst du anpassen:

li {
float: left;
margin-right: 20px;
}

Dafür kannst/solltest du a mit "display: block" versehen, um den Hovereffekt auf die gesamte Linkfläche zu gewährleisten.