13 replies [Last post]
psjw12
Offline
Regular
Kingston, UK
Last seen: 12 years 29 weeks ago
Kingston, UK
Joined: 2008-07-10
Posts: 12
Points: 0

Hi guys I'm making a new site for Kingston LGBT, at the moment I'm using inherited code from the last site administrator but it's messy so I'm making my own.

At present on our site (www.kingstonlgbt.co.uk) you can see (under firefox only) that when you highlight over one of the links on the top bar a large block area is highlighted.

On the new site (www.newsite.kingstonlgbt.co.uk) I'm trying to get the same effect but also working under IE and other browsers. But at present I've only got the hover over wrapped tight round the text, I want large areas like the present site uses.

Can anyone help me?

Thanks!

psjw12
Offline
Regular
Kingston, UK
Last seen: 12 years 29 weeks ago
Kingston, UK
Joined: 2008-07-10
Posts: 12
Points: 0

Sorry I don't mean

Sorry I don't mean highlight, I mean hover over the link

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 5 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Ah! Teh tablez, ze burn my

Ah! Teh tablez, ze burn my eyes!

Ah, well unfortunately you're using Javascript for something on the links... I'm on my husband's machine so I'm not even turning NoScript on, so I don't see your hover
HOWEVER
I know what you're talking about. Evil silly tables aside, you still have anchors inside those, so we can still do this.
Using JS though, I wonder why you don't just continue with JS and use it to highlight the whole td?

But with CSS, what you'd do is make the anchors into blocks. Right now, if hover styles are wrapping tightly to the text, then they're just doing what inline elements do-- they really have no width or height. If you say
td a {
display: block;
height: set a height equal to the height of that whole navbar;
width: you might not want to actually set a width if the widths are all different-- use sidepadding instead;
other styles;
}
Then on :hover and :focus, the background colour should show on the whole a, which will be a big block.
You can center the text inside the anchor now with text-align: center and vertical-align: middle.

That oughtta do it, I think.

-pOes

I'm no expert, but I fake one on teh Internets

psjw12
Offline
Regular
Kingston, UK
Last seen: 12 years 29 weeks ago
Kingston, UK
Joined: 2008-07-10
Posts: 12
Points: 0

Thanks I'll have a go at

Thanks I'll have a go at that, the Java script on the site is no enabled but in the end the code for the links will be in a javascript file so I only need to change one file and not many.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 1 day ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

psjw12 wrote:in the end the

psjw12 wrote:

in the end the code for the links will be in a javascript file so I only need to change one file and not many.

That is the wrong way to do it and will assure that around 10% of the people that use your site won't be able to use your navigation. Use instead a server side technology such as ASP, PHP, Server Side Includes, or even Perl or a shell script via CGI. ALL are better than a browser end javascript solution.

Why under the heavens would you want to make your site unuseable for 10% of your visitors?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 5 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

I agree with Ed here.

I agree with Ed here. Javascript (in my not so humble opinion) only has a place in a menu as a crutch for IE6. But, I don't know what you have to work with. Our company uses a Perl template with parts of the page-- kinda works like frames, where you only have one copy of like the header, the menu, the sidebar, the footer... just the main part of the page changes. But, my colleague knows Perl and PHP, I don't. So, dunno what you can do there. But JS is a bad idea. Google is one of those javascript-blind visitors to your site too.

Let us know how it goes on the hover though. It should work making the a's blocks, but you might get that IE whitespace bug where it jiggles on hover. If so, we'll do something else like floating them or something.

I'm no expert, but I fake one on teh Internets

psjw12
Offline
Regular
Kingston, UK
Last seen: 12 years 29 weeks ago
Kingston, UK
Joined: 2008-07-10
Posts: 12
Points: 0

Ok I'll try PHP (need to

Ok I'll try PHP (need to learn it though)

I've tried you suggestion Poes but the blocks don't look as "tidy" as I liked and also the vertical-align isn't working.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 5 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

display: table-cell and IE hax0rz

Hmmm
You already had the menu in td's, so vertical-align should have worked. However I didn't see it in your code and you had all the styles on the a's, and you only had a height on the a:hover, which is why it looked goofy on :hover.

But, I don't like tables for menus if they're not doing anything table-y, so I tried to see what I could do with it, using a normal menu.

