Can Anyone Help With Shortening My UL Code?

**fullonparanoid** · August 9, 2014

Hiya!

I love my UL.

http://www.neopets.com/userlookup.phtml?user=fullonparanoid

It is pretty simple, really...no real bells or whistles. It is, however, how "I" want it...so it pleases me.

There is something I would like to add, though....but I can't because I do not have enough characters to spare (so the code is too long and will not fit).

I would like to add a scrolling view of my Side Pets to the bottom of my UL.

Anyone have any tips and/or suggestions?

Cheers!

:P

**Mouseykins** · August 9, 2014

If you can post your code here I can take a look later tonight when I get home.

**fullonparanoid** · August 9, 2014

Cool! Thank you! :D

Here it is full:

<div id="i"><b><i><span style="font-size: 6pt; color: #00FF33;">Coding help from <a href="http://www.neopets.com/redirect/fansite.phtml?r=http%3A%2F%2Fwww.sunnyneo.com" class="auto_bumper">Sunnyneo</a>.</span></i></b></div>

<div id="d"><b><span style="font-size: 18px; color: #00FF33;">side accounts</span><br><br><span style="font-size: 12px; color: #476996;"><a href="http://www.neopets.com/userlookup.phtml?user=furiousbandersnatch" style="color: #476996;">furiousbandersnatch</a></span><br><br><span style="font-size: 12px; color: #D40808;"><a href="http://www.neopets.com/userlookup.phtml?user=shastathetwitch" style="color: #D40808;">shastathetwitch</a></span><br><br><span style="font-size: 12px; color: #60249C;"><a href="http://www.neopets.com/userlookup.phtml?user=getlostinaz" style="color: #60249C;">getlostinaz</a></span><br><br><span style="font-size: 12px; color: #FF4C05;"><a href="http://www.neopets.com/userlookup.phtml?user=manxomefoe" style="color: #FF4C05;">manxomefoe</a></span></b></div>

Habitarium

Level 50</div></div>

<style>

#header, #main, #content, #footer, .sidebarTable {

border: none;

}

#header {

width: 1300px;

top: 0px;

height: 230px;

background: #000010;

border-top: 20px #5F3B68 solid;

}

#main {

width: 100%;

height: 100%;

border: none;

background: none;

margin: 0px;

color: #8b8b94;

}

#header {

border: none;

}

#footer, #habitarium, #nst, .brand-mamabar, #ban, .user, .eventIcon, #ncmall, hr, .contentModuleHeaderAlt, .contentModuleHeader {

display: none;

}

#navigation {

left: 190px;

top: 20px;

width: 760px;

border: 2px solid #00FF33;

background: url("http://i1087.photobucket.com/albums/j463/sriksrik1/greenNavimg2.png");

}

a:link, a:visited {

color: #00FF33;

}

a:active, a:hover {

color: #99FF99;

text-decoration: underline;

}

ul.dropdown {

border: 1px solid #000033;

background: #007380;

}

.contentModule, .contentModuleTable, .contentModuleContent {

border: none;

}

.contentModuleTable, #i, #main, #h, #d, #header, #s, #n, #b, #m, #w, #f, #g, #navigation {

position: absolute;

}

.contentModuleContent {

background: #0b0b20;

border: 2px solid #00FF33;

}

body {

background: #000010;

}

#userinfo .contentModuleTable {

left: 455px;

top: 217px;

width: 295px;

height: 250px;

}

#usercollections .contentModuleTable {

left: 100px;

top: 190px;

width: 233px;

height: 280px;

}

#usershop .contentModuleTable {

left: 875px;

top: 210px;

width: 195px;

height: 293px;

}

#userneopets .contentModuleTable {

left: 200px;

top: 580px;

width: 450px;

height: 244px;

}

#usertrophies .contentModuleTable {

left: 190px;

top: 1250px;

width: 850px;

height: 500px;

}

#userneohome .contentModuleTable {

left: 300px;

top: 950px;

width: 188px;

height: 230px;

}

#i {

top: 1800px;

left: 1150px;

width: 125px;

height: 100px;

}

#s {

top: 10px;

left: 1055px;

z-index: 2;

}

#d {

top: 875px;

left: 515px;

width: 175px;

height: 155px;

border: 2px solid #00FF33;

background: #0b0b20;

}

#h {

top: 950px;

left: 720px;

border: 2px solid #00FF33;

color: #00FF33;

padding: 7px 17px 35px 17px;

font-size: 8pt;

font-weight: bold;

z-index: 2;

background: #0b0b20;

}

#f {

top: 690px;

left: 784px;

width: 45px;

height: 45px;

border: 2px solid #00FF33;

z-index: 2;

}

#n {

top: 690px;

left: 626px;

width: 45px;

height: 45px;

border: 2px solid #00FF33;

z-index: 2;

}

#b {

top: 690px;

left: 468px;

width: 45px;

height: 45px;

border: 2px solid #00FF33;

z-index: 2;

}

#m {

top: 690px;

left: 310px;

width: 45px;

height: 45px;

border: 2px solid #00FF33;

z-index: 2;

}

#w {

top: 690px;

left: 942px;

width: 45px;

height: 45px;

border: 2px solid #00FF33;

z-index: 2;

}

#g {

top: 1090px;

left: 550px;

width: 100px;

height: 100px;

border: none;

z-index: 3;

}

li:hover ul.dropdown a, li.over ul.dropdown a {

color: #00FF33 !important;

}

li:hover ul.dropdown a:hover, li.over ul.dropdown a:hover {

color: #99FF99 !important;

}

</style>

maikrowsoft · August 9, 2014

You can start by dropping the "http://www." from all href tags and changing your image host to something shorter, like TinyPic.

wolfponies · August 9, 2014

#f {
top: 690px;
left: 784px;
width: 45px;
height: 45px;
border: 2px solid #00FF33;
z-index: 2;
}
#n {
top: 690px;
left: 626px;
width: 45px;
height: 45px;
border: 2px solid #00FF33;
z-index: 2;
}
#b {
top: 690px;
left: 468px;
width: 45px;
height: 45px;
border: 2px solid #00FF33;
z-index: 2;
}
#m {
top: 690px;
left: 310px;
width: 45px;
height: 45px;
border: 2px solid #00FF33;
z-index: 2;
}
#w {
top: 690px;
left: 942px;
width: 45px;
height: 45px;
border: 2px solid #00FF33;
z-index: 2;
}

Can be written as:

#f,#n,#b,#m,#w {
top: 690px;
width: 45px;
height: 45px;
border: 2px solid #00FF33;
z-index: 2;
}
#f {
left: 784px;
}
#n {
left: 626px;
}
#b {
left: 468px;
}
#m {
left: 310px;
}
#w {
left: 942px;
}

**fullonparanoid** · August 9, 2014

Ohhh...thank you for those tips, maikrowsoft and wolfponies! :D

The Neopian with the horizontal scrolling view of her side pets is going to post that bit of code here tomorrow...so hopefully I (we!) will be able to shorten my existing code enough to merge the two.

:P

**Rune Valentine** · August 10, 2014

And all your Neopets codes can be shortened as well. Just drop the "neopets.com"

<a href="http://www.neopets.com/userlookup.phtml?user=gissikah">

Can simply be shortened to:

<a href="/userlookup.phtml?user=gissikah">

This is applicable for any link within Neopets.

Also, imgur URLs are even shorter than Tinypic's :)

wolfponies · August 10, 2014

No need to have "top: 0px;" within the #header or "margin: 0px;" within the #main. They are both 0px by default.

I don't understand why you first tell the header to ignore borders:

#header, #main, #content, #footer, .sidebarTable {
border: none;
}

Then give a top border to your header:

#header {
...
border-top: 20px #5F3B68 solid;
}

Then again tell your header to ignore borders:

#header {
border: none;
}

Can be shortened a lot but I don't know your intentions :)

.contentModule, .contentModuleTable, .contentModuleContent {
border: none;
}

is redundant. Add them to the other containers ignoring borders.

**fullonparanoid** · August 10, 2014

Can be shortened a lot but I don't know your intentions

Honestly? I don't know my intentions either! :D

I know, quite literally, NOTHING about code. I do not know how to read it...I just copy it from other places and modify it by switching things out until I see what I want to see upon preview. I'm like a kid who knows his bedtime storybook so well that he can 'read' it out loud and appear to know what he is doing...but in reality he is just mimicking and cannot read a word. :P

So....

If I use the tips above to shorten my existing code (inclusive of switching all my images to Imgur)...do you think I will be able to add the scrolling preview of my side pets to the bottom of my UL?

While I would like to have each image link to the Pet's lookup...if necessary (due to size constraints) I'd be ok with just the images and not the links.

Thoughts?

Thank you again for all your help...

Cheers!

:P

wolfponies · August 11, 2014

You can easily add a scrolling pet preview to your lookup. I'm not sure how many characters you have left now after all the shortening, maybe you can even add the preview now. If you need to shorten it even more we can properly handle those small images. Since those are just images, they should belong to a big image and not five smaller ones.

Previous code:

<div id="n"><img src="http://i1087.photobu...6bd.png"></div>
<div id="b"><img src="http://i1087.photobu...e0b.png"></div>
<div id="m"><img src="http://i1087.photobu...407.png"></div>
<div id="w"><img src="//images.weserv.nl/?url=http://i.imgur.com/Z...JY7.png"></div>
<div id="f"><img src="http://i1087.photobu...206.png"></div>

.contentModuleTable, #i, #main, #h, #d, #header, #s, #n, #b, #m, #w, #f, #g, #navigation {
position: absolute;
}

#f,#n,#b,#m,#w {
top: 690px;
width: 45px;
height: 45px;
border: 2px solid #00FF33;
z-index: 2;
}
#f {
left: 784px;
}
#n {
left: 626px;
}
#b {
left: 468px;
}
#m {
left: 310px;
}
#w {
left: 942px;
}

Big image code:

<div id="n"><img src="IMG_URL"></div>

.contentModuleTable, #i, #main, #h, #d, #header, #s, #n, #g, #navigation {
position: absolute;
}

#n {
top: XXXpx;
left: XXXpx;
width: XXXpx;
height: XXXpx;
z-index: 2;
}

**fullonparanoid** · August 11, 2014

Thank you, again, wolfponies! :D

I actually kinda understand your last tip there...however, I know it is beyond my skills because I don't even know how to create an image with transparency. So I cannot create a 'big image' of the petpet images.

I really am near completely useless when it comes to computer stuff. /ducks head in shame

I am going to tinker with what I can tinker with over the next couple of days and see what I can come up with.

Cheers!

:P

wolfponies · August 11, 2014

Creating the image can be tricky yes. It shouldn't be necessary though but if you run out of characters I guess I could create the image for you.

For the scrolling pet preview, you need about 650 characters (based on the lookup you link to). The code for the preview is simple and can easily be extended with more pets.

<style>
#neo {
	overflow: hidden;
	height: 271px;
	width: 97%;
	background: white;
	border: 2px solid #111;
	z-index: 5;
}
#neo2 {
	overflow: auto;
	height: 269px;
	width: 99.7%;
}
#neo a {
	width: 180px;
	height: 246px;
	overflow: hidden;
	display: block;
}
#neo img {
	;
	margin-top: -27px;
}
</style>

<div id="neo" style="position: fixed; bottom: 15px; left: 18px;">
<div id="neo2">
<table>
<tr>

<td>
<a href="PET_LINK">
<img src="IMAGE_URL"></a>
</td>

<td>
<a href="PET_LINK_2">
<img src="IMAGE_URL_2"></a>
</td>

...

</tr>
</table>
</div>
</div>

Try it out!

**fullonparanoid** · August 16, 2014

Hey there! Thank you, again, wolfponies!

Sorry for delay in response...had a rough work week and no time to tinker with Neo.

Ok, I have fiddled with my UL code...and my gal has fiddled with my UL code...and we are ALLLMOST there.

Right now, we have it to where it has the scrolling view of side pets...but, there is not enough room for the petpets images.

If you look at my code from above (or at my current UL) you can see the petpets on their respective pets.

Below is the code we have come up with for the scrolling view of side pets...but not enough characters for the petpets.

I think there is enough room in the code (character-wise) to add the pet pets if they were, as you suggested above, a single image. That is beyond my abilities though.

Is there anything in THIS code that you can see to shorten? (oh, and the weird stuff with the navigation bar/banner that you mentioned...for whatever reason it ws the only way we could get it to show the green image for it in both FF and Chrome):

<style>

#main, #content, #footer, .sidebarTable, .contentModule, .contentModuleTable, .contentModuleContent {

border: none;

}

#header {

width: 1300px;

height: 230px;

background: #000010;

border: none;

}

#main {

width: 100%;

height: 100%;

margin: 0px;

background: none;

color: #8b8b94;

}

#footer, #habitarium, #nst, .brand-mamabar, #ban, .user, .eventIcon, #ncmall, hr, .contentModuleHeaderAlt, .contentModuleHeader {

display: none;

}

#navigation {

left: 190px;

top: 20px;

width: 760px;

