Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen (A bis Z)

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit
GELÖST

Homepagewetter-Code (iframe) von WetterOnline an WordPress-Seite anpassen (Schriftart u. -farbe, Trennbalken entfernen, etc.)

Frage Entwicklung HTML

Mitglied: driftingfever

driftingfever (Level 1) - Jetzt verbinden

24.08.2014, aktualisiert 17.09.2014, 3129 Aufrufe, 3 Kommentare

Moin Moin liebe Leute, ich bin gerad dabei, html zu entdecken und freu mich über Hilfe.
Ich möchte das Homepagewetter von WetterOnline (http://www.wetteronline.de/homepagewetter/bremen) für meine Seite in der Sitebar nutzen, weil ich insbesondere den Regenradar gebrauchen kann. Der Code dafür sieht so aus:


01.
<!-- WetterOnline Homepagewetter Beginn //--> 
02.
<div style="position:relative;background-image:url(http://st.wetteronline.de/img/p_city_hpweather/background/orange.gif?v=1.0.542);background-repeat:repeat-x;border:0px solid #BCBCBC;width:158px;text-align:center;font-family:arial,verdana;"> 
03.
<a href="http://www.wetteronline.de" target="_blank" style="text-decoration:none;color:#000;outline:none;"><img src="http://st.wetteronline.de/img/logo/wetteronline_blue_114x22.png?v=1.0.542" title="WetterOnline" alt="WetterOnline" style="border: 0; padding-top: 2px;"></a> 
04.
<div style="font-size:12px;margin-bottom:2px; font-weight:bold; color:#000; text-align:center;">Das Wetter für<br />Bremen</div> 
05.
<iframe  marginheight="0" marginwidth="0" frameborder="0" scrolling="no" src="http://www.wetteronline.de/?pid=p_city_hpweather&amp;WMO=10224&amp;FORMAT=long&amp;MENU=dropdown&amp;MAP=rainradar" allowtransparency="true" width="158" height="281"></iframe> 
06.
<div style="font-size:10px;height:18px; color:#000; text-align:center;">Mehr auf <a href="http://www.wetteronline.de/" target="_blank" title="WetterOnline Homepage" style="text-decoration:none;color:#000;">wetteronline.de</a></div> 
07.
</div> 
08.
<!-- WetterOnline Homepagewetter Ende //-->
Ich habe schon versucht, folgende Dinge zu ändern:
- Hintergrundbild bzw. -farbe entfernen
- Logo nach unten setzen
- Text "Das Wetter für Bremen" entfernen
- "Anwendung" zentrieren

Ich habe den Wert width auf 203 gesetzt, um die "Anwendung" zu zentrieren, gibt es dafür eine echte Lösung? Mein Code sieht jetzt folgendermaßen aus:

01.
<div style="position:relative;width:203px;text-align:center;font-family:arial,verdana;"> 
02.
<iframe  marginheight="0" marginwidth="0" frameborder="0" scrolling="no" src="http://www.wetteronline.de/?pid=p_city_hpweather&amp;WMO=10224&amp;FORMAT=long&amp;MENU=dropdown&amp;MAP=rainradar" allowtransparency="true" width="158" height="281"></iframe> 
03.
<a href="http://www.wetteronline.de" target="_blank" style="text-decoration:none;color:#000;outline:none;"><img src="http://st.wetteronline.de/img/logo/wetteronline_blue_114x22.png?v=1.0.542" title="WetterOnline" alt="WetterOnline" style="border: 0; padding-top: 2px;"></a> 
04.
</div>
Gerne würde ich noch folgendes ändern:
- Schriftfarbe und Schriftart (von #000 zu #666)
- Entfernen der vertikalen und horizontalen grauen Balken

Ich hoffe, dass mir jemand helfen kann, danke schonmal im Vorraus
Mitglied: colinardo
24.08.2014, aktualisiert um 10:45 Uhr
Moin Christoph,
die fehlt zum zentrieren ein margin: 0 auto im Style des iFrames:
http://jsfiddle.net/x4ccak81/

Aber noch etwas zu der sonstigen Umgestaltung des Contents im iFrame:
Hier gilt die SameOrigin-Policy:
http://stackoverflow.com/questions/583753/using-css-to-affect-div-style ...
Wenn der iFrame von deiner eigenen Seite geladen würde ginge das, ansonsten hast du schlechte Karten.
Würde ich ausserdem unbedingt die Finger von lassen. Das ist nicht im Sinne des Erfinders und könnte dir rechtliche Probleme einhandeln...

Grüße Uwe

p.s. bitte nutze Codetags für das Posten von Programmcode. Merci.
Bitte warten ..
Mitglied: driftingfever
24.08.2014, aktualisiert um 14:51 Uhr
Danke dir schonmal. Man hat mir erlaubt, meine angesprochenen Punkte zu verändern, dann müsste ich doch rechtlich auf der sicheren Seite sein?!? Nur das Logo von denen sollte wohl erhalten bleiben...

P.S. Das mit den codetags merke ich mir, sorry
Bitte warten ..
Mitglied: colinardo
LÖSUNG 24.08.2014, aktualisiert 03.09.2014
Den eigentlichen Inhalt des iFrames wirst du aber wegen der angesprochenen SameOrigin-Policy nicht verändern können, da es von den Browsern aus Sicherheitsgründen(XSS) blockiert wird.
http://stackoverflow.com/questions/4724904/how-to-change-style-of-ifram ...
Alles was sich drum herum befindet kannst du ja nach blieben ändern.
Ansonsten bleibt dir noch die Möglichkeit die Infos selber mit einem PHP-Script von deren Seite auszulesen, dann hast du alle Möglichkeiten der Gestaltung auf deiner Seite...
Bitte warten ..
Ähnliche Inhalte
HTML
gelöst Iframe wird zu klein in div angezeigt (7)

Frage von Thomas91 zum Thema HTML ...

Webentwicklung
gelöst Wordpress Page gestalten ohne die Seite online schalten zu müssen (4)

Frage von Stefan007 zum Thema Webentwicklung ...

Outlook & Mail
Schriftart ändern bei Antwort auf Besprechungsanfrage (5)

Frage von Eduuaard zum Thema Outlook & Mail ...

HTML
Link aus Iframe in neuem Tab öffnen (5)

Frage von frank1983 zum Thema HTML ...

Neue Wissensbeiträge
Windows Update

Novemberpatches und Nadeldrucker bereiten Kopfschmerzen

(14)

Tipp von MettGurke zum Thema Windows Update ...

Windows 10

Abhilfe für Abstürze von CDPUsersvc auf Win10 1607 und 2016 1607

(7)

Tipp von DerWoWusste zum Thema Windows 10 ...

RedHat, CentOS, Fedora

Fedora 27 ist verfügbar

Information von Frank zum Thema RedHat, CentOS, Fedora ...

Heiß diskutierte Inhalte
Server
Bilder aus dem Web mit CSV runterladen (30)

Frage von Yannosch zum Thema Server ...

Server-Hardware
Bestehendes Raid erweitern um 4 gleiche Platten! (Verständnis Fragen) (12)

Frage von Hendrik2586 zum Thema Server-Hardware ...

Windows Update
WSUS 4 (Server 2012 R2) - Windows 10 Updates nicht möglich (12)

Frage von c0d3.r3d zum Thema Windows Update ...