GoneFishin

[ChipsXJ]

Ah. Good trick.

Thank you again Craw.

I really appreciate your assistance in fixing the background thing.

If I may be a pest?
The menu item I referred to was on my other site okbassncrappieclub.com [nofollow]

Would you mind taking a peek and see if you can tell me how to center the menu on that page?
If not.......no worries.
I do appreciate your help

[The Craw]

Sure. It should be the exact same solution on both sites, since you're using the same theme.

[ChipsXJ]

not the same theme.......just used the same image for the background.

[The Craw]

You mean that big blue one at the top there?

[ChipsXJ]

yes this one:

[The Craw]

Okay, this is about the best I can do with it. Just replace the entire contents of ~/css/menu-menu.css with this, after backing up the file of course.

Code Select Expand


/*** ESSENTIAL STYLES ***/
.menu-menu, .menu-menu * {
   margin:0;
   padding:0;
   list-style:none;

}
.menu-menu {
   margin:1px 0; /* top right bottom left */
   line-height:1.0;
   text-align: center;
}
.menu-menu ul {
   position:absolute;
   top:-999em;
   width:160px; /* submenu item width - offest below must match */
}
.menu-menu li {
    display: inline-block;
   width: auto; /* Default to 'auto'. If specified, the submenu item width and offset must match */
}
.menu-menu li a {
   text-align:center;
}
.menu-menu li li a {
   text-align:center;
}
.menu-menu ul li {
   width:100%;
}
.menu-menu li ul  {
   display:none;
}
.menu-menu li:hover ul  {
   display:block;
}
.menu-menu li li ul  {
   display:none;
}
.menu-menu li:hover li:hover ul  {
   display:block;
}
.menu-menu li:hover {
   visibility:inherit; /* fixes IE7 'sticky bug' */
}
.menu-menu li {
   position:relative;
}
.menu-menu a {
   display:block;
   position:relative;
}
.menu-menu li:hover ul,
.menu-menu li.sfHover ul {
   left:0;
   top:28px; /* match top ul list item height */
   z-index:2;
}
ul.menu-menu li:hover li ul,
ul.menu-menu li.sfHover li ul {
   top:-999em;
}
ul.menu-menu li li:hover ul,
ul.menu-menu li li.sfHover ul {
   left:160px; /* submenu offest - must match ul width above */
   top:0;
}
ul.menu-menu li li:hover li ul,
ul.menu-menu li li.sfHover li ul {
   top:-999em;
}
ul.menu-menu li li li:hover ul,
ul.menu-menu li li li.sfHover ul {
   left:160px; /* submenu offest - must match ul width above */
   top:0;
}

/*** DEMO SKIN ***/
.menu-menu {
   margin-bottom:1em;
font-family:Arial Rounded MT Bold;
font-size:12px;
font-weight:normal;   /* bold or normal */
font-style:normal; /* italic or normal */
}
.menu-menu a {
   border-right:0px solid #000000;
   border-top:0px solid #000000;
   border-bottom:0px solid #000000;
   padding:8px 15px;
   text-decoration:none;
}
.menu-menu li.first a {
    border-left:0px solid #000000;
    }
.menu-menu a, .menu-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
   color:#FFFFFF;
}
.menu-menu a:hover, .menu-menu a:active  { /* visited pseudo selector so IE6 applies text colour*/
   color:#000000;
}

.menu-menu li li a {
    border:0px solid #000000; border-top-width:0;
    }
.menu-menu li li li.first a {
    border:0px solid #000000;
    }
.menu-menu li {
   background:#003366;
}
.menu-menu li li {
   background:#003366;
}
.menu-menu li li li {
   background:#003366;
}
.menu-menu li:hover, .menu-menu li.sfHover,
.menu-menu a:focus, .menu-menu a:hover, .menu-menu a:active {
   background:#99CCFF;
   outline:0;
}

.menu-menu li li a, .menu-menu li li a:visited {
    color:#FFFFFF;
}

.menu-menu li li a:hover, .menu-menu li li a:active, .menu-menu li li a:focus {
  color: #000000;
}

/*** arrows **/
.menu-menu a.sf-with-ul {
   padding-right:2.25em;
   min-width:1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
   position:absolute;
   display:block;
   right:.75em;
   top:1.05em; /* IE6 only */
   width:10px;
   height:10px;
   text-indent:-999em;
   overflow:hidden;
   background:url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
   top:.8em;
   background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
   background-position:-10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.menu-menu ul .sf-sub-indicator { background-position:-10px 0; }
.menu-menu ul a > .sf-sub-indicator { background-position:0 0; }
/* apply hovers to modern browsers */
.menu-menu ul a:focus > .sf-sub-indicator,
.menu-menu ul a:hover > .sf-sub-indicator,
.menu-menu ul a:active > .sf-sub-indicator,
.menu-menu ul li:hover > a > .sf-sub-indicator,
.menu-menu ul li.sfHover > a > .sf-sub-indicator {
   background-position:-10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
   background:url('../images/shadow.png') no-repeat bottom right;
   padding:0 8px 9px 0;
   -moz-border-radius-bottomleft:17px;
   -moz-border-radius-topright:17px;
   -webkit-border-top-right-radius:17px;
   -webkit-border-bottom-left-radius:17px;
}
.sf-shadow ul.sf-shadow-off {
   background:transparent;
}


[ChipsXJ]

I do not care what anyone says.................


You are 'DA CRAW !!!!!!!!

Thank you very much............I have been banging my head for 4 days trying to get that to work like that.

In case you could not tell......I am not a programmer. 

Thanks again.
Chip

[The Craw]

LOL! You're welcome; I'm glad that's what you were looking for.

[Matthew K.]

Beastt.

[ChipsXJ]

May I ask how to get the first embedded page to stay at the top of the column when the height is less than the height of the 2nd embedded page?

I have tried many things but it does not seem to respond.
If I set the code as follows:
<div align="center"><embed src=http://www.okfishtales.com [nofollow] width="725" height="2000"></embed>
<embed src=http://www.bassresource.com [nofollow] width="525" height="5000"> </embed></div>
Then the first embedded page is well below the half way mark on the page while the 2nd embedded page it at the top where it should be.

Thanks
Chips

[The Craw]

It seems to work correctly for me. I suppose you could put a line break between them for clarity.

Code Select Expand


<div align="center">
<embed src=http://www.okfishtales.com width="725" height="2000"></embed>
<br />
<embed src=http://www.bassresource.com width="525" height="5000"></embed>
</div>


[ChipsXJ]

Hey Craw.

The page does not have the code I want to work in place......I have the height set to the same in both.  I want them to display side by side and they do with the current code.

Where the problem arises is when you view it from an ipad it displays the first page on the top and then a long ways down you see the 2nd page displayed. I was shortening the first page height so you would not have to scroll so far down....just to the bottom of the 1st page. But when I shorten the height on the first page....the top of the first page is way down in the display (over half way down the 2nd page).

initially I used iframes to display the embedded pages but the ipad was choking and would never load the site.

I was looking for the code that would force the top of the first page to be even with the top of the second page even when I had the first page height set to the shorter height of 2000.

I uploaded the code to the server now so you can see what it is doing.

Thanks

[The Craw]

The problem is most likely that the pages are too wide to fit on a small screen side by side. You can of course set the width of each to a percentage and float one to the side, which makes them parallel. However, in doing this, anyone with a smallish screen is going to have to scroll on each embedded page to see the full width of it. I'm going to post a screenshot of what I'm talking about, as it's rather difficult to explain in text.

Code Select Expand


<div>
<embed src="http://www.okfishtales.com" style="width:48%; height:2000px; margin:1%; float:left;"></embed>
<embed src="http://www.bassresource.com" style="width:48%; height:2000px; margin:1%;"></embed>
</div>


[ChipsXJ]

That will work....Craw!
Can you tell me where I can move the frame/table (not sure what it is) of the forum to the left of the main page on okfishtales.com [nofollow]?

thanks
Chris

[The Craw]

You can change the float from left to right.

Code Select Expand


<div>
<embed src="http://www.okfishtales.com" style="width:48%; height:2000px; margin:1%; float:right;"></embed>
<embed src="http://www.bassresource.com" style="width:48%; height:2000px; margin:1%;"></embed>
</div>


I think we're straying a little too far from the topic here. For future questions of this type (unrelated to the fishing theme) it may be better to start a topic in this board.

[ChipsXJ]

I was talking about the theme......I probably did not describe it correctly.....sorry. I was referring to changing the 'margin' I think....trying to shift the forum part closer to the left side of the page (where the red arrows are in the image)

I really appreciate the help yu have given me and I'm sorry if I abused that in any way,
I will post this question in that forum.........thank you for your help.

I really appreciate it, Craw....thanks
Chip

[The Craw]

This last question is actually pertinent to the theme, so this is a good place to ask. You can change the wrapper margin to align the forum to the left side.

Find this in index.css around line 65:

Code Select Expand


/* This division wraps the entire forum when a forum width is set. */
div#wrapper
{
width: 960px;
margin: 0 auto;
padding: 0;
}


And replace it with this:

Code Select Expand


/* This division wraps the entire forum when a forum width is set. */
div#wrapper
{
width: 960px;
margin: 0 0 0 1%;
padding: 0;
}


And that should do it. 

[The Craw]

Also, sorry about the topic mixup. Just trying to keep things orderly. xD

[ChipsXJ]

Thank you for all of your help..................without you I would have never figured that stuff out.

Craw, you are the GREATEST!

I really apprecitate your help.
Chip

[ChipsXJ]

I have been looking for the location to close this headspace between the red arrows.
I have not been able to figure out where it is, I guess because I do not know what it is called......#Header, maybe?
I attempted to make changes to the properties one at a time but did not see any changes to the page. tried several other places too but
it made no difference.


Thanks
Chip