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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Apr 2008
    Posts
    257
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Splash Page help

    Hey guys,

    I'm trying to make a splash page for my Twilight: New Moon Chat website, here

    As you can see, I have a picture and some text on it saying Enter Chat

    would there be a better way to have the background picture blend in?

    Also, how can I make the Enter Chat text become a Link?

    How would I draw coords with a width that changes?

    thanks!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    Hello Nblufire12,
    You have conflicting CSS in there. Try it like this -
    Code:
    body {
    			background: url(images/bg.jpg) #000 no-repeat top center fixed; 
    			text-align:center;
    		}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    Your link will need to be relative to that background image. The easiest way to do that would be to put the image in a container the same size.
    Try it like this -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body {
    	background: #000;
    	text-align:center;
    }
    #wrap {
    	height: 768px;
    	width: 1024px;
    	margin: 0 auto;
    	background: url(images/bg.jpg); 
    	position: relative;
    }
    #wrap a {
    	height: 50px;
    	width: 250px;
    	display: block;
    	position: absolute;
    	top: 250px;
    	left: 65px;
    	background: #f00; /*remove this color*/
    } 
    </style>
    </head>
    <body>
        <div id="wrap">
        	<a href="http://newmoonchat.com/forum/"></a>
        <!--end wrap--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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