Changing from tables to div's

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

Sorry I forgot to put the code bit in.

here is ther site too;

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

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.

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

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.

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.

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

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

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.

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

Sorry,

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

I will get that sorted out first.

lee

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; }

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

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.

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

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.

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

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

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

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:

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.

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

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;
}

• Link


• Link


• Link


• Link

Ye neet, works a treat that does.

cheers again.

Lee

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

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

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

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