View Full Version : problem with positioning, images, links, to float or not to float? etc

10-19-2007, 09:52 PM
k. a challenge.


how should i go about those circles at the bottom being nav buttons?

i originally was going to this:

<ul id="circlelist">
<li class="circles">myspace</li>
<li class="circles">library</li>

then for css

#circlelist (positioning stuff, display inline maybe?)

li.circles {

background image of the circles


but the problem, although that would have been clever, is that the link couldn't be the list item, it would have to be the text inside, but i want the entire circle to be the link...

so i'm thinking that i'm just going to have to make the circles with the text inside AS images, then make the images links... and have all the images float next to each other... ugh... any advice?

10-19-2007, 09:59 PM
I would rather go with floating in a fixed width container. (Note: the ie 3px bug on floated elements with image background) but even that bug exists, it can be easily fixed and it will save the hassle of positioning.

10-19-2007, 10:01 PM
i think that's what i was going to go with.

so, make the circles their own images,

myspace circle
contact circle
etc, right?

then to float all these images/links within the containing div??

10-19-2007, 10:07 PM
I would actually use one single image and keep the content in plain text (for seo purpose and it will reduce the size of images in the site aka faster load).

10-19-2007, 10:14 PM
well yeah that's true, but then how do i position the text in the center that way, and also how do i make the circle itself a link instead of just the text... ?

ergh... i guess, tell me if this makes sense.

-div container -
- link - image - p - endlink -

but then i'd have to put the p in classes or ids and position them inside the images... and even then, wouldn't i have to do some weird absolute positioning for the text to rest over the images? or should i just do divs with bg images instead of images?

10-19-2007, 11:15 PM
Use padding for the li a it won't become a perfect circle link, but will cover most of the part. Anyway it is always up to you if you want to use text with only 1 background image or more.