ASSUMING this is a stable menu (meaning the items don't change much) then I would do it like this:

<ul id="navigation">
      <li><a href="index.html">About Us</a></li>
      <li><a class="double" href="when.html">When and Where</a></li>
      <li><a href="events.html">Events</a></li>
      <li><a href="committee.html">Committee</a></li>
      <li><a href="gallery">Gallery</a></li>
      <li><a href="forum">Forum</a></li>
      <li><a href="mail.html">Mailing List</a></li>
      <li><a class="double" href="tsp.html">The Small Print!</a></li>
    </ul>

CSS something like:

#navigation {
  background: #fff;
  display: table;
  width: 100%; /*Haslayout in IE so floats wrapped*/
}
	#navigation li {
	  float: left;
	}
	#navigation li a {
	  display: table-cell;
	  height: 4em;
	  vertical-align: middle;
	  text-align: center;
	  text-decoration: none;
	  color: #aaa;
	  background-color: #fff;
	  width: 87px;
	  font: .8em arial, helvetica, sans-serif;
	}
	#navigation a.double {
	  width: 89px;
	}
 
/*Take your stinking hax off me, you damn dirty IE!*/
		* html #navigation a {
		  display: block;
	  	  font-size: .8em;
		  line-height: 4.1em; <--here, we use the line-height vertical-centering trick
		}
		*+html #navigation a {
		  display: block;
		  line-height: 4em;
		}
		* html #navigation a.double {
	 	  line-height: 2em;	<-- the nasty part of the hack
		}
		*+html #navigation a.double {
		  line-height: 2em;
		}
	#navigation a:focus, #navigation a:hover {
	  background-color: #000;
	}

IE5.5 if you care has some issues with the widths, and wraps the last menu item. I only felt like doing one hack for IE5.5 and below, the centering hack. Up to you if you care about that browser-- you'd have to make the widths a bit smaller for 5.5.

http://stommepoes.nl/Kingston/kingstonmenu.html

Be aware that setting the opacity for the #maincell sets that same opacity for everyone else. You'll never get that back (except, I noticed, in Opera9.27 where a child's background colour can be 100% opaque... strange). You'll never be able to make any children of #maincell become more opaque-- you'd need another, non-child, absolutely positioned box sitting over the #maincell box if you ever needed something to be 100% opaque. .9 isn't too bad, though.

Remove images from your browser and now there is still text. Use this image-replacement technique-- your page loads quite slowly on my machine simply because of the large background photo. It would make sense for some visitors to turn images off for faster surfing-- so don't rely on alt text, but try to stick some real text behind those images. It's a hair more code, but personally I think it's worth it every time.

Damn dirty IE hax. We expect that IE8 not only will understand display: table, but also will ignore * html (as IE7 ignores it) and hopefully *+html (this is the only iffy part as far as IE8 is concerned). I like to keep my damn dirty hacks in the CSS, not the HTML.

Oh, and for the PHP thing, you can keep it really simple... Let's see if this works, thread: http://forums.digitalpoint.com/showthread.php?p=2145250

Dan Schulz' how-to PHP include page : )

I'm no expert, but I fake one on teh Internets

psjw12
Offline
Regular
Kingston, UK
Last seen: 12 years 29 weeks ago
Kingston, UK
Joined: 2008-07-10
Posts: 12
Points: 0

Almost there....

We'll I've used your code and tried to adapt it... but everything is vertical instead of horizontal, what am I doing wrong? :S

Thanks for all your help!

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 5 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Heh, close : )navigation

Heh, close : )

navigation li {
	float: left;
}

See anything missing? I thought it looked like those li's weren't getting floated-- they aren't : ) Add the # in.

Uh, and you don't have to use my widths if you're going to set the menu to 94% width... I just used those widths to make the menu stretch exactly across the page, but you can also use em's or something a bit more flexible for width too if you want. They do need A width though, otherwise the text will stop wrapping on the "double" items.

I'm no expert, but I fake one on teh Internets

psjw12
Offline
Regular
Kingston, UK
Last seen: 12 years 29 weeks ago
Kingston, UK
Joined: 2008-07-10
Posts: 12
Points: 0

Almost there!

Done a bit of code fiddling and nearly got it just a few minor bugs vary with browser:

Firefox: I fixed the problem after posting this, I removed the display: block from hover [On hover the text vertical align goes back to top and there is a line of white pixel that shows on the bottom.]

IE: Won't vertical align text at all (I'm changing the line-height value you commented on, but it doesn't do anything Sad )

Also I might add more links but I don't think there will be enough space so I might just do a more page for little extra things.

