Topic: Making it tableless, (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=27532" title="Pages that link to Topic: Making it tableless, (Page 1 of 1)" rel="nofollow" >Topic: Making it tableless, <span class="small">(Page 1 of 1)</span>\

 
Trigger
Paranoid (IV) Inmate

From: Wales
Insane since: Jun 2002

IP logged posted posted 02-20-2006 00:39 Edit Quote

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

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

IP logged posted posted 02-20-2006 03:58 Edit Quote

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

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 02-20-2006 08:43 Edit Quote

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

Trigger
Paranoid (IV) Inmate

From: Wales
Insane since: Jun 2002

IP logged posted posted 02-20-2006 09:56 Edit Quote

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

H][RO
Bipolar (III) Inmate

From: Australia
Insane since: Oct 2002

IP logged posted posted 02-20-2006 14:53 Edit Quote

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

So do your

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



The do your css

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

Trigger
Paranoid (IV) Inmate

From: Wales
Insane since: Jun 2002

IP logged posted posted 02-21-2006 02:06 Edit Quote

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

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

IP logged posted posted 02-21-2006 05:06 Edit Quote

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)

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 02-21-2006 05:40 Edit Quote
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.

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

IP logged posted posted 02-21-2006 11:26 Edit Quote

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)



Post Reply
 
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
 
Your Text:
Loading...
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu