CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3596190
user3596190

Reputation: 257

How can i change this weather forecast widget position on my website?

I went to accuweather.com site to this area:

Accuweather

And got the right top widget. Copied the code to my site:

<a href="http://www.accuweather.com/en/il/hod-hasharon/212527/current-weather/212527" class="aw-widget-legal">
<!--
By accessing and/or using this code snippet, you agree to AccuWeather’s terms and conditions (in English) which can be found at http://www.accuweather.com/en/free-weather-widgets/terms and AccuWeather’s Privacy Statement (in English) which can be found at http://www.accuweather.com/en/privacy.
-->
</a><div id="awtd1399327708942" class="aw-widget-36hour"  data-locationkey="" data-unit="f" data-language="en-us" data-useip="true" data-uid="awtd1399327708942" data-editlocation="true"></div><script type="text/javascript" src="http://oap.accuweather.com/launch.js"></script>

But it put the widget in the middle on this page and i want it to put it on the right side over the long black coming down just under the digital clock.

This is how it look now on my site:

My Test Site

EDIT

This is what i did in the main-wrap:

<div id="main-wrap">
<div id="sidebar" style="float:right;">
    <a href="http://www.accuweather.com/en/il/hod-hasharon/212527/current-weather/212527" class="aw-widget-legal">
<!--
By accessing and/or using this code snippet, you agree to AccuWeather’s terms and conditions (in English) which can be found at http://www.accuweather.com/en/free-weather-widgets/terms and AccuWeather’s Privacy Statement (in English) which can be found at http://www.accuweather.com/en/privacy.
-->
</a><div id="awtd1399327708942" class="aw-widget-36hour"  data-locationkey="" data-unit="f" data-language="en-us" data-useip="true" data-uid="awtd1399327708942" data-editlocation="true"></div><script type="text/javascript" src="http://oap.accuweather.com/launch.js"></script>

Is that right ? And i have tall-header.html short-header.html no-header.html and landing.html in what one of them to add it to in the main-wrap they all have div main-wrap.

Upvotes: 0

Views: 2169

Answers (2)

JfrmUSA
JfrmUSA

Reputation: 1

Get the new updated code from accuweather.(You need to add this to your style.css)Where you place it is up to you (main menu).This will put it on the top right of the page.I was pulling my hair out for a day trying to get it to work.I know this is a two year old thread,but i thought id give back for all the help this site gave me. 

.aw-widget-current .aw-widget-current-inner { /*+placement: 865px -334px;*/ position: relative; left: 865px; top: -334px; }

Upvotes: 0

agressen
agressen

Reputation: 469

That long, black area is part of the background of your page.

  1. Create a div within <div id="main-wrap"> that represents the area where you want the widget to be. <div id="sidebar" style="float:right;"></div> will do.

  2. Copy the widget code into the new div

Upvotes: 2

Related Questions