Ordered List Issue - Coming out horizontal

dinoandmaya

04-22-2011, 09:53 PM

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:

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;}

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

oesxyl

04-22-2011, 10:01 PM

dinoandmaya

04-22-2011, 10:42 PM

Hey OESXYL,

Here is the text link as requested.

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

oesxyl

04-22-2011, 10:50 PM

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?verbose=1&uri=http%3A%2F%2Fdinoandmaya.aisites.com%2Ffnd132%2Fweek3%2Findex.html

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

you have in portofolio.css a declaration:

li { float: left }

probably this is the main problem

best regards

dinoandmaya

04-22-2011, 11:04 PM

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?

oesxyl

04-22-2011, 11:26 PM