link buttons in einem div container positionieren

Corraggiouno

hallo
habe einen div - container
in diesem sollen nun 4 link-buttons nebeneinander angebracht werden. Mit welcher Methode würdet ihr die Position dieser link-leiste(4 buttons) positionieren, wenn ich diese z. B links oben oder rechts oben haben möchte?
Könntet ihr mir da einen TIpp geben?

CroweHammer

style="position:top 0px; left 0px; oder right:0px;" probiers mal so

Eine einfache Art eine Linkleiste erstellen wäre z.B. mit Hilfe einer Navigationsbar!

Corraggiouno

das ist meine navigationsspalte

Code

/* Box für Navigationsspalte: */
#navi {
margin: 0px;
width: 170px;
position: absolute;
top: 0px; left: 0px;
}

soll ich diese zeile:

Zitat

style="position:top 0px; left 0px; oder right:0px;

auch noch mit reinpacken, oder eine extra css anweisung definieren?

driver

eigentlich haste die schon drin......
und position:top 0px; gibt es übrigens nicht....

funkt des denn so bei dir ? oder wo liegt des problem ?

Corraggiouno

ja mit dieser anweisung wird mein div-bereich definiert,

Zitat

/* Box für Navigationsspalte: */
#navi {
margin: 0px;
width: 170px;
position: absolute;
top: 0px; left: 0px;
}

Alles anzeigen

das funktioniert ja auch so weit
jetzt möchte ich in diesem bereich eben noch linkbuttons habe, die nebeneinander angeordnet sind:
so z.b: link link link
diese anordnung möchte ich aber noch genau positionieren!
mache ich das mit

Code

style:float:left bzw. style:float:right

?
mit dieser anweisung kann ich zwar sagen links oder rechts, aber keine genaue positionierung festlegen,
Ich benötige einen tipp für eine genau positionierung?

driver

du könnste sie z.b. mit padding-left / padding-top positionieren,
doch wird des im ie und ff teilweise anders interpretiert.

mgraf

Hallo,

meinst du soetwas in der Art ?

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
</head>
<style type="text/css">
#links {
	position: absolute;
	top: 50px;
	right: 30px;
}
#links ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
#links ul li {
	display: inline;
	padding: 0 0 0 1.2em;
	margin: 0;
}
</style>
<body>
<div id="links">
  <ul>
    [*][img]http://gtmcknight.com/buttons/up/playstation.gif[/img]
    [*][img]http://gtmcknight.com/buttons/up/apache.gif[/img]
    [*][img]http://gtmcknight.com/buttons/up/firefox.gif[/img]
    [*][img]http://gtmcknight.com/buttons/up/wordpress.png[/img]
  [/list]
</div>
</body>
</html>

Alles anzeigen

lg
michi

sejuma

Die von mgraf vorgeschlagene Lösung halte ich für sehr sinnvoll. Siehe auch diese Navi:
http://css.maxdesign.com.au/listamatic/horizontal03.htm

Auf die absolute Positionierung der Navi kannst du normalerweise verzichten (bringt irgendwann meist Probleme mit sich). Verwende besser margin- und float-Angaben in Bezug auf die anderen Elemente.

Tags