Issue with custom sections

[wombat - i am]

So I'm back again PD, this time with an issue with custom sections. I've been using custom sections for comment buttons, and all of a sudden, I've got this issue where the custom section doesn't position properly, and I can't position the custom section below, above or to the left of the about me section. I know its probably something to do with my positioning, but positioning has always gone ;aolhisbdhj in my brain, so, y'know, work your magical help? I'll hand out mac and cheese and cookies <3

profile

code

/**PROFILE BY THEY GO OF WOMBAT DESIGNS @ GAIA ONLINE, FOR NEXTJUNE DO NOT REDISTRIBUTE, CLAIM AS YOUR OWN, OR RIP. KTHXBAI**/


BODY {
color: #333;
font-size: 11px;
line-height: 120%;
font-family: arial;
background: #141414;}

#site {
border: none;
overflow: hidden;
width: 1024px; height: 914px;
margin-left: auto; margin-right: auto;
}

#content {
width: 1024px; height: 914px;
background: url('http://i827.photobucket.com/albums/zz199/ssserpentine/WOMBAT DESIGNS/profiles/nextjune/content.png') no-repeat top center;
}
.section {
border: none;
background: none;
}

/*------------GAIA HEADER----------*/



#gaia_header #header_left { background-color:transparent !important; }
#gaia_header { background-color:transparent !important; margin-left: 200px; width: 70%; }
#gaia_header{}
#gaia_header *{background-color:transparent !important; }

#gaia_header * a{
color:#FFF !important;
text-decoration:none;
text-transform:uppercase;
font-family:Arial;
font-size:0.7em;
letter-spacing:1px;}
#gaia_header * a:hover{color:#694865 !important }

#header{
background-position:upper left;
width:0px;
height:0px;
border:0px;
padding-left:1200px;
padding-top:0px;}

#gaia_header{
position:fixed;
}

#header_left{
height:20px !important;
overflow:hidden;
margin-top:2px;}

#header_left img{
width:0px;
height:0px;
opacity: 0.8;
padding-left:47px;
padding-bottom:19px;
background-image:url('http://i827.photobucket.com/albums/zz199/ssserpentine/WOMBAT DESIGNS/profiles/vxnt6s_zps68eb1f6b.png')
}

#header_left a:hover img{
opacity:1;}

#header_left {
position:relative;
top:1px;}

#header_right {
position:relative;
top:-2px;}

/*----------LINKS-----------*/

a:link, a:active, a:visited {
font-size: 11px;
font-weight: bold;
font-family: georgia;
text-decoration: none;
color: #694865!important;
-o-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out;
}
a:hover {
text-decoration: none;
color: #f1f1f1!important;
}

/*----------PROFILE----------*/

#profile {
background: none;
width: 0px; height: 0px;
}
#avatar_dropbox { display: none !important;
}

/*----------PROFILE BAR----------*/

#profile .avatar {
left: 300px; top: 0px;
}
#profile h2 {display:none;}

#profile #bar {
background: none;
}
#profile #bar #addButton a {display:none;}

#profile #bar #msgButton a {
position: absolute;
left: 735px; top:665px;
width: 95px; height: 26px;
text-indent: -5000px;
background: url('http://i827.photobucket.com/albums/zz199/ssserpentine/WOMBAT DESIGNS/profiles/nextjune/msg.png') no-repeat;
}
#profile #bar #tradeButton a {
position: absolute;
left: 735px; top: 630px;
width: 95px; height: 28px;
text-indent: -5000px;
background: url('http://i827.photobucket.com/albums/zz199/ssserpentine/WOMBAT DESIGNS/profiles/nextjune/trade.png') no-repeat;
}

#profile #bar #ignoreButton a {display:none;}

#profile #bar #onlineButton {
background: url('http://i827.photobucket.com/albums/zz199/ssserpentine/WOMBAT DESIGNS/profiles/nextjune/online.png') no-repeat;
position: absolute;
width: 115px; height: 94px;
left: 710px; top: 325px;}

#profile #bar #offlineButton {
background: url('http://i827.photobucket.com/albums/zz199/ssserpentine/WOMBAT DESIGNS/profiles/nextjune/offline.png') no-repeat;
position: absolute;
width: 115px; height: 94px;
left: 710px; top: 325px;}
/*----------WISHLIST----------*/

