9 Replies - 549 Views - Last Post: 24 January 2013 - 04:58 AM

#1 Scott M  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 14
  • Joined: 14-November 12

Live search position issues

Posted 24 January 2013 - 12:26 AM

Hi folks,

I'm having a bit of bother with a little live search I have made. It all works great but the positioning of it is all wrong. I've made a small example to show exactly what I mean....

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.popup {
	position: relative;
	width: 150px;
	height: 1px;
}
#layer2 {
	width: 150px;
	text-align: left;
}
.addition {
	position:absolute; /*upwards rather than down.*/
	bottom: 100%;
}
body {
	padding-top: 200px;
}
</style>
</head>
<body style="width:1100px; margin:0 auto;">
<div>
<table width="1100" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="middle">
    <ul class="popup" id="popup" name="popup">
    <div id="layer2" class="blue, addition"></div>
    <input name="search1" type="text" class="textboxes"style="width:150px; font-size:10px" id="search1" value="Search Recipes....." title="Press enter to search."/>
    </ul></td>
    <td valign="middle"><label for="ingrtype"> Type of Ingredient:
    <select name="type" class="textboxes" id="type">
    <option value="">Ingredient Type</option>
    </select>
    </label>
    </td>
    <td valign="middle"><label for="ingredients2">Ingredient:
    <select name="ingredients" class="textboxes" id="ingredients">
    <option value="">Ingredient</option>
    </select>
    </label></td>
    <td valign="middle"><label for="qty2">Qty:
    <input name="qty" type="text" class="textboxes" id="qty" />
    <input name="Submit1" type="button" class="buttons" id="Submit1" value="Add"/>
    </label></td>
  </tr>
</table>
</div>
</body>
</html>


As you can see, the searchbox/popup is way off centre. Is there an easy (obvious) way to sort this? Everything I have tried has meant I would need to use absolute positioning which will be a pain with different resolutions etc.

Thanks :)

Is This A Good Question/Topic? 0
  • +

Replies To: Live search position issues

#2 raghav.naganathan  Icon User is offline

  • Perfectly Squared ;)
  • member icon

Reputation: 408
  • View blog
  • Posts: 1,440
  • Joined: 14-September 12

Re: Live search position issues

Posted 24 January 2013 - 12:56 AM

Alright, you need to remove the following line from your code(line 27).
<ul class="popup" id="popup" name="popup">


Also a &nbsp would do wonders by spacing out your text box appropriately(Line 29)
 &nbsp&nbsp<input name="search1" type="text" class="textboxes"style="width:150px; font-size:10px" id="search1" value="Search Recipes....." title="Press enter to search."/>


regards,
Raghav

This post has been edited by raghav.naganathan: 24 January 2013 - 12:57 AM

Was This Post Helpful? 1
  • +
  • -

#3 raghav.naganathan  Icon User is offline

  • Perfectly Squared ;)
  • member icon

Reputation: 408
  • View blog
  • Posts: 1,440
  • Joined: 14-September 12

Re: Live search position issues

Posted 24 January 2013 - 01:01 AM

Better still, you can as well comment out the .popup class you have in your CSS.

That will help you space out your boxes more evenly.

regards,
Raghav
Was This Post Helpful? 1
  • +
  • -

#4 Scott M  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 14
  • Joined: 14-November 12

Re: Live search position issues

Posted 24 January 2013 - 01:40 AM

I did try that before, but unfortunately it then shifts the page when the div becomes visible. With the popup class relative the popup overlays the rest of the page when the div expands within it.

Thanks for the help :)
Was This Post Helpful? 0
  • +
  • -

#5 raghav.naganathan  Icon User is offline

  • Perfectly Squared ;)
  • member icon

Reputation: 408
  • View blog
  • Posts: 1,440
  • Joined: 14-September 12

Re: Live search position issues

Posted 24 January 2013 - 01:51 AM

Well, you wanted the search box to come in the middle right?

Also, what did you mean by unfortunately it then shifts the page ...I tried that in Firefox and chrome and no page shift seemed to take place.

Can you please elaborate on what you meant?

regards,
Raghav
Was This Post Helpful? 0
  • +
  • -

#6 Scott M  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 14
  • Joined: 14-November 12

Re: Live search position issues

Posted 24 January 2013 - 02:03 AM

View Postraghav.naganathan, on 24 January 2013 - 01:51 AM, said:

Well, you wanted the search box to come in the middle right?

Also, what did you mean by unfortunately it then shifts the page ...I tried that in Firefox and chrome and no page shift seemed to take place.

Can you please elaborate on what you meant?

regards,
Raghav



I just found out what the problem was, I should kick myself.

