Mehrere Div im Div nebeneinander

[Kurosh]

Hi,
also ich hab folgendes Problem das ich einfach nicht hinbekomme. Hab schon alles versucht was mir eingefallen ist und ich will auch keine Tabelle benutzen.
Ich möchte einfach ein Div haben, in dem wiederum nochmals mehre Divs nebeneinander sind. Das hab ich erstmal soweit geschafft, das Problem: nur im Firefox, der IE 7 positioniert mir die Divs mittig und versetzt übereinander. Da wünscht man sich doch glatt ein Monopol im Browsermarkt.

Hier mal der code, wäre euch echt dankbar wenn ihr mir weiterhelfen könntet.

<div class="link_se_kasten">

<div class="banner_links" style="margin-left: 2px;">
<a href="Startseite">Startseite</a></div>
<div class="banner_links" style="margin-left: 70px;">
<a href="Startseite">Startseite</a></div>
<div class="banner_links" style="margin-left: 138px;">
<a href="Startseite">Startseite</a></div>
<div class="banner_links" style="margin-left: 206px;">
<a href="Startseite">Startseite</a></div>

</div>

und hier die CSS Definitionen:

.link_se_kasten
{
    display: block;
    position: relative;
    background-color: #359fb4;
    width: 750px;
    height: 24px;
    margin-top: 4px;
    padding: 0px;
    border:solid 1px;
    border-left-color: #dddddd;
    border-right-color: #dddddd;
    border-top-color: #dddddd;
    border-bottom-color: #dddddd;
}

.banner_links a
{
    display: block;
    position: absolute; bottom: 0px;
    width: 60px;
    color: #dddddd;
    background-color: #157f94;
    font-family: verdana;
    font-size: 7pt;
    font-style: bold;
    text-align: center;
    text-decoration: none;
    padding: 2px;
    border:solid 1px;
    border-left-color: #dddddd;
    border-right-color: #dddddd;
    border-top-color: #dddddd;
    border-bottom-color: #157f94;
}
.banner_links a:visited
....usw.

Was meint ihr?

[frankx]

Hellihello

Tip: schmeiß alles raus, was Du jetzt nicht brauchst und sag mal, was du erreichen willst. Vielleicht lässt es sich anders besser erreichen. Dreispaltiges Layout vielleicht? Dann schau hier in Selfhtml.

Dank und Gruß,

frankx

[Kurosh]

Also ich will das hier erreichen:
www.nirupars.com  <- mit Firefox ansehen (ich hab Firefox 3)
und möchte dass es im IE 7 auch geht, der macht des aber nicht....

[Steel]

Hi!

Also ich will das hier erreichen:
www.nirupars.com  <- mit Firefox ansehen (ich hab Firefox 3)
und möchte dass es im IE 7 auch geht, der macht des aber nicht....

Du möchtest also ein einfachen horizontales Menü. Wozu bastelst Du dann mit den Divs um jeden Link herum?

Formatiere die Links direkt oder benutze eine Liste statt der Divs. Das wär semantisch korrekt im Gegensatz zu einem Div um jeden Link (was völlig überflüssig ist). In jedem Fall solltest Du dich mal mit Float beschäftigen.

Es gibt übrigens ein Browsermonopol:

Microsoft hat das Monopol auf den leastbest Browser.

[Kuroah]

Ok also ich hab des jetzt mal so gemacht.
Es klappt zwar jetzt im IE und Firefox. Das einzige Problem das ich habe ist dass die Links im Div-Container ganz oben kleben. Wie bekomme ich die vertikal ganz runter, quasi zum Div bottom?

Der Code:

<div class="link_se_kasten">
<a class="blinks" href="Startseite">Startseite</a>
<a class="blinks" href="Sitemap">Sitemap</a>
<a class="blinks" href="Impressum">Impressum</a>
<a class="blinks" href="mailer">Kontakt</a>
</div>

CSS:
a.blinks:link, a.blinks:visited, a.blinks:active {
    float: left;
    width: 60px;
    color: #dddddd;
    background-color: #157f94;
    font-family: verdana;
    font-size: 7pt;
    font-style: bold;
    text-align: center;
    text-decoration: none;
    padding: 2px;
    margin-left: 2px;
    border:solid 1px;
    border-left-color: #dddddd;
    border-right-color: #dddddd;
    border-top-color: #dddddd;
    border-bottom-color: #157f94;
}
a.blinks:hover {
    float: left;
    width: 60px;
    color: #ffffff;
    background-color: #aa0000;
    font-family: verdana;
    font-size: 7pt;
    font-style: bold;
    text-align: center;
    text-decoration: none;
    padding-top: 2px;
    padding-bottom: 4px;
    padding-left: 2px;
    padding-right: 2px;
    margin-left: 2px;
    border:solid 1px;
    border-left-color: #ffffff;
    border-right-color: #ffffff;
    border-top-color: #ffffff;
    border-bottom-color: #aa0000;
}

.link_se_kasten
{
    display: block;
    position: relative;
    background-color: #359fb4;
    width: 750px;
    height: 24px;
    margin-top: 4px;
    padding: 0px;
    border:solid 1px;
    border-left-color: #dddddd;
    border-right-color: #dddddd;
    border-top-color: #dddddd;
    border-bottom-color: #dddddd;
}

[frankx]

Hellihello

wieder zuviel Code für mich. Den meisten brauchst Du für Dein Problem nicht.

Die Anker <a> sind display:inline standardmäßig. Nur dann funktioniert "float".

Vielleicht hilft Dir ansonsten padding-top im div?

Das div wiederum ist Standardmäßig "display:block". Das braucht es also nicht extra. Ein <p> wäre syntaktisch auch nicht falsch.

Dank und Gruß,

frankx

[Kurosj]

Ja das mit dem Float usw. funktioniert ja soweit. Mit padding-top im div kann ich nicht arbeiten, weil ja die Links beim Hover sich vergrößern, also falls ich es hinbekomme sie ans untere Ende zu setzen, sie dann beim hover nach oben sich vergrößern. Gibt es denn keine Möglichkeit die Links bzw. Blocks im Div bottom zu setzen???

[frankx]

Hellihello

Ja das mit dem Float usw. funktioniert ja soweit.

Ich dachte, Du hättest da überflüssigen Code. Es funktioniert nicht das float, sondern die inline-display-Eigenschaft des Ankerelementes. Demnach würde es auch ohne float gehen.

Mit padding-top im div kann ich nicht arbeiten, weil ja die Links beim Hover sich vergrößern, also falls ich es hinbekomme sie ans untere Ende zu setzen, sie dann beim hover nach oben sich vergrößern. Gibt es denn keine Möglichkeit die Links bzw. Blocks im Div bottom zu setzen???

http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#line_height

Ohne div und mit a {display:block;float:left} u.u.; oder besser

<ul><li><a>link</a></li></ul>

und

a:hover {
        font-weight:bold;
 font-size:110%;
}
ul {
 margin:auto;
 width:70%;
 text-align:center;
 list-style:none;
}
li {
 text-align:center;
 margin:0px;
 width:6.5em;
 height:1em;
 float:left;
}

Dank und Gruß,

frankx