A ghost is :hovering where it shouldn't be...

Well, as links they'd be anchors. Set the LI to display:inline, the anchors inside them to float:left, and set the dimensions on the anchors to show the circle.

and there is NO reason for you to be setting classes on each of those LI with a perfectly good ID in place.

For this html:

<ul id="circlelist">
<li><a href="#">myspace</a></li>
<li><a href="#">library</a></li>
</ul>

Code (markup):

this would be the CSS:

#circleList {
	width:100%;
	float:left; /* no need to clear it this way */
	list-style:none;
}

#circleList li {
	display:inline; /* make IE behave with floating content */
}

#circleList a {
	float:left;
	width:48px;
	height:48px;
	margin:0 16px 16px 0;
	background:url(images/circles.png) top left no-repeat;
}

Code (markup):

Which would have the advantage that you could even give the circles a mouseover effect.

 

thats awesome because the way that i HAD done it i was trying to figure how to give it a mouseover effect.

only problem is, i don't know what to do differently with the code. i used the code you suggested, which looked simple and straightforward enough, but here's the outcome, deathshadow:

minusthemasses.com/artists/sillyrobchildish.html

what i did in a different way you can see at

minusthemasses.com/artists/birdsfledfromme.html

the latter was because i couldn't think of any other way of doing it - but!! you can see that i've found ways around absolute positioning. which is thanks to you, deathshadow.

 

aha! deathshadow, the code you provided!

the html gave a "circlelist" id and the css was "circleList," and i didn't know until i tampered that css is case sensitive!!

good to know. i'll work from there, thank you again.

 

minusthemasses.com/artists/sillyrobchildish.html

so far so good, but how do i center the text now?

 

Well, horizontally that's easy - text-align:center;

For the vertical - that's kind of tricky but I think you found the best way, to add padding-top to push the text down. I would suggest subtracting that 20px from the height so the total height remains 63px, then use the margins if extra top spacing is desired.

BUT, because you are inside a fixed-width container over a fixed with image I would HIGHLY suggest that you change the font measurement from % to px, that way the layout doesn't break at default zoom on large font machines. Something like 14px/16px ought to do the trick.

So long as the text in the circles is only one line, you might also have luck setting the line-height to the height of the image then removing the padding - though that can have odd results in some cases.

Oh, and a suggestion: I'd combine the two mouseover states to a single image one atop the other, then use background-position to show the mouseover effect. It dodges the bullet of the first mouseover having to wait for the image to load, and reduces server load by only needing one handshake. I'd probably also make both 64px tall and wide so it's a multiple of 8, making full use of most encoding techniques, and save the image as a 16 color .gif since the number of colors used should be well under 16. (total filesize shouldn't be more than 300 bytes) The CSS for that would be something like (I'm just including the background parts):

#circlelist a {
	background:url(/jpgs/circle.jpg) 0 0 no-repeat;
}

#circlelist a:active,
#circlelist a:focus,
#circlelist a:hover {
	background-position:0 -64px;
}

Code (markup):

...and remember to include the other states so your keyboard navigators aren't left out in the cold.

 

i'm having trouble getting your meaning, here. subtracting 20px meaning... making the padding-top -20px ? or getting rid of the padding and then ... using margins? maybe it's because of the drinking last night... but i'm confused about this.

cool, gotcha.

i see what you mean but i think i'll just stick to the padding/margin method for now, maybe i'll experiment with using line-height as a sort of trick with another layout sometime. also, there may be more than one line in these buttons, not sure. hopefully the current positioning system i'm using will keep that stuff aligned correctly, which i think it will, but we'll see...

ah, i re-read that over and over several times and JUST got your meaning. that's astounding, a really simple but really genius way of doing it. ok, i may do that... or may just consider it later. i doubt it should effect loading time TOO much, the way i'm doing it. i'll definitely consider making the images smaller, as you talk about next...

full use of most encoding techniques? really? wow, good to know, i guess. i'm learning a lot here. i'm posting most of these questions in several forums and deathshadow, trust me, you're by far the most knowledgeable about this stuff than the handful of other forums i'm getting advice from.

yes yes. of course. i have to remember a:focus. thank yous.

will get to work soon..

 

now, one last question.