#wishlist {margin-left: 50px; margin-top: 435px; position: absolute; width: 350px; height: 35px; overflow-y: auto; overflow-x: hidden;
}
#wishlist h2 {display:none;}

/*----------ABOUT ME----------*/

#about {
left: 300px; top: 485px; position: absolute; width: 420px; height: 200px;
overflow-y: auto; overflow-x: hidden; text-align: justify; padding-right: 3000px;
}

#about ol {
position: absolute;
width: 95px; height: 27px;
left: 445px; top: 150px;}
#about h2 {display: none;}



/*-----------MULTIMEDIA-----------*/

#multimedia h2 {display: none;}

#multimedia, #multimedia embed, #multimedia object {display:none; }

/*-------SIGNATURE-------*/

#signature {
margin-left: 60px; margin-top: 680px; height: 100px; width: 330px;
}

#signature h2 {display: none;}

/*----------COMMENTS----------*/

#comments {display: none;
}
/*------------UNWANTED CODES----------*/

#extendedProfileBody #header h1, #details, #friends, #journal, #profile .caption, #profile ul.items, #avatar_menu, #comments dl dt.avatar img, #comments dl dt.avatar2 img, .caption:before, .caption:after, .caption2:before, .caption2:after, #comments .links + p ,#alerts_banner, #about .links { display: none;
}#content #main {border:none;}#content, #header {border-right:none;}

[kittymmeow]

they go

So I'm back again PD, this time with an issue with custom sections. I've been using custom sections for comment buttons, and all of a sudden, I've got this issue where the custom section doesn't position properly, and I can't position the custom section below, above or to the left of the about me section. I know its probably something to do with my positioning, but positioning has always gone ;aolhisbdhj in my brain, so, y'know, work your magical help? I'll hand out mac and cheese and cookies <3

profile

code

/**PROFILE BY THEY GO OF WOMBAT DESIGNS @ GAIA ONLINE, FOR NEXTJUNE DO NOT REDISTRIBUTE, CLAIM AS YOUR OWN, OR RIP. KTHXBAI**/


BODY {
color: #333;
font-size: 11px;
line-height: 120%;
font-family: arial;
background: #141414;}

#site {
border: none;
overflow: hidden;
width: 1024px; height: 914px;
margin-left: auto; margin-right: auto;
}

#content {
width: 1024px; height: 914px;
background: url('http://i827.photobucket.com/albums/zz199/ssserpentine/WOMBAT DESIGNS/profiles/nextjune/content.png') no-repeat top center;
}
.section {
border: none;
background: none;
}

/*------------GAIA HEADER----------*/



#gaia_header #header_left { background-color:transparent !important; }
#gaia_header { background-color:transparent !important; margin-left: 200px; width: 70%; }
#gaia_header{}
#gaia_header *{background-color:transparent !important; }

#gaia_header * a{
color:#FFF !important;
text-decoration:none;
text-transform:uppercase;
font-family:Arial;
font-size:0.7em;
letter-spacing:1px;}
#gaia_header * a:hover{color:#694865 !important }

#header{
background-position:upper left;
width:0px;
height:0px;
border:0px;
padding-left:1200px;
padding-top:0px;}

#gaia_header{
position:fixed;
}

#header_left{
height:20px !important;
overflow:hidden;
margin-top:2px;}

#header_left img{
width:0px;
height:0px;
opacity: 0.8;
padding-left:47px;
padding-bottom:19px;
background-image:url('http://i827.photobucket.com/albums/zz199/ssserpentine/WOMBAT DESIGNS/profiles/vxnt6s_zps68eb1f6b.png')
}

#header_left a:hover img{
opacity:1;}

#header_left {
position:relative;
top:1px;}

#header_right {
position:relative;
top:-2px;}

/*----------LINKS-----------*/

a:link, a:active, a:visited {
font-size: 11px;
font-weight: bold;
font-family: georgia;
text-decoration: none;
color: #694865!important;
-o-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out;
}
a:hover {
text-decoration: none;
color: #f1f1f1!important;
}

/*----------PROFILE----------*/

#profile {
background: none;
width: 0px; height: 0px;
}
#avatar_dropbox { display: none !important;
}

/*----------PROFILE BAR----------*/

#profile .avatar {
left: 300px; top: 0px;
}
#profile h2 {display:none;}

