Positionierung eines Containers in einem Container

[Sven K.]

Hallo Leute!

Ich habe das Problem, dass ich Buttons nicht nebeneinander angezeigt bekomme. Sie werden immer untereinander gezeigt und des weiteren will ich das die Buttons mittig von dem anderen Container angezeigt werden.

Hier der CSS-Code:

#navi
{width: 100%;
margin: 0;
background-image: URL("background.gif");}

.buttoncontainer
{width: 100px;
height: 34px;}

.button a
{color: rgb(255,255,255);
background-color: #2175bc;
padding: 2px;
padding-left: 3px;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
border-bottom: 1px solid #B2B5B6;
border-top: 1px solid #B2B5B6;
font: 11px Times New Roman;
text-decoration: none;
text-align: center;
margin-top: 1px;
width: 100%;
float: left;}

.button a:hover
{border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
text-decoration: none;
color: rgb(255,255,255);
background-color: #2586d7;
width: 100%;}

Hier der HTML-Code
.
.
.
<div id="navi">
<div class="buttoncontainer">
<div class="button">

<a href="#">Hallo</a>
 <a href="#">Welt!</a>
 <a href="#">Dies</a>
 <a href="#">ist</a>
 <a href="#">ein</a>
 <a href="#">Test!</a>

</div>
</div>
</div>
.
.
.

Ich hoffe mir kann da einer helfen! Danke!

mfG
Sven

[Detlef G.]

Hallo Sven K.

.button a
...
width: 100%;
float: left;}
...

Wenn jeder Link 100% Breite hat, wie sollen dann mehrere nebeneinanderpassen.

<div id="navi">
<div class="buttoncontainer">
<div class="button">

....

</div>
</div>
</div>

Wozu so viele Divs ineinandergeschachtelt?

Auf Wiederlesen
Detlef

[Sven K.]

Hallo Detlev G.!

Also ich habe das mit den Prozent jetzt behoben, hatte ich vorher eigentlich auch stehen!

width: 100px;

Aber die Buttons werden immer noch untereinander angezeigt! Wieso so viele Div's!? Wie würden Sie das denn machen????

mfG
Sven

[Detlef G.]

Hallo Sven

<div id="navi">
<div class="buttoncontainer">

^
               100px Breite

<div class="button">

<a href="#">Hallo</a>

^
     .button a hat 100% Breite

<a href="#">Welt!</a>

^
     .button a hat 100% Breite

...

</div>
</div>
</div>

Wie sollen 6 mal 100% von 100px nebeneinander in 100px passen?

Wie würden Sie das denn machen????

^                   ^
              einfach "du"        klemmt die Taste?

Das hängt davon ab, wie es genau aussehen soll.
Außer, dass die Links nebeneinanderstehen sollen, ist mir das nicht ganz klar.

Auf Wiederlesen
Detlef

[Sven K.]

Ok danke! Habs jetzt! Hier der Code:

#navi
{width: 100%;
margin: 0;
background-image: URL("background.gif");}

.buttoncontainer
{width: 800px;
height: 34px}

.button a
{color: rgb(255,255,255);
background-color: #2175bc;
padding: 2px;
padding-left: 3px;
padding-right: 3px;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
border-bottom: 1px solid #B2B5B6;
border-top: 1px solid #B2B5B6;
font: 11px Times New Roman;
text-decoration: none;
text-align: center;
margin-top: 1px;
margin-right: 3px;
width: 100px;
float: left}

.button a:hover
{border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
text-decoration: none;
color: rgb(255,255,255);
background-color: #2586d7;
width: 100px;}

Wegen dem mittig machen: Also der "navi"-Container ist ja 100% des Bildschirmes lang! Nun soll der "buttoncontainer" mittig in dem "navi"-Container zentriert werden! Wie kann ich das am besten lösen?

mfG
Sven

[Detlef G.]

Hallo

Wegen dem mittig machen: Also der "navi"-Container ist ja 100% des Bildschirmes lang! Nun soll der "buttoncontainer" mittig in dem "navi"-Container zentriert werden! Wie kann ich das am besten lösen?

Extra dazu gibt es einen Tipps&Tricks-Artikel: http://aktuell.de.selfhtml.org/tippstricks/css/ausrichtung/index.htm

Noch ein paar Anmerkungen:

Wozu wird .button benötigt?
Du kannst genauso gut .buttoncontainer a schreiben und <div class="button"> dafür weglassen.

Teste auch, was passiert, wenn die Schrift vergrößert wird.

Auf Wiederlesen
Detlef

[Sven K.]

Wenn ich das in dem Artikel richtig verstanden habe, dann gilt das

margin-left: auto; margin-right: auto;

nur für Elemente die im Block angeordnet sind! Aber ich habe keine Blockdefinition in meinem Code, da die Eigenschaft von Block ist, alle Punkte untereinander zu schreiben und das will ich ja nicht. Somit hilft mir das doch nicht weiter, oder irre mich da jetzt?

mfG
Sven

[Detlef G.]

Hallo Sven

margin-left: auto; margin-right: auto;

sehr gut, nur leider ist der IE dafür zu blöde.
In dem Artikel steht auch, was du für diesen noch zusätzlich einfügen musst.

nur für Elemente die im Block angeordnet sind! Aber ich habe keine Blockdefinition in meinem Code, da die Eigenschaft von Block ist, alle Punkte untereinander zu schreiben und das will ich ja nicht. Somit hilft mir das doch nicht weiter, oder irre mich da jetzt?

Ja!

<div class="buttoncontainer">

lies dort http://de.selfhtml.org/html/referenz/elemente.htm#div

Außerdem hast du auch die Links (<a ...) durch die Angabe von Bordern zu Blockelementen gemacht, als wenn du display:block angegeben hättest. Deshalb musste dann für diese extra width und float angegeben werden, damit sie wieder nebeneinander angezeigt werden.

Auf Wiederlesen
Detlef

[MudGuard]

Hi,

margin-left: auto; margin-right: auto;
sehr gut, nur leider ist der IE dafür zu blöde.

IE 6 im standard-mode kann das.

cu,
Andreas

[Detlef G.]

Hallo Andreas

IE 6 im standard-mode kann das.

OK
<p class="Selbstkritik"> Unzulässige Verallgemeinerung </p>

Auf Wiederlesen
Detlef

[Sven K.]

Super! Es Klappt! ^^

margin-left:auto;
margin-right:auto;
text-align:right;

Danke!

mfG
Sven