...

View Full Version : Anything that I add does not show up??



Xellic
11-20-2012, 09:58 PM
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 :)


<!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>

Brandnew
11-20-2012, 11:16 PM
Not sure if this will help, but when i removed this

<!-- News headers -->

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

the css poppedup

Excavator
11-20-2012, 11:46 PM
Hello Xellic,
Brandnew is right, comments like <!--comment--> are for your markup only. CSS comments look like this - /*comment*/
https://support.bigcommerce.com/questions/1233/What+are+HTML%7B47%7DCSS+comments%3F

There should be nothing between the head and the body of your document. Remove this bit highlighted in red -

</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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum