28 replies [Last post]
multichild
Offline
Regular
Last seen: 11 years 11 weeks ago
Joined: 2007-01-05
Posts: 42
Points: 0

I am picking up a site that was pretty much completly built in tables.

I am looking to change it so that it is CSS driven, because they want it to appear in PDA's and be web complient too.

This is the site, im tinkering with it as you can see, and have made some progress to build it in div's. But the nav header and the form area are still using tables.

Can somebody have a look at it with me, and give me some pointers.

Cheers

Lee











 








 


 






 






You pay for what you get!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

now I wonder what happened

:shrug: now I wonder what happened to the code?

You might like to check the forum stickies and/or the posting instructions below the text box when posting.

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

multichild
Offline
Regular
Last seen: 11 years 11 weeks ago
Joined: 2007-01-05
Posts: 42
Points: 0

Sorry I forgot to put the

Sorry I forgot to put the code bit in.

here is ther site too;

http://www.checksafetyfirst.com/en/leenewnav/default.php

You pay for what you get!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Is that link a work in

Is that link a work in progress or just the original?

It is still well tabled up.

By the looks of things despite tables being used the necessary divs/semantic markup is already there, so why not just copy the page and on the copy remove all instances of table markup and then set about re-styling the existing/remaining markup.

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

multichild
Offline
Regular
Last seen: 11 years 11 weeks ago
Joined: 2007-01-05
Posts: 42
Points: 0

Hi Hugo, Ye I have got it

Hi Hugo,

Ye I have got it to that stage, as before it was completely built using tables, and yes its work in progress. The colours are a bit vivid, but I can see where I am then.

I have used a wrapper div, and the internals (form & flash) are divs, but the last bits which are the nav bar and the forms are still inside tables.

To copy the page and remove all instances of table markup, is that an operation inisde for instance Dreamweaver, or is that a manual operation you are suggesting?

Cheers

Lee

You pay for what you get!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Erm probably suggested as a

Erm probably suggested as a manual operation, no doubt it can be automated but I was more suggesting that one just removes the table elements on a copy and starts styling the remaining semantic markup to as closely resemble the table layout, but don't go overboard on trying to match the table layout.

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

If you work on a copy of the

If you work on a copy of the page without any table elements and post that as your working example we can help you style and position those remaining semantic elements.

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

multichild
Offline
Regular
Last seen: 11 years 11 weeks ago
Joined: 2007-01-05
Posts: 42
Points: 0

Hi Hugo, im working on it as

Hi Hugo, im working on it as we speak. Basically I started a new page, sorted out a wrapper div for it, with three internal divs (left, right & center). The center one containg the fixed graphic, and the left and rights containing a grpahic that needs to repeat to the edges.

I will see how it goes and get back to you.

Cheers

Lee

You pay for what you get!

multichild
Offline
Regular
Last seen: 11 years 11 weeks ago
Joined: 2007-01-05
Posts: 42
Points: 0

Ok ive encountered my first

Ok ive encountered my first problem.

I need a 5 column horizontal layout. A the moment I have a 3 column layout all is fine, as long as all those columns are set size and positioning.

http://www.checksafetyfirst.com/en/leenewnav/testtop.php

I need the middle column to always be center of the wrapper at 760px; to contain the graphic. The left and right columns either side of it, need to be background repeat which I have got but need to bump up next the the center column and the repeat itself to the edges of the screen.

And thats somethng else too, as you can see if you follow the link above the wrapper div although set to 100% it doesnt travel to the edges of the screen.

#navContainer{
BORDER-TOP: #000 1px solid; BORDER-bottom: #000 1px solid; BORDER-left: #000 1px solid; BORDER-right: #000 1px solid; height:30px; width:100%;
}
#leftnav{
float:left; background-image:url(images/bg_ad.jpg); background-repeat:repeat-x; width:50px;
}
#centernav{
float:left; width:760px; background-image:url(images/nav_r2_c1.gif); left:50%; background-repeat:no-repeat;
}
#rightnav{
float:right; background-image:url(images/bg_ad.jpg); background-repeat:repeat-x; width:50px;
}

Lee

You pay for what you get!

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

multichild


I don't see anything on that page but a white box with a black border. And if you're creating pages (even just test pages), make sure they're actually valid HTML with a doctype.

When you say you want a 5-column layout, you're not actually counting the bits that form the background on the left and right side of the layout as columns, are you? Cos that's what it sounds like. They're not columns - they're just the background of the body showing through around the rest of the layout.

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

multichild
Offline
Regular
Last seen: 11 years 11 weeks ago
Joined: 2007-01-05
Posts: 42
Points: 0

Hi, Ye inside that black

Hi,

Ye inside that black surround, is three images. They are a bit feint, but they are there.

Well the five columns in my mind are are first the center graphic which has to sit excatly center of that wrapper div. There are two images that bolt onto it either side and there there are the bacground repeat images that finish of left and right to the ends.

But you got me thinking, and I suppose what I could do, is make up that image and put it together as one, and sit that centrally, so that again reduces it to 3 columns or 3 parts.

The left and right background images need to butt up to it either side and travel then to the ends.

