First Time Coder Problems

[mints]

okay so, this is my first time coding. i used a guide to help, but lo and behold, the position tag problem.

now, i've seen WHAT has to be done, but since i basically have no idea what i'm doing, figuring out where to place things is a pain without a visual reference.

would it be possible for someone who knows their stuff on here to tweak my code to make it compatible with the neopets filters? i would be so so very thankful. :)

 

<div>
<img src="http://i1129.photobucket.com/albums/m510/tasteslikemint/Untitled-1.png " border="0" usemap="#map1" style="position: absolute; left: 0px; top: 0px; height: 500px; width: 1000px;">
<map name="map1"><area href="http://www.neopets.com/guilds/guild.phtml?id=4129061" shape="rect" coords="340,163,395,188">
<area href="http://www.neopets.com/guilds/guild_board.phtml?id=4129061&_ref_ck=13346225d7fef3c3f61279b2a2c061bf" shape="rect" coords="405,162,464,186">
<area href="http://www.neopets.com/~Tinstrom" shape="rect" coords="481,168,541,191"></map><style>table, td{background:none;}
.contentHeader,  .sidebar, #footer, #header, #footerNifty, table table table .content, .contentModuleHeaderAlt{display:none}
.contentModuleContent{display:none}
#main {background:0;border:0;} body{
overflow-x: hidden;
overflow-y: hidden;
}
#textbox{
position:absolute;
top: 221px;
left: 357px;
height: 153px;
width: 197px;
overflow:auto;
}
#textboxx{
position:absolute;
top: 125px;
left: 698px;
height: 161px;
width: 42px;
overflow:auto;
}
#textboxxx{
position:absolute;
top: 395px;
left: 687px;
height: 65px;
width: 70px;
overflow:auto;
}
body{
scrollbar-track-color:#628377;
scrollbar-darkshadow-color:#628377;
scrollbar-highlight-color:#628377;
scrollbar-3dlight-color:#628377;
scrollbar-face-color:#628377;
scrollbar-shadow-color:#628377;
scrollbar-arrow-color:#05A999;
background-color: #FFFFFF;
}
td,p{
color:#CD7717;
font:9px franklin gothic medium;
letter-spacing:1px;
}
h4{
border-bottom: 4px double #FFEB4A;
border-top: 4px solid #FFEB4A;
}
a:link,a:visited,a:active{
color:#F79709;
font:9px franklin gothic medium; text-decoration: none
}
a:hover{
color:#05A999;
cursor: crosshair
}</style><div style="position: absolute; top: 43px; left: 68px; width: 63px; height: 15px;"><center>
<a href="/myaccount.phtml">me</a> <a href="/petcentral.phtml">central</a> <a href="/explore.phtml">explore</a> <a href="/neoboards/index.phtml">boards</a> <a href="/games/arcade.phtml">games</a> <a href="/objects.phtml">shops</a>
</center></div>
<div id="textbox">
<h4>HEADING HERE</h4>
<p>All of your text will go here. This would be the welcome message, yadda yadda</p>
</div>
<div id="textboxx">
<h4>HEADING HERE</h4>
<p>All of your text will go here. This would be the welcome message, yadda yadda</p>
</div>
<div id="textboxxx">
<h4>HEADING HERE</h4>
<p>All of your text will go here. This would be the welcome message, yadda yadda</p>
</div>

</div>

 

haha, sorry if this board post looks gross and/or i completely messed up the code. but uh, any pointers???

[Mouseykins]

I might be able to help. What is your coding for and what exactly is your problem? Please be specific, If you could tell me what line the code issue is on I'll be able to help better than just random guessing.

 

This is just an observation of your code. The neo filters will block

position:absolute

 

To get the filters to accept it you need to add a space after the colon like this:

position: absolute

 

If this doesn't fix your issue let me know :)

[mints]

oh, thank you for replying.

this is a guild code, and i think it is JUST the position tag i'm having problems with.

 

