Site Library Library of Hellas

How to move your Award Plaques...

Some time before the last Best Homes contest, I got sick of seeing my awards in a straight line down my page, and decided to look for a way to move them. I know other people say they saw them differently than I did, but I wanted the page to look the same whether it was me or anybody else looking at them.

Today, I was asked for the first time, how I did it. Well, here it is:

Before starting, remember that by doing this you will also be covering up your edit link that appears just above the main content of the page. You'll have to use the "[edit page]" link at the top of the page now.

I started with a division, which I positioned to the exact spot on the page that I wanted it. Next I placed 2 more divisions within the first. These 2 divisions are the styled tables. Above these I added the CSS which tells the page what the table divisions should look like.

That was the easy part, from here on it was a matter of correcting issues with covering up the awards with a division.

The next thing you have to understand, is that when you place all your content in a division that is positioned, the left and right side of the page will collapse in on the middle section. To correct this, I added in a transparent spacer that was slightly wider than the division (see mycontent CSS) size I used. This will prevent the middle section from collapsing.

Next you'll need BG covers, which is basicly just your BG image or color placed in another division, and positioned over top of any unwanted stuff that is above the new table. I've used about 7 of these on my entrance. These MUST be place ABOVE the faux table in the code, or any overlapping will be on top of the faux table instead of under it. Also, it is best to use a solid BG for your page and these BG covers. A textured BG is very difficult to use this way, and still not be able to see seams. I had worked for weeks to get my textured BG to be seamless no matter where it was place.

Only a couple things left, and it's done. Now that we've got that stuff out of the way, add back in any of the main content that you previously had on your page, change any text and link colors, and also figure out where you want your award plaques to go at in the new table. For mine I used a regular HTML table with 3 columns so I could separate my awards my type.

Now that we've covered up our awards plaques, we'll need to go to the edit page to get the codes to place them back in. And yes, I do recommend putting them back in the page, as the awards are webrings, and you'll break the ring if you don't. This would be a Common Courtesy NO NO.

Go to the edit page, Right click, and view the source code. Each award plaque is marked at it's beginning by the following...
<!-- award -->

Copy everything below that from the 1st "a href" tag to the 2nd "/span" tag. Paste this into your table. Repeat this for every award you have.

Below is the entire code I used, just follow the directions above and you'll do fine.

______________________________________________

<!--Begin Transparent Spacer-->

<!--End Transparent Spacer-->

<!--Begin BG Covers-->
<!--Use this for BG image-->
<DIV style="position:absolute; left:385px; top:141px">
[image 000000 does not exist]
</div>


<!--or Use this for BG color-->
<DIV style="position:absolute; left:385px; top:141px; background-color: #00FF00; width: 100px; height: 100px;">
</div>
<!--End BG Covers-->




<!-- Begin Faux Table CSS-->
<style type="text/css"><!--
.outercontent { background-color: #C65229; border: 1px solid #000000; padding: 10px }
.mycontent { background-color: #ffffff; width: 400px; border: 1px solid #000000; padding: 0px }
--></style>
<!-- End Faux Table CSS-->


<!-- Begin Faux Table-->
<DIV style="position:absolute; left:260px; top:245px">
<div class="outercontent">
<div class="mycontent">

<!--Begin Main Content of Page-->

<!--End Main Content of Page-->

</div>
</div>
</div>
<!-- End Faux Table-->

______________________________________________

GoldFest V Contest Entries

How to move your Award Plaques...

Image Credits
Filpin Garmajon