I copied the code I used here, as I had only edited it to show an example, to see what it looked like and it looked perfect. Perfectly centred. The only difference in style between the original code and the code I used as an example is that I had set the font size in the popup... rather than the div. This difference in font size, compared to the rest of the page, was throwing off the textbox position.

Glad to have finally sorted it though, it was driving me mad. Thanks very much for your help :)
Was This Post Helpful? 1
  • +
  • -

#7 raghav.naganathan  Icon User is offline

  • Perfectly Squared ;)
  • member icon

Reputation: 408
  • View blog
  • Posts: 1,440
  • Joined: 14-September 12

Re: Live search position issues

Posted 24 January 2013 - 02:15 AM

Haha :D

Well, glad you could sort it out finally :)

regards,
Raghav
Was This Post Helpful? 0
  • +
  • -

#8 Scott M  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 14
  • Joined: 14-November 12

Re: Live search position issues

Posted 24 January 2013 - 02:53 AM

Cheers :D

Here is the finished "example" code with all the styles that I've been using (just checking everything was OK.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.popup {
	position: relative;
	width: 150px;
}
#layer2 {
	width: 150px;
	text-align: left;
	background-color:#FF9;
}
.addition {
	position:absolute; /*upwards rather than down.*/
	bottom: 100%;
}
body {
	padding-top: 200px;
}
.textboxes {
	font-family: "MS Sans Serif";
	font-size: 12px;
	background-color: #6CC;
	color: #000;
	border: thin solid #FF6;
	text-align: center;
}
</style>
</head>
<body style="width:1100px; margin:0 auto;">
<div>
<table width="1100" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="293" align="center" valign="middle">
    <ul class="popup" id="popup" name="popup">
    <div id="layer2" class="blue, addition" style="visibility:hidden">option1<br>
      option2<br>
      option3<br>
      option4<br>
      option5</div>
<input name="search1" type="text" class="textboxes"style="width:150px" id="search1" value="Search Recipes....." title="Press enter to search." onclick="layer2.style.visibility='visible';" onblur="layer2.style.visibility='hidden';"/></ul></td>
    <td width="159" align="center" valign="middle"><label for="ingrtype">
      <select name="type" class="textboxes" id="type">
    <option value="">Ingredient Type</option>
    </select>
    </label>
    </td>
    <td width="147" align="center" valign="middle"><label for="ingredients2">
      <select name="ingredients" class="textboxes" id="ingredients">
      <option value="">Ingredient</option>
  </select>
    </label></td>
    <td width="491" align="center" valign="middle"><label for="qty2">
      <input name="qty" type="text" class="textboxes" id="qty" />
    <input name="Submit1" type="button" class="buttons" id="Submit1" value="Add"/>
    </label></td>
  </tr>
</table>
</div>
</body>
</html>



Incidentally leaving "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">" out throws everything out. What does this piece of code actually do?

In my initial example I had a 1px height for the popup and that line missing. When I put that line back in the 1px height misaligned the searchbox again, so I was on the hunt to find out what had caused it.

Thanks :)
Was This Post Helpful? 1
  • +
  • -

#9 raghav.naganathan  Icon User is offline

  • Perfectly Squared ;)
  • member icon

Reputation: 408
  • View blog
  • Posts: 1,440
  • Joined: 14-September 12

Re: Live search position issues

Posted 24 January 2013 - 04:07 AM

View PostScott M, on 24 January 2013 - 03:23 PM, said:

Incidentally leaving "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">" out throws everything out. What does this piece of code actually do?


A really nice question indeed :)

Well,the line you mentioned is called DOCTYPE. It tells your browser which version of HTML it is loading making the load time a bit quicker as the browser know what to expect.

The DOCTYPE declaration refers to a Document Type Definition (DTD)...in your example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


What this means is this DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.

If you want more information regarding your question, I would suggest you look at this page.

regards,
Raghav

This post has been edited by raghav.naganathan: 24 January 2013 - 04:09 AM

Was This Post Helpful? 1
  • +
  • -

#10 Scott M  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 14
  • Joined: 14-November 12

Re: Live search position issues

Posted 24 January 2013 - 04:58 AM

View Postraghav.naganathan, on 24 January 2013 - 04:07 AM, said:

View PostScott M, on 24 January 2013 - 03:23 PM, said:

Incidentally leaving "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">" out throws everything out. What does this piece of code actually do?


A really nice question indeed :)/>

Well,the line you mentioned is called DOCTYPE. It tells your browser which version of HTML it is loading making the load time a bit quicker as the browser know what to expect.

The DOCTYPE declaration refers to a Document Type Definition (DTD)...in your example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


What this means is this DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.

If you want more information regarding your question, I would suggest you look at this page.

regards,
Raghav



Magic, thanks :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1