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 6 of 6
  1. #1
    New Coder
    Join Date
    Apr 2011
    Location
    Raleigh, NC
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Ordered List Issue - Coming out horizontal

    I'm trying to add a normal (vertical) ordered list, but it seems that the CSS coding for the Unordered list for the Nav bar is making the Ordered list come out horizontal. I've tried different methods of ID's for the Ordered list, but nothing is helping. Any help would be greatly appreciated! Here is the coding:

    Code:
    h1 {font-family: Adobe Garamond Pro Bold; color:#610B0B;}
    
    hr {color:#000000; background-color:#000000; width:100%; height:4px;}
    
    h2
    {font-size: 1.2em;}
    
    h3
    {position: relative; top: -70px; left: 600px;}
    
    body {margin-left:120px; margin-right:120px; background-color: #4682b4; font-family: 
    
    Adobe Garamond Pro; color:#3B0B39}
    
    .inlinetext1 {text-align: center; margin-left: auto; margin-right: auto; font-size: 
    
    1.0em;}
    
    ul{list-style-type: none; margin-left: auto; margin-right: auto; width: 30em; 
    
    padding:4px; overflow:hidden;}
    
    li{float:left;}
    
    #list-nav a:link,#list-nav a:visited
    
    {width:110px; font-weight:regular; color:#000000; background-color:#C4106A; text-
    align: center; padding: 20px; text-decoration: none;}
    
    #list-nav a:hover 
    
    {background-color:#7A991A;}
    Code:
    <link rel="stylesheet" type="text/css" href="portfolio.css">
    
    </style>
    
    </head>
    
    <body>
    
    <h1><img src="windowspiratedversion.jpg" alt="logo" width="325" height="175"; 
    
    />Brett Ryan's Portfolio
    
    <hr>
    
    <ul id="list-nav">
    <li><a href="index.html">Home</a>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="graphics.html">Designs</a></li>
    <li><a href="#">Web Sites</a></li>
    <li><a href="resume.html">Resume</a></li>
    <li><a href="#">References</a></li>
    </ul>
    
    </h1>
    
    <h2><p>Welcome to my Professional Portfolio that I have created using purely XHTML 
    
    and CSS coding! While the site is still under continuing construction, I welcome you 
    
    to peruse the site to view graphics and other web sites I have created.</p>
    
    <p>My experience includes the following:</p>
    
    
    <ol>
    <li>XHTML</li>
    <li>CSS</li>
    <li>PHP</li>
    <li>ASP.NET</li>
    </ol>
    
    
    <p>I look forward to hearing from you soon!</p></h2>
    
    <h3><img src="bookcover.jpg" alt="bookcover" width="500" height="600" /></h3>
    
    <div class="inlinetext1">
    <footer>This site created by <em>Brett D. Ryan</em> using XHTML and CSS.</footer>
    </div>
    
    </body>
    
    </html>
    Obviously I don't have the experience I'm listing but I'm trying to get this done for a school assignment. Again, any help would be greatly appreciated!

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by dinoandmaya View Post
    I'm trying to add a normal (vertical) ordered list, but it seems that the CSS coding for the Unordered list for the Nav bar is making the Ordered list come out horizontal. I've tried different methods of ID's for the Ordered list, but nothing is helping. Any help would be greatly appreciated! Here is the coding:

    Code:
    h1 {font-family: Adobe Garamond Pro Bold; color:#610B0B;}
    
    hr {color:#000000; background-color:#000000; width:100%; height:4px;}
    
    h2
    {font-size: 1.2em;}
    
    h3
    {position: relative; top: -70px; left: 600px;}
    
    body {margin-left:120px; margin-right:120px; background-color: #4682b4; font-family: 
    
    Adobe Garamond Pro; color:#3B0B39}
    
    .inlinetext1 {text-align: center; margin-left: auto; margin-right: auto; font-size: 
    
    1.0em;}
    
    ul{list-style-type: none; margin-left: auto; margin-right: auto; width: 30em; 
    
    padding:4px; overflow:hidden;}
    
    li{float:left;}
    
    #list-nav a:link,#list-nav a:visited
    
    {width:110px; font-weight:regular; color:#000000; background-color:#C4106A; text-
    align: center; padding: 20px; text-decoration: none;}
    
    #list-nav a:hover 
    
    {background-color:#7A991A;}
    Code:
    <link rel="stylesheet" type="text/css" href="portfolio.css">
    
    </style>
    
    </head>
    
    <body>
    
    <h1><img src="windowspiratedversion.jpg" alt="logo" width="325" height="175"; 
    
    />Brett Ryan's Portfolio
    
    <hr>
    
    <ul id="list-nav">
    <li><a href="index.html">Home</a>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="graphics.html">Designs</a></li>
    <li><a href="#">Web Sites</a></li>
    <li><a href="resume.html">Resume</a></li>
    <li><a href="#">References</a></li>
    </ul>
    
    </h1>
    
    <h2><p>Welcome to my Professional Portfolio that I have created using purely XHTML 
    
    and CSS coding! While the site is still under continuing construction, I welcome you 
    
    to peruse the site to view graphics and other web sites I have created.</p>
    
    <p>My experience includes the following:</p>
    
    
    <ol>
    <li>XHTML</li>
    <li>CSS</li>
    <li>PHP</li>
    <li>ASP.NET</li>
    </ol>
    
    
    <p>I look forward to hearing from you soon!</p></h2>
    
    <h3><img src="bookcover.jpg" alt="bookcover" width="500" height="600" /></h3>
    
    <div class="inlinetext1">
    <footer>This site created by <em>Brett D. Ryan</em> using XHTML and CSS.</footer>
    </div>
    
    </body>
    
    </html>
    Obviously I don't have the experience I'm listing but I'm trying to get this done for a school assignment. Again, any help would be greatly appreciated!
    can you post a link to a test page? we are firebugholics here,
    validate first in case is not, please.

    best regards

  • #3
    New Coder
    Join Date
    Apr 2011
    Location
    Raleigh, NC
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hey OESXYL,

    Here is the text link as requested.

    http://dinoandmaya.aisites.com/fnd132/week3/index.html

  • #4
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by dinoandmaya View Post
    Hey OESXYL,

    Here is the text link as requested.

    http://dinoandmaya.aisites.com/fnd132/week3/index.html
    and this is the link to the validator:

    http://validator.w3.org/check?verbos...3%2Findex.html

    fix markup first, is hard to see what's wrong this way.

    you have in portofolio.css a declaration:
    Code:
    li { float: left }
    probably this is the main problem

    best regards

  • #5
    New Coder
    Join Date
    Apr 2011
    Location
    Raleigh, NC
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    The li {float: left} allows the unordered list for the navigation bar to stay horizontal. If I remove it, the nav bar then becomes vertical. I was hoping there was a code I could use in the CSS doc to separate one list from the other list. Any ideas?

  • #6
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by dinoandmaya View Post
    The li {float: left} allows the unordered list for the navigation bar to stay horizontal. If I remove it, the nav bar then becomes vertical. I was hoping there was a code I could use in the CSS doc to separate one list from the other list. Any ideas?
    yes, you can use a class for the horizontal ul.

    best regards


  •  

    Posting Permissions

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