zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden DIV mit SVG und nur Ausschnitt anzeigen - funktioniert nicht richtig....

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.07.2018, 14:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.07.2018
Beiträge: 4
thunderstorm befindet sich auf einem aufstrebenden Ast
Frage 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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.07.2018, 14:44
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Kann man sich das irgendwie live anschauen oder muss jeder sich selbst eine Seite basteln, damit wir sehen können was du meinst?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.07.2018, 15:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.07.2018
Beiträge: 4
thunderstorm befindet sich auf einem aufstrebenden Ast
Standard

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];
. . .
und eines mit
HTML-Code:
. . . 
background-attachment:[B]fixed[/B];
. . .
Angehängte Grafiken
Dateityp: png fixed.png (195,5 KB, 5x aufgerufen)
Dateityp: png scroll.png (180,3 KB, 5x aufgerufen)
Mit Zitat antworten
  #4 (permalink)  
Alt 31.07.2018, 11:36
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Dadurch, dass das Hintergrundbild nach links verschoben ist entsteht dieser weisse Rand, Aber wenn du die Breite und background-attachment komplett wegläßt, dann funktioniert.

Ich finde den Aufbau verwirrend, wozu die Tabelle und warum als Hintergrundbilder?
Mit Zitat antworten
  #5 (permalink)  
Alt 02.08.2018, 15:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.07.2018
Beiträge: 4
thunderstorm befindet sich auf einem aufstrebenden Ast
Standard

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...
Angehängte Grafiken
Dateityp: png scroll.png (180,3 KB, 2x aufgerufen)
Mit Zitat antworten
  #6 (permalink)  
Alt 02.08.2018, 16:30
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

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>
Mit Zitat antworten
  #7 (permalink)  
Alt 06.08.2018, 08:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.07.2018
Beiträge: 4
thunderstorm befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Antwort

Stichwörter
background image, div, svg

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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:32 Uhr.