?
Solved

Alignment issues with transparent splash menu and background pattern

Posted on 2006-07-23
6
Medium Priority
?
151 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
  • 2
3 Comments
 
LVL 38

Accepted Solution

by:
lherrou earned 500 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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

839 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