13 replies [Last post]
MIGhunter
Offline
Regular
Indiana
Last seen: 10 years 15 weeks ago
Indiana
Timezone: GMT-4
Joined: 2007-12-22
Posts: 37
Points: 3

I'm trying to set up an existing site with an image that surrounds the whole page. The css for the site looks like this:

form { display: inline; }
img { vertical-align: middle; border: 0px; }
 
BODY { font-family: {T_FONTFACE1}; font-size: {T_FONTSIZE2}px; color: #{T_FONTCOLOR1}; margin-left: 1%; margin-right: 1%; margin-top: 0%; background-color: #{T_BODY_BACKGROUND}; }
TABLE { border-top: {T_TABLE_BORDER_WIDTH}px; border-right: {T_TABLE_BORDER_WIDTH}px; border-bottom: {T_TABLE_BORDER_WIDTH}px; border-left: {T_TABLE_BORDER_WIDTH}px; border-color: #{T_TABLE_BORDER_COLOR}; border-style: {T_TABLE_BORDER_STYLE}; }
TABLE.borderless { border-style: none; }
 
th { font-weight: bold; color: #{T_HEADER_LINK}; background-color: #{T_TH_COLOR1}; white-space: nowrap; }
tr, td { font-family: {T_FONTFACE1}; font-size: {T_FONTSIZE2}px; color: #{T_FONTCOLOR1}; }
 
a:link, a:visited, a:active { text-decoration: {T_BODY_LINK_STYLE}; color: #{T_BODY_LINK}; }
a:hover { text-decoration: {T_BODY_HLINK_STYLE}; color: #{T_BODY_HLINK}; }
 
th a:link, th a:visited, th a:active { text-decoration: {T_HEADER_LINK_STYLE}; color: #{T_HEADER_LINK}; font-weight: bold; }
th a:hover { text-decoration: {T_HEADER_HLINK_STYLE}; color: #{T_HEADER_HLINK}; font-weight: bold; }
 
th.smalltitle { font-weight: bold; color: #{T_HEADER_LINK}; background-color: #{T_TH_COLOR1}; white-space: nowrap; font-size: {T_FONTSIZE1}px; }
th.smalltitle a:link, th.smalltitle a:visited, th.smalltitle a:active { text-decoration: {T_HEADER_LINK_STYLE}; color: #{T_HEADER_LINK}; font-weight: bold; font-size: {T_FONTSIZE1}px; }
th.smalltitle a:hover { color: #{T_HEADER_HLINK}; font-weight: bold; font-size: {T_FONTSIZE1}px; text-decoration: {T_HEADER_HLINK_STYLE}; }
 
th.footer { color: #{T_HEADER_LINK}; text-align: right; background-color: #{T_TH_COLOR1}; white-space: nowrap; font-weight: normal; }
th.footer a:link, th.footer a:visited, th.footer a:active { color: #{T_HEADER_LINK}; text-decoration: {T_HEADER_LINK_STYLE};  font-weight: normal; }
th.footer a:hover { color: #{T_HEADER_HLINK}; text-decoration: {T_HEADER_HLINK_STYLE}; font-weight: normal; }
 
.row1 { background-color: #{T_TR_COLOR1}; }
.row2 { background-color: #{T_TR_COLOR2}; }
 
.mytable tr:hover { background-color: gray; }
 
.quote1 { background-color: #{T_TR_COLOR2}; font-size: {T_FONTSIZE2}px; line-height: 125%; }
.quote2 { background-color: #{T_TR_COLOR1}; font-size: {T_FONTSIZE2}px; line-height: 125%; }
 
.positive { color: #{T_FONTCOLOR_POS}; }
.negative { color: #{T_FONTCOLOR_NEG}; }
.neutral  { color: #{T_FONTCOLOR1}; }
 
.maintitle { font-size: 18px; font-weight: bold; color: #{T_FONTCOLOR2}; }
.subtitle  { font-size: 12px; color: #{T_FONTCOLOR2}; }
 
.menu { font-size: {T_FONTSIZE1}px; color: #{T_FONTCOLOR2}; }
.menu a:link, .menu a:active, .menu a:visited { text-decoration: none; font-size: {T_FONTSIZE1}px; color: #{T_FONTCOLOR2}; }
.menu a:hover { text-decoration: underline; font-size: {T_FONTSIZE1}px; color: #{T_HEADER_HLINK}; }
 
.small { font-size: {T_FONTSIZE1}px; }
 
.copy { font-size: {T_FONTSIZE1}px; color: #{T_FONTCOLOR2}; }
.copy a:link, .copy a:active, .copy a:visited { font-size: {T_FONTSIZE1}px; color: #{T_FONTCOLOR2}; }
.copy a:hover { font-size: {T_FONTSIZE1}px; color: #{T_HEADER_HLINK}; }
 
.input { font-family: {T_FONTFACE2}; font-size: {T_FONTSIZE1}px; color: #{T_FONTCOLOR3}; background-color: #{T_INPUT_BACKGROUND}; 
         border-top: {T_INPUT_BORDER_WIDTH}px; border-right: {T_INPUT_BORDER_WIDTH}px; border-bottom: {T_INPUT_BORDER_WIDTH}px; border-left: {T_INPUT_BORDER_WIDTH}px; border-color: #{T_INPUT_BORDER_COLOR}; border-style: {T_INPUT_BORDER_STYLE}; }
 
input.helpline1 { background-color: #{T_TR_COLOR1}; border-style: none; }
input.helpline2 { background-color: #{T_TR_COLOR2}; border-style: none; }
 
input.mainoption { font-family: {T_FONTFACE2}; font-size: {T_FONTSIZE1}px; font-weight: bold; color: #{T_HEADER_LINK}; background-color: #{T_TH_COLOR1}; border-top: {T_INPUT_BORDER_WIDTH}px;
                   border-right: {T_INPUT_BORDER_WIDTH}px; border-bottom: {T_INPUT_BORDER_WIDTH}px; border-left: {T_INPUT_BORDER_WIDTH}px; border-color: #{T_HEADER_LINK}; border-style: {T_INPUT_BORDER_STYLE}; }
input.liteoption { font-family: {T_FONTFACE2}; font-size: {T_FONTSIZE1}px; font-weight: normal; color: #{T_HEADER_LINK}; background-color: #{T_TH_COLOR1}; border-top: {T_INPUT_BORDER_WIDTH}px;
                   border-right: {T_INPUT_BORDER_WIDTH}px; border-bottom: {T_INPUT_BORDER_WIDTH}px; border-left: {T_INPUT_BORDER_WIDTH}px; border-color: #{T_HEADER_LINK}; border-style: {T_INPUT_BORDER_STYLE}; }

The problem is that I can't figure out how to make the div tags work for (I added this to the css):
.t {background: url(./templates/default/images/gray.gif) 0 0 repeat-x;}
then on my page I put:
<div class="t">
</div>

The problem with this is I can't figure out how to get the rest of the page moved down so that it isn't over laping. Here is a link to the site. http://migcfdesign.com/einherjartues/listmembers.php?s=

MIGhunter
Offline
Regular
Indiana
Last seen: 10 years 15 weeks ago
Indiana
Timezone: GMT-4
Joined: 2007-12-22
Posts: 37
Points: 3

Any help?

Any help?

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 9 years 44 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Couple things.. 1) I've

Couple things..

1) I've played FFXI since NA release.. I saw Einherjar in the name of the page you linked and had to check it out.^^

2) The page that you linked.. You are trying to get a border around that entire existing page right? How are you trying to do this? Are you placing the current page inside of a large div with that grey border image tiled over the entire thing, or are you trying to get a horizontal div along the top edge, that contains the picture only tiled horizontally?

For whatever reason, I'm a little confused with what you are trying to do, and how you are trying to go about doing it.

I'll have to take a look at the code a bit better.. possibly when I get home, as it's easier without my manager looking over my shoulder lol. Maybe I can answer my question once I look at it more in depth.

EDIT:
One thing I see right away is that your

is before the tag. It should be after it. Not sure if that will solve your problem offhand, but it can't hurt to place it inside the body tag just incase.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 5 years 2 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

There are 161 errors in the

There are 161 errors in the html. I'm sure some of this frustration is seeding from here.

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 9 years 44 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

The errors sure aren't

The errors sure aren't helping any.

I did figure out how to get the border up top though as long as you are trying to just have a horizontal strip accross the top..

As of right now, you have the entire page nested in the

.. remove the

at the end of the page, and paste it back in directly after you start the div.

<div class="t"></div>

Then, you need to add width and height to your CSS line:

.t { width: 100%; height: 25px; background: url(./templates/default/images/gray.gif) 0 0 repeat-x;}

I set the height to 25px because I can't remember the height of the background image offhand. It was either that or 24px.

When you view that, you should see a 24/25px horizontal strip along the top of the page, with everything else placed under it.

You might have to mess with some numbers, add some code, etc, but is that what you wanted to do?

MIGhunter
Offline
Regular
Indiana
Last seen: 10 years 15 weeks ago
Indiana
Timezone: GMT-4
Joined: 2007-12-22
Posts: 37
Points: 3

What I'm trying to

What I'm trying to accomplish is something like this: http://www.isarelhaz.de/dkp/viewnews.php

Only difference is that I want it to be aligned along the top, bottom, right and left of the screen.

Oh, ya, I havne't checked for errors but I will get a bunch of them cause CF and PHP show up as errors. Like php use /> and you can't do that in html.

@Titan793: What server are you on? I play on Leviathan. Been playing since ps2 release. Been on pc for a while. I use coldfusion for my main page: botdls.com. The eqdkp I just use to keep track of points.

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 9 years 44 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Hmm.. I'm not sure that I

Hmm.. I'm not sure that I would be the best person to help with this one. I don't usually make a lot of sites that stretch in width, so the technique that I use for almost all of my websites won't work here lol. I think you can use CSS to set borders like you are trying to do, but I'm not sure exactly how you would go about doing it.

If you have a 25x25 image that you want as the entire border, the top and bottom should be easy (just add a div on the top and bottom with that as the background, that stretches 100%).. as far as the sides.. I would probably try floating divs around so that you have a left border and a right border div, then setting the background to repeat-y .. but that's probably not the best method.

I'm sure I'll have some spare time at work today, so I'll try to read up on some techniques and see if I can come up with the most commonly used method.

Also, I've been on Fenrir since launch. I play on pc, but do have it on ps2 as well.. though I only use that to run my 2nd account around and PL myself sometimes.^^

MIGhunter
Offline
Regular
Indiana
Last seen: 10 years 15 weeks ago
Indiana
Timezone: GMT-4
Joined: 2007-12-22
Posts: 37
Points: 3

You know, setting the top

You know, setting the top div tags together works fine. However, setting the bottom tag doesn't. For some reason, even though it shows the div tag at the bottom in the source file, it is inside of the table lines. http://migcfdesign.com/einherjartues/listmembers.php?s=

I played with it and can't get it on the outside no matter what I do.

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 9 years 44 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

I think the issue is that

I think the issue is that there are some parts of the table with no closing tags, so it is displaying like it is still inside the table.

I'm not going to sort through all that to make sure each tag has a close (would if I was at home.. too hard to do here at work), but Firebug added a bunch at the end, and it showed your div inside the table closing tags.

Try changing the end coding on the page to this:

<!-- 
    If you use this software and find it to be useful, we ask that you
    retain the copyright notice below.  While not required for free use,
    it will help build interest in the EQdkp project.
//-->
<center><span class="copy">Powered by <a href="http://eqdkp.com/" target="_new" class="copy">EQdkp</a> 1.3.2<br>© 2003 The EQdkp Project Team</span></center>
<br>
 
</td></tr></tbody></table>
<div class="borderbottom"></div>
</body>
</html>

Let me know if that works!

MIGhunter
Offline
Regular
Indiana
Last seen: 10 years 15 weeks ago
Indiana
Timezone: GMT-4
Joined: 2007-12-22
Posts: 37
Points: 3

Ya, I'll try. The problem

Ya, I'll try. The problem is that it's a php construct so there are 3 files and they use include for them. So, I'll have to figure out why the div tags aren't matching up.

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 9 years 44 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Yea, that could make it a

Yea, that could make it a bit tougher.. I know that Firebug added in the:

</td></tr></tbody></table>

in the spot that I posted above. I don't think it added any other closing tags anywhere, and that popped everything into place.

Let me know how you turn out with this!

MIGhunter
Offline
Regular
Indiana
Last seen: 10 years 15 weeks ago
Indiana
Timezone: GMT-4
Joined: 2007-12-22
Posts: 37
Points: 3

Been busy with other

Been busy with other projects. If you look at it after I did what you said, I get this: http://www.botdls.com/einherjartues/listmembers.php?s=

It still isn't going all the way from left to right. See how the bottom image is still inside that one brown table padding? Man, this perplexes me.

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 9 years 44 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

MIGhunter wrote:Been busy

MIGhunter wrote:

Been busy with other projects. If you look at it after I did what you said, I get this: http://www.botdls.com/einherjartues/listmembers.php?s=

It still isn't going all the way from left to right. See how the bottom image is still inside that one brown table padding? Man, this perplexes me.

By the "bottom image" do you mean the bottom border?

If so, it actually isn't in the table. Add some top margin to the bottom border div and it will pull away so you can see what's going on better. It isn't actually in the table, it just looks like it is.

Is that what you mean? If not, I might need a screenshot of what you're talking about, because I'm not 100% sure what image you're talking about.

MIGhunter
Offline
Regular
Indiana
Last seen: 10 years 15 weeks ago
Indiana
Timezone: GMT-4
Joined: 2007-12-22
Posts: 37
Points: 3

Nope, you are right. I

Nope, you are right. I added some p and br elements to shift it down the page and it's good. Now, I have to figure out how to do the left and right sides.