Welcome Guest [Log In] [Register]
We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Multiquote (on) Multiquote (off)
Add Reply
fixed top, top_info?; and other shiz..
Topic Started: Aug 16 2011, 02:54 AM (1,801 Views)
Kotton
Member Avatar
★ Career Criminal ★
[ *  * ]
is it possible to fix the position of the #top and it's associated menu/info text? - I'd like to scroll and have it stay exactly where it is (top of page)

also, I'm going to be adding border images and I'd like to have the wrap transparent (or semi), but not the content itself
so what would be the best way to achieve that? ..would I use small transparent repeated images in the #wrap field? or ?

Posted Image
Offline Profile Quote Post Goto Top
 
Tony
Member Avatar
If found, please report missing.

To have the bar be good, use position: fixed;

The screenshot already appears to have the #wrap area opaque. The top part looks dark due to the background image being black in that area. You could try removing the background-color property from #wrap, as it would default to transparent.
Online Profile Quote Post Goto Top
 
Kotton
Member Avatar
★ Career Criminal ★
[ *  * ]
hey, what's up Tony, long time no see xD

I put the header, topmenu and submenu outside of the wrap in the layout (why it's black)

but removing the bg color param from the wrap section worked perfectly :D thank you
(now what if I wanted to get a semi transparent thing going on there in that section?)

on the other, unfortunately, using the fixed position messes up the menu's original positioning and layout :/

Posted Image Posted Image

edit- also, I'm using an 85% transparent image to fill the #top background, but when I scroll, you can't see anything under it..
does using png/gif transparency images as bg's not work on Zb? ..as I had planned on using this technique on several other sections
Edited by Kotton, Aug 16 2011, 04:41 AM.
Offline Profile Quote Post Goto Top
 
Tony
Member Avatar
If found, please report missing.

Quote:
 
hey, what's up Tony, long time no see xD
I know! You sooo need to be around more! :glare:
Quote:
 
(now what if I wanted to get a semi transparent thing going on there in that section?)
That would require opacity:
Code:
 
-moz-opacity: 1; /* Mozilla (0.0 - 1.0) */
filter:alpha(opacity=10); /* IE (0 - 100) */
opacity: 1; /* Other (0.0 - 1.0) */
Edit the value (1) to suit your needs. The lower the number, the more opaque.
Quote:
 
on the other, unfortunately, using the fixed position messes up the menu's original positioning and layout :/
This is likely due to the width being auto, which basically only sets itself as wide as it needs to be. Try adding this:
Code:
 
#top {
position: fixed;
top: 0; /* Distance from the top of the viewport. */
left: 0; /* Distance from the left of the viewport. */
width: 96%; /* Make it wide. Edit to suit. May have issues on smaller resolutions. Percentage widths are icky. :x */
z-index: 1; /* Places it on top of everything. Required for desired effect, and to prevent category collapse / expand icons mystically floating over the top. */
}
Quote:
 
also, I'm using an 85% transparent image to fill the #top background, but when I scroll, you can't see anything under it..
Try removing the #202020 value from the background property. :)
Online Profile Quote Post Goto Top
 
Kotton
Member Avatar
★ Career Criminal ★
[ *  * ]
and you just taught me that one to (remove color params) :facepalm:

added everything suggested for the top, works beautifully! ..thanks man, you're a lifesaver Posted Image

about the opacity - I'm aware of that one, I've implemented it in both the body and the wrap (not at the same time lol)
however, when used on either one, as seen in the images, all of the content is set with the transparency.. not just the wrap
or was I doing something wrong there to.. *ugh*

about my visits, might as well get used to it, cuz I ain't goin nowhere till it's done.. and there's a LONG way to go bro Posted Image lol

related, is it ok for me to set up camp in this thread? ..cuz I really don't want to flood the theme help forum with topic after topic
Offline Profile Quote Post Goto Top
 
Tony
Member Avatar
If found, please report missing.

Quote:
 
..about the opacity - I'm aware of that one, I've implemented it in both the body and the wrap (not at the same time lol)
however, when used on either one, as seen in the images, all of the content is set with the transparency.. not just the wrap
or was I doing something wrong there to.. *ugh*
Child elements inherit from their parent elements, so you will need to add the opacity to the specific area you need. Do note though, if you add opacity to body or #wrap, you cannot modify any child elements to counter the opacity. Personally, I feel it is a waste of time on main content, such as fora and posts, for usability reasons.
Quote:
 
