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
    New Coder
    Join Date
    Nov 2012
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Anything that I add does not show up??

    Just trying to add another element and it will not show up. It must be something that I simply cannot see. I tried adjusting the z-index to see if that was the case but the element that I am trying to add (#newsbar1) will not show up. Can anyone spot any errors? Thanks for your help

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Revision 2</title>
    <link rel="icon" type="image/ico" href="cool.ico"/>
    
    <style type="text/css"> 
    	body{
    	 width:90%;margin:auto;min-width:600px;max-width:5000px;
     		background-image: url('background3.jpg')
    }
    	#header {
    		position:absolute;
    }
    	#logo {
    		position:absolute;
    		top: -110px;
    		left: 40px;
    		z-index: 2;
    }
    	#mainContent {
    		position:absolute;
    		top: 130px;
    		width: 915px;
    		height: 800px;
    		background-color: #CCF;
    		border-bottom-left-radius: 10px;
    		border-bottom-right-radius: 10px;
    		overflow: hidden;
    		border-top-right-radius: 10px;
    		border-top-left-radius: 10px;
    		box-shadow: 0px 0px  5px 1px rgba(0,0,0,.4);
    		opacity: .9;
    		
    }
    	#content2 {
    		position:absolute;
    		top: 210px;
    		width: 600px;
    		height: 694px;
    		left: 110px;
    		background-color: white;
    		border-bottom-left-radius: 10px;
    		border-bottom-right-radius: 10px;
    		overflow: hidden;
    		border-top-right-radius: 10px;
    		border-top-left-radius: 10px;
    		box-shadow: 0px 0px  5px 1px rgba(0,0,0,.4);
    		opacity: .5;
    		
    }
    	#mainNavigationBar {
    		position:absolute;
    		top: 100px;
    		width: 913px;
    		height: 45px;
    		background-color: #CCF;
    		overflow: hidden;
    		border: solid 1px white;
    		box-shadow: 0px 0px  5px 1px rgba(0,0,0,.4);
    		z-index: 3;
    }
    	#mainNavigationBar a {
    		color: #666;
    		font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    		font-size: 14px;
    		text-decoration: none;
    		display: inline-block;
    		line-height: 45px;
    		padding-left: 10px;
    		padding-right: 10px;
    		
    }
    	#mainNavigationBar a:hover {
    		color: white;
    		background-color: #F96;
    		opacity: .8;
    }
    	#loginreg {
    		position:absolute;
    		top: 103px;
    		left: 770px;
    		width: 170px;
    		height: 800px;
    		background-color: #F96;
    		overflow: hidden;
    		opacity: .8;
    		text-align:center;
    		border-top-right-radius: 10px;
    		border-top-left-radius: 10px;
    		border-bottom-left-radius: 10px;
    		border-bottom-right-radius: 10px;
    		box-shadow: 0px 0px  5px 1px rgba(0,0,0,.4);
    		z-index: 4;
    }
    	#loginreg a {
    		color: #666;
    		font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    		font-size: 14px;
    		text-decoration: none;
    		display: inline-block;
    		line-height: 45px;
    		padding-left: 10px;
    		padding-top: -10px;
    		padding-right: 10px;
    }
    	#loginreg a:hover {
    		color: #333;
    }
    	#loginattachedbar {
    		width: 720px;
    		height: 40px;
    		position:absolute;
    		background-color: #F96;
    		opacity: .8;
    		top: 155px;
    		border-top-left-radius: 10px;
    		border-bottom-left-radius: 10px;
    		box-shadow: 0px 0px  5px 1px rgba(0,0,0,.4);
    }
    	#footer {
    		width: 1006px;
    		height: 100px;
    		position: absolute;
    		background-color: #333;
    		opacity: .8;
    		top: 1000px;
    		box-shadow: 0px 0px  5px 1px rgba(0,0,0,.4);
    		left: 0px;
    }
    	#copyright {
    		position: absolute;
    		bottom: 0;
    		right: 10px;
    		font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    		font-size: 12px;
    		color: white;
    }
    	#twitterbird {
    		position: absolute;
    		left: 900px;
    		top: 65px;
    		z-index:5;
    }
    
    <!-- News headers -->
    	#newsbar1 {
    		width: 500px;
    		height: 30px;
    		position: absolute;
    		background-color: #F96;
    		opacity: .8;
    		top: 200px;
    		box-shadow: 0px 0px  5px 1px rgba(0,0,0,.4);
    		z-index: 20;
    }
    	</style>
    </head>
    
    <!------------------------------------------------------------------------>
    
    <body>
    	<div id="wrapper"> <!--Wrapper containing all website elements-->
        	<div id="header">
    			<a href="#"><img src="header3.jpg"</src></a>
        </div>
        	<div id="logo">
    			<a href="#"><img src="logo.png"</src></a>
    	</div>
        	<div id="mainContent"> <!--This is the main box of the site-->
        </div>
        	<div id="mainNavigationBar">
            	<a href="homepage.html">Home</a>
                <a href="underconstruction.html">Advertising</a>
                <a href="underconstruction.html">Business</a>
                <a href="underconstruction.html">Gifts</a>
                <a href="underconstruction.html">Graphics</a>
                <a href="underconstruction.html">Music</a>
                <a href="underconstruction.html">Other</a>
                <a href="underconstruction.html">Programming</a>
                <a href="underconstruction.html">Technology</a>
        </div>
        	<div id="loginreg">
                <a href="#">Log In</a>
                <a href="#">Register</a>
        </div>
        	<div id="loginattachedbar"> <!--The bar connected to the login drop down-->
        </div>
            <div id="twitterbird">
                 <img src="twitter.png" </src>
        </div>
        	<div id="content2">
            	<div id="newsbar1">
        						</div>
           </div>
    </div>
        	<div id="footer">
            	<div id="copyright">
                	Copyright © Josh Radford
                	</div>
            	
        </div>
        
        
        
          
        
    </div> <!--Final wrapper div-->
        
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Aug 2012
    Posts
    145
    Thanks
    0
    Thanked 27 Times in 27 Posts
    Not sure if this will help, but when i removed this

    <!-- News headers -->

    i think for css comments are:
    /*-- News headers -- */

    the css poppedup
    Last edited by Brandnew; 11-20-2012 at 11:23 PM. Reason: spelling
    1 Corinthians 15:3-4 / Ephesians 2:8-9 - What or Who are you living for? Jesus is returning very soon

  • Users who have thanked Brandnew for this post:

    Xellic (11-21-2012)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Xellic,
    Brandnew is right, comments like <!--comment--> are for your markup only. CSS comments look like this - /*comment*/
    https://support.bigcommerce.com/ques...SS+comments%3F

    There should be nothing between the head and the body of your document. Remove this bit highlighted in red -
    Code:
    	</style>
    </head>
    
    <!------------------------------------------------------------------------>
    
    <body>
    	<div id="wrapper"> <!--Wrapper containing all website elements-->
        	<div id="hea
    The validators are a quick way to find these kinds of mistakes. See the links about validation in my signature line.
    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

  • Users who have thanked Excavator for this post:

    Xellic (11-21-2012)


  •  

    Posting Permissions

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