zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Positionierungsprobleme mit Safari und Opera

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.05.2015, 23:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.05.2015
Beiträge: 1
cyberian90 befindet sich auf einem aufstrebenden Ast
Standard CSS Positionierungsprobleme mit Safari und Opera

Hi,

ich versuche verzweifelt einen "ScrollToTop"-Button an einer bestimmten Position fest anzeigen zu lassen.

Ich habe ein mittig platzierten Container, der den Inhalt meiner Seite umschließt. Dieser Container ist 1024px breit, der Abstand links und rechts zum Bildschirmrand ist entsprechend mit

HTML-Code:
margin: 0px auto;
eingestellt.

Der Button soll nun mit

HTML-Code:
position: fixed;
immer am rechten Rand meines Containers und gleichzeitig 12px vom unteren Bildschirmrand entfernt angezeigt werden. Ich habe das für IE, FF und Chrome so gelöst (funktioniert einwandfrei):

HTML-Code:
#scrollToTop
{
      width:                     38px;
      height:                    38px;
      text-align:               center;
      background:            whiteSmoke;
      background-repeat:  no-repeat;
      font-weight:             bold;
      color:                      #444;
      text-decoration:       none;
      position:                  fixed;
      bottom:                   12px;
      right:                      -moz-calc(50% - 511px);
      right:                      -webkit-calc(50% - 511px);
      right:                      -o-calc(50% - 511px);
      right:                      calc(50% - 511px);
      display:                   none;
      background:            url('img/top.png') no-repeat;
}
Lediglich in Safari und in Opera wird mein Button partout am linken Bildschirmrand, 12px vom unteren Rand entfernt angezeigt. Hat jemand eine Idee, wie sich das Problem lösen lässt?

Den Button im Inhaltscontainer rechts auszurichten ist keine Option, da der Scroll-Button permanent an derselben Stelle des Bildschirms zu sehen sein soll.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.05.2015, 08:05
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Anstelle eines crosspostings (von psdtutorials.de) hättest du auch googlen können
Dann hättest du das vielleicht gefunden.

btw, Opera (Version 29) hat die selbe rendering engine wie chrome, also wenn es dort passt, dann passt es auch im Opera. Die veraltete Opera Version 12 kann calc noch nicht so umfangreich wie die aktuelle, das wirst du in dem Browser also nicht hinbekommen. Wie es um Safari aussieht weiß ich nicht, der hat aber auch keine berauschenden Marktanteile ^^
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.05.2015, 08:36
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

mit deinen Quellcodeschnipseln ist wenig anzufangen.

Zitat:
immer am rechten Rand meines Containers und gleichzeitig 12px vom unteren Bildschirmrand entfernt angezeigt werden
Das kann eigentlich nicht funktionieren. Dich gehe davon aus, das sich der Button im HTML-Quelltext innerhalb des Inhaltscontainers befindet.

Dann gibt es nur zwei Möglicheiten:

1. Der Button befindet sich (wie standardmäßig vorgesehen) im Fluss. Damit ist seine Position abhängig vom Behälter.

2. Der Button ist aus dem Fluss herausgenommen. Dann ist seine Position vom Fenster abhängig.

Gemischte Lösungen (rechter Rand zum Behälter, unterer Rand zum Fenster) sind technisch nicht möglich.

Du kannst also mit "position: fixed" höchstens dafür sorgen, das der Abstand vom Fensterrand scheinbar zum Container passt. Dafür sind solche Konstruktionen wie deine in der Regel überhaupt nicht notwendig.

Der aktuelle Safari kann auch mit calc umgehen. Kann es sein du es mit der Safari-Windows-Version getestet hast? Die wird seit über 2 Jahren offiziell nicht mehr unterstützt und entsprechend auch nicht weiter entwickelt. Das der Safari vernachlässigt werden kann soll aber wohl eher ein Witz sein.

Gruss

MrMurphy

Geändert von MrMurphy (06.05.2015 um 09:10 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 06.05.2015, 15:25
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
Anstelle eines crosspostings (von psdtutorials.de) hättest du auch googlen können
Aber Crosspostings sind wichtig, damit man zeigen kann, dass sein Problem so unglaublich wichtig ist!


A Pen by Captain Anonymous
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Antwort

Stichwörter
calc, css, opera, right, safari

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS display block (?) und Opera vega CSS 4 06.11.2014 14:00
In Safari, Opera ist Fußzeile zu tief pixel24 CSS 6 14.12.2009 18:38
white-space = Valides CSS für IE, Opera, usw. schmidtsmikey CSS 4 21.05.2008 21:10
pdf im Firefox und Opera und Safari paracelsus Offtopic 4 03.11.2007 14:19
CSS - align="right" nur Im Opera. Firefox und IE nicht frankm123 CSS 8 08.06.2006 15:52


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:12 Uhr.