Topic: Making it tableless, (Page 1 of 1)

http://www.concieted-smile.co.uk/layout2/

Where it says Main Navigation, how can I group those three graphics togther so it makes a seemless and expandable content header, I'll then put a box under neather it with the content in.

This is a 'fairly' easy thing to do with tables,

Any of you css gurus know the quick and easy fix?

Clicking this link.. will help me in my game....

Okay, a question, and a statement:

Statement: Your link is broken. You spelt 'conceited' incorrectly.

Question: which three images do you want to group together, considering there's four on the page, currrently. Whichever ones you want to group, how do you want them to lie together? Each one lying next to the other?


Justice 4 Pat Richard

You have a gimpy doctype declaration - see my post in your other thread.

I want
http://www.conceited-smile.co.uk/layout2/
to look some what similar to
http://www.conceited-smile.co.uk/layout/

How can I achieve this?

Thanks for the catch Reisio

Generall its good to use lists for menus and style that.

So do your

<ul class="navmenu">
<li>Home</li>
<li>About</li>
</ul>

The do your css

.navmenu ul {display:block; list-items-style:none;}
.navmenu li a:hover{blah}

etc.. do a google search on css menu's there should be plenty of examples out there

That isn't relivant to the issue with the graphics not lining up.

Well, it is, in a peripheral way. The best way for you to be doing your navigation menu, not using tables, is to arrange it using styled unordered lists. There's a million articles on getting this done, but the best ones (in my opinion) are the "taming Lists" articles on A List Apart.

Now, I went in and had a look at your CSS there, and to be perfectly frank, you've got a lot of work to do. It's a mess. Some suggestions for you:

1. Formatting your CSS: You've got a mixture of styles in that style sheet. Pick one, and stick with it. The one that I, personally, use goes like this:
   
   
   code:

   ---

   #id-name {
   
   	property1: value;
   
   	property2: value;
   
   }

   ---

   
   
   
   
   It makes it very readable, and allows people to help you better because they can read it.
   
   

2. Don't declare things more than you have to. That's very important. Makes for big, cluttered, unreadable style-sheets that just confuse people. Your current style-sheet declares .lback (I think it was that) twice, for no descernable reason. The two could easily be combined into one, and it will save time, and make it easier to read.
   
   
3. Make sure the what you name your classes is what you use in your markup. You have, at one point, .rborder in oyur stylesheet, and class="rboder" in your markup.
   
   
4. Don't assume: This is probably one of the biggest things I've learnt in CSS. Don't make assumptions that what you have should jsut work, or that what someone else tells you to try, won't. Or, for that matter, is irrelevant ot what you're trying to do. It's all relevant, because it's all a learning process. If you don't know how something someone suggests fits in, ask, don't tell them that it's not relevant. Hel, you might be right about it's irrelevance, but if you don't ask, you'll never find out the greater truth, will you?

Justice 4 Pat Richard

(Edited by Skaarjj on 02-21-2006 05:07)

quote:

---

Trigger said:

That isn't relivant to the issue with the graphics not lining up.

---

It has to do with "making it tableless", which is, after all, your title.

And it is a matter of coding things properly - which in the big picture has everything to do with getting your page to work properly, including things like images lining up properly.

A "quick easy fix", unfortunately, is not what proper use of code is all about...

FWIW.

Oh, and I didn't have time to add this in my last post, but if you float all three of those image elements to the left and increase the width of the spans that surround them (why, exactly, do you have spans around each image, again? The styles they contain could easily be applied to the images themselves) so that they contain the actual pixel size of the image, not an arbitrary percentage; which will be different depending upon the size of the browser window and the resolution of the user's computer -- pretty much guaranteeing that they'll never line up how you want them to.


Justice 4 Pat Richard

(Edited by Skaarjj on 02-21-2006 11:54)