www.webdeveloper.com
Results 1 to 2 of 2

Thread: Div box not showing up

  1. #1
    Join Date
    Nov 2005
    Posts
    10

    Div box not showing up

    Hello,

    Having problems getting one of my div id's to show up. The one particular div-id I cannot get to work, or show up on my page is the following

    <div id="news">
    <ul>
    <li><img src="images/shire_42.jpg"></li>
    <li><img src="images/shire_49.jpg"></li>
    </ul>
    </div>

    with the following style:

    #news {
    postition: absolute;
    top: 433px;
    left: 42px;
    width: 100%;
    height: 100%;
    }
    #news ul {
    list-style-type: none;
    }
    #news li {
    display: block;
    margin: 0%;
    padding: 0%;
    width: auto;
    font-size: 50%;
    line-height: 50%;
    }

    What am I doing wrong. What is the reason as to why this particular div box is not showing up?

    Thx in advance.


    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>
    <title>Test</title>
    <style type="text/css">
    
    #container {
      position:relative;
      margin: auto;
      width: 860px;
      height: 950px;
    }
    #banner {
      position: absolute;
      top: 0px;
      width: 860px;
      height: 100%;
    }
    #leftbor { 
      position: absolute;
      background-image: url('images/shire_02.jpg');
      background-repeat: repeat-y;
      top: 150px;
      height: 100%;
    }
    #rightbor {
      position: absolute;
      background-image: url('images/shire_11.jpg');
      background-repeat: repeat-y;
      top: 150px;
      left: 830px;
      height: 100%;
    }
    #navbar {
      position: absolute;
      left: 30px; 
      top: 150px;
      height: 33px;
      font-size: .9em;
      margin: 0;
      width: 100%;
    }
    #navbar ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
      font-family: verdana, arial, sanf-serif;
      font-size: 14px;
      height: 33px;
    }
    #navbar li {
      width: 100px;
      height: 31px;
      float: left;
      list-style-type: none;
      padding: 0;
    }
    #navbar a {
      display: block;
      padding: 10px 10px 5px 22px;
      background-image: url(images/shire_03.jpg);
      background-repeat: no-repeat;
      background-position: 0% 50%;
    }
    #navbar a:link, #navbar a:active, #navbar a:visited {
      color: #cccccc;
      text-decoration: none;
    }
    #navbar a:hover, #navbar a:active {
      background-image: url('images/shire_03_over.jpg');
      background-repeat: no-repeat;
      background-position: 0% 50%;
    }
    #newsback {
      position: absolute;
      background-color: #333333;
      top: 183px;
      left: 30px;
      width: 800px;
      height: 100%;
    }
    #newsgroup1 {
      position: absolute;
      top: 190px;
      left: 42px;
    }
    #newsgroup2 {
      position: absolute;
      top: 190px;
      left: 306px;
    }
    #newsgroup3 {
      position: absolute;
      top: 190px;
      left: 570px;
    }
    #newsgroup1 ul,
    #newsgroup2 ul,
    #newsgroup3 ul {
      display: block;
      margin: 0%;
      padding: 0%;
    }
    #newsgroup1 li,
    #newsgroup2 li,
    #newsgroup3 li {
      display: block;
      margin: 0%;
      padding: 0%;
      width: auto;
      font-size: 50%;
      line-height: 50%;
    }
    #main {
      position: absolute;
      top: 400px;
      left: 42px;
      width: 780px;
      height: 100%;
    }
    #news {
      postition: absolute;
      top: 433px;
      left: 42px;
      width: 100%;
      height: 100%;
    }
    #news ul {
      list-style-type: none;
    }
    #news li {
      display: block;
      margin: 0%;
      padding: 0%;
      width: auto;
      font-size: 50%;
      line-height: 50%;
    }
    #mainbottom {
      position: absolute;
      top: 800px;
      left: 42px;
      width: 100%;
    }
      
    </style>
    </head>
    <body bgcolor="#000000" text="#FF0000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    	<div id="container">
    		<div id="banner"><img src="images/shire_01.jpg"></div>
    		<div id="leftbor"><img src="images/shire_02.jpg"></div>
    		<div id="navbar">
    			<ul>
    				<li><a href="#">Home</a></li>
    				<li><a href="#">Forums</a></li>
    				<li><a href="#">Stats</a></li>
    				<li><a href="#">Server</a></li>
    				<li><a href="#">Members</a></li>
    				<li><a href="#">Rules</a></li>
    				<li><a href="#">Files</a></li>
    				<li><a href="#">Support</a></li>
    			</ul>
    		</div>
    		<div id="rightbor"><img src="images/shire_11.jpg"></div>
    		<div id="newsback"></div>
    		<div id="newsgroup1">
    			<ul>
    				<li><img src="images/shire_13.jpg"></li>
    				<li><img src="images/shire_19.jpg"></li>
    				<li><img src="images/shire_22.jpg"></li>
    				<li><img src="images/shire_22.jpg"></li>
    				<li><img src="images/shire_22.jpg"></li>
    				<li><img src="images/shire_22.jpg"></li>
    				<li><img src="images/shire_34.jpg"></li>
    			</ul>
                    </div>
    		<div id="newsgroup2">
    			<ul>
    				<li><img src="images/shire_15.jpg"></li>
    				<li><img src="images/shire_19.jpg"></li>
    				<li><img src="images/shire_22.jpg"></li>
    				<li><img src="images/shire_22.jpg"></li>
    				<li><img src="images/shire_22.jpg"></li>
    				<li><img src="images/shire_22.jpg"></li>
    				<li><img src="images/shire_34.jpg"></li>
    			</ul>
                    </div>
    		<div id="newsgroup3">
    			<ul>
    				<li><img src="images/shire_17.jpg"></li>
    				<li><img src="images/shire_19.jpg"></li>
    				<li><img src="images/shire_22.jpg"></li>
    				<li><img src="images/shire_22.jpg"></li>
    				<li><img src="images/shire_22.jpg"></li>
    				<li><img src="images/shire_22.jpg"></li>
    				<li><img src="images/shire_34.jpg"></li>
    			</ul>
                    </div>
    		<div id="main"><img src="images/shire_39.jpg"></div>
    		<div id="news">
    			<ul>
    				<li><img src="images/shire_42.jpg"></li>
    				<li><img src="images/shire_49.jpg"></li>
    			</ul>
    	 	</div>
    		<div id="mainbottom"><img src="images/shire_59.jpg"></div>
    	</div>
    </body>
    </html>

  2. #2
    Join Date
    Dec 2005
    Location
    FL, USA
    Posts
    265
    I don't think it's the div you cannot show, it's most likely the list-posts you are having problems with. Try typing display: "none" or remove that line!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles