15 replies [Last post]
FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 3 years 12 weeks ago
Dublin, CA
Timezone: GMT-8
Joined: 2007-01-10
Posts: 176
Points: 44

I just recently made a site for a friend's band using tables and I was wondering if someone could help me to try to get it into CSS. I have checked out tutorials but I'm still confused about how to do the layout with graphics in CSS. If someone could check out the site and point me in the right direction I would appreciate it a lot.

my site

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 19 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You start with a full

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 7 years 23 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

Hello FernE97,I was looking

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.//

Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 7 years 23 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

I still can't figure out why

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 19 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

it's an odd one but also as

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 13 years 35 weeks ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

good work indeed. i was

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.

Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 7 years 23 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

That worked vinhboy!!! I

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...

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 19 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

well done didn't notice what

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!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 3 years 12 weeks ago
Dublin, CA
Timezone: GMT-8
Joined: 2007-01-10
Posts: 176
Points: 44

thanks

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.

FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 3 years 12 weeks ago
Dublin, CA
Timezone: GMT-8
Joined: 2007-01-10
Posts: 176
Points: 44

looks good

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

FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 3 years 12 weeks ago
Dublin, CA
Timezone: GMT-8
Joined: 2007-01-10
Posts: 176
Points: 44

buttons

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?

Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 7 years 23 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

It might be easiest to

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.

FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 3 years 12 weeks ago
Dublin, CA
Timezone: GMT-8
Joined: 2007-01-10
Posts: 176
Points: 44

alright thanks i will just

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

FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 3 years 12 weeks ago
Dublin, CA
Timezone: GMT-8
Joined: 2007-01-10
Posts: 176
Points: 44

I got pretty much everything

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

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 4 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Both your problem and

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.

Verschwindende wrote:
  • CSS doesn't make pies

FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 3 years 12 weeks ago
Dublin, CA
Timezone: GMT-8
Joined: 2007-01-10
Posts: 176
Points: 44

Thanks I'll check that out.

Thanks I'll check that out.