Also I know I mentioned having links in just one file that all the web pages link to so I need to only update one file, is it possible to use a HTML page and all the pages just grab the code from that rather than PHP? I do want it though so that the current page your on is highlighted in the navigation bar.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 5 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote:IE: Won't vertical

Quote:

IE: Won't vertical align text at all (I'm changing the line-height value you commented on, but it doesn't do anything Sad )

IE does not vertical-align in this case because it does not support the table display states. If you saw anything funky in my code, that was it:

/*Take your stinking hax off me, you damn dirty IE!*/
		* html #navigation a {
		  display: block;
	  	  font-size: .8em;
		  line-height: 4.1em; <--here, we use the line-height vertical-centering trick
		}
		*+html #navigation a {
		  display: block;
		  line-height: 4em;
		}
		* html #navigation a.double {
	 	  line-height: 2em;	<-- the nasty part of the hack
		}
		*+html #navigation a.double {
		  line-height: 2em;
		}

For IE, the li's are still floating, but the a's are set to display: block (they are NOT set to display: block for the modern browsers!! and you should not have used it for the a:hover specifically! Let it inherit from a!), and line-height is used to center the text (the only way I can think of to do it).

By setting display: block on the hover, you lost the ability to vertical-align: middle! That's why it's going back up to the top.

Also, you've tried to set a height on :hover. The height needs to be set on the general a alone. :Hover is but a state of changing background colour, am I right?

Now, did I miss something in my code? I did not add the white borders because a white border on a white background is invisible, and the original site only had blocks (which touched) showing up on the :hover. Did you want a space between each link that never changed colour on hover? In which case, you'd want a left or right margin simply to create some space between each link (one of the table display states, I forget which, does not allow margins... but I think that was table-row). This way, :hover, :focus, everyone always has that gap between them.

As far as having a single file, you will need scripting of some sort--- it doesn't have to be PHP, but even I (who does zero programming) could follow Dan's instructions that I linked to... but it can be Perl, Python, maybe Ruby I dunno, any non-compiled language can do it.

However, to keep the "current page" highlighted, you do NOT need PHP-- if you keep your static HTML pages, simply take the .html page that is the current page and give the "a" in question a class of "current" and in the CSS give it the same styles as hover (or another style if you wanted it like the original site).

I'm going to add this into my current demo so you can look at it. So you want some margins or spacing around each link?

In general, about browsers: FF, Opera, Safari and Konqueror all support display: table and that family of display states. With display: table (and table-row and table-cell) you can give things which aren't tables some of the characteristics of tables-- one of them being vertical-alignment of text withint a "cell".

IE has never supported display: table, and thus we must us line-height to get IE to look the same. I have another menu of a page I'm still working on-- the whole page had been written in tables, meaning the menu also was a table, and did this accordion thing like tables do. In order to keep that behaviour, while taking it out of the table (it should never have been in a table, it's a menu, not an Excel sheet), I needed display: table (and IE just got floats).

Take a look here and make your browser window wider and smaller with one of the compliant browsers above, and then with IE (not IE8 beta). You'll see the modern browsers treat that menu like a table (content of a single cell determines the height of the whole menu) while in IE the one menu item doubles and just looks stupid : )

Anyway, updated version: http://stommepoes.nl/Kingston/kingstonmenu.html
This would be your static events.html page. On your static about.html, there'd be the "current" class only on the about us link, and so on.

I did run into the white line on the bottom while I was testing out various ways of getting this menu to look right-- it almost always came from the fact that there was padding involved, and that two of the menu items had wrapping text... no matter what I did, I could never get the padding to look right, unless I set the text and all the sizes (inlcuding height) in px, which is an accessibility no-no (I had a beautiful-looking menu at first, with everything set in px, in all browsers, without the display: table... but the text stayed so damn tiny. This just isn't allowed in my world : )

I'm no expert, but I fake one on teh Internets

psjw12
Offline
Regular
Kingston, UK
Last seen: 12 years 29 weeks ago
Kingston, UK
Joined: 2008-07-10
Posts: 12
Points: 0

SOS Stomme poes!

Hey I've been doing some editing and I've now got the menu in an external HTML file which PHP calls the code in, when I went to change the background colour from black to a shade of grey it still stayed black, when I commented it out it still was black (this was in the #navigation a:hover bit)

Help! lol

Thanks!!!

psjw12
Offline
Regular
Kingston, UK
Last seen: 12 years 29 weeks ago
Kingston, UK
Joined: 2008-07-10
Posts: 12
Points: 0

IGNORE LAST POST!

I've found it Smile
Would happen after I post! lol