But again I suppose what I could do is have the wrapper div, and inside that 2 divs one floating above the other, the one on top with the central image, and the other below it with a lower z-index going all the way across the page as the background image.

But still how do i get that upper div to always float centrally, and why does the wrapper div not go the end of the screen.

Lee

You pay for what you get!

multichild
Offline
Regular
Last seen: 11 years 11 weeks ago
Joined: 2007-01-05
Posts: 42
Points: 0

Sorry, You are right, in FF

Sorry,

You are right, in FF those images do not appear. They do in IE.

I will get that sorted out first.

lee

You pay for what you get!

multichild
Offline
Regular
Last seen: 11 years 11 weeks ago
Joined: 2007-01-05
Posts: 42
Points: 0

Ah, it works I think. what

Ah, it works I think. what you think?

http://www.checksafetyfirst.com/en/leenewnav/testtop.php

so here it is now:

#navContainer{ BORDER-TOP: #777 1px solid; BORDER-bottom: #777 1px solid; BORDER-left: #777 1px solid; BORDER-right: #777 1px solid; height:30px; width:100%; margin-left:auto; margin-right:auto; position:absolute; } #leftnav{ float:left; background-image:url('images/bg_ad.jpg'); background-repeat:repeat-x; width:100%; height:30px; position:relative; z-index:1; } #centernav{ width:760px; background-image:url('images/nav_r2_c1.gif'); background-repeat:no-repeat; height:30px; position:relative; margin-left:auto; margin-right:auto; top:10px; z-index:2; }

You pay for what you get!

multichild
Offline
Regular
Last seen: 11 years 11 weeks ago
Joined: 2007-01-05
Posts: 42
Points: 0

Ok I got it working quite

Ok I got it working quite well in IE, as in the z-index values are showing how I want them, but in FF what is supposed to be the higher z-index is not showing on top of the lower div.

But I still got the issue of it not going to the edge.

Im enjoying this, the complexity of tables and all that code compared to this is not good.

Lee

You pay for what you get!

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

I don't really get what

I don't really get what you're trying to do but that's probably cos it's late and I need to go to bed.

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

multichild
Offline
Regular
Last seen: 11 years 11 weeks ago
Joined: 2007-01-05
Posts: 42
Points: 0

Ok mate, your in the USA

Ok mate,

your in the USA are you. Im in the thick of it Uk time. Almost time for lunch actually,

but to just fill you in, basically instead of all those columns I have 2 divs inside the wrapper div.

One contains the background image that travels the page the other sits above it with the grphic. It works fine in IE but not quite happening yet in FF.

But my main thing, is why doesnt the wrapper div fill the whole screen as I did it as 100%, instaed it cuts short left and right, and also doest start at the topof the screen, instead a bit down from the top.

Lee

You pay for what you get!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Lee you need to correct the

Lee you need to correct the markup errors as FF won't render things as they.

As for the spacing it's starting down from the top of the viewport as you haven't/aren't controlling margins.

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

multichild
Offline
Regular
Last seen: 11 years 11 weeks ago
Joined: 2007-01-05
Posts: 42
Points: 0

Hi Hugo, Ok done that and

Hi Hugo,

Ok done that and still doesnt work out. In FF the centernav div is almost out of sight at the top of the page, which is not right.

But its definately a lot better without the tables, much, much neater.

Im sorry to keep on it, but it still doesnt fill the page to the sides, and is riding down a bit of the top of th epage.

lee

You pay for what you get!

multichild
Offline
Regular
Last seen: 11 years 11 weeks ago
Joined: 2007-01-05
Posts: 42
Points: 0

Sorry Hugo, missed the

Sorry Hugo, missed the second part of your message, and of course. I have now controlled that via the body tag and it wroks a treat. Just that z-index and where it is problem now to sort out, and all this has gone very well, and is very effective.

Lee

You pay for what you get!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Apologies the second part of

Apologies the second part of my post re margins was a later edit.

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

multichild
Offline
Regular
Last seen: 11 years 11 weeks ago
Joined: 2007-01-05
Posts: 42
Points: 0

As all the code stands is

As all the code stands is below:

BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; } #navContainer{ height:30px; width:100%; margin-left:auto; margin-right:auto; margin-top:0px; margin-bottom:0px; } #leftnav{ float:left; background-image:url('images/bg_ad.jpg'); background-repeat:repeat-x; width:100%; height:30px; position:relative; z-index:1; margin-top:0px; } #centernav{ width:757px; background-image:url('images/nav_r2_c1_complete.gif'); background-repeat:no-repeat; height:30px; position:relative; margin-left:auto; margin-right:auto; top:-29px; z-index:2; }

And the code:

You pay for what you get!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Loose the negative top, you

Loose the negative top, you are probably falling foul of the table syndrome in declaring divs for graphics. What might work is to place the thin bar that runs full width on the body element then the curvy part sits as a background of a ul element widthed and centred within the ul you then of course have your li elements.

Just a thought but is the depth of that thin bar the same as the curvy part where they meet as it looks as though they are different? but it might be me.

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

multichild
Offline
Regular
Last seen: 11 years 11 weeks ago
Joined: 2007-01-05
Posts: 42
Points: 0

