CSS Positioning
I'm having trouble positioning elements within a new template I am designing at http://fusionnx.com/style.
There are two issues: the first is the navigation bar at the top of each page. Although it looks fine when I view it in full screen on most screens, if you see it on a narrower screen, or resize your browser, the links get hiddden behind the logo. I reckon it is because of the position:absolute attribute, but I would like to know how I can solve this problem whilst still having the links in the top left. Can't the screen just scroll?
The second problem is with the footer (the small links and validator images). I can't get it to display in the center of the screen, even with html attributes and a lot of CSS playing around. How can it be done? If you need the CSS source you can find it's location (there are three files) in the html source. The site uses php, but this shouldn't get in your way if you need to see any code.
If you need any more info please ask- I really need this problem sorted out for a deadline.
Thanks for any help in advance!
fusionnx.com- The Web Developer's Resource Centre
Sign up on the brand new webdevforum
artsapimp posted this at 19:36 — 1st November 2005.
They have: 330 posts
Joined: Apr 2000
There may be another way to fix this, but this is how I would do it.
Create a table with a width of 100%. This table will have 2 TDs. The first one has the logo in it and the other has the menu in it. Obviously you will want to align the 2nd TD on the right which will make it look exactly as it does today, except it will stop the page from getting smaller once the logo and menu meet each other.
Free Math Test
Fun Math Games
Rincewind posted this at 02:36 — 2nd November 2005.
They have: 11 posts
Joined: Jan 2004
The logo and menu buttons are quite large. Even on my monitor at a high resolution, it doesn't fit. You need to design and size these graphics to fit in the smallest resolution you expect, then allow them to expand (or for graphics, the gaps between them to expand) to fill larger monitors. A large number of people still have just 800x600 resolutions. While that number is dropping, it's still significant. Try changing your own resolution - you'll get a shock.
Horizontal scrolling is generally frouned apone. A good design should be able to cope with many resolutions without breaking or requireing scroll bars. E.g. this forum site uses % widths to let the page scall to fit the users resolution. It looks ok at 800px and still looks ok at 1200 odd px.
Q-4.net - Reseller web hosting programs
Stylegallery.co.uk - Scottish Landscape Photography Gallery
Splodgy.com - Web design tutorials
magicalsecret.com - How to do magic tricks.
robokoder posted this at 08:40 — 2nd November 2005.
He has: 18 posts
Joined: Oct 2005
I'm gonna try a combination- I'll use a table and make the images smaller
Renegade posted this at 11:33 — 2nd November 2005.
He has: 3,022 posts
Joined: Oct 2002
With regards to your navigation, I can see what you're talking and I see a few ways you can "fix" this problem.
1, Reduce the size of "fusionnx.com..." so that on lower resolutions, they show up side by side.
2, Set a z-index to the navigation DIV making it higher than the "fusionnx.com..." text so it will always show up on top.
3, Combination of above.
As for the footer, it looks pretty centred to me...
artsapimp posted this at 13:41 — 2nd November 2005.
They have: 330 posts
Joined: Apr 2000
The only problem with the z-index is your menu will cover the logo on smaller resolutions. That would also be considered a problem in my mind.
robokoder posted this at 13:52 — 2nd November 2005.
He has: 18 posts
Joined: Oct 2005
It's really strange- loads of people seem to see the footer centerd, but I don't (and I have viewed it on 3 different screens).
And what is z-index?
fusionnx.com- The Web Developer's Resource Centre
Sign up on the brand new webdevforum
Megan posted this at 14:39 — 2nd November 2005.
She has: 11,421 posts
Joined: Jun 1999
z-index is the order of layers on a page. It's generally not used that much from what I've seen. So something with a z-index of 5 would be on top of something with a z-index of 1.
As I said in your review thread - the reason you're having trouble with this is because it's designed to work with tables, first of all, and secondly because the graphics are just too big to fit. Make that logo smaller and you'll have no problems.
Megan
Connect with us on Facebook!
robokoder posted this at 08:46 — 3rd November 2005.
He has: 18 posts
Joined: Oct 2005
sure
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.