Hallo,
ich möchte rechts ausserhalb der Webseite einen Banner positionieren, der aber an der gleichen Position stehen bleibt, wenn die Bildschirmauflösung veränder wird.
Muster hier:
http://www.roevenich-immobilien.de/test.htm
Meine derzeitige CSS-Anweisung bei einer Bildschirmauflöung von 1920x1080:
#eurokaution-rechts { position: relative; width: 770px; }
#eurokaution { position: absolute; right: 145px; top: 180px; }
Wer weiss was?
Danke im Voraus!
Hallo Klaus,
wenn ich das richtig sehe, hast du es auf der genannten Site schon (teils) gelöst, mit „fixed“.
Die Probleme:
Die „fixed“-Positionierung ist mit der automatischen Zentrierung nicht vereinbar, jedenfalls nicht allein auf css-Basis ohne Javascript.
Lösung ohne auto-Zentrierung:
* der Div „eurokaution-rechts“ kann entfallen.
* width aus der body-Def. raus
* alles außer „eurokaution“ in einen Div mit width 760
* alles komplett in einen weiteren Div mit width 1080
* „eurokaution“ mit left 770 statt right.
Lösung mit auto-Zentrierung und Javascript: bei jeder Änderung der Fensterbreite die neue Breite ermitteln, und die left-Positionierung von „eurokaution“ neu bestimmen:
newLeftPos = 760 + 10 + (windowWidth - 760)/2
empfehlenswert ist das nicht. „eurokaution“ würde bei Fensteränderungen erkennbar „zittern“, weil die Position permanent nachkorrigiert wird.
was soll ich denn wissen?
das teil ist da wo es soll und bleibt da.
problem??
Hallo Klaus,
die Auflösung spielt keine Rolle, du machst die Website nicht für deinen Bildschirm, sondern für die breite Masse, die alle verschiedene Bildschirmauflösungen haben.
Zudem sind deine Informationen kärglich. Bei relative Anordnung orientiert sich das Element an das Elternelement. Also muss man wissen wo dein Banner verzeichnet wurde. Ein Link zu deiner Website wäre zielführender 
.
Dein Banner kann nicht zwei ID haben, entscheide dich welche von den zwei du nehmen möchtest.
Dein Musterbeispiel hat folgende Anweisung:
#eurokaution {
position: fixed;
right: 10px;
top: 180px;
Mach das genau so, oder nimm die Abstände in % oder em.
Gruß
Maja
Hallo Thorn,
erstmal Danke, Du hast es richtig erkannt.
Eurokaution-rechts habe ich entfernt, war nicht nötig.
Wenn ich den Rest aber richtig verstehe, ist eine automatische Positionierung ohne Java nicht möglich und mit Java nicht empfehlenswert.
Welche Lösung gibt es noch?
Danke Maja, aber das alleine reicht leider nicht aus.
Bitte Klaus 
, aber ich kann dir schlecht helfen, bei so wenig Infos. Sende ein Link, dann kann ich schauen, woran es liegt, dass das nicht klappt. Wahrschenlich hat das Element irgendeine andere Anweisung geerbt und deshalb funktioniert das nicht.
Oder schau selbst mit Firebug (https://addons.mozilla.org/de/firefox/addon/firebug/) welche Anweisungen sich dazwischen *drängen*.
Hallo Maja,
der W3C CSS Validierungsdienst meldet keinen Fehler.
Links hatte ich eigentlich beigefügt, aber hier nochmal:
Für den Test,
www.roevenich-immobilien.de/test.htm
und das Original,
http://www.roevenich-immobilien.de/mustervertraege/m…
Gruss
hm, vielleicht fällt einem wahren CSS-Künstler noch was ein, das ich nicht kenne
Ich persönlich empfehle dir, auf die auto-Zentrierung zu verzichten: ist nicht mehr modern, speziell wg. der zunehmenden Verbreitung mobiler Geräte, auf denen das mangels Platz gar keinen Sinn hat. Im Unterschied zu einer Javascriptlösung sehr einfach zu machen, und eben nicht javascript-abhängig.
Ein weiterer Denkansatz: auf das „fixed“ verzichten, und stattdessen einen „normalen“ Banner nehmen, der mitscrollt. „fixed“ wird hauptsächlich für Kopf/Fußzeilen verwendet, die einen Zweck (Navigation, Information) erfüllen und bei denen die permanente Sichtbarkeit einen Usability-Gewinn darstellt. Ein „fixed“ Element, das nur der Werbung dient, könnte als aufdringlich empfunden werden.
Gruß
Thomas
Hallo Thomas,
mach mal bitte einen konkreten Lösungsvorschlag mit Quelltext, den ich als Laie auch umsetzen könnten. Danke im Voraus und Guten Rutsch ins neue Jahr.
hm, vielleicht fällt einem wahren CSS-Künstler noch was ein,
das ich nicht kenne
Ich persönlich empfehle dir, auf die auto-Zentrierung zu
also wie gesagt, „eurokaution-rechts“ entfällt.
Das body Tag ohne „margin“ und ohne „width“ im CSS.
„eurokaution“ mit folgendem CSS:
#eurokaution {
left: 780px;
position: fixed;
top: 180px;
}
ALLES außer „eurokaution“ in einen neuen DIV, dieser mit dem Style
style="width:760px;"
Hallo Thorn,
danke das klappt, leider aber nur wenn ich die Seite nicht zentriere, was ich aber möchte.
Hast Du dafür auch noch eine Lösung?
Gruß
Nochmal,
was hälst du von eine Script in dem ich die Bildschirmauflöung abfrage und danach ein entsprechender Container aufgerufen wird. Wenn das eine Lösung wäre, wie könnte der Schrift und der Container ausehen?
Danke im Voraus.
Gruss
Da war ich etwas zu schnell, hier nochmal korrigiert:
Was hälst du von einem Script in dem ich die Bildschirmauflöung abfrage und danach ein entsprechender Container aufgerufen wird. Wenn das eine Lösung wäre, wie könnte der Script und der Container ausehen?
Danke im Voraus.
ok, also die javascript Lösung, anhand des jetzigen Zustands von test.htm - die optimale Breite des Contentbereichs scheint 820px zu sein.
Also bekommt das body Tag im CSS wieder das auto-margin und die passende content-Breite:
body {
background-color: #FFD8B7;
color: black;
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: 15px;
padding: 0;
margin: auto;
width: 820px;
}
„eurokaution“ wird erst beim Laden der Seite per Javascript positioniert und sichtbar gemacht, daher hat es im CSS keine left-Position:
#eurokaution {
position: fixed;
top: 180px;
}
… und im HTML vergibst du das style-Attribut zum Verstecken:
Ebenfalls im HTML bekommt das body-Tag zwei Event-Handler:
Und am Ende vom HTML, vor dem schließenden body-Tag, das Javascript:
var bodyWidth = 820;
var adLayer = null;
function setLayerPos() {
var leftPos = Math.floor((window.innerWidth - bodyWidth)/2) + bodyWidth + 10;
adLayer.style.left = leftPos + "px";
}
function startLayerPos() {
adLayer = document.getElementById('eurokaution');
setLayerPos();
adLayer.style.visibility = "visible";
}
Darin muss die Variable bodyWidth passen zu der Breite, die du per CSS definiert hast.
Ich würde ein deutlich schmaleres Werbebanner verwenden, dann muss das Fenster nicht so riesenbreit sein, bevor man den Banner überhaupt vollständig sieht.
Hallo Thorn,
uff, das ist ja eine Menge, mal sehen, ob ich das hinkriege. Hast Du vieleicht einen Skype-Anschluss, weil ich im Ausland sitze. Wenn ja, schicke mir diesen bitte über [email protected].
Einstweilen vielen Dank für Deine Mühe.
Gruss
Hallo Thorn,
wie ich befürchtet habe, habe ich scheinbar Fehler gemacht. Die Formatierung ist komplett hin.Schau noch mal bitte in den Quellcode. Danke.
Gruss
Du hast alles an die korrekten Positionen kopiert, dabei aber leider immer die Formatierungszeichen
und
mit kopiert 
die müssen überall raus (CSS und HTML). Am Besten löscht du immer die ganze Zeile, denn zumindest in der CSS-Datei „vpage3.css“ ist vor dem ersten
noch ein komisches Steuerzeichen reingerutscht.
Hallo Thorn,
damit hatte ich jetzt nicht mehr gerechnet und es schon aufgegeben. Ich habe zwar versucht, alles wieder herzustellen, dabei ist aber wahrscheinlich wieder etwas schief gelaufen. Hast Du Interesse daran, mich via Skype und Teamviewer gegen Bezahlung ein bischen Nachhilfe in CSS zu geben? Wenn ja, wie kommen wir zusammen.
Was heisst „damit jetzt nicht mehr gerechnet“ ?!
Meine letzte Antwort kam am selben Abend wie deine letzte Frage.
Direkter Kontakt - niemals. Bitte beachte mein Userbild.
Mit CSS hat das auch gar nix zu tun, du hast nur den DIV „eurokaution“ 2x erzeugt. Siehe:
http://validator.w3.org
Meinerseits ist es jetzt genug mit der kostenlosen Unterstützung für eine offensichtlich gewerbliche Website.
Wünsche dir gutes Gelingen,
viele Grüße
Thomas