Text in DIV-Container nach unten verschieben

[MichaSG]

Hallo,

Habe momentan ein ziemlich grosses Problem und bin dem Verzweifeln nahe. Für viele von euch mag das Problem komplex klingen, für mich ist es bis hierher unlösbar und unerklärlich.^^

Also, zum Problem.

Mein Ziel ist es, eine Navigation zu erstellen. Und zwar eine ziemlich einfache. Einen einfarbigen DIV-Container mit Rahmen und zentral platzierten Links. Soweit meine ersten Überlegungen:

HTML:

<div id="navi">
  
</div>

CSS:

#navi {
background-color:#ffb015;
width:748px;
height:45px;
border:1px solid black;

Damit habe ich den gewünschten DIV-Container mit Rahmen. Kein Problem, nicht einmal für mich.^^
Nun aber schon kommt der Teil, an dem ich kläglich gescheitert bin: Die zentral platzierten Links!
Und mit zentral meine ich hauptsächlich in der Mitte der Höhe. Gut, meine nächsten Überlegungen:

HTML:

<div id="navi">
   <a href="index.html">Home</a>
</div>

CSS:

#navi a {
font-family:Arial;
font-weight:normal;
color:#ffffff;
font-size:9pt;
}

Ein ganz normaler Link also, oben im linken Eck platziert. Per "margin-left:Xpx" habe ich es ohne Probleme geschafft, den Link von der linken Seitenlinie abzutrennen. Mit "margin-top:Xpx;" müsste dies nun also von oben her gleich funktionieren dachte ich - falsch gedacht! Bewegt sich keine Spur nach unten.

Ihr seht, ein kleines Problem mit grossen Auswirkungen. Es wäre sehr toll, wenn mir jemand einen Lösungsvorschlag hat. Am besten gleich damit ich verschiedene "class'es" bilden kann. Als per <strong>, <span>, <p> usw. Muss einfach irgendwie funktionieren.^^

Wenn ihr mehr Angaben braucht einfach melden. :)

Gruss
Micha

 

[threadi]

Du willst nichts zentrieren, du willst etwas vertikal zentrieren. Das bekommst Du momentan ohne eine Tabellenzelle nicht sauber hin. Schau dich mal nach "vertikal zentrieren" um, es gibt dennoch einige Möglichkeiten per CSS - ob die bei dir passen weiß ich momentan aber nicht.

 

[MichaSG]

Vertikal zentrieren ist doch auch zentrieren. :)

Danke schon einmal. Mir geht es aber eigentlich eher darum, dass ich den Link beliebig nach unten verschieben kann. Muss also nicht unbedingt zu 100% zentral sein. Versteh(s)t du/ihr?

 

[_Thor_]

Dann musst du aus den Link ein Blockelement machen, dann kannst du es auch in Höhe und Breite mit margin verschieben.

#navi a {
  display: block;
  margin: 20px auto;
  border: 1px solid black;

Den Border hab ich nur gemacht, damit man besser sieht, wie hoch und breit der Link ist.

 

[MichaSG]

Ein Danke auch an dich.

Hab das nun eben ausprobiert. Verschieben kann ich es nun, ja. Durch "display:block" rutscht der Link bereits nach unten, ist somit nicht mehr wie vorher ganz oben in der Ecke. Lässt sich das nicht irgendwie umgehen?

 

[_Thor_]

Ich denke, du willst ihn nicht ganz oben haben.

 

[MichaSG]

Richtig gedacht. Jedoch würde es die Sache vereinfachen. ;)

Das Problem ist damit aber ersteinmal behoben. Herzlichen Danke! :)

 

[_Thor_]

Und mit zentral meine ich hauptsächlich in der Mitte der Höhe.

Jetzt bin ich verwirrt, bist du sicher, dass du weißt, was du willst? Denn so wie das für mich aussieht, wiedersprichst du dir hier selber.

Um es wieder oben zu haben, schreibst du

margin: 0 auto;

 

[koslowski]

Moin,

vor allem erstmal die Höhe für #navi rausschmeissen.
Vertikal kann dann über padding positioniert werden.

Eine Reihe von Links ist eine Aufzählung und gehört somit in eine <ul>.

Mit display:inline; oder float für <li> kommen die Links dann nebeneinander, wobei man mit der Float-Variante mehr Kontrolle über die Darstellung hat, weil man es nur mit Blockelementen zu tun hat.

koslowski