..is it ok for me to set up camp in this thread? ..cuz I really don't want to flood the theme help forum with topic after topic..
Certainly. If anyone hijacks, I'll set the dogs on them. :r
Online Profile Quote Post Goto Top
 
Kotton
Member Avatar
★ Career Criminal ★
[ *  * ]
ok cool.. thanks x2 - and I agree, when it's finished, the board will have varying degrees of opacity ;)

another issue tho.. mah boi's on 1600x900 res, I'm on 1920x1080 - his logo and submenu links are out of place, whereas mines are money

mine - Posted Image

his - Posted Image (ignore the red markd shiz)

since it's outside of the wrap, I'm using margins and padding (px) to position the logo and submenu..
so what would be the best way to keep their existing position (my shot) for all resolutions? - no pixel, just percentage or ?

edit- also, Nicola's image guides has the forum_new, forum no_new areas marked as 'td.c_mark'
is this correct? because I can't find that specific field in my css - there's 'td.c_cat-mark' in a few lines, but no specific #td.c_mark
Edited by Kotton, Aug 16 2011, 03:22 PM.
Offline Profile Quote Post Goto Top
 
Tony
Member Avatar
If found, please report missing.

Quote:
 
another issue tho.. mah boi's on 1600x900 res, I'm on 1920x1080 - his logo and submenu links are out of place, whereas mines are money

since it's outside of the wrap, I'm using margins and padding (px) to position the logo and submenu..
so what would be the best way to keep their existing position (my shot) for all resolutions? - no pixel, just percentage or ?
It's best not to use padding for positioning. You may need to set the logo to use the same positioning as #wrap.
Quote:
 
edit- also, Nicola's image guides has the forum_new, forum no_new areas marked as 'td.c_mark'
is this correct? because I can't find that specific field in my css - there's 'td.c_cat-mark' in a few lines, but no specific #td.c_mark
Yes, that is correct. You may need to search for .c_mark instead. Using the td (or any selector) causes the style to be more specific, and therefore more important. :)
Online Profile Quote Post Goto Top
 
Kotton
Member Avatar
★ Career Criminal ★
[ *  * ]
thanks much x2 Tony, worked flawlessly :)

seems I'm at another impasse.. on the index, immediately above each h2 (or below each foot depending on your perspective)
is this large space I need to close.. but there's no padding being used in the h2 or foot - can you point me in the right direction?

Posted Image
Offline Profile Quote Post Goto Top
 
Tony
Member Avatar
If found, please report missing.

Kotton
Aug 18 2011, 09:08 AM
..on the index, immediately above each h2 (or below each foot depending on your perspective)
is this large space I need to close.. but there's no padding being used in the h2 or foot - can you point me in the right direction?
You need to locate something similar to:
Code:
 
.category {
margin:10px 0 0;
border: 1px solid #376dbc;
padding: 1px;
}
.. and edit the margin. :)
Online Profile Quote Post Goto Top
 
Kotton
Member Avatar
★ Career Criminal ★
[ *  * ]
effn sweeeet - thanks Tony, again, flawless Posted Image
Offline Profile Quote Post Goto Top
 
Tony
Member Avatar
If found, please report missing.

No problem. Anything else you need help with? :)
Online Profile Quote Post Goto Top
 
Kotton
Member Avatar
★ Career Criminal ★
[ *  * ]
sure bro (was just a matter of time, that's why I didn't post back lol)

the drop down mod menus, can you tell me what I should be lookn for?
I've modified several 'drop_menu' sections, but none seem to effect those specifically

Posted Image
Offline Profile Quote Post Goto Top
 
Tony
Member Avatar
If found, please report missing.

Look for:
Code:
 
option {
margin:2px 0;
}
:)
Online Profile Quote Post Goto Top
 
Kotton
Member Avatar
★ Career Criminal ★
[ *  * ]
thanks Tony

do you know if we can color or use a bg instead of the white? ..because I set up my bg but it overlays the white :/

Posted Image
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · ZetaBoards - Theme & Code Support · Next Topic »
Add Reply