Adding Rollover Images underneath Titleimage

[gregmlb]

Could one of the vB4 wizards here please coach me? I am converting a vb3.8.6 forum over to vB4.1.0PL2, and am attempting to work my way through the various cosmetic issues. TheLastSuperMan was extremely helpful with columnizing my forum ? so that part is done. What I need to do next is add a number of rollover images (each being a link), along with some javascript (google ad) underneath the titleimage, and above the navbar.

Here is a screenshot that shows what my next goal is ? the top image is from my working 3.8.6 forum, and the bottom image is a current snapshot of the 4.1.0PL2 version (which is running as a test forum in a password-protected directory on a different domain of mine):



You can see the working 3.8.6 version of the forum here, if you wish:
http://www.midlifebachelor.com/forum...isplay.php?f=2

FIRST ? THE ROW OF ROLLOVER IMAGES (AT TOP)
I?m not working on the "woman of the month" rollover nor the google ad just yet ? first I'm focusing just on the row of rollover images (each a link) at the top (underneath the titleimage) ... which look like "buttons" for home, news, etc. I've tried to get this working two different ways ? and I'm not quite there yet. Being new to CSS, I'm positive this is where my issue is. Here are the two ways I've tried thus far:

1) Tried creating a float left "row" where the images appear next to each other. Problem with this approach is that if the user narrows the window, the link images wraparound underneath (and I don't want them to ? I need them to stay fixed). Have tried using clear right, clear left, clear both ? and it doesn't seem to work, so maybe I'm doing something wrong.

2) Tried using absolute positioning ? and I would think that would work, but it seems to want to place the link images on top of one other (when they should be next to one another).

In all cases, javascript controls the animation of these link images ? which pre-loads two different images for each link when the page loads, and also flashes a second image when a mouseover event occurs (plus some other stuff).

Here are descriptions with screenshots and code of what I see, and where I need the coaching:

FLOAT LEFT ROW APPROACH
Here is what it looks like using the "float left row approach":

Perfect when the browser window is wider than the titleimage and all of the rollover links:



but when the browser is narrowed, then the rollover link images wraparound underneath (which I do not want), plus it moves the "Forum" and "What?s New?" navbar links to the right (also not wanted), as shown here:



Here is the code associated with the above "float left row approach" as I?m calling it:

Added to additional.css

div.linkrow {
height:auto;
width:1019;
float:left;
}

div.linkrow linkrow {
display:inline;
overflow:hidden;
clear:right;
}

Note that changing clear:right to clear:left or clear:both does not fix this. Also note that I did not include the javascript function source in the above ? just to keep things simple here, but it appears in the header template, just above the linkrow divs.

Bottom of header template:

<div class="linkrow">
<a href="../index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','../images/buttons/mlb_home_on.png',1)"><img src="../images/buttons/mlb_home.png" alt="Home" name="Home" width="54" height="35" border="0" id="Home" /></a>
</div>

<div class="linkrow">
<a href="../news.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('News','','../images/buttons/mlb_news_on.png',1)"><img src="../images/buttons/mlb_news.png" alt="News" name="News" width="54" height="35" border="0" id="News" /></a>
</div>

<div class="linkrow">
<a href="../datingadvice.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Midlife Dating Advice','','../images/buttons/mlb_mldatingadvice_on.png',1)"><img src="../images/buttons/mlb_mldatingadvice.png" alt="Midlife Dating Advice" name="Midlife Dating Advice" width="108" height="35" border="0" id="Midlife Dating Advice" /></a>
</div>

<div class="linkrow">
<a href="../article.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Short Midlife Articles','','../images/buttons/mlb_articles_on.png',1)"><img src="../images/buttons/mlb_articles.png" alt="Short Midlife Articles" name="Short Midlife Articles" width="108" height="35" border="0" id="Short Midlife Articles" /></a>
</div>

<div class="linkrow">
<a href="../askmlb/askmlb.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Ask Midlife Bachelor','','../images/buttons/mlb_ask_mlb_on.png',1)"><img src="../images/buttons/mlb_ask_mlb.png" alt="Ask Midlife Bachelor" name="Ask Midlife Bachelor" width="114" height="35" border="0" id="Ask Midlife Bachelor" /></a>
</div>

<div class="linkrow">
<a href="../crisis/crisis-intro.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Your Midlife Crisis','','../images/buttons/mlb_mlcrisis_on.png',1)"><img src="../images/buttons/mlb_mlcrisis.png" alt="Your Midlife Crisis" name="Your Midlife Crisis" width="102" height="35" border="0" id="Your Midlife Crisis" /></a>
</div>

<div class="linkrow">
<a href="../health.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Midlife Health Challenges','','../images/buttons/mlb_health_on.png',1)"><img src="../images/buttons/mlb_health.png" alt="Midlife Health Challenges" name="Midlife Health Challenges" width="108" height="35" border="0" id="Midlife Health Challenges" /></a>
</div>

<div class="linkrow">
<a href="../polls.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Midlife Bachelor Polls','','../images/buttons/mlb_polls_on.png',1)"><img src="../images/buttons/mlb_polls.png" alt="Midlife Bachelor Polls" name="Midlife Bachelor Polls" width="59" height="35" border="0" id="Midlife Bachelor Polls" /></a>
</div>

<div class="linkrow">
<a href="../forums" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Midlife Bachelor Discussion Forums','','../images/buttons/mlb_forums_on.png',1)"><img src="../images/buttons/mlb_forums.png" alt="Midlife Bachelor Discussion Forums" name="Midlife Bachelor Discussion Forums" width="103" height="35" border="0" id="Midlife Bachelor Discussion Forums" /></a>
</div>

<div class="linkrow">
<a href="../feedback.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Reader Feedback','','../images/buttons/mlb_feedback_on.png',1)"><img src="../images/buttons/mlb_feedback.png" alt="Reader Feedback" name="Reader Feedback" width="108" height="35" border="0" id="Reader Feedback" /></a>
</div>

<div class="linkrow">
<a href="../contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact Midlife Bachelor','','../images/buttons/mlb_contactmlb_on.png',1)"><img src="../images/buttons/mlb_contactmlb.png" alt="Contact Midlife Bachelor" name="Contact Midlife Bachelor" width="99" height="35" border="0" id="Contact Midlife Bachelor" /></a>
</div>

<br /><br />

ABSOLUTE POSITIONING APPROACH
And here is what happens when I try absolute positioning:



Here is the code from my stab at absolute positioning ?

additional.css

homelink {
postion:absolute;
width:54; 
height:35;
top: 70;
left:0;
}

newslink {
postion:absolute;
width:54; 
height:35;
top: 70;
left:55;
}

bottom of header template

<div class="homelink">
<a href="../index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','../images/buttons/mlb_home_on.png',1)"><img src="../images/buttons/mlb_home.png" alt="Home" name="Home" width="54" height="35" border="0" id="Home" /></a>
</div>

<div class="newslink">
<a href="../news.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('News','','../images/buttons/mlb_news_on.png',1)"><img src="../images/buttons/mlb_news.png" alt="News" name="News" width="54" height="35" border="0" id="News" /></a>
</div>

Note that I did not include the javascript function source in the above ? just to keep things simple here, but it appears in the header template, just above the homelink and newslink divs.

Which of the two above approaches should I use for the row of links/rollover images? Can you tell me if you see anything obvious that I'm missing that would make one of the above approaches work? Seems like the "float left row approach" would be the better one to pursue ? but I cannot seem to stop the wraparound. Any suggestions on how to fix this would be greatly appreciated ? thanks!

[TheLastSuperman]

Question?

Why not recolor your vBulletin navbar with silver and silver background images this way you can use these helpful articles:

https://vborg.vbsupport.ru/showthread.php?t=226914
^ Add in your own tab with sub-links.

https://vborg.vbsupport.ru/showthread.php?t=233120
^ Makes the navbar tab an actual drop-down.

https://vborg.vbsupport.ru/showthread.php?t=234220
^ Remove default tabs i.e. if you simply don't need or want one up that is there by default.

Now Greg, this would be so you don't have two rows of different navbar buttons per say otherwise if you want to continue on with the menu I'll help and will supply a link or two to some great sites with examples you can learn from however I was unsure if you knew about the methods I linked to above .

[gregmlb]

Originally Posted by TheLastSuperman

Question?

Why not recolor your vBulletin navbar with silver and silver background images this way you can use these helpful articles:

https://vborg.vbsupport.ru/showthread.php?t=226914
^ Add in your own tab with sub-links.

https://vborg.vbsupport.ru/showthread.php?t=233120
^ Makes the navbar tab an actual drop-down.

https://vborg.vbsupport.ru/showthread.php?t=234220
^ Remove default tabs i.e. if you simply don't need or want one up that is there by default.

Now Greg, this would be so you don't have two rows of different navbar buttons per say otherwise if you want to continue on with the menu I'll help and will supply a link or two to some great sites with examples you can learn from however I was unsure if you knew about the methods I linked to above .

Ahhh - those are great ideas and articles, but doing things that way would break the "look and feel" of my site. [Remember - the Midlife Forum is just one part of the overall website ... and the rest of the site has those rollovers underneath what we know as the titleimage ... so I really need to keep the rollovers.]

So yes - if you can instead refer me to some examples or make some suggestions about my implemention above, that would be great. Thanks!

Greg

[TheLastSuperman]

Originally Posted by gregmlb

Ahhh - those are great ideas and articles, but doing things that way would break the "look and feel" of my site. [Remember - the Midlife Forum is just one part of the overall website ... and the rest of the site has those rollovers underneath what we know as the titleimage ... so I really need to keep the rollovers.]

So yes - if you can instead refer me to some examples or make some suggestions about my implemention above, that would be great. Thanks!

Greg

Ahh ok so pretty much you can simply copy the code for the current rollowever images from let's say the current vB3 forum or another page on the site! You include the css either via calling the file or using text/css to define it then paste the code... I don't see why you should have to go through any sort of trouble with this at all .

Should be simple and straight forward w/o modification required well minus editing the templates to include the menu that is .

[gregmlb]

Originally Posted by TheLastSuperman

Ahh ok so pretty much you can simply copy the code for the current rollowever images from let's say the current vB3 forum or another page on the site! You include the css either via calling the file or using text/css to define it then paste the code... I don't see why you should have to go through any sort of trouble with this at all .

Should be simple and straight forward w/o modification required well minus editing the templates to include the menu that is .

Wow - you are correct (as always). I was way overcomplicating this. I took the code straight from the vB 3.8.6 header ... split the css off into additional.css, and copied the rest to the bottom of the vB 4.1.0 header template, and it works (after a little tweaking of pixel locations).

Well, I can say that I'm learning more than I ever expected ... and that is a good thing. This is my Christmas vacation, after all

All that is left is for me to decide if I want to go through the effort to move the user logon and related links from header to the side of the navbar ... which I got some initial advice on here: https://vborg.vbsupport.ru/showthread.php?t=254794 But I'm pretty burned out at the moment, so I might just give this a rest for today!

[TheLastSuperman]

Originally Posted by gregmlb

Wow - you are correct (as always). I was way overcomplicating this. I took the code straight from the vB 3.8.6 header ... split the css off into additional.css, and copied the rest to the bottom of the vB 4.1.0 header template, and it works (after a little tweaking of pixel locations).

Well, I can say that I'm learning more than I ever expected ... and that is a good thing. This is my Christmas vacation, after all

All that is left is for me to decide if I want to go through the effort to move the user logon and related links from header to the side of the navbar ... which I got some initial advice on here: https://vborg.vbsupport.ru/showthread.php?t=254794 But I'm pretty burned out at the moment, so I might just give this a rest for today!

Well enjoy your night off! Off to check your other thread now .