...

View Full Version : Ordered List Issue - Coming out horizontal



dinoandmaya
04-22-2011, 10: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, 11:01 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!
can you post a link to a test page? we are firebugholics here, :)
validate first in case is not, please.

best regards

dinoandmaya
04-22-2011, 11:42 PM
Hey OESXYL,

Here is the text link as requested.

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

oesxyl
04-22-2011, 11: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-23-2011, 12:04 AM
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-23-2011, 12:26 AM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum