Help Me Choose/Fix UL

[Domino]

Hey guys! So here's the dilemma. I've edited premade coding to two different userlookies, and I don't really know which one I like better. Yeah. I'm not good enough at coding to make an awesome UL by myself. :D Anyway. I need some opinions on which ones are better. They're both essentially the sameish. Kind of. Not really. I'll get to the point.

 

The first one is on my main, nikimin94. Or here's just an image.

I like the way this one looks the best. But. I have coding problems. First, I'm pretty sure it only works the way it is supposed to in FF. (in chrome, if you zoom out, you can see the little box squished at the bottom that just doesn't work out with all my random information.) Plus, it uses too many characters. Hence the tiny info section. I literally cannot add more characters. :/

 

What I like about it, is the picture navigation and the title thingy, and my little box, when it shows up correctly. So. If anyone could tell me what parts of the code I can take out to make room for more characters/how to fix the little box situation, that would be awesome. CODE:

<style>

body {background:#FFF77C url('http://i56.tinypic.com/s0zti1.jpg') no-repeat fixed center 15px;z-index:-1;overflow:hidden}

#random {width:300px;height:250px;background:transparent;top:415px;left:3px;overflow:auto;}

#hold {width:790px;height:480px;overflow-y:auto;overflow-x:hidden;background:transparent;margin-top:40px;margin-left:150px;padding:3px}

#main,#content {border:0;background:transparent;margin-top:278px;height:480px;width:740px;}

#name {width:505px;height:20px;margin:-19px auto 0 auto;left:-150px;padding:0;color:#30D8C0;font-weight:bold;font:25pt "franklin gothic medium";letter-spacing:-1px;z-index:2}

#userneopets img {width:100px;height:100px;}

#pai a:link,#pai a:visited {color:white;background:transparent;padding:1px 15px;margin:0 1px;font:8pt verdana}

a b,a:visited b {color:#ff4aae}

a:hover b {color:#949494}

.random {width: auto;height: 300px;font:7px verdana;color:#020E1C;}

.sidebar,#header,#footer,#nst,.nav_image,#userneohome,#userneopets hr,#usertrophies hr,#ban,.brand-mamabar {display:none}

.contentModuleTable,.contentModule,.contentModuleContent {border:0;background:transparent}

body,td,p,.content,.medText {font:7pt verdana;color:#3f3f3f;line-height:1.3}

.contentModuleHeader,.contentModuleHeaderAlt {background:transparent;text-align:center;font-family:"trebuchet ms";color:black;}

a:hover img {filter:alpha(opacity=60);opacity:0.6}

.content div a img,.content div b

#you a img,#you b,.contentModule div a img, .contentModule div b {display: inline}

h1 {font:15pt arial;color:#6BB3FF;letter-spacing: 7px;}

</style><div id="random" style="position:absolute"><h1>GOALS</h1>

[x]Sell!!SELL!! avatar<br>[]UC Ploosh Chomby<br>[]draik transmog<br>[]UC Brucicle<br>[x]Lab Map<Br>[x]FFQ<br>[]Ultimate Riches!<br>[]Typing Terror avatar<br>[x]1M<br>[x]Alien<br><h1>ACCOUNTS</h1><p>main<br><a href="/userlookup.phtml?user=dominotheelf">side</a><br><a href="/userlookup.phtml?user=yellowtruckairlines">side</a><br><a href="/userlookup.phtml?user=doublejeopardy">side</a><br><a href="/userlookup.phtml?user=noodleinapastlife">side</a><br><h1>LOVES</h1><br><a href="/petlookup.phtml?pet=Gnomied"><img src="http://pets.neopets.com/cp/3bxs7omt/2/1.png"></a><a'>http://pets.neopets.com/cp/3bxs7omt/2/1.png"></a><a href="/petlookup.phtml?pet=Taniyss"><img src="http://pets.neopets.com/cp/bwh6c9h8/2/1.png"></a><a'>http://pets.neopets.com/cp/bwh6c9h8/2/1.png"></a><a href="/petlookup.phtml?pet=Jeraw"><img src="http://pets.neopets.com/cp/ntz42now/2/1.png"></a><Br><a href="/petlookup.phtml?pet=Confuter"><img src="http://pets.neopets.com/cp/fdjhcf2n/1/1.png"></a><a href="/petlookup.phtml?pet=Gryppindor"><img src="http://pets.neopets.com/cp/x55jjfmv/1/1.png"></a><a href="/petlookup.phtml?pet=littlepigglewiggle"><img src="http://pets.neopets.com/cp/rvk88nvx/1/1.png"></a><br><br><br><br>meow!</div><div'>http://pets.neopets.com/cp/rvk88nvx/1/1.png"></a><br><br><br><br>meow!</div><div id="name" align="center" style="position:relative"><font color="#FFAA00" style="font:30pt georgia">*</font>nikimin94</div><div id="hold" style="position:relative"><table><div id="pai" align="left"><a href="/myaccount.phtml"><img src="http://i53.tinypic.com/2nid44h.jpg" border=0></a><img src="http://i56.tinypic.com/x43uq8.jpg" border=0><a href="/games/arcade.phtml"><img src="http://i52.tinypic.com/2wc08l0.jpg" border=0></a><img src="http://i54.tinypic.com/5pkhmx.jpg" border=0><a href="/petcentral.phtml"><img src="http://i53.tinypic.com/296huyv.jpg" border=0></a><a href="/neoboards/index.phtml"><img src="http://i55.tinypic.com/ak72bn.jpg" border=0></a><a href="/objects.phtml"><img src="http://i56.tinypic.com/2ug2lb8.jpg" border=0></a><img src="http://i56.tinypic.com/2n7pnow.jpg" border=0><a href="/~Celusio"><img src="http://i54.tinypic.com/v8imhy.jpg" border=0></a></div><br><div id="you">

Hiya! I'm Domino. I'm a Draco Malfoy obsessed freak. I have a phobia of mushrooms. Gross. Only fish should have gills. I can't put much more cause my code will explode, but nm me! I don't bite...most of the time. :K <br>Works in FF best</div>

 

Hope that worked.

 

Anyway. Then the second UL option is on my side, yellowtruckairlines. Or just the image.

. I don't like the way it looks as much for some reason. But I like that I can put more on it, because I have free characters. Perhaps if I changed the backgrounds of the content boxes to be slightly opaque? But I don't know how to do that. Also, in FF, it is anchored in the top left corner, and that seemed to work a little bit better with the background. I don't know. I guess suggestions in general on how this one could be better would be awesome.

<style >

#footer, hr, #userneohome, .sf, #nst, .brand-mamabar, #ban{display:none;}

#header{visibility:hidden;z-index:2;}#template_nav{margin-top:-25px;}

#navigation{visibility:visible;}LI.nav_image{margin-left: -10px;}

UL.dropdown {filter:alpha(opacity=75);opacity:0.75;border:none;border-bottom:3px solid #f9d423;}

.trophy_cell, #usertrophies b{padding:0px;}

.contentModuleTable, #main, .contentModuleContent{border:none;background:transparent;margin-top:0px; }

.contentModule, #b, #r, #l{background:transparent;border:1px solid #88d1ce;margin:7px;}

.contentModuleHeader, .contentModuleHeaderAlt {background:none;font:15pt "franklin gothic medium";color:#398eb6;height:22px;font-weight:normal;}

body,td,p,.content,.medText {font:8pt "franklin gothic medium"; color:#226888;font-weight:normal;} body{background:#FFF77C url('http://i53.tinypic.com/25720cj.jpg') no-repeat}

b, #b a{color:#c60052;font:7.5pt "georgia";font-weight:bold;}.medText b, #b a{font-weight:normal;}

#stat {left:180px;top:38px;width:670px;}#side{left:5px;top:46px;width:175px;}

#b, #l img{text-align:left;padding:2px;}#l a{font:20pt "georgia";} #m{margin-bottom:2px;}

#h{text-align:right;font:10pt "tahoma";font-weight:bold;border-bottom:1px dotted #f9d423;}#r{text-align:right;padding:2px;}

#p img {background:transparent;padding:2px 3px;margin:2px;border:1px solid #f9d423;}

A:Link, A:Visited, LI:hover UL.dropdown A, LI.over UL.dropdown A {color:#ff4e50;font-weight:normal;}

A:Hover,LI:hover UL.dropdown A:Hover, LI.over UL.dropdown A:hover {color:#fc913a;font-weight:normal;}

 

 

</style >

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

<div id="l"><a href="/~raggles">Link <i>!</i></a></div>

<div id="l"><a href="/~ekiahru">Link <i>!</i></a></div>

<div id="l">

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

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

<a href="/userlookup.phtml?user=doublejeopardy">3</a><a href="/userlookup.phtml?user=noodleinapastlife">4</a></div>

<div id="b"><div id="h">Info</div>Write about yourself here!<br></div>

<div id="b"><div id="h">Status</div><b>Neomail:</b> Open<br><b>Neofriends:</b> TALK to me.<br><b>Guilds:</b> Open<br></div>

<div id=”b”><div id=”h”>Avatars:</div><img src=”

<div id="b"><div id="h">Goals:</div>[x]Sell!!SELL!! avatar<br>[]UC Ploosh Chomby<br>[]draik transmog<br>[]UC Brucicle<br>[x]Lab Map<Br>[x]FFQ<br>[]Ultimate Riches!<br>[]Typing Terror avatar<br>[x]1M<br>[x]Alien<br></div>

<div id="l"><IMG SRC="http://cgi.boingdragon.com/count/dominoxx/3.gif" WIDTH=130 HEIGHT=90>

</div>

<div id="p">

<a href="/petlookup.phtml?pet=Gnomied"><img src="http://pets.neopets.com/cp/3bxs7omt/2/1.png "></a>

<a href="/petlookup.phtml?pet=Taniyss"><img src="http://pets.neopets.com/cp/bwh6c9h8/2/1.png "></a><a href="/petlookup.phtml?pet=Jeraw"><img src="http://pets.neopets.com/cp/ntz42now/2/1.png"></a><a href="/petlookup.phtml?pet=Confuter"><img src="http://pets.neopets.com/cp/fdjhcf2n/1/1.png"></a><a href="/petlookup.phtml?pet=Gryppindor"><img src="http://pets.neopets.com/cp/x55jjfmv/1/1.png"></a><a href="/petlookup.phtml?pet=littlepigglewiggle"><img src="http://pets.neopets.com/cp/rvk88nvx/1/1.png"></a>

</div>

<div id="b">Lookup by <a href="/userlookup.phtml?user=l3lo0">l3lo0</a>! Get it <a href="/~Floofibob">here!</a></div></div>

<div id="stat" style="position:absolute;"><table>

 

 

 

 

yeah. So that's it. I know you guys all have lives, and have much better things to do than help me with my userlookup, but if you could help, or even tell me which one you like better, I would appreciate it SOOO much, because there's honestly no better place to go for help than you guys!

 

Thanks!!! :D

[Annie]

Okay here are some suggestions for minor changes you can make to the first one to shorten it:

 

1. you seem to be using background:transparent a lot, so instead of declaring that in every element, why not group all the elements together and declare it just once? For example, use #hold, #main, #random {background:transparent}

Similarly, you use a lot of border=0 in your navigation, so use in your style #pai img, # {border:0}

2. You use a lot of fonts, but I would like to point out that your fonts are only good if the viewer has it installed on his/her computer. I can't see any of your fonts, just the default :(

 

I'm pretty sure your cross-browser issues is because of margins, but I haven't tried your code out yet, so I can't be sure. I have to go to school right now, but I will take a look at it when I come back.

 

By the way, where did you get your pre-made codes? You might have to credit them, I'm not sure....

 

Anyway, good job on making to move to making your own lookups!

[Xepha]

I don't really want to go into code details right now, so I'll just rate the visual.

 

Yellow (background) and purple (the character) are complementary. But I'd say the hue contrast is too low. So maybe it would work better with near-complementary colors, such as a blue (#2653F1) for the figure, or a green (A8B645) for the background. It's also possible to play with texture in the background, so it looks less plain.

 

A really good site to help you creating a colorsheme : http://colorschemedesigner.com/

Another good site can help you creating a pattern, and it doesn't require any software on your computer. You can just edit the colors, export the image and saves it on your computer. Here it is : http://www.patterncooler.com/

 

Now let's look at your typography.

Typography is a very strong visual element. Usually, you don't want to use more than 3 fonts on the same page. The impression that I get from your typography is that there are many sides of yourself. You are playful, retro... there is a font that makes me think of an architect sketch, so maybe you like to build things? So just keep in mind that your choice of typography should never be random. It means something, even if it was not in your intention because it has its own style.

 

On the picture where the words are at the top, I have the feeling that they were said by the figure. When you stack the words on the other picture, it looks stable, solid.

 

I'm also wondering what it would look like if there was no words into the mouth of your character. Clearly, it looks like an opened mouth to me... even if I make abstraction of the words.

 

Now if I were you, I'd go back to my sketchbook and draw a new version of how I want things to look. See how much space you want to give for your header, where do you think the navigation looks better, how to integrate the neopets stats. You can make a couple sketches and your intuition will tell you when it looks right. We are generally pleased with composition (drawing) that look balanced to us.

 

I know that I didn't tell you which one I prefer, and that's on purpose :P

[Domino]

Ahhh. Thank you so much. :). I decided to scrap them. I'm currently working on a new one, using kind of the same idea? Anyway. Here's the problem I keep running into now.

 

So to remove the userlookup:___________ you have to use a code that blocks both bold text and linked images, correct? And them the second part of the coding reallows them in the contentModule div right? Is there any way I can re-allow linked images in other divs (like for navigation purposes?)

 

Hopefully that made sense. I can try and clarify if it's not. Thanks!

[Xepha]

.content div a img, .content div b {
display: none;
}

.contentModule div a img, .contentModule div b {
display: inline;
}

.content div a img, .content div b {
display: none;
}

.contentModule div a img, .contentModule div b {
display: inline;
}

#credits a img, #credits b {
display: inline;
}

 

In this case, if I put something in a div with the id being credits, the image and bold will display properly.

So you could have something along this:

 

<style>
...
#menu a img, #menu b {
display: inline;
}
...
</style>
<div id="menu"><p><b>My menu:</b><a href="http://www.neopets.com"><img src=''https://images.neopets.com/creatives/neopets_88x31.gif"></a></p>
</div>

[Domino]

Thanks so much Xepha. Although I did scrap that idea...too many images, too little text available. :(

 

But. I finished! Here it is! The margins are a bit screwy in Chrome, and I dunno how it looks in IE, but in Safari (i think) and FF, its just fine. I'm too lazy to fix the margins.

 

Anyway, thanks so much to all who helped. You have no idea how much I appreciate it. :D