background: url("http://i.imgur.com/oc12xmB.png");

border: 2px solid #00FF33;

}

#d, #h, .contentModuleContent {

border: 2px solid #00FF33;

}

a:link, a:visited {

color: #00FF33;

}

a:active, a:hover {

color: #99FF99;

text-decoration: underline;

}

ul.dropdown {

border: 1px solid #000033;

background: #007380;

}

.contentModuleTable, #i, #main, #h, #d, #header, #s, #g, #navigation, #pets {

position: absolute;

}

.contentModuleContent, #d, #h {

background: #0b0b20;

}

body {

background: #000010;

}

#userinfo .contentModuleTable {

left: 455px;

top: 217px;

width: 295px;

height: 250px;

}

#usercollections .contentModuleTable {

left: 100px;

top: 190px;

width: 233px;

height: 280px;

}

#usershop .contentModuleTable {

left: 875px;

top: 210px;

width: 195px;

height: 293px;

}

#userneopets .contentModuleTable {

left: 200px;

top: 580px;

width: 450px;

height: 244px;

}

#usertrophies .contentModuleTable {

left: 190px;

top: 1552px;

width: 850px;

height: 500px;

}

#userneohome .contentModuleTable {

left: 300px;

top: 950px;

width: 188px;

height: 230px;

}

#i {

top: 1500px;

left: 0px;

width: 1px;

height: 700px;

}

#s {

top: 10px;

left: 1055px;

z-index: 2;

}

#d {

top: 875px;

left: 515px;

width: 175px;

height: 155px;

}

#h {

top: 950px;

left: 720px;

color: #00FF33;

padding: 7px 17px 35px 17px;

font-size: 8pt;

font-weight: bold;

z-index: 2;

}

#g {

top: 1090px;

left: 550px;

width: 100px;

height: 100px;

border: none;

z-index: 3;

}

li:hover ul.dropdown a, li.over ul.dropdown a {

color: #00FF33 !important;

}

li:hover ul.dropdown a:hover, li.over ul.dropdown a:hover {

color: #99FF99 !important;

}

#pets {

width: 950px;

height: 230px;

overflow: auto;

left: 150px;

top: 1250px;

border: 2px solid #00FF33;

background: #000010;

z-index: 9;

}

#pets img {

width: auto;

height: 200px;

margin: 2px;

float: left;

border: 2px solid #00FF33;

}

</style>

<div id="d"><b><span style="font-size: 18px; color: #00FF33;">side accounts</span><br><br><span style="font-size: 12px; color: #476996;"><a href="/userlookup.phtml?user=furiousbandersnatch" style="color: #476996;">furiousbandersnatch</a></span><br><br><span style="font-size: 12px; color: #D40808;"><a href="/userlookup.phtml?user=shastathetwitch" style="color: #D40808;">shastathetwitch</a></span><br><br><span style="font-size: 12px; color: #60249C;"><a href="/userlookup.phtml?user=getlostinaz" style="color: #60249C;">getlostinaz</a></span><br><br><span style="font-size: 12px; color: #FF4C05;"><a href="/userlookup.phtml?user=manxomefoe" style="color: #FF4C05;">manxomefoe</a></span></b></div>

Habitarium

Level 50</div></div>

</tr></table></div>

Thank you for your time and patience!

:P

wolfponies · August 16, 2014

First and only thing that caught my eye was:

#i {
top: 1500px;
left: 0px;
width: 1px;
height: 700px;
}

...

<div id="i">.</div>

This seems like a desperate solution to something. What does it do?

I also don't think the code can be shortened enough to satisfy your need for petpet display the way you want it. You need the image. I'll see what I can do tonight, shouldn't be hard.

**fullonparanoid** · August 16, 2014

Thank you, again again again, wolfponies! You are my Neo-Hero of the year. /grin

This seems like a desperate solution to something. What does it do?

/laughing...yes, that is exactly what that would be...a desperate solution. :D

That box was created to be located lower than the bottom of my trophy case to keep the page from cutting/ending EXACTLY at the bottom edge of my trophies (leaving no space at the bottom of the screen).

I wanted (want) each box on my UL to be 'floating' in the blue space (dunno if that makes sense or not).

If there is an easier (more logical) way of doing that, I'm all for it! It was just the only thing we could suss that worked.

If you can figure out how to create that image I would be exceedingly thankful...it is very kind of you to offer.

