PDA

Click to See Complete Forum and Search --> : Positioning an <ul>

amberfrances
07-21-2007, 02:40 PM
can somebody help me align this UL to the bottom right of this table. i put valign="bottom" and align="right" but it didn't work, i tried to put padding and margins in the CSS to move it over and it just won't work. any help would be greatly appreciated.


<table id="products_page" border="0" cellpadding="0" cellspacing="0" width="800">
<tr id="upper_nav" height="198">
<td valign="bottom">
<ul class="navlist">
<li>
<a href="index.html">Home</a></li>
<li><a href="about_us.html">About Us</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
<li><a href="contact_us.html">Shipping Information</a></li>
<li><a href="contact_us.html">Return Policy</a></li>
<li style="border-right:none;"><a href="showcart.cfm">View Cart</a></li>
</ul>
</td>
</tr>
</table>


.navlist li {
font-size: 12px;
font-family: Helvetica, Times, serif;
display: inline;
list-style-type: none;
padding: 0px 10px;
border-right: 1px solid black;
float: left;
position: relative;
}

#upper_nav {
background-image: url('http://lonepineprairiepillows.com/Cart/cw3/Assets/cart_images/base_page.jpg');
background-repeat: no-repeat;
}
Fang
07-21-2007, 03:49 PM
<style type="text/css">
html, body {
margin:0; padding:0;border:0;
}
body {
padding-top:180px;
width:800px;
background-image: url('http://lonepineprairiepillows.com/Cart/cw3/Assets/cart_images/base_page.jpg');
background-repeat: no-repeat;
}
.navlist {
margin:0;
padding:0;
padding-left:150px;
}
.navlist li {
font-size: 12px;
font-family: Helvetica, Times, serif;
display: inline;
list-style-type: none;
padding: 0px 10px;
border-right: 1px solid black;
}

#upper_nav {
}
</style>
</head>
<body>
<ul class="navlist">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about_us.html">About Us</a>
</li>
<li>
<a href="contact_us.html">Contact Us</a>
</li>
<li>
<a href="contact_us.html">Contact Us</a>
</li>
<li>
<a href="contact_us.html">Shipping Information</a>
</li>
<li>
<a href="contact_us.html">Return Policy</a>
</li>
<li style="border-right:none;">
<a href="showcart.cfm">View Cart</a>
</li>
</ul>
</body>
amberfrances
07-21-2007, 05:20 PM
never thought of padding the body, thanks. my temporary solution was to surround the <ul> with a <div> and move it like that. do you think that is poor styling?
ray326
07-22-2007, 06:47 PM
Most of the poor styling is the table. Did you ditch that?
WebJoel
07-23-2007, 06:50 PM
It's a waste of a perfectly good TABLE (or DIV, for that matter) to have to surround a(n) "<ul>" just in order to move said "<ul>" around. I have seen it done, -more forgiveable for a DIV to be used than deprecated/useless TABLE. You can just use the "<ul>" if you style it right (correct width, height, borders, padding, margins, position, etc.). -But I am sort of a minimal mark-up advocate. :p Too often I see mark-up that wraps an banner or branding image in it's own DIV, then wraps an UL in it's own DIV, then wraps a <h>-tag in it's own DIV... --hardly much better than using TABLEs to wrap everything in something esp. when not really required... :D
amberfrances
07-23-2007, 07:34 PM
well your input is much appreciated, i am fairly new to design, and anything that lets me write less code with the same output is great information.