I'm designing a website, which I've uploaded here: <!-- m --><a class="postlink" href="http://www.hypersyllogistic.com/newdesign/index2.htm">http://www.hypersyllogistic.com/newdesign/index2.htm</a><!-- m -->
See the list on the right-hand division with the red background on the top? I'm trying to use CSS to position the list at the bottom of the division, in the center. But I'm failing miserably. Whatever I attempt either has no effect or distorts everything around it. I'm a newbie in terms of using CSS for positioning, so I'm probably missing something obvious.
Could anyone suggest ways to accomplish what I want? I'd be most grateful for any assistance.
Here is the HTML of my header:
<tr>
<td id="header" colspan="2">
<div id="headerleft">
<h2>Hypersyllogistic</h2>
</div>
<div id="headerright">
<div id="menu">
<ul><li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.hypersyllogistic.com/index.php">Home</a></li><li><a href="about.php">About</a></li><li><a href="http://www.hypersyllogistic.com/pastscreeds.php">Screeds</a></li><li><a href="http://www.hypersyllogistic.com/writings.php">Writings</a></li><li><a href="http://www.hypersyllogistic.com/links.php">Links</a></li><li><a href="http://www.hypersyllogistic.com/photogalleries.php">Photos</a></li><li><a target="_blank" href="http://www.hypersyllogistic.com/forums/chat/flashchat.php" title="For registered forums users only." onclick="javascript:return confirm('Only registered forums users who are logged in can chat. If you have registered for the forums, and you are logged in, click OK. Otherwise, click Cancel.')">Chat</a></li><li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.hypersyllogistic.com/forums/">Forums</a></li></ul>
</div>
</div>
</td>
</tr>
And here is the relevant CSS:
#header {height: 60px}
#headerleft {float: left; width: 40%; height: 100%; background-image: url(../images/bluebg.gif)}
#headerright {height: 100%; background-image: url(../images/redbg.gif)}
#menu {float: left}
#menu ul {list-style: none; font-size: 7pt; text-align: center; font-weight: bold; padding: 0px; border: none}
#menu li {display: inline}
#menu li a {float: left; width: 6em; height: 3em; line-height: 3em; text-decoration: none; color: white; background-color: #000033; padding: 0.2em 0.6em; border-right: 1px solid white}
#menu li a:hover {background-color: #000066}
Thanks so much!
See the list on the right-hand division with the red background on the top? I'm trying to use CSS to position the list at the bottom of the division, in the center. But I'm failing miserably. Whatever I attempt either has no effect or distorts everything around it. I'm a newbie in terms of using CSS for positioning, so I'm probably missing something obvious.
Could anyone suggest ways to accomplish what I want? I'd be most grateful for any assistance.
Here is the HTML of my header:
<tr>
<td id="header" colspan="2">
<div id="headerleft">
<h2>Hypersyllogistic</h2>
</div>
<div id="headerright">
<div id="menu">
<ul><li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.hypersyllogistic.com/index.php">Home</a></li><li><a href="about.php">About</a></li><li><a href="http://www.hypersyllogistic.com/pastscreeds.php">Screeds</a></li><li><a href="http://www.hypersyllogistic.com/writings.php">Writings</a></li><li><a href="http://www.hypersyllogistic.com/links.php">Links</a></li><li><a href="http://www.hypersyllogistic.com/photogalleries.php">Photos</a></li><li><a target="_blank" href="http://www.hypersyllogistic.com/forums/chat/flashchat.php" title="For registered forums users only." onclick="javascript:return confirm('Only registered forums users who are logged in can chat. If you have registered for the forums, and you are logged in, click OK. Otherwise, click Cancel.')">Chat</a></li><li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.hypersyllogistic.com/forums/">Forums</a></li></ul>
</div>
</div>
</td>
</tr>
And here is the relevant CSS:
#header {height: 60px}
#headerleft {float: left; width: 40%; height: 100%; background-image: url(../images/bluebg.gif)}
#headerright {height: 100%; background-image: url(../images/redbg.gif)}
#menu {float: left}
#menu ul {list-style: none; font-size: 7pt; text-align: center; font-weight: bold; padding: 0px; border: none}
#menu li {display: inline}
#menu li a {float: left; width: 6em; height: 3em; line-height: 3em; text-decoration: none; color: white; background-color: #000033; padding: 0.2em 0.6em; border-right: 1px solid white}
#menu li a:hover {background-color: #000066}
Thanks so much!