There's no such thing as a stupid question, but they're the easiest to answer.
JoinTour
Login
 
Tag Cloud
access audio avg avg 8 boot bsod computer cpu crash css dell desktop driver drivers dvd email error excel explorer firefox firefox 3 freeze gimp graphics hard drive hardware help please hijackthis hjt hjt log install internet internet explorer itunes javascript keyboard lan laptop log malware monitor network networking outlook outlook 2003 outlook express password php popups problem router seo slow sound sp3 spyware startup trojan usb video virtumonde virus vista vundo windows windows vista windows xp winxp wireless youtube
Web Design & Development
Search
Search in:
 
Advanced Search
Tech Support Guy Forums > Internet & Networking > Web Design & Development >
Multiple Images in a Fluid Header


HELLO AND WELCOME! Before you can post your question, you'll have to register -- it's completely free! Click here to join today! We highly recommend that you print a copy of our Guide for New Members. Enjoy!

 
Thread Tools
matt-h's Avatar
Computer Specs
Senior Member with 313 posts.
 
Join Date: Apr 2006
Location: Warks, ENGLAND
07-May-2008, 06:53 PM #1
Multiple Images in a Fluid Header
Take a look at this...

150px nav column with a fluid main section. In the header are 3 images, one is fixed (centred above the nav column), the other 2 are meant to be centralish.

However, although the 3 images look fine at 800x600, it doesn't look great at 1024x768px, I think they'd look better spaced out.

So, do I...

1. Make multiple div's to sort this out? I'd prefer not to, just as it makes the coding more complicated (though as it's a template for a CMS site, no-one should be editing it).

2. Merge the 2 images, centre it, and use an image-map to sort out the seperate links.

3. Something else that makes them more central on higher resolutions? (sorry that I'm not being very specific, but it's more of a "that doesn't look right" than a "it should do ..."

And whilst I'm at it, if you go to one of the sub-pages (note this is just a temp location to sort out the design), the breadcrumb hover stuff is annoying me. However, I couldn't get them to act differently to the normal li:hovers, which is odd because the class thingy works for normal li's, just not a:hover, unless I've done something silly.
tomdkat's Avatar
Computer Specs
Distinguished Member with 2,994 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
07-May-2008, 07:07 PM #2
I would go with option #1. I would create a nested DIV inside the header DIV that contains the images you want to center, I mean centre (), only. Then, I would apply a left margin to that DIV, maybe as a percentage, to make it center "relatively" as much as possible. Get it?

Peace...
matt-h's Avatar
Computer Specs
Senior Member with 313 posts.
 
Join Date: Apr 2006
Location: Warks, ENGLAND
07-May-2008, 09:49 PM #3
After spending ages trying different things, I finally got it working using multiple divs, it now has 4 for 1 section :P

Just gotta sort out the breakcrumb thingy and the template should be 100%. Then I can go back to revising instead of wasting my time on this
tomdkat's Avatar
Computer Specs
Distinguished Member with 2,994 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
08-May-2008, 03:54 PM #4
Great! Glad you got it sorted out.

Peace...
Reply

Tags
css, divs, fluid, header, images, positioning


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are Off
Refbacks are Off

You Are Using:
Server ID
Advertisements do not imply our endorsement of that product or service.
All times are GMT -4. The time now is 11:15 PM.
Copyright © 1996 - 2008 TechGuy, Inc. All rights reserved.
Powered by vBulletin, Copyright © 2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.1.0
Powered by Cermak Technologies, Inc.