Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool Best Way to Make Borders on Both Sides (100% Height)

    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
    Last edited by 07mackenzie; 07-08-2005 at 02:22 PM.

  • #2
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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]
    Attached Thumbnails Attached Thumbnails Best Way to Make Borders on Both Sides (100% Height)-body_bg.gif  
    --
    tom :)

  • #3
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply

  • #4
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    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...
    Last edited by jackson07; 07-08-2005 at 03:25 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •