mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Mo 06.07.2020 23:42 Benutzername: Passwort: Auto-Login

Thema: CSS und Firefox - Darstellungsproblem? vom 14.01.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS und Firefox - Darstellungsproblem?
Autor Nachricht
käschdin
Threadersteller

Dabei seit: 09.02.2007
Ort: Berlin
Alter: 43
Geschlecht: Weiblich
Verfasst Mo 14.01.2008 14:22
Titel

CSS und Firefox - Darstellungsproblem?

Antworten mit Zitat Zum Seitenanfang

Hallo zusammen,

ich habe ein Problem mit der CSS-Navigation einer Website. Die Navi ist horizontal, besteht aus fünf grafischen Buttons (CSS-Listenfunktion) und hat links neben dem ersten und rechts neben dem letzten Navibutton eine Grafik (Efeu).

In IE6 und IE7 sieht alles sauber aus. Probleme macht mir nur Firefox (Version 2.0.0.11). Hier ist die Navi komplett ein paar Pixel nach unten verschoben. Macht an sich nix, aber die rechte Efeu-Grafik klebt oben am Bildschirmrand, während zwischen linker Efeu-Grafik und Rand ordnungsgemäß ein paar Pixel Freiraum sind.

Ich möchte nun entweder, dass die rechte Grafik auf Höhe der linken ist oder dass linke Grafik und Navi-Buttons nach oben rutschen, sodass sie auf Höhe der rechten Grafik sind.

Hier der Code aus der CSS-Datei:

Code:

.buttondiv {
position:absolute;
top: -170px;
left: -20px;
width: 968px;
height:50px;
}

.buttondiv li{
display: inline;
}

.buttondiv li a{
float: left;
color: black;
padding: 0px;
text-decoration: none;
}

.efeulinks {
position: relative;
background-image: url(../images/efeu_links.gif);
width: 70px;
height: 183px;
left: -25px;
top: 175px;
}

.efeurechts {
position: relative;
background-image: url(../images/efeu_rechts.gif);
width: 70px;
height: 183px;
left: 922px;
top: -10px;
}


Und der Code aus der HTML-Datei:
Code:

<ul class="buttondiv">
<div class="efeulinks"></div>
<li><a href="prinzip.html"><img src="images/prinzipmiliarii.jpg" alt="Prinzip Miliarii" / border="0"></a></li>
<li><a href="sinn.html"><img src="images/sinnertrag.jpg" alt="Sinn und Ertrag" / border="0"></a></li>
<li><a href="mitglied.html"><img src="images/mitgliedschaft.jpg" alt="Mitgliedschaft" / border="0"></a></li>
<li><a href="flotte.html"><img src="images/flotte.jpg" alt="Flotte" / border="0"></a></li>
<li><a href="betreiber.html"><img src="images/betreiber.jpg" alt="Betreiber" / border="0"></a></li>
</ul>
<div class="efeurechts"></div>


Wenn ich </ul> im HTML-Code ganz nach hinten setze, passt es zusätzlich bei IE7 nicht mehr.

Bin für jede Hilfe dankbar.

Viele Grüße,

Kerstin
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 14.01.2008 14:31
Titel

Antworten mit Zitat Zum Seitenanfang

Code:
<ul class="buttondiv">
<div class="efeulinks"></div>
<li><a href="prinzip.html"><img src="images/prinzipmiliarii.jpg" alt="Prinzip Miliarii" / border="0"></a></li>
<li><a href="sinn.html"><img src="images/sinnertrag.jpg" alt="Sinn und Ertrag" / border="0"></a></li>
<li><a href="mitglied.html"><img src="images/mitgliedschaft.jpg" alt="Mitgliedschaft" / border="0"></a></li>
<li><a href="flotte.html"><img src="images/flotte.jpg" alt="Flotte" / border="0"></a></li>
<li><a href="betreiber.html"><img src="images/betreiber.jpg" alt="Betreiber" / border="0"></a></li>
</ul>
<div class="efeurechts"></div>


Das hier darf so nicht sein. Eine ungeordnete Liste darf nur listen elemente enthalten.

Code:
<div class="efeulinks"></div>

<ul class="buttondiv">
<li>...</li>
</ul>

<div class="efeurechts"></div>
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
käschdin
Threadersteller

Dabei seit: 09.02.2007
Ort: Berlin
Alter: 43
Geschlecht: Weiblich
Verfasst Mo 14.01.2008 14:36
Titel

Antworten mit Zitat Zum Seitenanfang

Danke, hatte ich auch schon probiert und die Positionen in der CSS entsprechend angepasst. Mein Problem ist nur, dass die Efeu-Grafiken dann nicht mehr über den Buttons liegen (die sollen ein wenig überlappen).
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 14.01.2008 14:42
Titel

Antworten mit Zitat Zum Seitenanfang

Google mal nach "z-index"
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
käschdin
Threadersteller

Dabei seit: 09.02.2007
Ort: Berlin
Alter: 43
Geschlecht: Weiblich
Verfasst Mo 14.01.2008 14:49
Titel

Antworten mit Zitat Zum Seitenanfang

Danke ihr Schatzis. Jetzt passt es überall Lächel
  View user's profile Private Nachricht senden
 
Ähnliche Themen Darstellungsproblem im Firefox (!)
Darstellungsproblem Table IE/FireFox nach einfügen von Layer
[css] Darstellungsproblem nach Link
css > darstellungsproblem > mozilla :-) IE :-(
CSS Browser Darstellungsproblem
CSS Darstellungsproblem IE8
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.