#profile #bar {
background: none;
}
#profile #bar #addButton a {display:none;}

#profile #bar #msgButton a {
position: absolute;
left: 735px; top:665px;
width: 95px; height: 26px;
text-indent: -5000px;
background: url('http://i827.photobucket.com/albums/zz199/ssserpentine/WOMBAT DESIGNS/profiles/nextjune/msg.png') no-repeat;
}
#profile #bar #tradeButton a {
position: absolute;
left: 735px; top: 630px;
width: 95px; height: 28px;
text-indent: -5000px;
background: url('http://i827.photobucket.com/albums/zz199/ssserpentine/WOMBAT DESIGNS/profiles/nextjune/trade.png') no-repeat;
}

#profile #bar #ignoreButton a {display:none;}

#profile #bar #onlineButton {
background: url('http://i827.photobucket.com/albums/zz199/ssserpentine/WOMBAT DESIGNS/profiles/nextjune/online.png') no-repeat;
position: absolute;
width: 115px; height: 94px;
left: 710px; top: 325px;}

#profile #bar #offlineButton {
background: url('http://i827.photobucket.com/albums/zz199/ssserpentine/WOMBAT DESIGNS/profiles/nextjune/offline.png') no-repeat;
position: absolute;
width: 115px; height: 94px;
left: 710px; top: 325px;}
/*----------WISHLIST----------*/

#wishlist {margin-left: 50px; margin-top: 435px; position: absolute; width: 350px; height: 35px; overflow-y: auto; overflow-x: hidden;
}
#wishlist h2 {display:none;}

/*----------ABOUT ME----------*/

#about {
left: 300px; top: 485px; position: absolute; width: 420px; height: 200px;
overflow-y: auto; overflow-x: hidden; text-align: justify; padding-right: 3000px;
}

#about ol {
position: absolute;
width: 95px; height: 27px;
left: 445px; top: 150px;}
#about h2 {display: none;}



/*-----------MULTIMEDIA-----------*/

#multimedia h2 {display: none;}

#multimedia, #multimedia embed, #multimedia object {display:none; }

/*-------SIGNATURE-------*/

#signature {
margin-left: 60px; margin-top: 680px; height: 100px; width: 330px;
}

#signature h2 {display: none;}

/*----------COMMENTS----------*/

#comments {display: none;
}
/*------------UNWANTED CODES----------*/

#extendedProfileBody #header h1, #details, #friends, #journal, #profile .caption, #profile ul.items, #avatar_menu, #comments dl dt.avatar img, #comments dl dt.avatar2 img, .caption:before, .caption:after, .caption2:before, .caption2:after, #comments .links + p ,#alerts_banner, #about .links { display: none;
}#content #main {border:none;}#content, #header {border-right:none;}

I'm thinking the problem is, as you thought, because of positioning.

Absolute positioning, which you used for the comment button, positions an element relative to its parent element. Since custom sections are child elements to the whole about section, it will be positioned relative to the about section. When the about section scrolls, the button will go with it since it's still attached to that element. The only way to solve this is to either make sure the element never needs to scroll therefore simply avoiding the problem, or to position the button as fixed instead, since fixed is the only kind of positioning that isn't positioned relative to an element on the page (fixed positions relative to the actual window), and therefore is the only one that won't move when you scroll its parent element. If you must have the section scroll and decide to used fixed positioning, this unfortunately causes some problems, because the profile is too big for the window on many computers, and because the profile is centered, it won't always be in the same place on every screen, therefore positioning the button is more difficult that just giving a left and a top value and being done, like with absolute.

The second problem can be solved with just a little bit of extra work, but unfortunately there isn't exactly much you can do to solve the first problem besides just entirely moving the button. It sucks, but there isn't too much you can do about it because that's how positioning works. There are three options and unfortunately none of them can solve every problem.

