Web Analytics Made Easy -
StatCounter HTML list problem - CodingForum

Announcement

Collapse
No announcement yet.

HTML list problem

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • HTML list problem

    hey, I'm having a really annoying problem, in a website I just cant get a list to show
    all I'm trying is

    Code:
    <ul>
    <li>one/li>
    <li>two</li>
    <li>three</li>
    </ul>
    (just simple so it will show)

    and if I put it in a blank HTML file its fine, in the website I'm working on...nothing, any ideas? its been bugging me for ages

    the full html for this page is as follows

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title> Portfolio</title>
    
    <link rel="stylesheet" type="text/css" href="styles.css">
    
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
      
    <script type="text/javascript" src="js/jquery.scrollTo.js"></script>
    
    
    </head>
    <body>
    <div id='content'>
    <section id="showreel" class="section">
    
    <ul id="nav">
    	<li><a class="active" href="#about">About</a></li>
    	<li><a href="#3D">3D</a></li>
    	<li><a href="#filming">Filming</a></li>
    	<li><a href="#animation">Animation</a></li>
    	<li><a href="#photography">Photography</a></li>
    	<li><a href="#showreel">Showreel</a></li>
    </ul> 
    
    <h1>MY TITLE HERE</h1>
    <center><img src="test.jpg" alt="Test View" style="padding:25pt;width:800px;height:600px;"></center>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    <p>hello world</p>
    </section>
    
    <section id="photography" class="section">
    <h2>Photography</h2>
    <div id='gallery'>
    <center>
    <img src="images/1_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/2_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/3_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/4_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/5_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/6_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/7_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/8_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/9_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/10_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/11_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/12_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/13_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/14_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/15_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/16_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    </center>
    </div>
    </section>
    
    <section id="animation" class="section">
    <h2>Animation</h2>
    <center>
    <img src="images/an_1.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/an_1.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/3_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/4_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/5_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/6_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/7_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/8_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/9_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/10_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/11_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/12_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/13_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/14_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/15_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/16_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    </center>
    </section>
    
    <section id="filming" class="section">
    <h2>Filming</h2>
    <center>
    <img src="images/fm_1.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/an_1.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/3_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/4_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/5_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/6_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/7_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/8_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/9_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/10_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/11_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/12_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/13_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/14_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/15_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/16_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    </center>
    </section>
    
    <section id="3D" class="section">
    <h2>3D</h2>
    <center>
    <img src="images/3d_1.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/an_1.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/3_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/4_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/5_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/6_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/7_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/8_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/9_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/10_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/11_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/12_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/13_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/14_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/15_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    <img src="images/16_fum.jpg" alt="Test View" style="padding:7pt;width:250px;height:200px;">
    </center>
    </section>
    
    <section id="about" class="section">
    <h2>About</h2>
    
    <ul>
    <li>one/li>
    <li>two</li>
    <li>three</li>
    </ul> 
    
    </section>
    </div>
    
    
    <script type="text/javascript">
    $(function(){
      $("#nav a").click(function(e){
        e.preventDefault();
        $('html,body').scrollTo(this.hash,this.hash); 
      });
    });
    </script>
    
    </body>
    </html>
    I know theres a lot of repeating I'm just trying to get the layout right.

  • #2
    Hey, I copied out your code and ran it in chrome, only thing showing up was that you haven't properly closed the <li> after "one". What do you mean "nothing" is showing up?
    D

    Comment


    • #3
      oh yeah, just noticed that, I changed it a lot probably just messed it up recently :P
      but still not working

      what I mean by nothing showing is in my "about" section is nothing...that list of one two three is not visible, as can be seen here
      Click image for larger version

Name:	problem.jpg
Views:	1
Size:	49.3 KB
ID:	2270497

      Comment


      • #4
        i have also tried putting it in different sections and no list will show anywhere on the site

        Comment


        • #5
          Hmmm. it's showing in my browser but I don't have the same assets and stylesheet as you. Perhaps you have some code hiding the <ul> in your stylesheet? Just working through the code bit by bit here.
          D

          Comment


          • #6
            Actually now that I think of it, do you have an explicit height on the div surrounding all of the images and the about section that prevents the information in the about area to be cut off?
            D

            Comment


            • #7
              AHHH! I feel a bit stupid :P

              I'm using a <ul> for my navigation which has stuff set in my CSS, right, thank you, I'm getting somewhere haha.

              my CSS doesn't have much at the moment. but it is this

              Code:
              #content {
              width: 75%;
              margin: auto;
              background-color: lightblue;
              }	
              
              #nav {
                  position: absolute;
                  right: 0px;
                  position: fixed;
              }
              
              ul {
                  list-style-type: none;
                  margin: 0;
                  padding: 0;
                  width: 200px;
                  height: 100%;
                  position: fixed;
                  overflow: auto;
              
              }
              
              li a {
                  display: block;
                  color: #000;
                  padding: 30% ;
                  text-decoration: none;
                  color: red;
                  height: 100%;
              }
              
              li a:hover {
                  color: #ffff00;
              }
              
              .active {
                  color: #00ff00;
              }
              
              body {
                  margin-left:30pt;
                  margin-right:200px;
              }
              now, I haven't done HTML in a long time so slowly re learning (was 2nd year of uni I did, now been left a few months so atleast 18 months)

              right, ill explain what I'm trying to do and maybe you can come up with a better solution (or maybe just a small fix?)

              what I want is the navigation down the right hand side, and fixed, this will probably be changed from text to images (buttons?)

              and for this list I'm trying to re make something I did in uni. where I have a title (the top of the list) and when you click it it expands showing the rest of the list.

              this is the site Robert Hardens Multimedia Portfolio. (could be taken down any time as hosted by uni but its working atm)

              at the bottom of the about page you will see Year 1 Multi media and Year one computer science, click either of these and it will expand, click on one of the newly shown parts and it will expand again, where clicking the same will collapse it.

              Comment


              • #8
                the colours I have in css are just seeing if it works none are important

                Comment


                • #9
                  Firstly, well done for keeping at it. That's the way we all learn. I've been doing this stuff for about 5 years but always learning new stuff.

                  Why not take a look at this link here: CSS Navigation Bar
                  That may help.

                  Also, if you're inclined try learning bootstrap - it can be really helpful and cool to use.

                  In relation to the Year 1 Multimedia and Year 2, try putting "cursor: pointer" into the CSS for the links. This will show the user that this can be clicked on whereas now a user wouldn't know there's anything within it.

                  Comment


                  • #10
                    thanks :P
                    the navigation bar is fine its just using a <ul> stops me using it else where.

                    bootstrap looks interesting, an easier way of making it responsive, may have a play with it.

                    and that's a good idea for the links, that site was not exactly how I wanted due to deadlines :P but this time I'm free to spend as long as I like playing haha

                    Comment

                    Working...
                    X