Making Menu one solid bar

[SergioQ]

Morning All,

Am using images on a menu for links. They're designed so they look like one solid piece with texture,

But no matter how I try, they are spaced. I have collapsed all tables, td's etc. made padding 0, etc.

Other than doing absolute placement, is there a way to do this propely?

My code sample, and result sample are:

table.tabmainM
{
    border-collapse: collapse;
    padding: 0;
}

th.thmainM
{
    border-collapse: collapse;
    padding: 0;
}

th.tdmainM
{
    border-collapse: collapse;
    padding: 0;
}

[floatingDivs]

Can you show the entire HTML page? Even better, can you give us a link to a hosted version of the page? The CSS is very limited and we can't help much with it.

[SergioQ]

Honestly it's not mine to give...but I take it from your answer that it is possible to stack one graphic link right against another, so that therefore my code is incorrect?

[drjohn]

margin:0; might help.

as would using <ul> and <li> and <div> and not tables for layout.

[SergioQ]

Thanks for throwing out hints despite my not posting full code. I will try them all.

Thanks again,

[SergioQ]

Still working on it....will make a page that shows the code so I can post it all, and just remove the "customer's" graphics.

In the meantime I used the styling below, and I still get this stupid padding in between items.

Will be in touch:

Thanks again, Sergio

ul#navigation
{
    margin:    0px;
    padding:    0px;
    list-style-type: none;
}

ul#navigation a
{
    display:            block;
    text-decoration:    none;
    padding:            0px;
    border              0px;
 

ul#navigation li
{
    display: inline; 
}

[SergioQ]

Ok, so I took out any graphics that aren't mine to share, and moved this simple, yet elusive problem to my own server:

http://www.warptv.com/debug/sample.html

Whew, thanks. Just want them to be joined from top to bottom.

And am attaching the java and CS files

Won't let me UPLOAD the CCS file so here is it's contents:

BODY
{
    font-family: sans-serif, serif, monospace;
    font-size: 100%;
    color: black;
}


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

ul#navigation a
{
    display:            block;
}

ul#navigation li
{
    display: inline; 
}

[SergioQ]

So here's what I did to solve the problem, right or wrong.

I used absolute positioning. The way I figure it, I know the size of the (vertical) menu, so using a table, I can keep my content is off of it.

I guess this might be considered "klooge", but it fixes my problem.

Thanks for looking at it folks.

Sergio

[Philippe.Lahaie]

in your html, try putting all the image tags on the same line, in the markup every line return is gonna input a small white space between inline elements. let me know if this works.

[SergioQ]

in your html, try putting all the image tags on the same line, in the markup every line return is gonna input a small white space between inline elements. let me know if this works.

Tried that and it still fails.

Here is the suggested link/code sample (in case you meant something else?)

http://www.warptv.com/debug/sample.html

But thanks for trying...

[Philippe.Lahaie]

in your sample the img tags are not on the same line, and why are they all in a single <li> tag? the principle of unsorted lists <ul> is to have each item in a "list item" <li> unless theres a good reason to do it your way that i'm missing...

[Philippe.Lahaie]

css :

ul#navigation a {
display: block;
height: 57px;
}

worked for me since your images are 57pixels high but your links were 61 for some reason.

[SergioQ]

css :

ul#navigation a {
display: block;
height: 57px;
}

worked for me since your images are 57pixels high but your links were 61 for some reason.

Well, you're not wrong.

Somewhere I changed it to the right number, and now it works.

May I ask which other of the attributes I shoudl change? Have always been a novice about CSS and HTML.

Many thanks.

Sergio

ul#navigation
{
    list-style-type: none;
    margin:    0;
    padding:   0;
    display: block;
    height: 57px;
}

ul#navigation a
{
    display: block;
    height: 57px;
}

ul#navigation li
{
    display: block;
    height: 57px;
}

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

[Philippe.Lahaie]

well it depends what you are working with?
if you're using php for example i can't help you.

but if its asp.net you should use special tags that are available to you, like <asp:menu> it would allow you to do eactly the same thing without images, which would be better SEO wise i believe.