how should i go about putting another 5 circles into the mix? for some profiles i want 10, some i want five. i tried line breaking, which didn't work. although maybe if i create a 64px line-height line-break class, would that work?

the most effective way, but one that would probably be more work than i'd need to do, is to create another list, and to just position it on top of the current one...

what are your thoughts??

 

Right now you have 20px of top padding, and 63px height, so they are rendering as 83px tall... which is not entirely compatable with the one atop the other single image method I mentioned (though it would work side-by-side). I'd make it 43px tall, 20px top padding, 20px bottom margin if that extra 20px below each one is desired.

Remember, padding gets added to your total height... unless of course you wanted the rendering area to be 83px tall...

Fix the width of the UL to five times the total width of your circles... Floats will wrap on the horizontal if there's not enough room for them inside the container.

 

beautiful, thank you.

 

Check out what deathshadow did with one guy's site here: http://forums.digitalpoint.com/showthread.php?t=427632&page=3 (and page 2)
Html:
http://battletech.hopto.org/for_othe.../template.html
Css:
http://battletech.hopto.org/for_othe...der/screen.css

I'm glad he keeps his stuff sitting on his server for a while.

I tried it for the first time with toughshot's site for the menu. It's really cool, but you have to play with the numbers to figure out where they sit. I ended up not having two copies of the image (there was one in the ul, and one in the anchors I think).

http://stommepoes.jobva.nl/Toughshot/toughshot.html
Image: http://stommepoes.jobva.nl/Toughshot/menu.jpg

Deathshadow: I dunno about Captain Anime, he doesn't seem to fit the Crusty Gecko-hating Guru image too well. Though he does seem a little smug. : )

 

Dead links due to them getting chopped- I think you mean:
http://battletech.hopto.org/for_others/pixelcommander/template.html

and
http://battletech.hopto.org/for_others/pixelcommander/screen.css



Oh, and Captain Harlock is appropriate to my username though - Since the Deathshadow was Harlocks first command (which he had shot out from under him) - which being I've used this name online since 1984... (Yes, I'm THAT deathshadow - those of you working in the security field can feel free to turn white now)

 

wow.

you guys are awesome.

yeah, i understood the doubling up the image thing when deathshadow described it, but it's cool seeing it in action on that guy's page. it loads so quickly, too!

do you guys recommend any certain type of image compression? jpg at what ratio? or gifs if possible? or better quality even? i'm sure it depends, but in general?

 

Image compression could fill several books - my policy is use whichever one gives you the smallest file, which means saving in all three formats then chosing the best.

It's actually why I use Corel (formerly JASC) Paint Shop Pro - the image optimizer in the save dialog gives you an image preview with filesize BEFORE you actually hit save... At save time you can reduce the color depth for palettized .jpg or .png, set palette transparancy, partial transparancy and a whole host of other options.

As to formats, I use the following loose rules of thumb:

GIF - If the image has 16 colors or looks good at 16 color, and is smaller than 16K pixels (128x128 or thereabouts) GIF tends to make really small files... GIF is also NOT gamma corrected by IE so if you need a gif that matches colors you are declaring in your CSS EXACTLY, gif is the weapon of choice.

JPG - great for anything with lots of colors that you aren't too concerned about 5-15% data loss. Some images you can go as high as 80% lossy without really seeing the difference, letting you get really tiny high color files.

PNG - a great middle ground. In both high color and 17-256 color modes PNG kicked .gif's ass, and can in some cases give JPG a run for its' money without loss. HOWEVER, a lot of people lately have gone nuts using alpha transparancy PNG's (with the IE workaround) - I advise against this if you care about load times because they render slow as hell, the filesizes are absurdly large, etc. Palette transparancy on the other hand .png is often MUCH smaller than GIF - and in general if the image has more than 16 colors PNG is 'the man'.

Both PNG and JPG have a major shortcoming in IE though, for some *****ed up reason Microsoft felt the need to apply their own gamma correcting algorythm to both formats - because of that matching colors other than black and white to colors in .gif or declared in CSS just does not work - and if you CAN match it in IE, it doesn't match in anything else... So if perfect color matching to CSS elements is needed, you are looking at .gif as your only hope.

