View Full Version : A wandering button

03-11-2005, 10:43 AM
I've recently been introduced to the world of CSS and have been redoing a webpage that I had previously done using way too many images and tables.
The old one I've abandoned is
and the one I'm currently working on with CSS is

I've tried to arrange it so when you look at it in any sized window it is all in proportion. It seems to be the right side of the page that I'm having trouble with though. There seems to be a margin or a border on the right which I'm sure many people here will know about. Is there something I should add to the below code to get round this?

I know I've used Ocra as my first font choice but I think I may go for images for these logos. I guess the reduced size of the page by doing it in CSS will maybe allow for one or two small images in the banner.

My old page had some shadowed effects on the text. Are there any similar special effects that can be done in CSS with a bit of jiggery pokery?



The CSS code is

body {

.box {background-image:url(metalblue1.jpg);
border:2px outset white;font-family: ocra, verdana, arial;
font-size:80%; color: light-grey; padding:3px;}

#box {position: absolute; top:3%; left:3%;right:3%;width:97%; height:94%;}
#banner {position: absolute;top:6%; left:6%;width:91%; height:12%;}
#screen {position: absolute;top:19%; left:17.5%;width:62%; height:75%;
background-color:#b7c2e0;border: 3px inset white;}
#currentnav {position: absolute;top:24%; left:4%;width:13%; height:33%;}
#archivenav {position: absolute;top:61%; left:4%; width:13%; height:33%;}
#gallery {position: absolute;top:24%; left:78.5%;width:18.5%; height:33%;}
#player{position: absolute;top:61%; left:78.5%;width:18.5%; height:33%;}

.btn {width:12%; height:5%; background-image:url(metalblue1.jpg);
border: 2px outset white; font-family: ocra, verdana, arial;
font-size:60%; color: light-grey; padding:2px;}

#button1 {position: absolute; top:31%; left: 4.5%}
#button2 {position: absolute; top:36%; left: 4.5%;}
#button3 {position: absolute; top:41%; left: 4.5%;}
#button4 {position: absolute; top:46%; left: 4.5%;}
#button5 {position: absolute; top:51%; left: 4.5%;}
#button6 {position: absolute; top:68%; left: 4.5%;}
#button7 {position: absolute; top:73%; left: 4.5%;}
#button8 {position: absolute; top:78%; left: 4.5%;}
#button9 {position: absolute; top:83%; left: 4.5%;}
#button10 {position: absolute; top:88%; left: 4.5%;}

h1 {position: absolute; top: 26%; left: 3%;
font-family: ocra, verdana, arial; font-size: 200%;}
h2 {position: absolute; top: 30%; left: 82%;
font-family: ocra, verdana, arial; font-size: 130%; font-weight: 200;}

03-11-2005, 10:51 AM
maybe u can realize your own problem from your post, do u notice the smiley in the middle of your post? ; ) make that smiley this means that you closed your CSS with a ) rather than a } see if that helps

03-11-2005, 10:59 AM

Well my original posting was about a certain button that went astray and on seeing my post again with the smiley in the CSS code I saw that I'd the wrong bracket at one point. So I tried to edit it before anyone would see it, but not quick enough ;)
So I reworded it all with another query.

Thanks for the prompt reply anyway.


03-11-2005, 11:06 AM
umm dunno if understand u or not, are you trying to take away the default margin on the page?

