|
| |
|
|
lilblackgirl
Posts: 288
Joined: 5/16/2002
From:
Status: offline
 |
List problems - 11/2/2006 9:28:30
I'm trying to define an inline navigation list and am having two problems.
The first is that the list is displaying backwards: end --> beginning
The second is that when i try to add an asterisk in between the list elements (in the html) to separate them, the html places the asterisk opposite to where the list sits (on the other side of the div). Thus, i'm thinking that the asterisk must be displayed in the style sheet instead. I just don't know how to do this.
Here's my style
quote:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
background-color: gray;
}
#wrapper {
width: 950px;
positon: left;
}
#main {
position: absolute;
left: 350px;
top: 375px;
width: 450px;
padding: 5 15 5 15px;
border-style: solid;
border-width: 0 1px 0 1px;
border-color: black;
}
#nav {
position: absolute;
left: 350px;
top: 325px;
width: 450px;
height: 25px;
padding: 0;
margin:0;
text-transform: uppercase;
}
#nav li {
float: right;
text-align:right;
padding-right: 10px;
list-style-type: none;
}
#nav li a, #nav li a:visited {
display: inline;
text-decoration:none;
font-weight: bold;
color:#fff;
}
#nav li a:hover {
color:#bbb;
text-decoration: none;
font-weight: bold;
}
And here's my code
quote:
<html>
<head>
<link rel=stylesheet href="style.css"type="text/css">
<title>test site</title>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li><a href="index.html">home</a></li>
<li><a href="about.html">about us</a></li>
<li><a href="work.html">webwork</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>
<div id="main">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque tellus. Nullam egestas interdum ante. Phasellus vulputate. Nam euismod interdum odio. Nullam massa
odio, aliquam at, dictum in, semper sed, tellus. Curabitur commodo ornare purus. Aenean eget felis. Maecenas ultricies pede eu urna. Integer nec leo vitae augue convallis
venenatis. Sed luctus nonummy orci. Nulla quam lacus, elementum in, accumsan nec, sollicitudin at, mi. Suspendisse lacus neque, mollis euismod, pharetra vel, lobortis luctus, est.
Aenean tellus mi, blandit vitae, convallis rutrum, tincidunt id, augue. Proin eros sapien, lacinia sit amet, dignissim at, venenatis a, neque. Donec hendrerit nisi et mauris. Morbi arcu
nisl, vestibulum eu, consectetuer adipiscing, vehicula non, massa.</p>
<p>Suspendisse massa tellus, gravida a, interdum ut, commodo tincidunt, nisl. Proin eu diam id metus euismod sodales. Phasellus ante dui, feugiat non, rutrum pharetra, faucibus
feugiat, ligula. Duis facilisis dictum tortor. Maecenas vitae orci. Etiam pretium tortor sit amet lacus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla id arcu. Nulla
quis lectus at turpis euismod rhoncus. Sed lacus. Proin condimentum. Proin et ante eu libero gravida semper. Ut purus ligula, malesuada vitae, elementum id, congue sit amet,
ante. Quisque ac est. Nunc neque erat, tempor at, posuere ut, tincidunt nec, turpis. Fusce elementum. Vestibulum pharetra lectus a neque interdum condimentum. Vivamus vitae
ante. Etiam gravida hendrerit ligula. Sed eget est eu quam fermentum imperdiet.</p>
<p>Suspendisse id est. Cras metus nisl, nonummy et, placerat non, faucibus in, tortor. Nam dignissim nulla eu ipsum. Sed risus magna, tincidunt blandit, mollis sed, tincidunt
lacinia, risus. Nullam bibendum, nisl a commodo interdum, nunc felis commodo turpis, ornare pharetra elit quam vel risus. Mauris diam. Fusce fermentum orci vitae metus. Nulla
sed nibh vitae libero posuere convallis. Fusce ullamcorper. Mauris feugiat enim ut nisi.</p>
<p>In hac habitasse platea dictumst. Quisque id lacus id augue tristique iaculis. Suspendisse tempus. Suspendisse potenti. Phasellus tincidunt dictum libero. Nullam a metus.
Maecenas commodo massa eu orci. Proin varius. Ut feugiat, felis sodales porta interdum, orci enim feugiat libero, at adipiscing lectus sapien at est. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Proin nibh nisl, scelerisque ac, mollis non, pulvinar posuere, ligula. Curabitur adipiscing.</p>
<p>Vestibulum tristique, eros nec mattis facilisis, dui quam rhoncus lorem, a tempor tellus arcu quis massa. Vivamus tempor, felis vitae mattis imperdiet, leo sapien fringilla
turpis, ut pretium ante augue vel pede. Sed fringilla nisi. Ut ornare arcu eu mi mollis molestie. Curabitur pellentesque, risus a dictum mollis, leo nibh elementum est, in bibendum
est lorem sed ipsum. Mauris orci. Nunc sit amet purus. Pellentesque consectetuer eleifend neque. Ut vel dui. Donec feugiat, massa nec ullamcorper vestibulum, nunc neque
ultricies ante, in interdum mi magna in purus. Donec suscipit blandit sem. Pellentesque nunc. Curabitur dignissim. Pellentesque laoreet auctor arcu. Nam elementum. Ut at dolor
vitae risus dignissim volutpat. Pellentesque malesuada facilisis magna. Aenean eget metus. Nulla consequat.</p>
</div>
</div>
<br><br>
</body>
</html>
I'd like the list to display like so: HOME * ABOUT US * WEBWORK * CONTACT
But be aligned to the right, not the left of the div.
Anyone have any suggestions? 
_____________________________
You look like you're about to do something stupid. I'm in.
|
|
|
|
lilblackgirl
Posts: 288
Joined: 5/16/2002
From:
Status: offline
|
RE: List problems - 11/2/2006 10:55:47
Ok, hold on, not done yet. If i tacked a footer on to that, it couldn't be relatively positioned, could it? because the nav and main are absolutely positioned, the footer would sit up top (which it's doing for me right now). Is this correct?
And if so, do i need to define a height for main and then tack on the footer below the calculated nav and main to display the footer? Or am i making this much more difficult than i need to be?
_____________________________
You look like you're about to do something stupid. I'm in.
| |
|
|
|
lilblackgirl
Posts: 288
Joined: 5/16/2002
From:
Status: offline
|
RE: List problems - 11/2/2006 12:17:42
Nevermind, i figured it out. the footer does appear to have to be defined as absolute.
_____________________________
You look like you're about to do something stupid. I'm in.
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