Nice one Hugo, Thanks very

Nice one Hugo,

Thanks very much. Cant really believe how quickly we got through that. I was actually dreading it this morning, but it has worked out really well, and the fact this all runs on 1 line of xhtml rather than the table structure above is very good.

Thanks again, I can build it up from there now.

lee

You pay for what you get!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Here's a slightly different

Here's a slightly different take along the lines I mentioned earlier, less code lighter rulesets.

Test

html, body {
margin:0;
padding:0;
}
body {
background: url(bg_ad.jpg) repeat-x 0 -1px; /* -1px to correct graphic mismatch */
}
#navContainer{
height:30px;
width:758px;
margin:0 auto;
list-style:none;
text-align:center;
background:url(nav_r2_c1_complete.gif) no-repeat;
}
#navContainer li{
display:inline;
}


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

multichild
Offline
Regular
Last seen: 11 years 11 weeks ago
Joined: 2007-01-05
Posts: 42
Points: 0

Ye neet, works a treat that

Ye neet, works a treat that does.

cheers again.

Lee

You pay for what you get!

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

multichild wrote:your in the

multichild wrote:
your in the USA are you.

Nope. Australia. Can't you tell by my accent? Wink

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

multichild
Offline
Regular
Last seen: 11 years 11 weeks ago
Joined: 2007-01-05
Posts: 42
Points: 0

Morning Tyssen, Ye I could

Morning Tyssen,

Ye I could hear a slight twang, but couldnt pin point it.

Ive been building on that nav bar yesterday, still well impressed with the little amount of code. I had a nav in css before hand, and I am now trying to fit it all together. I maybe back soon, for some tips.

Lee

You pay for what you get!

multichild
Offline
Regular
Last seen: 11 years 11 weeks ago
Joined: 2007-01-05
Posts: 42
Points: 0

Ok I got it quite close, but

Ok I got it quite close, but its just not playing ball with the alignement.

http://www.checksafetyfirst.com/en/leenewnav/testtop.php

div#navigation{ font-size: 12px; font-family: Tahoma; height:30px; width:758px; margin:0 auto; list-style:none; background:url('images/nav_r2_c1_complete.gif') no-repeat; } div#navigation ul { list-style: none; list-image: none; margin: 0; padding: 0; position: absolute; border-top: 0px solid #000; border-right: 0px solid #000; border-left: 0px solid #000; border-bottom: 0px solid #ccc; background-color: #eee; } div#navigation ul.level1 { width: 650px; } div#navigation ul.level1 a { width: 75px; } div#navigation li { position: relative; } div#navigation li a { display: block; padding: 3px 3px 3px 3px; text-decoration: none; color:#3939CE; } div#navigation li a:hover { color: #eee; background-color: #FF5900; } div#navigation ul ul { position: absolute; left: -9999px; border-bottom: none; } div#navigation ul.level1 li { position: relative; border-bottom: 0px solid #000; float:left; } div#navigation ul.level2 li { /*border-bottom: 1px solid #000;*/ } div#navigation li.submenu:hover ul.level2{ display: block; left: -2px; top: 20px; } div#navigation ul#sub1 { width: 146px; padding-top:5px; padding-bottom:5px; line-height:13px; border-bottom: 2px solid #bdbdbd; border-left: 2px solid #bdbdbd; border-right: 2px solid #bdbdbd; } div#navigation ul#sub2 { width: 146px; padding-top:5px; padding-bottom:5px; line-height:13px; border-bottom: 2px solid #bdbdbd; border-left: 2px solid #bdbdbd; border-right: 2px solid #bdbdbd; } div#navigation ul#sub3 { width: 139px; padding-top:5px; padding-bottom:5px; line-height:13px; border-bottom: 2px solid #bdbdbd; border-left: 2px solid #bdbdbd; border-right: 2px solid #bdbdbd; } div#navigation ul#sub4 { width: 105px; padding-top:5px; padding-bottom:5px; line-height:13px; border-bottom: 2px solid #bdbdbd; border-left: 2px solid #bdbdbd; border-right: 2px solid #bdbdbd; }

div#navigation ul#sub1 a {
padding: 3px 3px 3px 6px;
text-align:left;
width: 137px;
}
div#navigation ul#sub2 a {
padding: 3px 3px 3px 6px;
text-align:left;
width: 137px;
}
div#navigation ul#sub3 a {
padding: 3px 3px 3px 6px;
text-align:left;
width: 130px;
}

div#navigation ul#sub4 a {
padding: 3px 3px 3px 6px;
text-align:left;
width: 96px;
}


I tried it your way by not using a div, and only starting with the ul id, but it got nowhere near, and I couldnt fix any of the problems.

But this is so close, but its not right.

lee

You pay for what you get!

multichild
Offline
Regular
Last seen: 11 years 11 weeks ago
Joined: 2007-01-05
Posts: 42
Points: 0

Ah ha, bingo... looks like

Ah ha, bingo...

looks like i got it, I was playing with the wrong tag.

The spacing around those nav buttons, is the next thing to work on.

Cheers all

You pay for what you get!