I find it kinda amusing how difficult it seems (to me, at least) to pull together the necessary coding ingredients for what is visually a fairly simple UL.

Thank you again...your time, patience, and kindness are very much appreciated.

Cheers!

wolfponies · August 16, 2014

I see! Such solutions are of course bad but sometimes necessary, one doesn't always have the patience to look for the perfect solution :)

In your case, you wish to add a bottom padding to the usertrophies div like this:

#usertrophies .contentModuleTable {
...
padding-bottom: XXXpx;
}

And here's the petpet image. I haven't tested it because I don't have a user with five pets :(

Anchor it to the upper left corner of the userneopets div and it should work.

**fullonparanoid** · August 16, 2014

Yay! Thank you, wolfponies!

BOTH of your helps in your last reply were required to accomplish my goal!

The image is PERFECT...and I needed to use your more logical code for the spacing in order to have enough characters FOR the image!

Take a look at the finished product...I know it is kinda 'bland' by most standards...but it is EXACTLY what I wanted!

You RULE!

Cheers!

:P

wolfponies · August 16, 2014

Looks very nice! :) I'm happy you reached all your goals and I'm happy I could help you out, it's been great fun!

If you got any further questions, don't hesitate to ask.

Think we can consider this topic closed now :)

Jani · August 18, 2014

Hi! I am the neopian mentioned earlier. I was asked to come here and post my code from my UL like...a week ago, but then life happened. lol!

Anyway, I haven't read the whole thread, but here is my code as promised.

So if I am so late that it has already been solved and my UL code isn't needed, ignore me!!

<div id="neo" style="position: fixed; bottom: 15px; left: 18px;"><div id="neo2"><table><tr><td><a href="/petlookup.phtml?pet=zaetogh"><img src="//images.weserv.nl/?url=http://pets.neopets.com/cpn/zaetogh/1/4.png"></a></td><td><a href="/petlookup.phtml?pet=yuck"><img src="//images.weserv.nl/?url=http://pets.neopets.com/cpn/yuck/1/4.png"></a></td><td><a href="/petlookup.phtml?pet=Farne"><img src="//images.weserv.nl/?url=http://pets.neopets.com/cpn/Farne/1/4.png"></a></td><td> <a href="/petlookup.phtml?pet=glenys"><img src="//images.weserv.nl/?url=http://pets.neopets.com/cpn/glenys/1/4.png"></a></td><td><a href="/petlookup.phtml?pet=Delarosa"><img src="//images.weserv.nl/?url=http://pets.neopets.com/cpn/Delarosa/1/4.png"></a></td><td><a href="/petlookup.phtml?pet=Hatebreeder"><img src="//images.weserv.nl/?url=http://pets.neopets.com/cpn/Hatebreeder/1/4.png"></a></td><td><a href="/petlookup.phtml?pet=Narava"><img src="//images.weserv.nl/?url=http://pets.neopets.com/cpn/Narava/1/4.png"></a></td><td><a href="/petlookup.phtml?pet=Thunderwhere"><img src="//images.weserv.nl/?url=http://pets.neopets.com/cpn/Thunderwhere/1/4.png"></a></td>   <td><a href="/petlookup.phtml?pet=Rieus"><img src="//images.weserv.nl/?url=http://pets.neopets.com/cpn/Rieus/1/4.png"></a></td> <td><a href="/petlookup.phtml?pet=Annalu"><img src="//images.weserv.nl/?url=http://pets.neopets.com/cpn/Annalu/1/4.png"></a></td><td><a href="/petlookup.phtml?pet=Cropper"><img src="//images.weserv.nl/?url=http://pets.neopets.com/cpn/Cropper/1/4.png"></a></td>  </tr></table></div>

If only I had looked up and saw "topic closed" ...proceed to ignore me ;)

This post has been edited by a member of staff (Rune Valentine) because of a violation of the forum rules.

Please don't double post. If you would like to add something, use the 'Edit' button.

Please check your user inbox to see if you have been contacted regarding this incident, then review our rules.

deenamathew · October 9, 2014

Hi,

I had come across this link regarding how to shorten the code hope this can help you out.

http://stackoverflow.com/questions/9613725/css-tricks-to-shorten-my-redundant-code

This topic has been edited by a member of staff (Ruto).

The original topic has been answered.

Please check your user inbox to see if you have been contacted regarding this topic.

Per the reason above, this topic has been LOCKED. Please contact Ruto if you have any questions regarding this action.

Can Anyone Help With Shortening My UL Code?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites