Change table site to CSS

You start with a full standards switching DTD.

Then describe a main #container on this you would run that graphic as a background using the css background property, normally you would take a thin slice across few pixels high and repeat it on the y-axis but it's an irregular pattern by the looks of it so wont repeat, as it's fairly lightweight file you'll just have to place the whole graphic on the container, center the container using auto margins on it's fixed width after #container describe a #header div this will hold the top graphic overlaid on the #container background close #header then create a ul element for the links this will need the background that is now visible behind the links so you will need to find a point at which to slice the graphic or conversely place the ul in the #header and position it to the bottom with position absolute and a default transparent background (the header would need to be position relative)
In the main body of #container describe another div that you can apply a width to and center in that place your content as perhaps a dl list, dates being the dt and the blurb the dd. The [news] could be a heading tag running full width with text aligned right.

That's the basics without too much detail have a go at getting something together and then post back and someone can take you through things further.

Hugo.

Hello FernE97,
I was looking for a project so I wrote a bit on your page. Still need to work on the menu a bit and I'm sure Hugo's idea of using a dl for the content is better than what I did... anyway, it's a start.
Have a look at it at http://www.nopeople.com/break

//edit...the menu was working before I uploaded this. Now the hover is broken!!!! grrr!! ...oh well, I'm done for the night. Not a clue what I did to break it.//

I still can't figure out why the menu buttons hover effect is broken...

it's an odd one but also as lighly non standard approach, maybe you need to ensure that the anchors have a high z-index but I'm clutching as FF wont let the page be edited, images get blown away.

Regardless I do hope that the OP pops back to say thanks to you for the effort.

good work indeed. i was about to this myself, luckily i was busy. or else we would have two copies of this.

about your hover problem. when i do hover, i put the hover class on the "a" itself, that always worked for me. for example:

a.button1:hover

something like that, then set the class of the "a" to button1.

That worked vinhboy!!! I don't really understand why though.
Have a look at http://www.nopeople.com/break/ now.

Images are still disapearing when you try to use FF's Developers Toolbar CSS editor though...

well done didn't notice what the hover was on originally other than you had split rules up slightly oddly. putting the hover on the anchor class is a more specific targeting.

Again do hope the OP can be bothered to say thanks for the help!

thanks for all the responses everyone. I'm still a little confused by all of this but I will check out the code that you used to try to understand it a little more.

looks good Excavator that was exactly what I was looking for. Now I just need to figure out all of this. Thanks again

the only thing I noticed is that the gaps between the buttons weren't included. I've been playing around with it but no luck so far. Anyone know if it possible to add images between the buttons? or should i just make the gaps part of the buttons?

It might be easiest to include them in the buttons. I tried with margins but you could see the outline of the button then, plus in IE the floats would break out. Double margin bug I think.

Fixed the CSS so FF CSS Editor works. Someone on another board suggested the CSS editor could not understand the path when the CSS was in a different directory than the .html.

alright thanks i will just try including the gaps in the buttons then.

I got pretty much everything the way I wanted but is there a way to have the over image stay up on the menu..like have news in the over state with the red highlight when it is on the news page? And I also noticed that when you first rollover the buttons they completely disappear for a second. Anyone know if that is fixable?

The site
menu css
layout css

Both your problem and solution can be found by tweaking the menu to take advantage of the "Sliding Doors of CSS" article at alistapart.com.

This will stop the flickering (which happens when the browser has to load a new image) and allow you to have a "red" link on the current page.

Thanks I'll check that out.