14 replies [Last post]
SadruddinW
SadruddinW's picture
Offline
Regular
Sheffield
Last seen: 3 years 33 weeks ago
Sheffield
Timezone: GMT+1
Joined: 2007-08-03
Posts: 12
Points: 5

Hi. I'm working on

www.altitudeaddiction.co.uk

As you'll see, it's a table based design, and fairly simple.
Basically, (very), there's a top bar, bottom bar, four corners, and 2 vertical side bars, with the real content in the centre panel.

My problem is the vertical side bits, as I want the central panel to be variable in size, (as on the various different pages).

Is ther any way I can use css to automatically expand the vertical columns to cater for variable text/image in the central panel.

No rewards, but I'd be very greatful if someone could give me a straightforward answer, (hopefully not "NO")

Sadruddin W

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 days 21 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

SadruddinW wrote:As you'll

SadruddinW wrote:
As you'll see, it's a table based design,



whoah





back up there





a what?

Verschwindende wrote:
  • CSS doesn't make pies

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

SadruddinW wrote:Hi. I'm

SadruddinW wrote:
Hi. I'm working on

www.altitudeaddiction.co.uk

As you'll see, it's a table based design, and fairly simple.

Table based layouts are against pretty well everything we stand for here. They are by definition not "simple" at all. Nothing about your page as it is now requires any tables at all.

Your whole design approach screams "20th century table mindset" anyway. That went out with the 1990's.

Folks around here all moved on, so you will likely need to look for help other places if you insist on staying with tables for layout. You probably won't get much help here for that approach.

Of course tables are perfectly fine for marking up tabular data, but your site doesn't have any of that.

.. but I could be wrong.

Ed Seedhouse

Ed Seedhouse

Posting Guidelines

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

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

SadruddinW wrote:Is ther any

SadruddinW wrote:
Is ther any way I can use css to automatically expand the vertical columns to cater for variable text/image in the central panel.

Don't put the image in the HTML; make it a background-image and set it to repeat-y. But first, lose the tables and start again.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

SadruddinW
SadruddinW's picture
Offline
Regular
Sheffield
Last seen: 3 years 33 weeks ago
Sheffield
Timezone: GMT+1
Joined: 2007-08-03
Posts: 12
Points: 5

OK, OK, OK

Alright then!

Back in a few days.

S

Smile

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 days 21 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Soon as you get rid of as

Soon as you get rid of as much of the tables as you can (even if it ends up looking like a dog's dinner) let us know and we'll help you fix it right up Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

SadruddinW
SadruddinW's picture
Offline
Regular
Sheffield
Last seen: 3 years 33 weeks ago
Sheffield
Timezone: GMT+1
Joined: 2007-08-03
Posts: 12
Points: 5

OK, Guys, I'm back!

Alrighty, then.

Here's my effort so far

www.altitudeaddiction.com/cssindex.html
(css is www.altitudeaddiction.com/newcss.css)

So far, so good, given being a comparative css newbie, but there are 3 things I'm tearing my hair out with.

1: The top bar is hidden behind the #stuff div. The #bot div does OK, stuck below the #stuff one, but I want the #stuff one to go below the #top one.

2: The #sidemenu is crap. It's supposed to look like www.altitudeaddiction.com/index.html, but the list bullets won't go away.

3: I can't seem to make h2 work in the #text div. (I'm sure this one is easy, but it's doing my head in).

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 4 days 21 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Server not found Firefox

Server not found

Firefox can't find the server at www.altitudeaddiction.com.

Verschwindende wrote:
  • CSS doesn't make pies

SadruddinW
SadruddinW's picture
Offline
Regular
Sheffield
Last seen: 3 years 33 weeks ago
Sheffield
Timezone: GMT+1
Joined: 2007-08-03
Posts: 12
Points: 5

That'll be 'cos it's

Sad

That'll be 'cos it's www.altitudeaddiction.co.uk (Doh!)

:rolleyes:

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

SadruddinW wrote:That'll be

SadruddinW wrote:
That'll be 'cos it's www.altitudeaddiction.co.uk (Doh!)

That's still got tables in it or is that what we're s'posed to be looking at?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

SadruddinW
SadruddinW's picture
Offline
Regular
Sheffield
Last seen: 3 years 33 weeks ago
Sheffield
Timezone: GMT+1
Joined: 2007-08-03
Posts: 12
Points: 5

SadruddinW wrote:Alrighty,

SadruddinW wrote:
Alrighty, then.

Here's my effort so far

www.altitudeaddiction.co.uk/cssindex.html
(css is www.altitudeaddiction.co.uk/newcss.css)

Quote:

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Your top graphic doesn't

Your top graphic doesn't show up cos you've got top: 120px set on it which pushes it down behind the other content.

For your menu problem, you need this:

#sidemenu ul { list-style: none; margin: 0; padding: 0; }

And get rid of this:

voice-family: "\"}\""; voice-family: inherit;

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

SadruddinW
SadruddinW's picture
Offline
Regular
Sheffield
Last seen: 3 years 33 weeks ago
Sheffield
Timezone: GMT+1
Joined: 2007-08-03
Posts: 12
Points: 5

#top div 120 down

Thanks for that, about the side menu

The reason for the top: 120px is that I actually WANT the three divs to start 120 px down the screen.
The #top is where I want it to be, the problem isn't this, it's that the #mid doesn't follow it.

Thanks very much for the speedy response, and sorry about the stupid .com .co.uk mistake.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Use margin-top instead of

Use margin-top instead of top.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

SadruddinW
SadruddinW's picture
Offline
Regular
Sheffield
Last seen: 3 years 33 weeks ago
Sheffield
Timezone: GMT+1
Joined: 2007-08-03
Posts: 12
Points: 5

Great - thanks - but...

Thanks for both of those, now much better.

BUT I still can't seem to get H2 to work in the #text div, and also the #sidemenu div is right at the top, but the #text div is lower. Ideally I'd like to move the menmu down a bit and the text up, but I can't work out how to do either