Header Required!

wonder_lander

wonder_lander

wonder_lander

Soldato
Joined
18 Oct 2002
Posts
5,586
Location
Stone, Staffordshire
Anyone fancy having a go at doing me a new header for my website? www.the-pier.co.uk

The current header is too tall so I want to reduce it and will remove the buttons also.

Ideally a picture of piers or piers or at least something seaside would be best!
 
Think the site header is still ok, you could just do with some changes below the header....

This is very quick and only some minor changes, but i think you just need to tone done on the blue, it's a bit much....

I'd personally change the links under the header to, too many, and the buttons just don't quite look right sat where they are...

http://img261.imageshack.us/img261/2069/tempgs2.jpg <--- Clicky :)

I made the following changes..... (of course bear in mind it's a slap dash job in Stylish to just restyle your page for the example posted above)

Code: 
.content {background-color:#333!important}
#foxmenucontainer {border-top:2px solid #55f!important;}

#foxmenucontainer {background-position:0 -720px!important;background-color:#333!important;}

[class^="sidebar"] ul li {background-color:#222!important;border-color:#444!important}


[class^="sidebar"] ul li h2 {background-position:0 -400px!important;background-color:#090!important;}
.title {background-position:0 -400px!important;background-color:#0d0!important;border-bottom:1px solid #000!important}

#foxmenu a {opacity:0.8!important}

#foxmenu ul,#foxmenu ul li,#foxmenu ul li a {display:block!important;width:100%}


[class^="sidebar"] ul li h2,
.title, #foxmenucontainer
{background-repeat:repeat-x!important;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAMgCAYAAADr5qj9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwMS8yMS8wOQMKYHUAAAAYdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3Jrc0+zH04AAAFlSURBVHic7ZpLDsIwDETtqjfqnXqnciOWLLgNEDYs+AySAxR7qonEJsrMvNggqxXeWmv2tEYzO6+weVKQgjYRRA2vIAX9PyjoeTzs17hRtWvWDBJ8VpDgs4IEnxXEAO9mRv18xFBkwZcLEnxWkOCzgorB++3zuLloHuUFCT4rSPBZQYLPCmKA99bAPGpnIIebl/DJdgKcHXKYjjzjchZPXKWw5/Z6pCI/y+t9abl7RFIQ5iI7+OeCuU2Lno/kSedJDS/P+p7U8AyecB6NtnMwj9yjQT0nwY2+DIKePfJo5XvkHHdn4aSGZ+HUD+EPQSryw3rzfLRMaB7BILQ54JOoIB3yqGePHKZHOak91+mRWlzIk6dHavHH8m21GM+jeZrR+zo44+DmAE+iYdohD3t2yGF6mJPac5UeqcWVPGl6pBZ/LN9Wi9/MoxnOo2ovG3/gKaQsTyFleQopy1NIdwuOnuFlx8yuvsnUuBjufHYAAAAASUVORK5CYII=')!important}

.entry, .postinfo {background:#fff none!important;}
.postinfo * {color:#000!important}
Like i said, that was quick and dirty CSS on my part just to show what a few minor changes will do...

Links and colours would be my suggestion of where to focus on, though you may also wish to consider decreasing the size of the header, it's about 1/3 of my page viewable height on a 17" inch screen..... i have to scroll down to get more then a few paragraphs.

Not the answer you were looking for, but i hope the suggestions are of some use to you.
 
Last edited:
Cheers, I acutually like the look of the image you've done there!

I just think there is too much dead space before you get to the content hence I thought that a reduced header image and something more relevant to the site content would help. The current one was just a standard theme for wordpress.

I do want to drop all the buttons but am sure how best to provide a naviation solution.

Once complete there will be at least 55 pier pages, plus I would guess another 15 of various nature such as the train times one, webcam one etc.
 
What about a tab navigation with sub-categories, or something alike....

Do you really need that many links on a page at one time?

The CSS above was just a few background color and image changes, so nothing major... The header would benefit from a shrink, and the rest is just play and see what you get....

The image for the background near the bottom of the code is a 5 pixel wide by 600px (or so i think) PNG 32, so may not be what you want for IE5 support etc... it as 100 pixel high transparent gradients as you move down vertically....

Paste this into the address bar of your browser....

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAMgCAYAAADr5qj9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwMS8yMS8wOQMKYHUAAAAYdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3Jrc0+zH04AAAFlSURBVHic7ZpLDsIwDETtqjfqnXqnciOWLLgNEDYs+AySAxR7qonEJsrMvNggqxXeWmv2tEYzO6+weVKQgjYRRA2vIAX9PyjoeTzs17hRtWvWDBJ8VpDgs4IEnxXEAO9mRv18xFBkwZcLEnxWkOCzgorB++3zuLloHuUFCT4rSPBZQYLPCmKA99bAPGpnIIebl/DJdgKcHXKYjjzjchZPXKWw5/Z6pCI/y+t9abl7RFIQ5iI7+OeCuU2Lno/kSedJDS/P+p7U8AyecB6NtnMwj9yjQT0nwY2+DIKePfJo5XvkHHdn4aSGZ+HUD+EPQSryw3rzfLRMaB7BILQ54JOoIB3yqGePHKZHOak91+mRWlzIk6dHavHH8m21GM+jeZrR+zo44+DmAE+iYdohD3t2yGF6mJPac5UeqcWVPGl6pBZ/LN9Wi9/MoxnOo2ovG3/gKaQsTyFleQopy1NIdwuOnuFlx8yuvsnUuBjufHYAAAAASUVORK5CYII=

You should see the image....

If you want some basic gradients to work with i can make some for you...

Or any CSS help just post here, myself or another helpful fella we be along to help...
 
You see that's all voodoo to me what you've just said!

Ideally I don't want a mass of pages, slick navigation is where it's at! I need the user to be easily able to identify how they can navigate to where they want to be without wading through a huge list of links.

I also need to kill the search element off for now as it isn't working!

Never done any html or css so any help is much appreciated!

I have no idea what that big copy and past was supposed to show. In Firefox I got a few colour gradients on the left hand side, in IE7 I get nothing!
 
Dj_Jestar said:
Should you really be concerned with IE5 support? They [IE5 users] are something like <1% of the worlds users.
Click to expand...

From my stats I get:

Internet Explorer 7.0 31%
Internet Explorer 6.0 21%
Googlebot 2.1 8%
Crawler/Search Engine Unknown 7%
Yahoo! Slurp Unknown 7%
Mediapartners-Google Unknown 4%
Firefox 3.0.1 3%
msnbot 1.1 2%
Firefox 2.0.0.16 2%
AOL 9.0 1%
Ask Jeeves/Teoma Unknown 1%
Firefox 3.0.5 1%
Firefox 3.0.3 1%
Firefox 2.0.0.14 1%
Firefox 3.0 1%
Firefox 3.0.4 1%
msnbot Unknown 1%
Internet Explorer 5.0 1%
Googlebot Unknown 1%
Mozilla Unknown 1%
Safari 525.20.1 1%
Netscape 4.0 1%

based on:
Since 23 May 2008, 22:07 Unique 14128 Hits 61771
 
so yeah.. 1%, which by the looks of it is rounded down only ever so slightly (given all the above numbers add up to 98)
 
I was simply pointing out that older browsers won't handle the PNG correctly i used due to the transparency. (the image you saw in Firefox is the background image i used - should look something like a rainbow of transparent gradients when viewed in full)

That nav would be smaller if it were a menu, for example....

Home | About | Train times | Piers | etc......

Then Piers drops down as a sub menu with all the Pier links you have (quite a few), which then frees up quite a bit of space already.

I'll check some free scripts for you and see if i can make something simple, compliant and cross browser.... then post the code here to do with as you choose, i'll post here in case anyone else wanders into the thread wanting something alike....

This should be suited with a few minor modifications to suit your needs...
http://www.alistapart.com/articles/hybrid/

Easy to understand, easy to modify and cross browser compliant...
 
Last edited:
I've been having a play with that menu, and it never works on my end when i test, only the one on the live website works....

I'll have to find another menu....

In any case, if you need only 1 link to have a sub-menu, ie. the Piers link, i can just make one for you using CSS.... Just like to find another nice clean menu to work from as a basis....

And you'll obviously need to implement the code yourself, so i'll post it here and you'll then need to work that into your page...
 
I like the header. All it needs is a bit of reworking to make better use of the space.

Very quick knock-up:

thepier.jpg


Shouldn't be too hard to implement.
 
Very nice and easy adjustment there, we could use your menu, with a simple drop down for the piers, i've made a basic drop-down for piers links...

Will post shortly once it's functioning correctly...

EDIT::

pierrmenuxr2.jpg


Excuse the poor quality JPEG.... and ignore the fact it's a very basic image (it's simply just to show you the menu)

Basic dropdown for the piers that i've made, it could be used in for the menu in Mattus's pic above....

A few lines of CSS and a little bit of HTML...

We could add some icons, some transparency, backgrounds with hover effects...(or whatever you like).... the possibilities are nearly endless....

EDIT 2::

Updated image... transparency used with menu

pierrmenuic8.jpg


You can't see the cursor in the screenies (just the app i use for quick screenshots and cropping)...
 
Last edited:
If either of you guys want to make suggestions i can write the HTML and CSS....

Unless Mattus can write HTML in which case i'll happily stick with making the menu function...

Have used an icon from aspneticons for the menu, but i can always create one for it instead (it's quicker for me to just hotlink while testing)...

Coded by hand, so no copyright information exists for the menu, it's all yours or anyone elses to do with as they choose...

I'll plonk the code here once it's how you want it (if the menu is of use to you)...

EDIT::

Had to make a slight change to the menu in order to make it function correctly, but it's working in FF3 and IE6.... what a nightmare IE is, it's been a while since i had to pop it open to test something......

Had it all working great, open IE, poo something broken... fix that, another issue arises.... lol... and so on....

All working now, only exception is that the submenu has to sit directly under the link (still looks fine), you can't add any spacing or the menu disappears before you can hover over it to click anything......

Could always add a little javascript and have it drop down onclick rather then on hover, then we can notch the menu down a bit so it looks a little more flush... the draw back is the visitor must have JS enabled....

I have a little javascript for changing display onclick, it's tiny and works quite well across browsers. Can't remember where i got it from, but it works great for simple hide/show scenarios, i'm sure i could add it in...
 
Last edited:
Just need some feedback from you and i'll provide code.... ;)

It's your site, tell me what you like or don't like.... have you read my comments regarding the menu?

IE6 won't support the hover effects on the list elements, but will work with the menu as is (i think)..... however i think i can add a small script i have to make it show the menus onclick instead which should also remove the disappearing issue if the menu is pushed down (which looks nicer).....

Or i could just totally remove the drop down and create a hide/show div element using javascript...

Or we can drop all that, and you could choose any menu freely available from the web and i'll re-write the links in the menu for you.....

Is the menu important, if so what should it look like... ideally... and how should it function? :)
 
t31os said:
Just need some feedback from you and i'll provide code.... ;)

It's your site, tell me what you like or don't like.... have you read my comments regarding the menu?

IE6 won't support the hover effects on the list elements, but will work with the menu as is (i think)..... however i think i can add a small script i have to make it show the menus onclick instead which should also remove the disappearing issue if the menu is pushed down (which looks nicer).....

Or i could just totally remove the drop down and create a hide/show div element using javascript...

Or we can drop all that, and you could choose any menu freely available from the web and i'll re-write the links in the menu for you.....

Is the menu important, if so what should it look like... ideally... and how should it function? :)
Click to expand...

Appreciate all that you've done here, will take a look around the web later and see what I like if that's ok?
 
You must log in or register to reply here.
Back
Top Bottom