Bild zentrieren
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angabe
bild
code
dank
design
fehler
hintergrundbild
hinweis
http
image
index
position
problem
status
testen
text
url
weben
webseite
zeichen
-
Hallo,
ich hab schon seit zwei Tagen nen dickes Problem...
Ich hab in meine Seite eine alternative Scrollbar mit Javascript integriert.
Allerdings funktioniert der mit meiner Bild-Zentrierung mit (top: 50%; left:50%; margin-top: 295px; margin-left: 500px;) komischer weise nicht. Der lässt sich dann nicht scrollen... ;(
Aber ich bekomm das Bild sonst mit keiner anderen Methode zentriert. Es kann aber auch nicht als Hintergrundbild gemacht werden, oder zumindest muss das div zentriert werden, damit ich dieses übergeordnete Element für die Positionierung der anderen Elemente nutzen kann.
Ich weiß echt nicht mehr weiter...
Bitte helft mir...
html ist auf naturesirits.net
und css unter naturespirits.net/styles/style.css
Ich versteh das einfach nicht und komm absolut nicht wieter!
Nun ja, ich hoff mal, dass ihr Hilfe für mich habt.
Gruß
Feya -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hallo feya82!
Ich habe versucht die Seite naturesirits.net zu öffenen, die gibt es aber nicht. Bin aber dann durch die Angabe des CSS draufgekommen, dass es naturespirits.net heißen soll.
Dort habe ich keine Scrollbar gesehen. Wo soll die sein?
Wenn ich mit dem Rad an der Maus scrolle, bekomme ich einen JavaScript-Fehler:
Fehler: document.getElementById(id) is null
Quelldatei: http://naturespirits.net/index.php?nav=stammtisch
Zeile: 285
Um dir helfen zu können, gib uns bitte genauere Hinweise, welches Bild zentriert werden soll und vor allem wo es sich befindet!
-
Von Scrollbar sehe ich da auch nichts, allerdings eine Laufschrift. In der Zeile mit der Laufschrift erscheinen, wenn man aufs Untermenü "Community" geht, zwischen den einzelnen horizontalen Menüauswahlbereichen allerdings Zeichen, die dort nicht hingehören.
Um was von dem Scrollbarfehler sehen zu können, wäre sinnvoll, mal soviel Text bereit zu stellen, daß eine Scrollbar überhaupt benötigt und damit erst angezeigt wird.
Die Seite selbst hat ein ausgesprochen ansprechendes Design, möchte ich allerdings mal anmerken.
@wagnerm : Von wo wird Dir denn der Javascriptfehler gemeldet ? Benutzt Du irgendein Analyse-Tool ? Ich habe mit der Seite keinerlei Problem außer dem genannten Darstellungsfehler, der sich bei horizontalen Untermenüs wiederholt.
Oha ! Standardmäßig nutze ich den Firefox. Darum aktualisere ich auch IE nicht. Jetzt habe ich mir aber mal die Seite mit dem IE 6 angesehen, der ursprünglich bei XP enthalten ist. Da sind die Abstände zwischen den vertikalen Menüteilen zu hoch und die beiden letzten befinden sich dadurch unterhalb der Grafik. Außerdem gibt es dann links oben neben dem Text "Herzlich willkommen" 8 nicht darstellbare Zeichen, wo eigentlich der Schmetterling sein sollte. Dafür entfallen zwar die oben erwähnten, beim Firefox sichtbaren, störenden Zeichen, wofür dann aber die Menüeinträge ohne jede Lücke direkt nebeneinander geklatscht sind.
Beitrag zuletzt geändert: 7.4.2011 7:56:52 von rorambur -
rorambur schrieb:
Ich habe im Firefox neben Firebug auch das Add-on "Web-Developer-Toolbar" installiert. In dieser Toolbar werden rechts drei Symbole nebeneinander angezeigt. Das erste Symbol zeigt den Status über die Standardkonformität der aktuellen Seite, das zeite den CSS-Status und das dritte den JavaScript-Status. Grünes Häkchen = Alles ist in Ordnung, roter Kreis mit weißem Kreuzchen = Da ist wo ein Fehler bzw. eine Warnung. Es ist in Kombination mit Firebug bei der Entwicklung ein echt hilfreiches und nützliches Add-on!
@wagnerm : Von wo wird Dir denn der Javascriptfehler gemeldet ? Benutzt Du irgendein Analyse-Tool ? Ich habe mit der Seite keinerlei Problem außer dem genannten Darstellungsfehler, der sich bei horizontalen Untermenüs wiederholt.
Und beim Versuch mit dem Rädchen an der Maus zu scrollen, wandelt sich das grüne Häkchen beim JavaScript-Status eben in einen roten Kreis mit weißem Kreuzchen.
Beitrag zuletzt geändert: 7.4.2011 8:43:59 von wagnerm -
Danke für den Hinweis. Ich habe gerade mal danach gesucht, bekomme aber mit https://addons.mozilla.org/de/firefox/search/?q=web+developer+toolbar 31 Ergebnisse. Wie heißt denn dieses Addon genau ? Würde ich mir dann auch installieren.
Na gut, bei genauerem Hinsehen merkt man dann, daß die meisten Suchergebnisse was völlig anderes sind. Aber es bleiben dennoch mehrere zur Auswahl.
Beitrag zuletzt geändert: 7.4.2011 10:01:19 von rorambur -
Das Add-on ist auf einer anderen Seite zu finden. Auf meiner Seite (hier - noch immer im alten Design...) habe ich einen Link unter "Web Developer Toolbar für Firefox oder Chrome" gepostet.
Hope it helps!
Beitrag zuletzt geändert: 7.4.2011 10:10:11 von wagnerm -
Danke ! Von Chris Pederick habe ich auch den "User Agent Switcher" - sehr interessantes Teil.
Ach - und wie ich gerade sah, hatte ich das von Dir benutzte Tool sogar schon mal vor einer Weile benutzt, dann aber irgendwann deaktiviert. Wahrscheinlich weil ich es danach aktuell nicht mehr brauchte. Dann muß ich es jetzt ggf. nicht mal neu runterladen, es sei denn, es gäbe eine neuere Version.
-
hallo,
und erst einmal sorry, dass ich mich die ganze zeit nicht gemeldet hab (war leider durch margen-darm verhindert) und auf jeden fall schon mal ein dickes dankeschön für das nachschauen und den lob und die kritik.
also die tools werde ich mir auf jeden fall mal schön installieren! richtig klasse die hinweise. ;) dankeschön hierfür.
also unter naturespirits.net/index.php?nav=tiere ist mehr text angegeben...
das bild, das zentriert werden soll ist das hintergrundbild halt, also so dass die ganze seite dann zentriert ist.
das hintergrundbild wird ja immer mit 1000px geladen.
das mit dem mouserad... nun ja, da bin ich derzeit noch am arbeiten...
habs bisher leider noch nicht hinbekommen, dass man das mouserad nutzen kann... :/
vielen dank nochmals
und viele liebe grüße
feya -
Zwar bin ich kein Experte für HTML, php usw., aber weiß mittlerweile ganz gut, wie man Google-Suchen konkretisiert. Deinen Angaben folgend, könntest Du vielleicht was bei diesen Suchlinks finden. Mit Überschneidungen ist wahrscheinlich zu rechnen.
"hintergrundbild zentrieren"+"html"
"hintergrundbild zentrieren"+"php"
"webseite zentrieren"+"php"
"webseite zentrieren"+"html"
Viel Erfolg !
-
Versuche mal im CSS Folgendes:
Das <img>-Tag mit dem Bild kannst du dann aus dem HTML entfernen.div#background { background:url("../images/design.png") no-repeat scroll 50% 0 transparent; height:590px; left:50%; margin-left:500px; position:relative; width:1000px; }
Hast du dir das so vorgestellt? Jedenfalls hab ich das so verstanden!
-
hm... also da wird mit dann von der page gar nix mehr angezeigt, wenn ich das so mache...
denk aber ma schon, dass das grundsätzlich so wäre, wie ich es mir vorstell. zumindest, wenn dann der scrollbalken noch funktionieren sollte ;)
@pflanzenfreund: google hab ich schon ausführlich durchforstet und unterschiedlichste lösungsansätze ausprobiert... dennoch danke für die hinweise. -
feya82 schrieb:
Oops, sorry, da ist mir ein Fehler unterlaufen
hm... also da wird mit dann von der page gar nix mehr angezeigt, wenn ich das so mache...
Beim margin-left fehlt das Minus! Um den Content horizontal zu zentrieren, müsste es also richtig lauten:
Damit es auch vertikal zentriert ist, wenn du das möchtest, könntest du Folgendes angeben:#background { background:url("../images/design.png") no-repeat scroll 50% 0 transparent; height:590px; left:50%; margin-left:-500px; position:relative; width:1000px; }
#background { background:url("../images/design.png") no-repeat scroll 50% 50% transparent; height:100%; left:50%; margin-left:-500px; position:relative; width:1000px; }
Beitrag zuletzt geändert: 13.4.2011 8:44:09 von wagnerm -
ok... wird versucht... irgendwie spinnt nur grad mein ftp-client...
meld mich dann, wenn ichs ausprobiert hab.
--- update
also... getestet...
das ist genau das problem, was ich beschrieben hab...
durch die angabe von
left:50%; margin-left:-500px;
kann man dann auf einmal nicht mehr scrollen.
ersichtlich unter: http://naturespirits.net/index.php?nav=tiere
hier sollte eigentlich gescrollt werden können...
Beitrag zuletzt geändert: 13.4.2011 9:20:02 von feya82 -
OK, versuch mal im "span#contentClip" statt dem generellen "overflow:hidden;" explizit "overflow-x:hidden;" und "overflow-y:auto;" anzugeben:
Dann kann ich mit dem Mausrad scrollen.#contentClip { clip: rect(0pt, 570px, 225px, 0pt); height: 225px; left: 280px; overflow-x: hidden; overflow-y: auto; position: absolute; top: 235px; width: 570px; z-index: 10; }
Beitrag zuletzt geändert: 13.4.2011 9:41:26 von wagnerm -
hm...
nun ja, das problem liegt ja bei dem scrollbalken mit javascript also der ranke da mit dem schmetterling...
den sollte man dann schon auch bewegen können. und das geht ja so irgendwie nicht. warum auch immer.
ich hab halt nur rausgefunden, dass es definitiv mit dem
left:50%; margin-left:-500px;
zusammenhängt. keine ahnung warum. dafür kenn ich mich einfach zu wenig mit javascrit aus... ich mach ja alles selbst, aber bei javascript hört es dann derzeit zumindest leider auf. ;(
ich bemüh mich zwar schon die ganze zeit da das mouserad zu integrieren, aber bin da ja auch noch auf keinen grünen zweig gekomm. nun ja, hab halt nen script gefunden gehabt, dass man verwenden darf und hab da für mich die änderungen vorgenommen.
aber der js balken funktioniert halt nicht mehr, wenn diese angaben gemacht werden.
Allerdings kann ichs ja momentan leider nicht weiter testen, wo die Festplatten voll sind... ;( -
Von php habe ich zwar quasi null Ahnung, aber mit Positionieren bei HTML und paar älteren Programmiersprachen. Kann es sein, daß irgendwo feste Positionsangaben ausgewertet werden, die nun nach den Änderungen keine korrekte Relation mehr zum Rest haben ?
-
Nun ja, das ist eindeutig ein JavaScript Fehler. Ich dachte zuerst, dein Problem liegt im CSS. Da haben wir wohl anfangs an uns vorbei geredet...
Mit CSS gibt es keine Lösung die Scrollbar mit Bildern zu füttern...
Aber ich habe folgende Seite gefunden, die dir vielleicht noch weiterhelfen könnte: http://carotut.voila.net/tutoriel/scrollbar_en_images/index.htm. Sie ist zwar auf französisch, aber die Bilder und JavaScript sind zum Glück mit jeder Sprache zu verstehen.
Und eine Seite habe ich noch ausfindig gemacht: http://www.webreference.com/authoring/style/sheets/custom-scrollbar/. Eventuell kann dir auch diese behilflich sein.
feya82 schrieb:
Hast du keinen lokalen Webserver zum entwickeln und testen?
Allerdings kann ichs ja momentan leider nicht weiter testen, wo die Festplatten voll sind... ;(
-
@pflanzenfreund: ja, das ist grad alles ein wenig daneben, weil der upload unterbrochen wurde und da jetzt ne fehlerhafte datei auf dem server liegt und kanns ja momentan net neu hochladen... ;)
@wagnerm: danke erst mal nochmal... aber das script hab ich genau von der seite geholt... und das mit den css... ich glaub, da muss ich dir mal wohl für danken! das scheint wohl genau das richtige zu sein!!! muss ich mir ma in ruhe anschaun! meld mich dann nochma... ähm, ja *schäm* natürlich hab ich nen entwicklungs webserver... irgendwie total vergessen... *rofl*
*seufz* was mach ich denn jetzt? kann doch irgendwie nicht sein, dass das nicht mehr zu scrollen geht, wenn ich das zentrieren will... echt komisch irgendwie..
Beitrag zuletzt geändert: 14.4.2011 19:43:44 von feya82 -
^^ Benutzt Du u.a. den FireFox als Browser?
Für den FireFox gibt es das Addon Firebug, mit dem sich alle Änderungen bequem innerhalb des Browsers anzeigen lassen, ohne etwas hochladen zu müssen.
-
juhuuu!!!
dank wagnerms tipp (http://www.webreference.com/authoring/style/sheets/custom-scrollbar/) habe ich mein problem endlich lösen können. kann jetzt scrollen und zentrieren. funktioniert alles wunderbar!
dankeschön wagnerm!!!
gruß
feya -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
