...

View Full Version : Best Way to Make Borders on Both Sides (100% Height)



07mackenzie
07-08-2005, 02:19 PM
Alright, I've given up on divs because they WONT stretch the length of the full page as borders (only the browser height), no matter WHAT i do!.

I have two images:
http://myfanfic.com/leftborder.gif
http://myfanfic.com/rightborder.gif

(the left goes on the left and the right goes on the right, they repeat vertically). My problem is that no matter what i do, i cannot make them keep going as borders for the FULL 100%. I can do ONE by making it a background, but then the right border can't be made...

Should I use tables or something?

Please help!

Thanks!

PS: My site is at http://myfanfic.com

austint01
07-08-2005, 02:24 PM
try this: ill upload the bg image


[code]
html,body {
height:100%;
margin:0px;
padding:0px;
background: #e5e5e5 url(../images/body_bg.gif) repeat-y center top;
font-family: Trebuchet MS;
font-size: 10pt;
}

#container {
position:relative;
height:100%;
margin: 0 auto;
width: 720px;
border-left: 1px solid #000;
border-right: 1px solid #000;
background: #fff;
}

* html #container {
height:100%;
}
[code]

07mackenzie
07-08-2005, 02:30 PM
Thanks for the reply :)

jackson07
07-08-2005, 03:03 PM
Sorry... I had to change my username: it kept telling me I had the wrong password so I tried email new password and even with that password it said i had the wrong one... hmm

anyways:, that image that you gave me #1: stretches the image, doesn't repeat it and #2: is way too small (check out http://myfanfic.com to see what i mean). If a user resizes the window, a set width for the background image wont work.


FONT
{
FONT-FAMILY: Verdana,Helvetica;
FONT-SIZE: 12px
}

TD
{
FONT-FAMILY: Verdana,Helvetica;
FONT-SIZE: 12px
}


#container {
position:relative;
height:100%;
margin: 0 auto;
width: 720px;
border-left: 1px solid #000;
border-right: 1px solid #000;
background: #fff;
}


html,body {
margin:0;
padding:0;
background: #FFFFFF url(http://myfanfic.com/body_bg.gif) repeat-y center top;


}

#scroll {
position:absolute;
top:0;
bottom:-0.1px;
width:1em;
z-index:-1;
}






BODY
{
FONT-FAMILY: Verdana,Helvetica;
FONT-SIZE: 12px;
scrollbar-3dlight-color:#CCCCCC;
scrollbar-arrow-color:#000000;
scrollbar-base-color:#666666;
scrollbar-darkshadow-color:#000000;
scrollbar-face-color:#666666;

scrollbar-highlight-color:#CCCCCC;

scrollbar-shadow-color:#000000}

P
{
FONT-FAMILY: Verdana,Helvetica;
FONT-SIZE: 12px
}

DIV
{
FONT-FAMILY: Verdana,Helvetica;
FONT-SIZE: 12px
}

INPUT
{
FONT-FAMILY: Verdana,Helvetica;
FONT-SIZE: 12px
}

TEXTAREA
{
FONT-FAMILY: Verdana,Helvetica;
FONT-SIZE: 12px
}

FORM
{
FONT-FAMILY: Verdana,Helvetica;
FONT-SIZE: 12px;
color: black
}

INPUT
{
background-color: #FFFFFF;
color: black;
font-family: arial, verdana, ms sans serif;
font-weight: normal;
font-size: 12px
}

TEXTAREA
{
background-color: #FFFFFF;
color: black;
font-family: arial, verdana, ms sans serif;
font-size: 12px;
font-weight: normal
}

SELECT
{
background-color: #FFFFFF;
color: black;
font-family: arial, verdana, ms sans serif;
font-size: 12px;
font-weight: normal;
scrollbar-3dlight-color:#CCCCCC;
scrollbar-arrow-color:#000000;
scrollbar-base-color:#666666;
scrollbar-darkshadow-color:#000000;
scrollbar-face-color:#666666;
scrollbar-highlight-color:#CCCCCC;
scrollbar-shadow-color:#000000}

HR
{
COLOR: #FFFFFF
}

.tblborder
{
border-left:1px solid BACKGROUND; border-right:1px solid A; border-top:1px solid #000000; border-bottom:1px solid link; none; FONT-SIZE: 12px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: none}
A:active {BACKGROUND: none; COLOR: #0000FF; FONT-SIZE: 12px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline}
A:visited {BACKGROUND: none; COLOR: #0000FF; FONT-SIZE: 12px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline}
A:hover {BACKGROUND: none; COLOR: #666666; FONT-SIZE: 12px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline}

A.menu:link {BACKGROUND: none; COLOR: #0000FF; FONT-SIZE: 12px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline}
A.menu:active {BACKGROUND: none; COLOR: #0000FF; FONT-SIZE: 12px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline}
A.menu:visited {BACKGROUND: none; COLOR: #0000FF; FONT-SIZE: 12px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline}
A.menu:hover {BACKGROUND: none; COLOR: #666666; FONT-SIZE: 12px; FONT-FAMILY: Verdana, Helvetica; TEXT-DECORATION: underline}

.bigfont {BACKGROUND: none; FONT-SIZE: 16px; font-weight: bold; FONT-FAMILY: Verdana, Helvetica}

.news {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 12px; FONT-FAMILY: Verdana, Helvetica}



and lastly, is it possible to make the background image show ABOVE everything else? otherwise as a border, it will turn out looking like it's missing parts when it goes under the tables near the edge...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum