How do you make an object that uses absolute position be in the same place on every size computer screen

  • 1
  • Question
  • Updated 8 years ago
  • Answered
Yola I got a Question!!

I have a search box that I put in the navigation bar using CSS here is the code i used:

#search_box {
position:absolute;
top:142px;
right:323px;
and more CSS here }

But on other peoples computer they either have a bigger or smaller computer screen and it does not look like it looks on my Computer. I noticed that the Yola sign stayed in the same place when I tryed another computer a different screen size and the Yola logo stayed in the same place. How do you guys do that?
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
  • frustrated

Posted 8 years ago

  • 1
Photo of Marije

Marije, Official Rep

  • 4636 Posts
  • 237 Reply Likes
Hello - I'm going to ask one of my colleagues to answer you when they're next online. Otherwise, I hope someone from the community might be able to help you!
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Fun little tip... Put your javascript code (or images) into a two-column widget and place a negative number in the margin editors top box just enough to place your Google search box in the location on your menu bar that you like. Don't forget to put in a positive number in the bottom box to make all your content below stay where it was meant to.

This will ensure that your search box remains locked into that one location and won't float around... No CSS what do you know. ;)

Happy site building
Ed

You can see many examples of overlays like the one you want here on my semi-updated site...

Honey Bear Playhomes Tips and Favs in one place... A Honey bear Playhomes Tip ;)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello support

Have you been able to try Ed's suggestion? Please let us know if you need further assistance.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Just wanted to go one further...

NOTE: If you are placing an image or HTML widget over your banner ALWAYS follow these rules.

1) Drag a two-column widget onto your page at the very top and slide the center divider all the way to the left.

2) Drag a text widget into the right side of the two-column widget and clear out the default text. (This blank text widget will ensure that if after step 5 you happen to go beyond the sitebuilder editor boundaries that you can get your image or HTML widget back into view to edit the margin settings with a lower top value than before. SEE TUTORIAL BELOW)

3) Drag an additional two-column widget into the right side of the first two-column widget. (always under the blank text widget)

4 A)

Drag a picture widget into either the left or right side of the second two-column widget and select your overlay image from your file manager. (transparent PNGs work best).

Click the "Margin" tab on ONLY this widget and set accordingly for proper placement. Depending upon your site style you should always begin with a lower negative value and work your way up. Additionally, you should always have a positive value in the bottom box to ensure that the content of your site does not follow your layered object over your banner.

OR

4 B)

Drag an HTML widget into either the left or right side of the second two-column widget and paste the code for your Google search feature (or other).

Click the "Margin" tab on ONLY the second two-column widget of step 3 and set accordingly for proper placement. Depending upon your site style you should always begin with a lower negative value and work your way up. Additionally, you should always have a positive value in the bottom box to ensure that the content of your site does not follow your layered object over your banner.

That's it, now you can click "Preview" and see what it would look like in the published site. After playing around with it for a while I am sure that you will get the hang of it.

5) Do the exact identical steps from above (write down the margin settings for reference) for each page on your website.











.
.
.
.
If you have gone beyond the sitebuilder's boundaries and cannot see or access the top portion of the image or HTML widget for editing or placement do the following:

1) Don't panic...

2) Find the blank text widget in step 2 from above and click enter a few times inserting lines of blank text.

You will notice that your one disappeared widget top will come into view. When it does discontinue clicking enter.

3) Click "margin" and set a lower top negative value.

4) Delete the lines of blank text in the text widget and view preview to verify placement on the actual site.





Don't mess up your page with bad or difficult code trying to layer objects such as a search feature above/over your navigation menu or banner. Use a two column widget to do it instead... A Honey Bear Playhomes tip...
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Wow thank you so much. Im about to try this