[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Alignment issues with transparent splash menu and background pattern

Posted on 2006-07-23
6
Medium Priority
?
149 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 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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 …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

650 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