Align More buttons & creating a box

sekhu · 2006-04-03 20:19:31

Hello,

How would I align the “more” buttons at the bottom of the page so they’re even? I’ve set them using img src so they can be linked, but they’re out of sorts depending on the text view size.

site

Secondly I would like to have the background colour one colour, but the content and everything in it to have a background of white, therefore containing a sort of box. I’ve tried but have only been able to get the box to colour the top half of the page. nnot the bottom half.

thanks in advance

Last edited by sekhu (2006-04-03 22:55:49)

NyteOwl · 2006-04-03 22:59:21

If you want them to line up across the bottom regardless of the text scaling, you might consider placing them all in a single block after the whole content section rather than individually after each list.

sekhu · 2006-04-04 00:33:29

they’re in a block called “bottom” but it doesnt’ seem to stretch the box beyond itself, in other words the content within bottom, the containers within, don’t exapnd the box, so I’ve had to add a fixed height width to the bottom container which covers the section at the bottom.

whatbrick · 2006-04-04 00:45:01

What NyteOwl means, I’m assuming, is to put the “More” buttons in a block below the #bottom container. You would have something like this:

<div id="bottom"> mp3 lists </div>
<div id="moreButtons"> More buttons</div>

Since you have the mp3 lists floated left, you would have to either add a clearing element inside the #bottom container, or apply clear: both; to the “More” buttons container.

Done this way, the “More” buttons would be lined up horizontally below the mp3 lists no matter how long any of the lists became.

sekhu · 2006-04-04 02:45:13

ok i tried that, but it’s kinda broken stuff up a bit so that everything is left aligned and sitting below each other, how can I fix that?

Cheers

whatbrick · 2006-04-04 03:16:25

I’m not sure what you mean by broken up. Are you saying the “more” buttons are stacked in a column, one on top of each other? Might have to see an example so I can be clear what the problem is.

sekhu · 2006-04-04 05:13:03

ok i’ve got this far

site

i’ve floated the buttons so they’re aligned, but I’d like to be including in the white background and to remove that huge gap between the buttons at the last files

Cheers

EDIT: it’s driving me nuts so I;‘m giving up and doing it the bad way

Last edited by sekhu (2006-04-04 05:22:24)

whatbrick · 2006-04-04 06:46:29

Ya know, I’ve been thinking about this some more and I think your solution will work out better in the long run. For one, I think it will be more visually appealing since you will have the same number of files in each list, but the main advantage will be page flow. So if someone had CSS turned off, or if they were viewing your site with a text-only browser (hey, it happens) then they would see a list of songs, then a “more” button, then the next list of songs, then a “more” button, and so on. I know this because I viewed it with a text-only browser (told you it happens :).

One change I would make, however, is the alt-tags on the “more” button images. Right now they say more1, more2, more3, more4, which won’t make sense when viewed through a text-only browser or a screen-reader. Better alt-tag descriptions would be something like “More Ahx Songs” or something like that.

So really, the way you did it isn’t a bad way at all. It never was since it worked.

alexandra · 2006-04-04 08:33:26

hi sekhu, looking through Opera you can hardly read the mp3 linklists as font size is less than 8px. I looked at your css and noticed you use em and px for fontsizing. better is to set font-size to 101% in body and than scale down the sizes in % for you elements. this way you do not run in to cross browser troubl

sekhu · 2006-04-06 07:05:16

thanks alex, i noticed when viewing sites my FF is set to a different font size to everyone else, so what looks ok on mine looks tiny for everyone else.

Cheers both

Textpattern CMS

Textpattern CMS support forum

#1 2006-04-03 20:19:31

Align More buttons & creating a box

#2 2006-04-03 22:59:21

Re: Align More buttons & creating a box

#3 2006-04-04 00:33:29

Re: Align More buttons & creating a box

#4 2006-04-04 00:45:01

Re: Align More buttons & creating a box

#5 2006-04-04 02:45:13

Re: Align More buttons & creating a box

#6 2006-04-04 03:16:25

Re: Align More buttons & creating a box

#7 2006-04-04 05:13:03

Re: Align More buttons & creating a box

#8 2006-04-04 06:46:29

Re: Align More buttons & creating a box

#9 2006-04-04 08:33:26

Re: Align More buttons & creating a box

#10 2006-04-06 07:05:16

Re: Align More buttons & creating a box

Board footer