Hi all,

 

I have literally just started to read up about CSS on w3schools but need some help with an immediate problem. I've spent a good few hours trying to sort it myself but without luck i'm afraid :-(

 

I have just set up a Wordpress site (2011 format) and have signed up to an affiliate program that provides a javascript search form for the site. I have inserted the javascript into the body of the page but have no idea how to position the form top, right of the page body with some spacing above and to the left and right of the search box.

 

Do i have to give the javascript <script type='text/javascript' src='http://www.hotelscombined.com/SearchBox/136749'></script> an "ID"?

 

I'm guessing that as the form is unique to just one page the CSS can be on the same page rather than in a CSS File.

 

Sorry to ask - I am planning on learning CSS for myself but just need some help with this item so i can get the site live ASAP

 

Any help would be very much appreciated.

 

Thanks in advance

 

Nick.

One thing to do would be to create a <div> with this script inside it then position that where you want to.

 

It may look something like:

HTML

<div class="affiliate">
    <script type=javascript/text" src="http://www.hotelscom...earchBox/136749"></script>
</div>

CSS

.affiliate {
  top: 0;
  right: 0;
}

You may be able to add the HTML in the right place and then use the CSS to style the item within the existing page

Hi,

 

Thanks for the above :-)

 

I copied the above formulation into the page but all that happened is that the search box has disappeared and in it's place i see the text...

 

.affiliate {

top: 0;
right: 0;
}

 

Actually on the page?

 

Have i missed something or done something wrong?

Can you post a link to your site Nick?

One thing to do would be to create a <div> with this script inside it then position that where you want to.

 

It may look something like:

HTML

<div class="affiliate">
    <script type=javascript/text" src="http://www.hotelscom...earchBox/136749"></script>
</div>

CSS

.affiliate {
  top: 0;
  right: 0;
}

You may be able to add the HTML in the right place and then use the CSS to style the item within the existing page

 

That wouldn't work anyway, "top" and "right" aren't valid attributes. You'd need to control it with a position (relative, absolute, fixed etc) first.

 

Link us to your site Nick and/or post the code, we'll take a look.

Hi guys, Thanks for your help but still not working.

 

The relevant page is here http://fly-prestwick.co.uk/prestwick-airport-hotels/

 

the CSS element seems to be just showing as text on the page?

 

It's very basic at the moment, just wanted to get the form positioned before adding more content and hopefully doing some more styling etc.

Hi, can anyone help me with the above please?

 

still trying to get he position correct but still no luck :-(

Where abouts do you want this form?

Hey the

 

.affiliate {

top: 0;

right: 0;

}

 

should go inside the style.css file rather than in the php page as this then styles the element inside the <div>

 

This was an example of quick code but as Throzen said you need a "position: relative" "position: absolute" etc as well. then you would need to alter the "0" to position it on the page.

Ideally i would like the form top right, next to the first paragraph with perhaps a little spacing around the edges. I've tried several things but no luck :-( I'm totally new to CSS so really need to do a CSS tutorial from the start but just keen to get this search form in place.

 

Many thanks.

 

Nick

Well for one thing you need to put the

 

.affiliate {

top: 0;
right: 0;
}

 

within a style tag either directly on the page or in the external CSS file. Just writing it out like that is basically adding regular ol' text to the page. So it should look like this:

 

<style>

 

.affiliate {

top: 0;
right: 0;
}

 

</style>

 

and then like Junior said you need to have that JS Tag within the div

 

<div class="affiliate">

<script type=javascript/text" src="http://www.hotelscom...earchBox/136749"></script>
</div>

Ok, did it exactly as explained above with the <style> tags but still no Joy :-(