nicht angemeldet
Hindergrundbild II
vielen dank für die antworten, ich habe den beitrag nochmals geschrieben, da der lezte weit zurück liegt.
der befehl background-position:middel; positioniert das bild in der mitte der gesamte seite in der tatsächlichen bildgroße, es verteilt das bild nicht!
du möchtest das bild also bei bedarf skalieren? und das für ein <tr>?
mit css geht das nicht. und ich zweifle daran, dass es mit javascript so zu schaffen ist, dass es mehr als in einem browser funktioniert. bzw. mit einem so enormen aufwand, dass sich die frage nach der sinnhaftigkeit des ziels stellt.
was ich möchte ist ein bild als hintergrund, so wie z.B. am computer, wenn mann ein bild als hintergrund stellt. aber! ich möchte dieses bild in einem bestmmten bereich meiner seite darstellen.
leider weiss ich nicht wie es funktioniert und ob es möchlich ist.
danke
gruß
karla
-
Hallo !
vielen dank für die antworten, ich habe den beitrag nochmals geschrieben, da der lezte weit zurück liegt.
Da hast du allerdings recht. Die letzte Antwort auf deine Frage lag sogar schon 52 Minuten zurück.
Sitzt dir die Mafia im Nacken, oder was?
Gruß,
kerki
-
Hi,
versuch das mal mit einem DIV, Bereich, in dem ein LAYER steckt. Dieser Bereich wird absolut positioniert...
Der zweite Bereich ist ebenfallst ein absolut positionierter DIV-Bereich mit den Koordinaten 0,0. Er enthält die eigentliche Webseite. Ich glaube das könnte grob hinpassen...Viele kleine Küsse von Dmitri
-
Hi,
versuch das mal mit einem DIV, Bereich, in dem ein LAYER steckt. Dieser Bereich wird absolut positioniert...
Der zweite Bereich ist ebenfallst ein absolut positionierter DIV-Bereich mit den Koordinaten 0,0. Er enthält die eigentliche Webseite. Ich glaube das könnte grob hinpassen...ich bin etwas unerfahren und verstehe leider nicht was ein div ist, ich kenne im moment nur das nötigste von html.
wäre es möglich mir diesen befehl zu erläutern??
danke
karla-
liebe karla,
ich bin etwas unerfahren und verstehe leider nicht was ein div
ist, ich kenne im moment nur das nötigste von html.
wäre es möglich mir diesen befehl zu erläutern??
danke»»
karla
solange Du mit DHTML noch nicht so vertraut bist,
muessen die ziele eben niedriger gesteckt werden;ganz im ernst, solchen daddelkram, wie gerade oben
gepostet, habe ich noch nie fuer irgendein webprojekt
verwendet - nicht immer sind die komplizierten "layouts" mit
den komplexem html/javascript-konstrukten auch die schoensten;ich persoenlich bevorzuge "klein-einfach-und-fein",
denn schon standard-html laesst tolle "layouts" zu;
in verbindung mit css werden die gestaltungsmoeglich-
keiten noch umfangreicher;
und DHTML sollte nur dort eingesetzt werden, wo ein
sinnvoller zusaetzlicher nutzen fuer den anwender
herausspringt;by(t)e by(t)e - peterS. - pseliger@gmx.net
-
-
-
gruss karla,
vielen dank für die antworten, ich habe den beitrag nochmals
geschrieben, da der lezte weit zurück liegt.da es hier ueblich ist, an einem thread dranzubleiben,
waere das gar nicht noetig gewesen;nun zur hilfe:
Deine fragestellung laesst vieles im dunkeln, so dass man
nur ahnt, welcher art Dein problem sein koennte;was ich möchte ist ein bild als hintergrund, so wie z.B. am
computer, wenn mann ein bild als hintergrund stellt. aber! ich
möchte dieses bild in einem bestmmten bereich meiner seite
darstellen.zu welchem zeitpunkt koennen genaue aussagen ueber die position
und die groesse Deines "hintergrundbildes" getroffen werden ?wie ist der aufbau Deiner seite gegliedert ?
falls Du mit antworten hierher zurueckkommst,
folgt der hilfe 2ter teil - so long - peterS. - pseliger@gmx.net-
da es hier ueblich ist, an einem thread dranzubleiben,
waere das gar nicht noetig gewesen;gut, leider wusste ich das nicht, ich kenne forums in denen die beiträge die zu weit unten liegen nicht mehr beantwortet werden.
nun zur hilfe:
Deine fragestellung laesst vieles im dunkeln, so dass man
nur ahnt, welcher art Dein problem sein koennte;nun, ich habe ein bild (ca. 4x6cm) diese bild mochte ich als hintergrung bild stellen. das problem das ich nun habe ist das das bild eben in dieser größe erscheind, ich möchte dass das bild sich in ein vorgegebenen bereich erschiend in der größe dieses bereiches.
zu welchem zeitpunkt koennen genaue aussagen ueber die position
und die groesse Deines "hintergrundbildes" getroffen werden ?ich verstehen diese frage nicht :(
-
gruss karla,
(1)
nun, ich habe ein bild (ca. 4x6cm) diese bild mochte ich als hintergrung bild stellen. das problem das ich nun habe ist das das bild eben in dieser größe erscheind, ich möchte dass das bild sich in ein vorgegebenen bereich erschiend in der größe dieses bereiches.
(2)
zu welchem zeitpunkt koennen genaue aussagen ueber die position und die groesse Deines "hintergrundbildes" getroffen werden ?
(3)
ich verstehen diese frage nicht :(
na ganz einfach: in (1) sagst Du, dass Dein bild mit einem seitenverhaeltnis von 4 auf 6 "in einem vorgegebenen bereich erscheinen" soll - "in der groesse dieses bereichs"
zur loesung muss man wissen, welche ausdehnung und welche position dieser bereich hat - falls keine genaue aussage darueber getroffen werden kann, weil es sich nicht um "hartcodiertes" html handelt, da dieser bereich z.b.: bei jedem ladevorgang der seite einen dynamisch geschriebenen inhalt umschliesst und auch noch seine lage im browserfenster aendert, gilt es, herauszufinden, zu welchem zeitpunkt eine genaue groessen- und lagebestimmung dieses bereichs moeglich ist;
loesung: (1) "hintergrundbild" vorladen; (2) "den bereich" im html-quelltext mit einem css-formatierten /-definierten div-tag "umschliessen"; (3) einen zweiten css-formatierten/definierten div-container im html-quelltext plazieren; (4) auf body-onload-event die eigenschaften des in (2) erwaehnten relativ positionierten div-containers auslesen (5) die html syntax fuer ein img mit den ermittelten breite/hoehe- werten aus(4) in eine string-variable schreiben; ( ob das seiten verhaeltnis dann noch stimmt, haengt von der ausdehnung des "bereichs" in (2) ab !! ) (6) den string aus (5) in den in (3) genannten div-container schreiben und dieses div auf die ebenfalls in (4) ermittelten x/y-koordinaten verschieben;
- z-index der div-container beachten
und nach der theorie die schnell zusammengestrickte praxis, um das alles hoffentlich nachvollziehen zu koennen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html>
<head> <title>adaptingBgImage.html</title> <script type="text/javascript"> <!-- var imgMyBg = new Image();imgMyBg.src = "http://selfaktuell.teamone.de/src/xweb.gif";
function adaptBgToTable() { var tableLayer = null; if (document.getElementsByTagName) { bgImgLayer = document.getElementsByTagName("div")["myBgImg"]; tableLayer = document.getElementsByTagName("div")["myTable"]; tableLayer.height = tableLayer.offsetHeight; tableLayer.width = tableLayer.offsetWidth; tableLayer.leftX = tableLayer.offsetLeft; tableLayer.topY = tableLayer.offsetTop; alert("document.getElementsByTagName ["+tableLayer.width+","+tableLayer.height+","+tableLayer.leftX+","+tableLayer.topY+"]\n\ndie werte fuer width, height, left, top\n\nACHTUNG - nach dem <OK> kommt der hintergrund - ! PIXELGENAU ! "); bgImgLayer.style.left = tableLayer.leftX; bgImgLayer.style.top = tableLayer.topY; bgImgLayer.innerHTML = '<table cols="1" rows="1" cellspacing="0" cellpadding="0" border="0" bgcolor="#d6d6d6"><tr><td align="left" valign="top"><img src="' + imgMyBg.src + '" width="' + tableLayer.width + '" height="' + tableLayer.height + '" alt="" border="0" /></td></tr></table>'; } else if (document.layers) { bgImgLayer = document.layers["myBgImg"]; tableLayer = document.layers["myTable"]; tableLayer.height = tableLayer.document.height; tableLayer.width = tableLayer.document.width; tableLayer.leftX = tableLayer.pageX; tableLayer.topY = tableLayer.pageY; alert("document.layers ["+tableLayer.width+","+tableLayer.height+","+tableLayer.leftX+","+tableLayer.topY+"]\n\ndie werte fuer width, height, left, top\n\nACHTUNG - nach dem <OK> kommt der hintergrund - ! NICHT PIXELGENAU ! "); bgImgLayer.moveTo(tableLayer.leftX,tableLayer.topY); bgImgLayer.document.open("text/html"); bgImgLayer.document.write('<table cols="1" rows="1" cellspacing="0" cellpadding="0" border="0"><tr><td align="left" valign="top"><img src="' + imgMyBg.src + '" width="' + tableLayer.width + '" height="' + tableLayer.height + '" alt="" border="0" /></td></tr></table>'); bgImgLayer.document.close(); } else if (document.all) { bgImgLayer = document.all.tags("div")["myBgImg"]; tableLayer = document.all.tags("div")["myTable"]; tableLayer.height = tableLayer.offsetHeight; tableLayer.width = tableLayer.offsetWidth; tableLayer.leftX = tableLayer.offsetLeft; tableLayer.topY = tableLayer.offsetTop; alert("document.all ["+tableLayer.width+","+tableLayer.height+","+tableLayer.leftX+","+tableLayer.topY+"]\n\ndie werte fuer width, height, left, top\n\nACHTUNG - nach dem <OK> kommt der hintergrund - !\n\n ... mmh ... left/top-parameter fuer MSIE4 sind nicht lesbar ! .. also nicht brauchbar "); bgImgLayer.style.left = tableLayer.leftX; bgImgLayer.style.top = tableLayer.topY; bgImgLayer.innerHTML = '<table cols="1" rows="1" cellspacing="0" cellpadding="0" border="0" bgcolor="#d6d6d6"><tr><td align="left" valign="top"><img src="' + imgMyBg.src + '" width="' + tableLayer.width + '" height="' + tableLayer.height + '" alt="" border="0" /></td></tr></table>'; } }
function getStyle() { var adapter = ((document.layers) ? (11/10) : 1); var myStyle = ''+ '<st' + 'yle>\n<!' + '--\n'+ '.dummyText {font-family:verdana,helvetica,geneva,arial,sans-serif;font-size:' + Math.round(adapter10) + 'px;line-height:' + Math.round(adapter12) + 'px;color:#000000;}\n'+ '#myBgImg {position:absolute;margin:0px;z-index:0;visibility:visible;}\n'+ '#myTable {position:relative;border-width:1px;border-style:solid;border-color:#ff0000;margin:0px;z-index:1;visibility:visible;}\n'+ '/' + '/-' + '->\n</st' + 'yle>'; return myStyle; } //--> </script> <script type="text/javascript">document.writeln(getStyle());</script> <style>
</style> </head>
<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" onload="adaptBgToTable()"> <div id="myBgImg" name="myBgImg"></div>
<!-- die aeussere tabelle zentriert den gesamten spass --> <table cols="1" rows="1" width="100%" height="100%" cellspacing="0" cellpadding="0" border="0"> <tr> <td align="center" valign="middle">
<!-- die mittlere tabelle ist notwendig, um das folgende in breite und hoehe NICHT DEFINIERTE div am "auseinanderlaufen" zu hindern (kontrollierbar am roten rand dieses divs, ohne und mit dieser tabelle) //--> <table cols="1" rows="1" cellspacing="0" cellpadding="0" border="0"> <tr> <td align="center" valign="middle">
<!-- DAS DIV --> <div id="myTable" name="myTable"> <!-- das objekt unserer neugierde / diese tabelle drueckt seinen div-container auseinander und bestimmt damit dessen breiten- und hoehen- angaben //--> <table cols="3" rows="3" cellspacing="0" cellpadding="0" border="1" bordercolor="#000000"> <tr> <td align="left" valign="top"><span class="dummyText"> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> </span></td> <td align="left" valign="top"><span class="dummyText"> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> </span></td> <td align="left" valign="top"><span class="dummyText"> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> </span></td> </tr> <tr> <td align="left" valign="top"><span class="dummyText"> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> </span></td> <td align="left" valign="top"><span class="dummyText"> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> </span></td> <td align="left" valign="top"><span class="dummyText"> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> </span></td> </tr> <tr> <td align="left" valign="top"><span class="dummyText"> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> </span></td> <td align="left" valign="top"><span class="dummyText"> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> </span></td> <td align="left" valign="top"><span class="dummyText"> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> dummyText dummyText dummyText<br /> </span></td> </tr> </table> </div>
</td> </tr> </table>
</td> </tr> </table> </body>
</html>
so long - schoenes WE - peterS. - pseliger@gmx.net
-
-
-
Hallo,
und noch etwas ist mir eingefallen: Ich glaube dass man die Größe eines Bildes nur beim MSIE verändern kann. Bei Netscape hast du schlechte Karten.
Damit ist dir aber nicht geholfen ;-)
-
Hallo !
Also doch in diesem Thread weiter. :-(
was ich möchte ist ein bild als hintergrund, so wie z.B. am computer,
wenn man ein bild als hintergrund stellt. aber! ich möchte dieses
bild in einem bestimmten bereich meiner seite darstellen.--------^^^^^^^^^^^^^^^^^^^^^^^^^^^
In einem bestimmten Bereich? Ja wieso denfinierst du dieses Hintergrundbild dann nicht einfach für diesen bestimmten Bereich?
Vielleicht liegt hier ein grundlegendes Mißverständnis vor: Es gibt nicht nur _ein_ Hintergrundbild für die gesamte Seite. Du kannst (zumindest theoretisch) quasi jedem Element ein eigenes Hintergrundbild zuordnen, z.B. einer Tabelle.
Ich denke, dass dürfte dein Problem schon einmal gehörig vereinfachen.
Von einer Skalierung des Bildes über den Browser ist hingegen dringend abzuraten. Das sieht mitunter zum Davonlaufen aus.
Gruß,
kerki
-
hallo,
In einem bestimmten Bereich? Ja wieso denfinierst du dieses Hintergrundbild dann nicht einfach für diesen bestimmten Bereich?
weil das so nicht möglich ist: http://forum.de.selfhtml.org/?m=5913&t=863
siehe dazu peters lösung. das ist genau das was ich vorher mit "der aufwand stellt den sinn des zieles in frage" gemaint habe.
und karla wird den code erst gar nicht verstehen, so dass sie ihn auch nicht adaptieren bzw. ändern könnte.grüße
thomas-
Hallo!
In einem bestimmten Bereich? Ja wieso denfinierst du dieses Hintergrundbild dann nicht einfach für diesen bestimmten Bereich?
weil das so nicht möglich ist: http://forum.de.selfhtml.org/?m=5913&t=863
Den Code hatte ich sehr wohl gesehen. Nur: Dass der nicht so bleiben kann (<li> ohne <ol>/<ul>!), dürfte wohl unstrittig sein. Also könnte man bei der Gelegenheit vielleicht die gesamte Struktur so abändern, dass man wirklich _ein_ Element hat, dem man ein Hintergrundbild zudordnen kann.
Ob dieses Bild nun aber gekachelt (wie beim Windows-Desktop) oder skaliert werden soll, erschließt sich mir immer noch nicht.
siehe dazu peters lösung. das ist genau das was ich vorher mit "der aufwand stellt den sinn des zieles in frage" gemeint habe.
und karla wird den code erst gar nicht verstehen, so dass sie ihn auch nicht adaptieren bzw. ändern könnte.Genau deshalb mein Einwand. M.E. war einfach nur Karlas Ansatz falsch.
Gruß,
kerki
-
-