4 replies [Last post]
JaGGeR
JaGGeR's picture
Offline
Regular
Last seen: 11 years 1 week ago
Timezone: GMT+8
Joined: 2003-10-03
Posts: 34
Points: 0

Well, I did a little make-over of my site and it would be very much appreciated if you could check it out. A check of how it is displayed in different browsers would be quite nice. So far, I have checked it with Mozilla Firebird and IE 6. Feel free to comment or make any suggestions with regards to content, layout, colors, design, etc.

link: JaGGeR Online

Many thanx. Wink

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 8 years 19 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

New Site Design

Hi,

Had a quick look and it looks fine in IE6.

Nice use of colour and pleasing layout. I'm not sure about the way the format of the home page changes from the rest of the site. But the page looks fine.

Regarding your header wouldn't it be better to absolutely place the left side of the banner header insted of lfoating it. At presdent when the window is resized the right hand side pushes the left hand side dwon a whole block which spild the look of your site.

If you absolutely place the left hand side and then set z-indexes accordingly you can let the right hand side just slide over the top, which I think will be much neater. (Just a thought Smile).

Paul

JaGGeR
JaGGeR's picture
Offline
Regular
Last seen: 11 years 1 week ago
Timezone: GMT+8
Joined: 2003-10-03
Posts: 34
Points: 0

New Site Design

Pob, you always have great suggestions / comments. I tried making revisions regarding the header banner suggestion you made, but I can't seem to make it work. What do you suggest would be the approach to this?

This is what I tried:

.side-logo {   /*for the right-side banner */
   float: right;
   z-index: 10;
}

.logo-bg {   /* for the left-side banner */
   position: absolute;
   left: 0;
   top: 0;
   z-index: 1;
}

The right-floated image is placed behind the absolute-positioned image when the window is resized. The problem only occurs when the browser does not support "min-width". Any suggestions to overcome this?

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 8 years 19 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

New Site Design

Hi,

Add position:relative to the float (without co-ordinates) and this will give the float a stacking context and allow it to pass on top of the lefthand image.

e.g.

side-logo {   /*for the right-side banner */ 
 position:relative;  
 float: right; 
  z-index: 10; 
}

Alternatively, you could put the lefthand image in the background of the header and remove it from the equation altogether.

Paul

JaGGeR
JaGGeR's picture
Offline
Regular
Last seen: 11 years 1 week ago
Timezone: GMT+8
Joined: 2003-10-03
Posts: 34
Points: 0

New Site Design

That did the trick.. Thanx for the help, Paul.. Laughing out loud

BTW, about putting the left-hand at the background of the header, well, I'll think about it. This would require changes in every page of the site. Each set of pages uses a different image for the header. For now, the position:relative is sufficient. Many thanx again.