If you need me to try to explain positioning to you I can(because that'd be a good thing to know, since misuse of positioning can cause a bit of confusion and problems), but for now I can basically link you over to Style Sheet Solutions' post about positioning and hopefully you can understand it.

Also, just a note: The header bar on that profile is breaking the header customization rules. You're not allowed to move, resize, or reposition the bar or the links, and making the bar narrower and centering it counts as that. Breaking those rules is liability to get your entire profile CSS disabled if someone reports it– I've seen it happen, though I don't usually report people for it unless they b-tch back to me and refuse to change it after I tell them to fix it, but some people may not be so lenient. Just remove the width and margin properties from the header.

[wombat - i am]

kittymmeow

ha! there you go :3 i knew you couldn't change the logo, didn't know that counter for size and such of actual header :3 thanks for the tip!

i'm giving someone else a go at coding this particular profile, to see if they have more luck then i. instead of starting a new thread though, i do have another quick question because i can't see anything in the code that would cause this issue. but then i only just woke up,,,
on this profile the links down the bottom of the about me don't work :3 in fact neither do the top about me links. any ideas?

[kittymmeow]

they go

kittymmeow

ha! there you go :3 i knew you couldn't change the logo, didn't know that counter for size and such of actual header :3 thanks for the tip!

i'm giving someone else a go at coding this particular profile, to see if they have more luck then i. instead of starting a new thread though, i do have another quick question because i can't see anything in the code that would cause this issue. but then i only just woke up,,,
on this profile the links down the bottom of the about me don't work :3 in fact neither do the top about me links. any ideas?

There is a guide to the header rules here, if you want to check what you can and can't do. Basically the properties you shouldn't use on the header are position (besides fixed), margin, text-align, or width. There are some cases where other properties might cause it to break the rules (using the wrong background or text color that makes the links unreadable, for example) but those 4 are pretty much the ones that will almost definitely make it break the rules if you change them.

The problem with that profile is that the sidebar div is still there and in front of the links, making it so that if you click there, instead of clicking the link you are technically just clicking that div. You can't hide it with display:none or visibility:hidden because the wishlist is inside that div and will be hidden as well if you try, but since the wishlist has a set width, height, and position, you can set the width and height of #sidebar to 0 and it will solve the problem without hiding the wishlist as well. If it's not a profile that you made then all that specific code won't really matter to you, but that's the problem and solution anyway.

[wombat - i am]

kittymmeow

;ajsdkjfblsknb thanks so much! i just had two profiles with the same issue haha

[wombat - i am]

kittymmeow

also i think i figured out your image issue. you were missing the semi colins at the end of each link thing and the default link.



change your co ord sections to this:

// define regions
$area = new Rect(25,355,75,406,"http://eunhaesaranghae.tumblr.com/" wink ;
$myImageMap->addToMap($area);
$area = new Rect(90,355,145,406,"https://twitter.com/HiMyNameIsEma" wink ;
$myImageMap->addToMap($area);
$area = new Rect(160,355,215,406,"http://www.gaiaonline.com/forum/test-forum/t.82650973/" wink ;
$myImageMap->addToMap($area);
$area = new Rect(230,355,285,406,"http://www.gaiaonline.com/forum/list/170/" wink ;
$myImageMap->addToMap($area);
$area = new Rect(300,355,355,406,"http://www.gaiaonline.com/guilds-home/magami/g.394983/" wink ;
$myImageMap->addToMap($area);
$area = new Rect(370,355,410,406,"http://www.gaiaonline.com/guilds-home/dance-the-asian-way/g.4035/" wink ;
$myImageMap->addToMap($area);


$myImageMap->setDefaultURL("http://www.youtube.com/watch?v=7PMRe4k3OSw" wink ;

[kittymmeow]

they go

kittymmeow

also i think i figured out your image issue. you were missing the semi colins at the end of each link thing and the default link.



change your co ord sections to this:

$area = new Rect(25,355,75,406,"http://eunhaesaranghae.tumblr.com/" wink
$myImageMap->addToMap($area);
$area = new Rect(90,355,145,406,"https://twitter.com/HiMyNameIsEma" wink
$myImageMap->addToMap($area);
$area = new Rect(160,355,215,406,"http://www.gaiaonline.com/forum/test-forum/t.82650973/" wink
$myImageMap->addToMap($area);
$area = new Rect(230,355,285,406,"http://www.gaiaonline.com/forum/list/170/" wink
$myImageMap->addToMap($area);
$area = new Rect(300,355,355,406,"http://www.gaiaonline.com/guilds-home/magami/g.394983/" wink
$myImageMap->addToMap($area);
$area = new Rect(370,355,410,406,"http://www.gaiaonline.com/guilds-home/dance-the-asian-way/g.4035/" wink
$myImageMap->addToMap($area);


$myImageMap->setDefaultURL("http://www.youtube.com/watch?v=7PMRe4k3OSw" wink ;

I don't think so, Gaia just removes semicolons after parentheses sometimes... They're there in the actual code. But yours works so it's obviously something wrong either with my code or the website I'm using ._____.

[wombat - i am]

kittymmeow

they go

kittymmeow

also i think i figured out your image issue. you were missing the semi colins at the end of each link thing and the default link.



change your co ord sections to this:

$area = new Rect(25,355,75,406,"http://eunhaesaranghae.tumblr.com/" wink
$myImageMap->addToMap($area);
$area = new Rect(90,355,145,406,"https://twitter.com/HiMyNameIsEma" wink
$myImageMap->addToMap($area);
$area = new Rect(160,355,215,406,"http://www.gaiaonline.com/forum/test-forum/t.82650973/" wink
$myImageMap->addToMap($area);
$area = new Rect(230,355,285,406,"http://www.gaiaonline.com/forum/list/170/" wink
$myImageMap->addToMap($area);
$area = new Rect(300,355,355,406,"http://www.gaiaonline.com/guilds-home/magami/g.394983/" wink
$myImageMap->addToMap($area);
$area = new Rect(370,355,410,406,"http://www.gaiaonline.com/guilds-home/dance-the-asian-way/g.4035/" wink
$myImageMap->addToMap($area);


$myImageMap->setDefaultURL("http://www.youtube.com/watch?v=7PMRe4k3OSw" wink ;

I don't think so, Gaia just removes semicolons after parentheses sometimes... They're there in the actual code. But yours works so it's obviously something wrong either with my code or the website I'm using ._____.

are there semi colins after the %myimagemap-> etc part AND the $area co ords link here part?

[kittymmeow]

they go

kittymmeow

I don't think so, Gaia just removes semicolons after parentheses sometimes... They're there in the actual code. But yours works so it's obviously something wrong either with my code or the website I'm using ._____.

are there semi colins after the &#xmy;imagemap-> etc part AND the $area co ords link here part?

Yep ._. I renamed the file so it's not PHP anymore so you can view the source of it without Gaia changing things here...

And by the way, the hidden scrollbar on your profile is done in such a way that makes it so that you don't even have to have your mouse over the section to make it scroll, anywhere along the horizontal near the section will scroll it. If you want me to teach you to make invisible scrolls the right way so it doesn't do that (and so the code is actually simpler), I can...

[wombat - i am]

kittymmeow

I would love to know a better way for hidden scrollbars. I only know the padding-right method which is a pain when you have elements to the right of something ><
/copying that code to file on her host to try it

[kittymmeow]

they go

kittymmeow

I would love to know a better way for hidden scrollbars. I only know the padding-right method which is a pain when you have elements to the right of something ><
/copying that code to file on her host to try it

No matter what you basically use the padding-right method, but only on the child element of the section instead of on both like your method. I've written up half-finished draft about how to make hidden scrollbars the right way in my unfinished guide about scrollbars, so I can pretty much just link you to it here. It's not as comprehensive as I want it to be yet (I have yet to add a list of the selectors and explain what each part of the code does), so I wouldn't link a code newbie directly to it yet, but since you have some handle on CSS and the selectors already I think it'll be fine for you. If anything confuses you, just ask and I will explain it ^^

[wombat - i am]

kittymmeow

this is the code im using, and its working

[kittymmeow]

they go

kittymmeow

this is the code im using, and its working

The only difference I can see is that "query_string" is in caps lock on yours and not on mine. I don't know how it ended up lowercase on mine or if that would make any difference so I'm just gonna go change that and see.

EDIT: IT WORKSSSS
Looks like that was the problem XD

[wombat - i am]

kittymmeow

AWESOME!
glad it is
also, in regards to the hidden scrollbar
what would the inner selector be for about me?

[kittymmeow]

they go

kittymmeow

AWESOME!
glad it is
also, in regards to the hidden scrollbar
what would the inner selector be for about me?

Such a tiny little problem yet so much confusion to fix XD But thank you for the help ;uuu; heart

Okay, that's another thing I have to add to the guide. It's kinda weird because About sections don't actually have a built in inner selector, so you have to make one yourself using BBCode list tags:

[list=1]entire about me section content here[/list]

Then the inner selector would be #id_about ol