i tried adding the spaces, but it is still giving me the same problem. i've heard of inline css coding, but i am absolutely lost on how to go about doing that (but apparently it fixes the problem, moving the position tags out of the style tags while keeping the look of the layout the same; i just don't know how to even begin doing that)

[Mouseykins]

I don't know much about guild coding, sorry I can't help.

[Rune Valentine]

Using inline coding is basically the same for all layouts :) This just means that instead of putting "position: absolute;" in your CSS, you put it inside your div tags, like in your coding, instead of:

 

#textboxxx{
position:absolute;
top: 395px;
left: 687px;
height: 65px;
width: 70px;
overflow:auto;
}

 

You move the position tag into the div code like so:

 

<div id="textboxx" style="position:absolute;">

 

I've modified your code to do this, and added top banner/ad removal code so the code should work fine :)

 

<div>
<img src="http://i1129.photobucket.com/albums/m510/tasteslikemint/Untitled-1.png " border="0" usemap="#map1" style="position: absolute; left: 0px; top: 0px; height: 500px; width: 1000px;">
<map name="map1"><area href="http://www.neopets.com/guilds/guild.phtml?id=4129061" shape="rect" coords="340,163,395,188">
<area href="http://www.neopets.com/guilds/guild_board.phtml?id=4129061&_ref_ck=13346225d7fef3c3f61279b2a2c061bf" shape="rect" coords="405,162,464,186">
<area href="http://www.neopets.com/~Tinstrom" shape="rect" coords="481,168,541,191"></map><style>table, td{background:none;}
.contentHeader,  .sidebar, #footer, #header, #footerNifty, table table table .content, .contentModuleHeaderAlt{display:none}
.contentModuleContent{display:none}
#main {background:0;border:0;} body{
overflow-x: hidden;
overflow-y: hidden;
}
#textbox{
top: 221px;
left: 357px;
height: 153px;
width: 197px;
overflow:auto;
}
#textboxx{
top: 125px;
left: 698px;
height: 161px;
width: 42px;
overflow:auto;
}
#textboxxx{
top: 395px;
left: 687px;
height: 65px;
width: 70px;
overflow:auto;
}
body{
scrollbar-track-color:#628377;
scrollbar-darkshadow-color:#628377;
scrollbar-highlight-color:#628377;
scrollbar-3dlight-color:#628377;
scrollbar-face-color:#628377;
scrollbar-shadow-color:#628377;
scrollbar-arrow-color:#05A999;
background-color: #FFFFFF;
}
td,p{
color:#CD7717;
font:9px franklin gothic medium;
letter-spacing:1px;
}
h4{
border-bottom: 4px double #FFEB4A;
border-top: 4px solid #FFEB4A;
}
a:link,a:visited,a:active{
color:#F79709;
font:9px franklin gothic medium; text-decoration: none
}
a:hover{
color:#05A999;
cursor: crosshair
}
#header, #footer, #ban_bottom, #ban, .slug {
display: none;
}
</style><div style="position: absolute; top: 43px; left: 68px; width: 63px; height: 15px;"><center>
<a href="/myaccount.phtml">me</a> <a href="/petcentral.phtml">central</a> <a href="/explore.phtml">explore</a> <a href="/neoboards/index.phtml">boards</a> <a href="/games/arcade.phtml">games</a> <a href="/objects.phtml">shops</a>
</center></div>
<div id="textbox" style="position:absolute;">
<h4>HEADING HERE</h4>
<p>All of your text will go here. This would be the welcome message, yadda yadda</p>
</div>
<div id="textboxx" style="position:absolute;">
<h4>HEADING HERE</h4>
<p>All of your text will go here. This would be the welcome message, yadda yadda</p>
</div>
<div id="textboxxx" style="position:absolute;">
<h4>HEADING HERE</h4>
<p>All of your text will go here. This would be the welcome message, yadda yadda</p>
</div>
</div>