body {
the stuff in bold may be what u need to add
PS Absolute positioning isn't such a good idea if you dont have to

03-11-2005, 11:13 AM
Ah right. That looks promising, thanks.
I was trying to get the boxes to be positioned in the centre but the right side seemed to have extra. I will try that though.

What would you recommend instead of absolute positioning? Is there a better way I could position all the boxes on the page?

Thanks in advance


03-11-2005, 11:20 AM
i would look into the container method, and learn what margin:auto; does, check out www.w3schools.com look for the Learn CSS link, also check out www.htmldog.com but i think your layout can be achieved with a header, then a left column a middle column and then a right column, and with some images you can get the same effect you got going, and you wont have too many problems of things being out of flow, it just doesn't look right with everything on the right side, if you want i may be able to knock an example up later today. just on a side note, you can have the left column and use two unordered lists and just apply backgrounds to the li's and have links and make them display block so it takes up the room of the li tags, then the right column, you can just have two divs both centered or if you want the overlapping feature, set the zindexes of those boxes to a zindex higher than the rest of the content and then use position:relative rather than position absolute and use the left and top attributes to position those boxes in the vicinity of their original location, and another question would be how much of the page do you want to take as far as width goes? all of it?

03-11-2005, 12:12 PM
Thankyou for that. I'll certainly look through those links.
There is supposed to be a background that sits behind the main big box - but I think I must have messed up with the filename or something.
It looks how its meant to in a 1024x sized window, but when I look at it in smaller sized windows, the main box, screen and banner reduce okay in proportion but the right side boxes seem to have a life of their own.
I haven't investigated columns, headers etc in css so I'll look into that next.
Thanks for your help and advice.



03-11-2005, 12:21 PM
here (http://home.austin.rr.com/fairpoolerz/FF.png) is what i see in FF at a 1024x768 res, i get the horizontal scrollbar :eek: and about your background image, image file names are case sensitive your background image file name is 14.JPG so try that for your background image or make the extension lower case

03-11-2005, 12:29 PM
It does look a bit misaligned. Well its a start on the right road. Something to get my teeth into for the weekend.
many thanks once again


03-11-2005, 01:31 PM
I hate to discourage you, but this absolute positioning misconception that is running rampant among the "let's replace layout tables with divs" crowd will I'm afraid prove to be an absolute (sic!) nightmare once you start to add actual content.

Please, please abandon this approach and start looking at more flexible ways of marking up your pages, leaving as much as possible in the normal flow.
There are wonderful and useful applications for abs pos, but it's difficult and hard to get right and should be used judiciously and -in my opinion- sparingly.

03-11-2005, 01:42 PM

Would you recommend the same method as Aerospace suggested with the header and columns?
I'm not 100% clear on how Position: Relative works.
If I position the buttons as relative, are they relative to the box they sit in, the window, the page? etc.
Also, how do I go about getting the text to resize in proportion the button size? I'm not sure I'm using the percentage method quite correctly


03-11-2005, 02:43 PM
Would you recommend the same method as Aerospace suggested with the header and columns?


CSS basically recognizes two types of elements: block and inline ones.
Inline elements and content string together like words, wrapping around to the next line when there's no more room.
Block elements by default stack onto eachother vertically.

CSS positioning (which includes floating and relative positioning) can be used to change block element behaviour so block elements can sit next to eachother. Whenever there is a vertical stack of elements (like header-main-footer, or a vertical menu) there's no need to alter the default stacking behaviour; the blocks concerned already do what they're supposed to by nature.

The real issue at hand it to identify all these blocks in a layout while ignoring the visual adornment for the moment.
There are basically three main blocks: header, main section, footer (albeit slim). Within the main block, there are three columns: the menu side bar, the main content section, and the right sidebar. These need to be positioned next to eachother, but let's keep that for later.
Inside the menu side bar, there are a number of stacked blocks (the menus), with in turn stacked blocks in them (the menu items). In the right side bar, all there is is a number of stacked blocks.

So, in conclusion, the only need for positioning rises from the three columns; everything else is already stacking as desired.

Also, abandon the concept of having everything scaling to the window size in all circumstances, in all directions: it is generally accepted that the content should, if feasable, fit in the window horizontally; noone is bothered by a page not fitting the window in the vertical direction, and it would be absolutely unnecessary, and undesirable, to shrink button height and text size to do so.

03-11-2005, 03:27 PM
Will do. Thanks for that. Much appreciated.