|
|||
DIV mit SVG und nur Ausschnitt anzeigen - funktioniert nicht richtig....
Hallo
Ich muss fuer einen InfoScreen ein HTML File machen, welches einige Images und SVGs anzeigen soll. Soweit funktioniert das auch, nur dass ich es nicht hinkriege, dass das SVG die ganze definierte Breite des DIVs nutzt. Das heisst, es funktioniert, wenn ich "background-attachment: fixed;" mache. Aber dann scrollt eben das Div (in einer Tabelle) und das Bild bleibt stehen. Was habe ich bereits gemacht? im HTML Code ein DIV im TD drin. Die Tabelle ist gegeben. Im Moment muss das leider so bleiben. Aber anyway, die DIVS habe eine Klasse die sind oben im HEAD Bereich definiert. Mittels background-position habe ich den Ausschnitt gewaehlt der angezeigt werden soll; mit background-size habe ich "cover" benutzt und im background-attachment habe ich alles ausprobiert. Sobald ich von fixed weggehe, wird rechts im SVG ein Teil abgeschnitten! Ich war der Meinung dass "scroll" oder "local" sollte das doch mit dem Scrolling mitgehen UND KEINE Groessenanpassung erfahren, oder bin ich da falsch. Ich hab grad keine Ahnung was ich tun soll. Die PNG und JPG funktionieren.... Evtl. hat ja jemand einen Trick oder die richtigen Styles? Hier der Code (halt jetzt in einen einzigen HTML und auch nicht sonderlich aufgeraeumt): Es geht um das erste Bild oben links (die Klasse heisst .map_svg1) HTML-Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Briefingwand</title> <style> .map_svg1{ background-image: url('https://uwis-gravitylab.s3.amazonaws.com/map.svg'); background-repeat: no-repeat; background-attachment: fixed; background-position: -165px 0px; width: 753px; height: 520px; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } .nthsabc00{ background-image: url('http://www.jetplan.com/weather/data/maps/nthsabc00.gif'); background-repeat: no-repeat; width: 753px; height: 520px; background-size: 100%; } .dwd_wetterkartenBodendruck{ background-image: url('http://www.dwd.de/DWD/wetter/wv_spez/hobbymet/wetterkarten/bwk_bodendruck_na_ana.png'); background-repeat: no-repeat; width: 753px; height: 520px; background-size: 100%; } .polarlichtVorhersage1, .polarlichtVorhersage2{ background-image: url('http://www.polarlicht-vorhersage.de/kp_high.png'); background-repeat: no-repeat; width: 753px; height: 260px; background-size: 100%; } /* ----------------- Zeile 3..... -------------- */ .two_atl_0d0{ background-image: url('http://www.nhc.noaa.gov/xgtwo/two_atl_0d0.png'); background-repeat: no-repeat; background-position: 0px 0px; width: 753px; height: 520px; background-size: cover; } .typhoonmap{ background-image: url('typhoonmap.png'); background-repeat: no-repeat; background-position: 0px 0px; width: 753px; height: 520px; background-size: cover; } .asiakarte{ background-image: url('asiakarte.jpg'); background-repeat: no-repeat; background-position: 0px 0px; width: 753px; height: 520px; background-size: cover; } .delhi{ background-image: url('delhi.png'); background-repeat: no-repeat; width: 377px; height: 260px; background-size: 100%; } .mumbai{ background-image: url('delhi.png'); background-repeat: no-repeat; width: 377px; height: 260px; background-size: 100%; } /*------------- Zeile 4 .... ------------- */ .peking{ background-image: url('delhi.png'); background-repeat: no-repeat; width: 377px; height: 260px; background-size: 100%; } .shanghai{ background-image: url('delhi.png'); background-repeat: no-repeat; width: 377px; height: 260px; background-size: 100%; } </style> </head> <body> <table width="2860" height="1040" border="2"> <tr> <td width="741" rowspan="2"> <div class="map_svg1"></div> </td> <td width="724" rowspan="2"> <div class="nthsabc00"></div> </td> <td width="707" rowspan="2"> <div class="dwd_wetterkartenBodendruck"></div> </td> <td width="610" colspan="2"> <div class="polarlichtVorhersage1"></div> </td> </tr> <tr> <td colspan="2"> <div class="polarlichtVorhersage2"></div> </td> </tr> <tr> <td rowspan="3"> <div class="two_atl_0d0"></div> </td> <td rowspan="3"> <div class="typhoonmap"></div> </td> <td rowspan="3"> <div class="asiakarte"></div> </td> </tr> <tr> <td> <div class="delhi"></div> </td> <td> <div class="mumbai"></div> </td> </tr> <tr> <td> <div class="peking"></div> </td> <td> <div class="shanghai"></div> </td> </tr> </table> </body> </html> |
Sponsored Links |
|
|||
Ist leider abgeschottet im Intranet und von aussen nicht zugänglich.
Aber den Code sollte man direkt als HTML abspeichern können, dann geht es schon....zumindest einige Bilder und das SVG die via URL reingeholt werden. Ansonsten habe ich grad noch zwei Screenshots reingetan, eines mit..... HTML-Code:
. . . background-attachment:[B] scroll[/B]; . . . HTML-Code:
. . . background-attachment:[B]fixed[/B]; . . . |
|
|||
Ich gebe Dir recht, Tabellen und so'n Zeug ist von gestern!
So auf die Schnelle muss ich die Tabellen aber so belassen denn wie gesagt, das "Ding" wird NUR auf einem TV Screen angezeigt und ich weiss nicht was genau dahinter steckt. Ohne "width" und "background-attachment" und auch wenn Attachment Attrubit "scroll"heisst) scrollt zwar das Bild nun mit ,ABER... es fehlt der ganze östliche Teil von Nordamerika (siehe stellvertretend in der Beilage scroll.png), es gibt einen senkrechten weissen Balken. Wenn Du eine Alternative hast, wie man Ausschnitte von Bildern besser reinkriegt als mit Background Styles, bin ich sehr offen... |
|
||||
Jetzt verstehe ich so langsam was du willst. Das Bild soll größer sein als der Ausschnitt, der gezeigt werden soll.
Ich würd das grob so machen: HTML-Code:
<style> .map { position:relative; width:753px; height: 520px; overflow:hidden; } .map img { position:relative; height:100%; left:-165px; width:918px; } </style> <div class="map"> <img src="https://uwis-gravitylab.s3.amazonaws.com/map.svg"> </div> |
|
|||
Hi protonenbeschleuniger
Danke für die Hilfe. Ach, das hatte ich nicht bedacht.... könnte ja ein IMG Tag benutzen. Einfacher war ein DIV alleine mit Background-Image. Es funzt auf jeden Fall. Super . Gruss und eine gute Woche Joel |
Stichwörter |
background image, div, svg |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 17:53 |
[gelöst] inneres div über äußeres div anzeigen | maeck | CSS | 2 | 30.05.2010 19:57 |
Aut. Zeilenumbruch in div & p Elementen funktioniert nic | peeed | CSS | 3 | 19.01.2005 20:22 |
relative hight bei div funktioniert nicht! | Michael84 | CSS | 3 | 29.12.2004 05:19 |
div funktioniert im IE aber nicht in NS 7.1 | 18inch | CSS | 4 | 22.09.2004 15:29 |