Solved

Alignment issues with transparent splash menu and background pattern

Posted on 2006-07-23
6
145 Views
Last Modified: 2010-04-09
Please see

www.aedeas.net/burma/ 

for a live demo of the problem i'm facing.

I'm trying to align the rollover menu over the buddha / menu shield.  I tried using a transparent GIF to over lay the buddha logo/splash shield but greated artifacts because of the textured pattern.  

Any recommendation on hot to best align the menu ? and not get the clashing background issue i'm facing.

Any help would be appreciated.

Thanks,

Robert
0
Comment
Question by:aedeas
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
6 Comments
 
LVL 38

Accepted Solution

by:
lherrou earned 125 total points
ID: 17165142
Robert,

It looks nice to me in Firefox. Unfortunately, in IE the menu lies below the box where it's supposed to fit. I have some general comments, and maybe from these we can fix the problems you have.

First of all, using frames is a bad idea. There's no real reason to use them given your page layout, so I suggest you avoid them if at all possible.
Second, you've used tables to lay out your page. While tables have a place in presentation of tabular data, they were never designed for page layout, and that makes it harder to get the positioning you need. You can do all this and more with CSS (and resolve the issue that probably lead to your using frames, putting the location/hours/phone information at the bottom of the page).
Third, within your buddha/menu shield table cell, you've used <P> tags for positioning, and that does not work, since each browser or browser version will allow different spacing for them. Again, this could be resolved with CSS, or, if you persist on using tables, you can place the buddha in one table cell and the menu shield in another.

This is a starting point. If you want to learn more about using CSS to lay out your page, I can suggest some resources and help you get there, or we can tweak your code as is to help you improve the layout.

Cheers,
LHerrou
0
 

Author Comment

by:aedeas
ID: 17165262
Dear LHerrou:

Thanks for the tips.

I've repositioned the menu/shield as well as the footer using CSS instead of the Frame set.

Looks fine for me on Safari and Firefox.  How does it look on IE?

Thanks,

Robert
0
 
LVL 38

Expert Comment

by:lherrou
ID: 17167619
Aedeas,

The menu/shield looks great in both. However, the footer is "below the fold" on both FF and IE. Also, you are missing the <table> opening tag. If you want to do a fixed footer like you had, but without using frames, there's an excellent example here: http://limpid.nl/lab/css/fixed/footer

Cheers,
LHerrou

0

Featured Post

Enroll in June's Course of the Month

June’s Course of the Month is now available! Experts Exchange’s Premium Members, Team Accounts, and Qualified Experts have access to a complimentary course each month as part of their membership—an extra way to sharpen your skills and increase training.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Find out what you should include to make the best professional email signature for your organization.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

724 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question