Navbar css issues

[Simon Lloyd]

Hi all, i have an issue within the navbar thats driving me nuts, i've added a <td> with an image in it but its pushing everything right!, the td is width 100%, the problem is it looks fine in forum home www.thecodecage.com/forumz and it has the issue in forumdisplay and showthread, how can i scale the <td> and the <img> so everything fits perfect, ive been working on it for a couple of days and can't get it right???

[Simon Lloyd]

I've now set the image a s a background but it doesn't scale down and doesn't look right in Chrome...etc

Anyone any ideas?

[Lynne]

What is it that you want it to look like?

Also, you cannot have a <td> of width 100% when you have two other <td> in that row. That would mean the other two <td> tags are supposed to be 0% (which they won't do if they have content in them).

[Simon Lloyd]

Thanks Lynne, i've got rid of the td and now put it as background see here www.thecodecage.com/forumz/index.php?styleid=37 but it doesn't scale down with browser size or resolution so unless you have really widescreen it looks naff, ideally i want it where it is and to scale up and down automatically, its been driving me nuts!

--------------- Added 1345482662 at 1345482662 ---------------

Also, i tought having width 100% would allow it to scale automatically?

[Lynne]

You want to set the image width to 100% within a td tag set to a specific width (like %30), not the td width to 100%. An image that is used as a background image via css is not going to be scalable.

[Simon Lloyd]

Thanks Lynne, i've tried that and many other things, here's what i have<!-- breadcrumb, login, pm info -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td width="100%" class="alt1">
<if condition="is_array($navbits)">
<table cellpadding="0" cellspacing="0" border="0">
<tr valign="bottom">
<td><a href="#" onclick="history.back(1); return false;"><img src="$stylevar[imgdir_misc]/navbits_start.gif" alt="$vbphrase[go_back]" border="0" /></a></td>
<td>&nbsp;</td>
<td width="100%"><span class="navbar"><a href="$vboptions[forumhome].php$session[sessionurl_q]" accesskey="1">$vboptions[bbtitle]</a></span> $navbits[breadcrumb]</td>

</tr>
<tr>
<td class="navbar" style="font-size:10pt; padding-top:1px" colspan="3">
<if condition="$_SERVER['REQUEST_METHOD'] == 'POST'">
<img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_finallink_$stylevar[textdirection].gif" alt="" border="0" />
<else />
<a href="$navbar_reloadurl">
<img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_finallink_$stylevar[textdirection].gif" alt="$vbphrase[reload_this_page]" border="0" /></a></if>
<h1 class="h1"><strong>$navbits[lastelement]</strong></h1>
</tr></table>
<else />
<div class="navbar" style="font-size:10pt"><a href="$vboptions[forumhome].php$session[sessionurl_q]" accesskey="1">
<img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_start.gif" alt="" border="0" /></a> <strong>$vboptions[bbtitle]</strong></div>

Page showing the last 10:-<div id="drop_box_nav">
<form action="#" onsubmit="return go_nav();">
'Some stuff
</form>
</div>
<script type="text/javascript" src="subnav.js"></script>
<td class="alt1" id="vbnav1r">
<img src="http://www.thecodecage.com/forumz/images/ccblue.png" style="width: 100;repeat: no-repeat;border: 0;" />
</td>
.............rest of navbar code!
But the image wont scale, just pushes everything out!, the id=vbnav1r is set in additional css and just has "Width: 30%;"
#vbnav1r{
width: 30%;
}

[Lynne]

Get rid of the css. Then try what I am showing in this firebug screenshot (I set the widths in the other three tabs and then set the image width to 100%):
https://vborg.vbsupport.ru/attachment.php?attachmentid=140635&stc=1&d=1345565970

and then it expands/contracts as you change the browser width (see other screenshots).

[Simon Lloyd]

Lynne, thanks very much for that, however could you give me a screenshot of the firebug settings expanded? what i mean is open the > arrows so i can see exactly which elements those sizes belong to :)

--------------- Added 1345665070 at 1345665070 ---------------

Also Lynne, with some of the changes i made (get rid of css, change width to 25% of previous <td>) in a different resolution 1024X768 (quite a lot of my visitors are corporate and have this setting) in showthread the navbar is pushed out to the right, however forumdisplay is fine?.

[Lynne]

It looks like you added the code to the correct place.

I believe it is getting messed up on the showthread pages because of the long breadcrumbs. I think if I were to do this, I would go back to the original navbar (3 columns) and then under the breadcrumbs in the first column, add a table with two columns. In the left column put all the original stuff (recommend this..., page showing the last 10...) and in the right I would put the image code. That will allow the breadcrumbs to expand however long they want and then give your logo room also. (You could also do it with colspan and rowspan but it's probably easier with a table.)

[Simon Lloyd]

Thanks Lynne, i'm working nights for the next 3 nights so i'll take a look then, one question though, wouldn't adding a table increase the size of the navbar height?, the whole reason for putting the logo where it is was to gain some screen real estate, having it in the standard place top left meant a scroll before seeing anything on the site, so i decided to freshen the look up and move the logo to the dead space there.

--------------- Added 1345681978 at 1345681978 ---------------

I've added the table showing secion1 section 2 and it would increase the height by logo height, or do i have it wrong?

[Lynne]

But you are setting up the logo to expand based on the browser width, so I don't know that it should make a huge difference.

And, you added a whole new row. I said to put it after the breadcrumbs area - in the same <td> tag.

[Simon Lloyd]

I've attempted what you've instructed but it looks really odd plus the navbar height is increased, i think i need to go back to your previous way and find a further solution for lower resolutions like maybe swap the logo out for a smaller one?

[Lynne]

Perhaps. But something I have noticed is you have huge spacing/padding in your table for that logo. So perhaps if you fix that then it will look how you want it. (Was it in the logo or was it added to the table or image tags?)

[Simon Lloyd]

There was table padding (cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" ) which i removed but it still has huge gaps around it?

[Lynne]

It looks fine right now. I really don't know how else you can get what you want and have it look good on all the pages.

[Simon Lloyd]

Lynne, thanks for your help :)