✔ DIV nach Seitenabstand ausrichten.

[visiondpc]

Hallo.
Ich habe auf meiner Homepage folgenden Code eingebaut.

<div id="top_navi_1"></div>
<div id="top_navi_2"><a href="link.html" class="top_link">Impressum</a> <a href="link.html" class="top_link">Forum</a> <a href="link.html" class="top_link">Home</a> </div>
<div id="top_navi_3"></div>

css

#top_navi_1 {
	background-image: url(../images/links.gif);
	position: absolute;
	height: 20px;
	width: 25px;
	left: 0px;
	top: 0px;
	z-index: 2;
}
#top_navi_2 {
	background-image: url(../images/mitte.gif);
	position: absolute;
	height: 20px;
	width: auto;
	left: 25px;
	top: 0px;
	right: 150px;
	z-index: 2;
}
#top_navi_3 {
	background-image: url(../images/rechts.gif);
	position: absolute;
	height: 20px;
	width: 150px;
	top: 0px;
	right: 0px;
	z-index: 2;
}

FireFox
InetExplorer

Im FF sieht auch alles genauso aus wie es soll nur der IE macht mir Probleme. top_navi_2 wird nicht über die komplette Breite dargestellt sondern nur soweit, wie der Linktext geht. Wie kriege ich es hin, daß sich der Hintetgrund auch im IE bis zur rechten Abschlußgrafik streckt?


FireFox
InetExplorer

 

[Maik]

Setze mal die Breitenangabe auf 100% und erweitere ggfs. die Regel mit background-repeat:repeat-x:

#top_navi_2 {
	background-image: url(../images/mitte.gif);
         background-repeat: repeat-x;
	position: absolute;
	height: 20px;
	width: 100%;
	left: 25px;
	top: 0px;
	right: 150px;
	z-index: 2;
}

 

[visiondpc]

Danke für den Tipp aber wenn ich die Breitenangabe auf 100% setze geht das über den rechten Rand hinaus und erscheint auch unter der transparenten Ecke der abgerundeten Endgrafik. Deshalb hatte ich ja die Angaben für left und right gesetzt.

 

[Maik]

Da der IE die Kombination einer linken und rechten Positionsangabe nicht unterstützt, empfehle ich dir, die DIVs floaten zu lassen:

#top_navi_1 {
        background: url(../images/links.gif);
        height: 20px;
        width: 25px;
        float: left;
        margin-right: 0 !important;
        margin-right: -3px; /* Für IE */
}
#top_navi_2 {
        background: url(../images/mitte.gif) repeat-x;
        height: 20px;
}
#top_navi_3 {
        background: url(../images/rechts.gif);
        height: 20px;
        width: 150px;
        float: right;
        margin-left: 0 !important;
        margin-left: -3px; /* Für IE */
}

Hierfür muß die Reihenfolge der floatenden DIVs im HTML-Code geändert werden:

<div id="top_navi_1"></div>

<div id="top_navi_3"></div>

<div id="top_navi_2"><a href="link.html" class="top_link">Impressum</a> <a href="link.html" class="top_link">Forum</a> <a href="link.html" class="top_link">Home</a> </div>

 

[visiondpc]

Danke. Aber so richtig funktionieren tut das auch nicht. Jetzt wird garnichtsmehr angezeigt. weder im IE noch mit dem FF.
Ich habe z-index und die 100% für den 2. DIV zu setzen hat auch nichts gebrcht.

 

[Maik]

Seltsam, bei mir funktioniert's soweit einwandfrei. Kannst du die Seite mal online zur Verfügung stellen?

 

[visiondpc]

Klar kein Problem.

http://people.freenet.de/webnulleins/

Ich hab aber grade gesehen, die Leiste ist zwar da aber die Bleibt hinter dem banner und läßt sich über den z-index nicht nach vorne holen.
Außerdem geht die Hintergrundgrafik jetzt im FF über die komplette Seite und überlagert wieder die freien Stücke der Abschlußgrafiken.

Hier nochmal ohne den Banner

http://people.freenet.de/webnulleins/index2.html

 

[Maik]

Ich habe mal das Modell um das DIV #topNavi erweitert, um eine höhere Schichtposition für die Navigation gegenüber dem Banner festlegen zu können, und für das DIV #top_navi_2 folgende margin-Regeln bestimmt, damit die mittlere Hintergrundgrafik nicht über die gesamte Fensterbreite dargestellt wird.

Testumgebung: Win2k, FF 1.5.0.4, IE 6.0, MOZ 1.7.12, NN 7.0, OP 8.50

#topNavi {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 2;
}
#top_navi_1 {
        background: url(../images/links.gif);
        height: 20px;
        width: 25px;
        float: left;
        margin-right: 0 !important;
        margin-right: -3px; /* Für IE */
}
#top_navi_2 {
        background: url(../images/mitte.gif) repeat-x;
        height: 20px;
        margin: 0 150px 0 25px !important;
        margin: 0 147px 0 22px; /* Für IE */
}
#top_navi_3 {
        background: url(../images/rechts.gif);
        height: 20px;
        width: 150px;
        float: right;
        margin-left: 0 !important;
        margin-left: -3px; /* Für IE */
}

<div id="homeheader"></div>

<div id="topNavi">
     <div id="top_navi_1"></div>
     <div id="top_navi_3"></div>
     <div id="top_navi_2"><a href="link.html" class="top_link">Impressum</a> <a href="link.html" class="top_link">Forum</a> <a href="link.html" class="top_link">Home</a></div>
</div>

 

[visiondpc]

Super jetzt klappt's.

Danke.