nadamt
12-25-2005, 02:35 PM
I have #content ul li a:link (line 53) floating right because I want the unordered list to be aligned on to the right side of the #content. The problem is that the order of the lists is reversed (it should read 'N. Adam Thomas' then '23 December 2005'). How do I get the unordered list to align to the right side without reversing the order in which it is displayed?
Web site: http://www.nadamt.xmgfree.com (http://www.nadamt.xmgfree.com/)
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" title="Monochrome" type="text/css" href="monochrome.css" media="screen" />
<link rel="stylesheet" title="Prototype" type="text/css" href="prototype.css" media="screen" />
<link rel="next" type="text/css" href="#" />
<link rel="prev" type="text/css" href="#" />
<title>Insert Title Here</title>
<base href ="http://www.nadamt.xmgfree.com/" />
</head>
<body>
<!--banner-->
<div id="banner">
<img src="../banner.png" alt="banner" title="I've Got Balls" />
</div>
<!--header-->
<div id="header">
<h1>title</h1>
</div>
<!--menu-->
<div id="menu">
<ul><li><a href="#">Menu 1</a><ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul></li>
<li><a href="#">Menu 2</a><ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul></li>
<li><a href="#">Menu 3</a><ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul></li>
<li><a href="#">Menu 4</a><ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul></li></ul>
</div>
<!--content-->
<div id="content">
<h2>I've Got Style</h2>
<p>For the two people reading this (Hi Mom!), I'll be working on a new stylesheet as I continue to fine-tune this one. Why, you ask? Because you think about the functions of HTML tags when you style them, so, logically anyhow, working on two stylesheets simultaneously could bring me one more step toward CSS enlightenment...that, and I probably have ADD. Significant differences:</p>
<ol><li>No lowercase proper nouns</li>
<li>No drop-down menus</li>
<li>/\/0 L3eT!C0n$ (<q>::</q> @nD <q>.:.</q>)</li>
<li>Drop Caps</li>
<li>A polychromatic layout scheme</li>
<li>A serif font</li></ol>
<p>CSS does indeed rock.</p>
<ul><li><a href="#">N. Adam Thomas</a></li>
<li><a href="#">23 December 2005</a></li></ul>
<h2>A Quote Test</h2>
<p>The following is a blockquote test:</p>
<blockquote cite="#"><p><q>Basically, you enter a few enter a few characters in your text editor, load it up on your browser, and hope you didn't screw up. Coding ain't easy.</q><cite>N. Adam Thomas</cite></p></blockquote>
<p>The following is a quote-quote test: <q>Basically, coding ain't easy.</q></p>
<ul><li><a href="#">N. Adam Thomas</a></li>
<li><a href="#">22 December 2005</a></li></ul>
<h2>I Saw Design</h2>
<p>I have a miminalistic design sensibility. Just thought you'd like to know.</p>
<ul><li><a href="#">N. Adam Thomas</a></li>
<li><a href="#">21 December 2005</a></li></ul>
<h2>Testing 123</h2>
<p>Welcome to my as-yet-to-be constructed personal web site, made special by the fact that this is the gazillionth one I've started since I learned HTML. Back then, I was hesitant to jump on the CSS layout bandwagon. As ignorant as I was to the advantages, so too were the advocates overzealous. Folks would throw around buzzwords and prophecies with a tone purely utopian. Meanwhile, ever since I adopted a CSS layout, Internet Explorer, which nearly <a href="http://en.wikipedia.org/wiki/Usage_share_of_web_browsers" title="Usage share of browsers.">9 out of 10</a> people use to browse the internet, won't even talk to me. Yeah, I could use hacks, but wasn't cross-platform compatibility one of the reason for switching in the first place?</p>
<p>Be that as it may, nowadays, I wouldn't even entertain the notion of using a table layout. True, a CSS layout is more difficult to code; and oftentimes Internet Explorer doesn't show it properly; and it's an incremental process even by HTML standards, but it has it's benefits. With a CSS layout you can not have your head bitten off by fellow HTML coders and you can brag about it by publishing ostentatious buttons. I keed, I keed. A CSS layout offers significant advantages over a table layout but, as of 2005, unfortunately, too few are applicable enough to write home about.</p>
<p>That being said, I have a lot to learn about CSS. It's a shame that I limit my readings of its <a href="http://www.w3.org/TR/CSS21/" title="The W3C CSS 2.1 Specification">W3C Specification</a> to breif reference sessions. I know I shouldn't do that, but I can't help it; I'm allergic to boredom. I suppose I could browse through the myriad of online tutorials in the meantime, but I'm allergic to false humor too.</p>
<ul><li><a href="#">N. Adam Thomas</a></li>
<li><a href="#">20 December 2005</a></li></ul>
</div>
<!--calendar-->
<div id="calendar">
Calendar
</div>
<!--footer-->
<div id="footer">
<ul><li><a href="#">next page</a></li>
<li><a href="#">previous page</a></li>
<li><a href="#container" title="Link to the top of the page.">back to top</a></li></ul>
</div>
</body>
</html>
CSS:
/* font, text, and color denomination*/
#content p, #content blockquote, #content ol { font: normal 15px/19px verdana, sans-serif; background-color: #515151; color: #fff; }
/*link denomination*/
ul li a:before { content: ":: "; }
ul li a:link { font: normal 17px/24px verdana, sans-serif; text-align: center; width: 192px; height: 24px; display: list-item; }
a:link, a:visited { background-color: #363636; color: #fff; text-decoration: none; }
a:hover, a:active { background-color: #fff; color: #515151; }
/*margin and padding denomination*/
body, #header h1, #menu ul, #content h2, #content blockquote p, #footer ul { margin: 0px; padding: 0px; }
body { background-color: #1e1e1e; color: #fff; }
/*banner style*/
#banner { position: absolute; top: 7px; left: 7px; }
#banner img { width: 768px; height: 98px; }
/*header style*/
#header { position: fixed; left: 781px; top: 7px; }
#header h1 { font: normal 17px/128px verdana, sans-serif; background-color: #656565; color:#fff; height: 123px; width: 192px; text-align: center; text-transform: lowercase; vertical-align: middle; }
#header h1:before { content: ".:: "; }
#header h1:after { content: " ::."; }
/*menu style*/
#menu { position: absolute; top: 105px; left: 7px; z-index: 1; }
#menu ul { list-style-type: none; text-transform: lowercase; }
#menu ul li { float: left; width: 192px; }
#menu ul li a:link { text-decoration: none; display: list-item; }
#menu ul li a:hover { text-decoration: none; }
#menu ul li ul { display: none; }
#menu ul li:hover ul { display: list-item; }
#menu ul li ul li { text-align: right; }
/*content style*/
#content { position: absolute; top: 135px; left: 7px; width: 768px; }
#content h2 { font: normal 17px/24px verdana, sans-serif; background-color: #656565; width: 768px; height: 24px; vertical-align: middle; text-align: center; text-transform: lowercase; color: #fff; }
#content h2:before { content: ".:: "; }
#content h2:after { content: " ::."; }
#content p { padding: 6px 0px; margin: 0px; width: 768px; }
#content p:before { content: ".:. "; }
#content blockquote { margin: 0px; padding: 19px 100px; width: 568px; }
#content blockquote p { width: 568px; }
#content blockquote p:before { content: ":.: "; }
#content blockquote p cite { font-style: normal; display: block; }
#content blockquote p cite:before { content: "..: "; }
#content blockquote p cite:after { content: " :.."; }
#content ol { list-style-type: disc; margin: 0px; padding: 0px 0px 0px 100px; }
#content ul { background-color: #515151; color: #fff; padding: 0px; margin: 0px 0px 6px 0px; width: 100%; height: 24px; list-style-type: none; text-transform: lowercase; }
#content ul li { display: inline; }
#content ul li a:link { float: right; }
/*calendar style*/
#calendar { font: normal 17px/200px verdana, sans-serif; position: fixed; left: 781px; top: 136px; height: 200px; width: 192px; background-color: #363636; color: #fff; vertical-align: middle; text-align: center; }
/*footer style*/
#footer { position: fixed; left: 781px; top: 342px; }
#footer ul { height: 24px; text-align: right; list-style-type: none; }
Viewable in standard-compliant browsers only. Thanks in advance.
Web site: http://www.nadamt.xmgfree.com (http://www.nadamt.xmgfree.com/)
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" title="Monochrome" type="text/css" href="monochrome.css" media="screen" />
<link rel="stylesheet" title="Prototype" type="text/css" href="prototype.css" media="screen" />
<link rel="next" type="text/css" href="#" />
<link rel="prev" type="text/css" href="#" />
<title>Insert Title Here</title>
<base href ="http://www.nadamt.xmgfree.com/" />
</head>
<body>
<!--banner-->
<div id="banner">
<img src="../banner.png" alt="banner" title="I've Got Balls" />
</div>
<!--header-->
<div id="header">
<h1>title</h1>
</div>
<!--menu-->
<div id="menu">
<ul><li><a href="#">Menu 1</a><ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul></li>
<li><a href="#">Menu 2</a><ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul></li>
<li><a href="#">Menu 3</a><ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul></li>
<li><a href="#">Menu 4</a><ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul></li></ul>
</div>
<!--content-->
<div id="content">
<h2>I've Got Style</h2>
<p>For the two people reading this (Hi Mom!), I'll be working on a new stylesheet as I continue to fine-tune this one. Why, you ask? Because you think about the functions of HTML tags when you style them, so, logically anyhow, working on two stylesheets simultaneously could bring me one more step toward CSS enlightenment...that, and I probably have ADD. Significant differences:</p>
<ol><li>No lowercase proper nouns</li>
<li>No drop-down menus</li>
<li>/\/0 L3eT!C0n$ (<q>::</q> @nD <q>.:.</q>)</li>
<li>Drop Caps</li>
<li>A polychromatic layout scheme</li>
<li>A serif font</li></ol>
<p>CSS does indeed rock.</p>
<ul><li><a href="#">N. Adam Thomas</a></li>
<li><a href="#">23 December 2005</a></li></ul>
<h2>A Quote Test</h2>
<p>The following is a blockquote test:</p>
<blockquote cite="#"><p><q>Basically, you enter a few enter a few characters in your text editor, load it up on your browser, and hope you didn't screw up. Coding ain't easy.</q><cite>N. Adam Thomas</cite></p></blockquote>
<p>The following is a quote-quote test: <q>Basically, coding ain't easy.</q></p>
<ul><li><a href="#">N. Adam Thomas</a></li>
<li><a href="#">22 December 2005</a></li></ul>
<h2>I Saw Design</h2>
<p>I have a miminalistic design sensibility. Just thought you'd like to know.</p>
<ul><li><a href="#">N. Adam Thomas</a></li>
<li><a href="#">21 December 2005</a></li></ul>
<h2>Testing 123</h2>
<p>Welcome to my as-yet-to-be constructed personal web site, made special by the fact that this is the gazillionth one I've started since I learned HTML. Back then, I was hesitant to jump on the CSS layout bandwagon. As ignorant as I was to the advantages, so too were the advocates overzealous. Folks would throw around buzzwords and prophecies with a tone purely utopian. Meanwhile, ever since I adopted a CSS layout, Internet Explorer, which nearly <a href="http://en.wikipedia.org/wiki/Usage_share_of_web_browsers" title="Usage share of browsers.">9 out of 10</a> people use to browse the internet, won't even talk to me. Yeah, I could use hacks, but wasn't cross-platform compatibility one of the reason for switching in the first place?</p>
<p>Be that as it may, nowadays, I wouldn't even entertain the notion of using a table layout. True, a CSS layout is more difficult to code; and oftentimes Internet Explorer doesn't show it properly; and it's an incremental process even by HTML standards, but it has it's benefits. With a CSS layout you can not have your head bitten off by fellow HTML coders and you can brag about it by publishing ostentatious buttons. I keed, I keed. A CSS layout offers significant advantages over a table layout but, as of 2005, unfortunately, too few are applicable enough to write home about.</p>
<p>That being said, I have a lot to learn about CSS. It's a shame that I limit my readings of its <a href="http://www.w3.org/TR/CSS21/" title="The W3C CSS 2.1 Specification">W3C Specification</a> to breif reference sessions. I know I shouldn't do that, but I can't help it; I'm allergic to boredom. I suppose I could browse through the myriad of online tutorials in the meantime, but I'm allergic to false humor too.</p>
<ul><li><a href="#">N. Adam Thomas</a></li>
<li><a href="#">20 December 2005</a></li></ul>
</div>
<!--calendar-->
<div id="calendar">
Calendar
</div>
<!--footer-->
<div id="footer">
<ul><li><a href="#">next page</a></li>
<li><a href="#">previous page</a></li>
<li><a href="#container" title="Link to the top of the page.">back to top</a></li></ul>
</div>
</body>
</html>
CSS:
/* font, text, and color denomination*/
#content p, #content blockquote, #content ol { font: normal 15px/19px verdana, sans-serif; background-color: #515151; color: #fff; }
/*link denomination*/
ul li a:before { content: ":: "; }
ul li a:link { font: normal 17px/24px verdana, sans-serif; text-align: center; width: 192px; height: 24px; display: list-item; }
a:link, a:visited { background-color: #363636; color: #fff; text-decoration: none; }
a:hover, a:active { background-color: #fff; color: #515151; }
/*margin and padding denomination*/
body, #header h1, #menu ul, #content h2, #content blockquote p, #footer ul { margin: 0px; padding: 0px; }
body { background-color: #1e1e1e; color: #fff; }
/*banner style*/
#banner { position: absolute; top: 7px; left: 7px; }
#banner img { width: 768px; height: 98px; }
/*header style*/
#header { position: fixed; left: 781px; top: 7px; }
#header h1 { font: normal 17px/128px verdana, sans-serif; background-color: #656565; color:#fff; height: 123px; width: 192px; text-align: center; text-transform: lowercase; vertical-align: middle; }
#header h1:before { content: ".:: "; }
#header h1:after { content: " ::."; }
/*menu style*/
#menu { position: absolute; top: 105px; left: 7px; z-index: 1; }
#menu ul { list-style-type: none; text-transform: lowercase; }
#menu ul li { float: left; width: 192px; }
#menu ul li a:link { text-decoration: none; display: list-item; }
#menu ul li a:hover { text-decoration: none; }
#menu ul li ul { display: none; }
#menu ul li:hover ul { display: list-item; }
#menu ul li ul li { text-align: right; }
/*content style*/
#content { position: absolute; top: 135px; left: 7px; width: 768px; }
#content h2 { font: normal 17px/24px verdana, sans-serif; background-color: #656565; width: 768px; height: 24px; vertical-align: middle; text-align: center; text-transform: lowercase; color: #fff; }
#content h2:before { content: ".:: "; }
#content h2:after { content: " ::."; }
#content p { padding: 6px 0px; margin: 0px; width: 768px; }
#content p:before { content: ".:. "; }
#content blockquote { margin: 0px; padding: 19px 100px; width: 568px; }
#content blockquote p { width: 568px; }
#content blockquote p:before { content: ":.: "; }
#content blockquote p cite { font-style: normal; display: block; }
#content blockquote p cite:before { content: "..: "; }
#content blockquote p cite:after { content: " :.."; }
#content ol { list-style-type: disc; margin: 0px; padding: 0px 0px 0px 100px; }
#content ul { background-color: #515151; color: #fff; padding: 0px; margin: 0px 0px 6px 0px; width: 100%; height: 24px; list-style-type: none; text-transform: lowercase; }
#content ul li { display: inline; }
#content ul li a:link { float: right; }
/*calendar style*/
#calendar { font: normal 17px/200px verdana, sans-serif; position: fixed; left: 781px; top: 136px; height: 200px; width: 192px; background-color: #363636; color: #fff; vertical-align: middle; text-align: center; }
/*footer style*/
#footer { position: fixed; left: 781px; top: 342px; }
#footer ul { height: 24px; text-align: right; list-style-type: none; }
Viewable in standard-compliant browsers only. Thanks in advance.