19 replies [Last post]
Kevstar
Kevstar's picture
Offline
Enthusiast
England
Last seen: 5 years 4 weeks ago
England
Timezone: GMT+1
Joined: 2012-07-20
Posts: 81
Points: 107

Hello.

I have just started with my site (www.xclo.co.uk) and have a average knowledge of coding.

My problem is. I have a search bar on my master page at http://www.xclo.co.uk/top2.html, what I would like is to make it wider (height) so that it dominates the master page so to speak. I would also like to make the background colour green to match my logo and maybe even make the search button bigger to match with the colour also.

Please help. Thank you.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi Kevstar, top2.html is

Hi Kevstar,
top2.html is empty ?

Kevstar
Kevstar's picture
Offline
Enthusiast
England
Last seen: 5 years 4 weeks ago
England
Timezone: GMT+1
Joined: 2012-07-20
Posts: 81
Points: 107

Sorry Tony.Was playing

Sorry Tony.

Was playing around with it last night and last I checked it worked then it didn't.

I've got it working again now. Another issue is that when I add my CSS codes to my related CSS folder and ask it to read that page, it does not read it but it does read it when it's in the same page. Strange.

Any how. Please help. Thank you.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Make sure the path is

Make sure the path is correct.
Show us how you are linking it.

Kevstar
Kevstar's picture
Offline
Enthusiast
England
Last seen: 5 years 4 weeks ago
England
Timezone: GMT+1
Joined: 2012-07-20
Posts: 81
Points: 107

Hey, path is correct as. Use

Hey, path is correct as. Use the same file for other pages. That's something I can sort out after I have sorted out this search bar problem. Have any ideas?

Thanks in advance.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Is this what you are

Is this what you are after:

input[name="query"]{
  width: 500px;
  height:2em;
  background:green;
}

Kevstar
Kevstar's picture
Offline
Enthusiast
England
Last seen: 5 years 4 weeks ago
England
Timezone: GMT+1
Joined: 2012-07-20
Posts: 81
Points: 107

Thank you Tony it has

Thank you Tony it has worked.

As you can probrably see on the top2 page, I have payed around a little with the CSS codes to make it look a little better. Does it look ok?

How can I make the magnifying glass do the same job as the search button to get rid of that once and for all?

Thanks a lot for your help. I really appreciate it.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

I'd probably remove the

I'd probably remove the outline on focus and change the border instead.

input[name="query"]:focus{
  outline:0;
  border-color:red; /* maybe not red */
}

To make the magnifying glass work you could add a link with a javascript action on click and position it absolutely over the image.

Kevstar
Kevstar's picture
Offline
Enthusiast
England
Last seen: 5 years 4 weeks ago
England
Timezone: GMT+1
Joined: 2012-07-20
Posts: 81
Points: 107

Oh sweet, That looks really

Oh sweet,

That looks really good. I have chose a lighter green. You mention javascripts. This is the thing that I have not got a clue about. Can you point me in the right direction for creating this please.

Thanks a lot pal. You are a legend.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Give the form tag an id

Give the form tag an id eg:<form id="frm_id"
add the link <a id="frm_submit" href="javascript: formSubmit()"></a>

<script type="text/javascript">
function formSubmit(){
document.getElementById("frm_id").submit();
}
</script>

Then position the link:

#frm_id{
  position:relative; /* so we can position the link from the form */
}
#frm_submit{
  position:absolute;
  top:??;
  left:??;
  display:block;
  width:??;
  height:??;
}

Kevstar
Kevstar's picture
Offline
Enthusiast
England
Last seen: 5 years 4 weeks ago
England
Timezone: GMT+1
Joined: 2012-07-20
Posts: 81
Points: 107

thanks. my web browser would

thanks. my web browser would not let me see the code instead I have used an image over lay and positioned it over the background image. So now the image is click able. my issue now is this:

having viewed my site on my iPad, the top2 page gets displayed with the logo first then the search bar underneath and the menu bar (which I will change as i'm not happy with it) underneath that. with the overlay in a weird position.

is there any way that I can lock the layout to the way it is on the PC and make sire that it is the same no matter what screen size it is being viewed on?

Kevstar
Kevstar's picture
Offline
Enthusiast
England
Last seen: 5 years 4 weeks ago
England
Timezone: GMT+1
Joined: 2012-07-20
Posts: 81
Points: 107

thanks. my web browser would

thanks. my web browser would not let me see the code instead I have used an image over lay and positioned it over the background image. So now the image is click able. my issue now is this:

having viewed my site on my iPad, the top2 page gets displayed with the logo first then the search bar underneath and the menu bar (which I will change as i'm not happy with it) underneath that. with the overlay in a weird position.

is there any way that I can lock the layout to the way it is on the PC and make sire that it is the same no matter what screen size it is being viewed on?

Kevstar
Kevstar's picture
Offline
Enthusiast
England
Last seen: 5 years 4 weeks ago
England
Timezone: GMT+1
Joined: 2012-07-20
Posts: 81
Points: 107

ok. just goes to show that if

ok. just goes to show that if you look hard enough. I noticed on top.html this code

<div style="background-color: transparent; text-align: left; margin-left: auto; margin-right: auto; position: relative; width: 1244px; height: 217px">

so I used that. trouble is. how can i get rid of the scroll down bar on the right hand side of top2.html? i think there must be some hidden element that I can not see but I just know that if I add it as my header then that big blank gap will still be there. can you se if you can find the problem in my page codes please.

thanks a lot pal.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

You have a height on the body

You have a height on the body of 780px, remove that and the scrollbar will disappear.

Kevstar
Kevstar's picture
Offline
Enthusiast
England
Last seen: 5 years 4 weeks ago
England
Timezone: GMT+1
Joined: 2012-07-20
Posts: 81
Points: 107

that's great thanks. it also

that's great thanks. it also resolved another issue that I was having, my menu bar's drop down menu's would not overlap the inserted page. removing the hight has resolved that, makes perfect sense now. lol

one last thing as I do not want to seem like I'm asking you for loads but, back to my query that I mentioned previously about when I added the css codes to a separate .css folder and link to it, it does not work.

an example of this is that i have now changed that top2.html file to top.html. I have added the following code to my freebies.php page.

 <div><?php include('top.html');?>
            </div> 

(you can get it by clicking on free offers on my top menu bar). as you can see on that the page recognises the request and displays the top.html file. (minor tweaking is required on my part). But when I add the same code to pages such as 404.shtml and 403.shtml (now found with top2.html) then it does not work.

do you know why this is.

(is it because of the .html .cshtml .php file names?)

thanks a lot.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

I couldn't get to the

I couldn't get to the page.
Including a file like that can change the path if the files are in a different directory.

Kevstar
Kevstar's picture
Offline
Enthusiast
England
Last seen: 5 years 4 weeks ago
England
Timezone: GMT+1
Joined: 2012-07-20
Posts: 81
Points: 107

http://www.xclo.co.uk/404.sht

http://www.xclo.co.uk/404.shtml is in the same directory. But it will not include that page when code is inserted.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

That page probably needs a

That page probably needs a php extension as it is not including the file.
When you view source you should see the markup from the included file, not the php call.

Kevstar
Kevstar's picture
Offline
Enthusiast
England
Last seen: 5 years 4 weeks ago
England
Timezone: GMT+1
Joined: 2012-07-20
Posts: 81
Points: 107

Thanks for that. I have

Thanks for that. I have sorted it with a HTML include code.

Is there a way to edit my search results page?

Thanks.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

The easiest thing to do would

The easiest thing to do would be to view source on a normal page and copy the html to the search results page.