Really, a well designed site should test each format, and use whichever one is best for the circumstance. Like any other tool you don't throw two of them away and then shoe-horn just one into every situation. Each format has it's own strengths and weaknesses - and as such what format to use needs to be weighed on a case by case basis.

Image optimization is also where a lot of websites FAIL MISERABLY - You often see websites weighing in as 800 meg gorilla's when they should be 80 megs tops.

 

I didn't know about the Microsoft issue. I did read a test some guy did once comparing png image compression between Photoshop and Gimp. The differences in actual colour was sometimes on some OSes so different that it would cause a problem matching an image background to a background colour the image was sitting on.

Here's an example of doing what deathshadow means (tho I have Gimp instead of Paintshop Pro, which apparently is better than Gimp or PS for compression, but oh well):

My actual version of the site is not actually online, because currentlt it's using a crappy template generating thing, but look at the top of http://www.secondhomerentals.com/cgi-bin/main.pl (though the earth on the left was changed to another earth and so isn't the same image as what I have).

They used three jpgs. I would've only used jpg for the earth on the left. Look at the size of http://www.secondhomerentals.com/secondhomerentals.com/header.jpg which is just a gradient. Pretty big, compared to mine (which I also shrunk in size, which also made a difference) http://stommepoes.jobva.nl/Homeselling/bggradient.gif .
Their's is like 3KB and mine is like 300bytes or something.

The earth I made on the left, with also a gradient from the background gif AND a white gradient form earth to page background:
http://stommepoes.jobva.nl/Homeselling/header_logo2.jpg
which worked best as a jpg. PNG was too big. Gif looked nasty with the gradient no matter how many colours I added (and you can only have 256 of them).
Logo on the right, they made a jpg which looks okay on my screen but when I download it I can see the jpg compression artifacts. It's also like 9KB. I took the same image, made it BIGGER (to add a requested gradient like the left earth) and then made it a 2.7 KB png. ( http://stommepoes.jobva.nl/Homeselling/header_logo.png ) The majority of the image is 4-colour logo, so the two best choices there were gif or png. Png worked better with the gradient at that size.

So you can use the general rule of thumb of, if it's a small number of colours like a logo or something drawn, gif or png wil often give you the nicest image with the smallest size, while anything that even begins to look like a photo (unless it's a really bad one) I almost immediately go to jpg. Sometimes I've had to take photos and make them gifs for transparent backgrounds (and I don't want to mess with IE and png transparencies because I'm lazy) so I just suffer the reduced image quality (here: http://stommepoes.jobva.nl/Pizzaatje/pizzaman.gif -- see also how large the image is, 17KB-- a jpg would look better and be maybe half as big!)

 

yeah, i've noticed even with my page that the gazelle on the left's background color is not the same as the universal background color in safari... IE it's actually fine, but maybe not in past versions? i'll have to do some reading up on this, or just try to use gifs more often

 

hey, so could you guys take a look at this:

http://www.minusthemasses.com/artists/birdsfledfromme.html

how do i get the list items to not be so close when above each other?

line height effects the text,
i've considered perhaps using a class of line breaks, but was wondering if there's a better way,
and padding-bottom/top seems not to achieve what i'm trying to do either,

word,
max

 

I'd add margins, not padding.

 

Note: the images I link to above have been changed. The guy requested a more fuzzy and less "sharp" looking image, which meant more half-tone pixels, which increased my 2.8Kb to about 8kb. Ew. Just so it doesn't look like I'm lyin'. Also, my newer images replace the old ones on the site, so now all images are identical. So now my whole point is lost : )

 

i tried messing with different margins, i can't really seem to make it work...

 

Do you mean the two rows of circles are top-to-bottom too close to each other?

Setting margins (bottom margins on the top row of circles, top margin on the bototm row of circles) may not show anything because of collapsing margins (which, for some strange reason, is supposed to happen). So long as there's at least 1px worth of padding in both circle-rows, you should be able to avoid it.

At least, that's my first vague thought if margins don't seem to do anything. Another possibility is that there's some margin value overriding your new values.

One link: http://www.researchkitchen.de/blog/archives/css-autoheight-and-margincollapsing.php

Though I think Paul O'B has another page with also a good explanation... if I can find it.