How To? Navigation | Change Height Cap of Bar | Look here for help |

[Vyache]

Hello,

Thank You, Topic is solved. Reverse Engineer this thing.... ftw,

Answer: "

Okay, I figured it out.

Since the damn thing is spanned, PADDING increases my image out! So, the more padding I add, has a reverse effect!

Why no one could have just told me that... Could of saved me a couple of days of sleep...

"Sleep is cheep"!  "

I know how to change the Images and create rollovers of my new buttons I created.
I was able to do this in 1.1.10, but with out the rollovers.

How do I change the Height Cap of my Navigation bar, it seems to cut some of my image off. I don't know why this is happening or where to change it.


If possible is there a guide changing the Images. I looked here already:
http://simplemachines.org/community/index.php?topic=261880.0

Let me know what I can do.

Take Care.

[ɔɔɔɔɔɔuɥoɾ]

The image is displayed and controlled by CSS.

Its usually a tiny image repeated, if you right click on it and select view background. then grab the image location, replace the file with your "tiny" image to be repeated.\

This method will vary on your theme though.

[Vyache]

Cool,

What is the name of the image? Which line in CSS (Which CSS? I'm using Default theme)?
How do I create the rollover effect?

Should I use ?

Code Select Expand

a.rollover {
display: block;
width: 150px;
height: 44px;
text-decoration: none;
background: url("webvamp.jpg");
}

a.rollover:hover {
background-position: -150px 0;
}

.displace {
position: absolute;
left: -5000px;
}


Or

use ID="Home"

Code Select Expand

<a id="home" href="home.html"><img src="blank.gif" alt="Home"></a>
<a id="links" href="links.html"><img src="blank.gif" alt="Links"></a>
<a id="about" href="about.html"><img src="blank.gif" alt="About"></a>

a img {height: 35px; width: 70px; border-width: 0;}
a#home img {background: url(home.gif) top left no-repeat;}
a#links img {background: url(links.gif) top left no-repeat;}
a#about img {background: url(about.gif) top left no-repeat;}

a#home:hover img {background: url(home-hover.gif) top left no-repeat;}
a#links:hover img {background: url(links-hover.gif) top left no-repeat;}
a#about:hover img {background: url(about-hover.gif) top left no-repeat;}


Can all this be done?

[Vyache]

I found the image: Its called maintab_active for example.

I found mirrortab_active and so on, what are these for?

Okay, next problem is how to create Rollover effect in CSS.

Does anybody know of an easy way to create a Rollover in the subs.php ?

[Vyache]

In the CSS under default, what limits the size of an image on the navigation bar, my images are a bit bigger then the default size and I can't seem to locate where the actual code is limiting the height.

[ɔɔɔɔɔɔuɥoɾ]

In my theme (based on core) its .tabs class, but each theme varies,

but its not mirrortab, thats something else.

[Vyache]

In my theme (based on core) its .tabs class, but each theme varies,

but its not mirrortab, thats something else.

Hey mirror tabs is the navigation below, it is either the buttons that you use for your post or the buttons used in navigation in the admin panel.

[ɔɔɔɔɔɔuɥoɾ]

In my theme (based on core) its .tabs class, but each theme varies,

but its not mirrortab, thats something else.

Hey mirror tabs is the navigation below, it is either the buttons that you use for your post or the buttons used in navigation in the admin panel.

Yes mirror tabs controls the reply, move topic lock topic and such, also is for the "search members" area.

[Vyache]

Anybody know where I can find the height cap for the navigation bar? My images for each block get capped for some reason and I can't find where this is happening.

[Antechinus]

It's in css/index.css.

[Vyache]

It's in css/index.css.

Yes, I found it there. How do I change the height of the whole line up. It seems that either the padding is limiting my total size.

Otherwise there is a field that sets the height of the whole lineup to half size or something. I also noticed this indirect thing, as I increase size of font obviously the image increases in size. However, I don't want to change the image based on size of font if that is what is happening. This is relavent to main_manu.

Let me know what exactly I need to change to get what I want. Which is changing the overall height of my image size of my navigation bar. For example I need to see 100% of my image. I tried using height: 100%; That had little affect or none at all.

Thank You.
Take Care.

[Vyache]

It's in css/index.css.

Yes, I found it there. How do I change the height of the whole line up. It seems that either the padding is limiting my total size.

Otherwise there is a field that sets the height of the whole lineup to half size or something. I also noticed this indirect thing, as I increase size of font obviously the image increases in size. However, I don't want to change the image based on size of font if that is what is happening. This is relavent to main_manu.

Let me know what exactly I need to change to get what I want. Which is changing the overall height of my image size of my navigation bar. For example I need to see 100% of my image. I tried using height: 100%; That had little affect or none at all.

Thank You.
Take Care.

Is there anyone that could help me with my issue?

[ɔɔɔɔɔɔuɥoɾ]

Can you send a link to your site please
I will take a look at your CSS

[Vyache]

Can you send a link to your site please
I will take a look at your CSS

Here is the link to my site.
http://theswimstrongfoundation.org/network/index.php

Thank You.

[ɔɔɔɔɔɔuɥoɾ]

Can you please make a screen shot of what it is you want to change, make it detailed

[Vyache]

Can you please make a screen shot of what it is you want to change, make it detailed

Below is what I want. I'm going to use CSS to break up the span images, but if this isn't possible, I have to do it my origional way, http://theswimstrongfoundation.org/communityTSSF/index.php ... Older version of my site using SMF 1.1.10 ...

[ɔɔɔɔɔɔuɥoɾ]

hmm so u want a "light on" effect on the active tab, while others have a "light off" effect?

[Vyache]

hmm so u want a "light on" effect on the active tab, while others have a "light off" effect?

Yes, I want a rollover. I created some code above as an example. When the user mouse-over (hover) the image changes.

I want  the image to stop capping as well. It gets smaller for some reason. I can't locate what is changing the size.

[ɔɔɔɔɔɔuɥoɾ]

#main_menu li a:hover
{
     -moz-background-clip:border;
     -moz-background-inline-policy:continuous;
     -moz-background-origin:padding;
     background:transparent url(../images/maintab_active_last.gif) no-repeat scroll right bottom;
     color:#E0E0FF;
     padding-right:8px;
     text-decoration:none;
}

Try that
index.css

[Vyache]

#main_menu li a:hover
{
     -moz-background-clip:border;
     -moz-background-inline-policy:continuous;
     -moz-background-origin:padding;
     background:transparent url(../images/maintab_active_last.gif) no-repeat scroll right bottom;
     color:#E0E0FF;
     padding-right:8px;
     text-decoration:none;
}

Try that
index.css

Thank You.

What about the height cap?

[ɔɔɔɔɔɔuɥoɾ]

well the only problem is, is that the image is slightly too long, it will be aligned at the top, but the bottom may be slightly over.

you can use a decent image editor and cut off the bottom, little by little until it fits.

You may want to consider making the image a little lighter too as to match the rest of the menu images.

[Vyache]

well the only problem is, is that the image is slightly too long, it will be aligned at the top, but the bottom may be slightly over.

you can use a decent image editor and cut off the bottom, little by little until it fits.

You may want to consider making the image a little lighter too as to match the rest of the menu images.

What decides the image height?

I don't want this going on, I want the image to display as a whole, the size I measured.  Which is like 60 px or so.

[ɔɔɔɔɔɔuɥoɾ]

Well I have refreshed your page and the only problem is with the image itself

add
margin-bottom : -2px;

to the class, that will fix the bottom, as for the top, I don't see any problem there, except the image looks out of place, it needs to be lightened and have a curve added at the bottom

[Vyache]

Well I have refreshed your page and the only problem is with the image itself

add
margin-bottom : -2px;

to the class, that will fix the bottom, as for the top, I don't see any problem there, except the image looks out of place, it needs to be lightened and have a curve added at the bottom

margin-bottom : -2px; Does not fix the problem. It looks like it pushes it further down a bit but does not show my entire image.

The Height of my image is 60 px and width is 34...

[ɔɔɔɔɔɔuɥoɾ]

You will get it better looking at this

http://www.w3schools.com/css/

see the margin and padding options that are available to use.

[Vyache]

You will get it better looking at this

http://www.w3schools.com/css/

see the margin and padding options that are available to use.

Its not a margin or padding issue. I played around with it and it doesn't see to have any affect of increasing my image.

[Vyache]

Okay, I figured it out.

Since the damn thing is spanned, PADDING increases my image out! So, the more padding I add, has a reverse effect!

Why no one could have just told me that... Could of saved me a couple of days of sleep...

"Sleep is cheep"!