I want a vertical menu to the left side of my site, but the text is getting pushed down and is not to the side of the menu. Please ignore text in the paragraphs and headers. I am sorry for the poor organization or any small mistakes I have made, This is my first language and I am still learning.
<style>
body
{
background-color:#333;
color:#999
font: 12px/1.4em Arial,sans-serif;
}
#wrap
{
margin-left: 10px auto;
background: black;
padding:10px;
width: 100px;
}
#header
{
background-color:black;
color: #fff;
}
#logo
{
float: center;
font-size: 30px;
line-height:400px;
padding: 500px
}
#navWrap
{
height:15pxpx;
}
#nav ul
{
margin: 1px;
padding:1px;
}
#nav li
{
float:center;
padding: 5px;
background-color: black;
margin: 0 5px;
color: white;
list-style-type: none
}
#nav li a
{
color:white;
text-decoration: none;
font-size: 15px;
}
#nav li a:hover
{
text-decoration: underline;
}
br.clearLeft
{
clear: left;
}
h1
{
color:cyan;
text-align:center;
border-bottom: double 5px;
}
h2
{
color:red;
}
h3
{
color:cyan;
}
p.2
{
color:black;
font-size:22px;
text-align:left;
}
p
{
color:#DBDBDB;
font-size:22px;
text-align:left
right: 500px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="logo"></div>
<div id="navWrap">
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>link1</li>
</ul>
<br class="clearLeft"/>
</div>
</div>
</div>
</div>
<p>lalalallalalalalalallalalala</p>
You just need to float your #wrap div to the left using the following CSS and that'll solve the issue:
#wrap {
float: left;
}
Here's a demo:
body {
background-color:#333;
color:#999 font: 12px/1.4em Arial, sans-serif;
}
#wrap {
margin-left: 10px auto;
background: black;
padding:10px;
width: 100px;
}
#header {
background-color:black;
color: #fff;
}
#logo {
float: center;
font-size: 30px;
line-height:400px;
padding: 500px
}
#navWrap {
height:15pxpx;
}
#nav ul {
margin: 1px;
padding:1px;
}
#nav li {
float:center;
padding: 5px;
background-color: black;
margin: 0 5px;
color: white;
list-style-type: none
}
#nav li a {
color:white;
text-decoration: none;
font-size: 15px;
}
#nav li a:hover {
text-decoration: underline;
}
br.clearLeft {
clear: left;
}
h1 {
color:cyan;
text-align:center;
border-bottom: double 5px;
}
h2 {
color:red;
}
h3 {
color:cyan;
}
p.2 {
color:black;
font-size:22px;
text-align:left;
}
p {
color:#DBDBDB;
font-size:22px;
text-align:left right: 500px;
}
#wrap {
float: left;
}
<div id="wrap">
<div id="header">
<div id="logo"></div>
<div id="navWrap">
<div id="nav">
<ul>
<li>Home
</li>
<li>About
</li>
<li>link1
</li>
</ul>
<br class="clearLeft" />
</div>
</div>
</div>
</div>
<p>lalalallalalalalalallalalala</p>
The padding on your logo is pushing the text down, and your line-height is huge. I would suggest adjusting those two values.
#logo {
float: center;
font-size: 30px;
line-height:400px; // pushing it down
padding: 500px; // pushing it down
}
Also, you're setting the height on #navWrap, which is also causing your navigation to look weird. Finally, floating your #wrap element puts your content in the right place.
Here is a fiddle that resolves your situation:
http://jsfiddle.net/cywb70ds/2/
I adjusted the padding and line-height on the #logo element.
Related
Please refer to the posted image. I want to add a margin-left on the first image and then in the rest of image I don't want them. Can I use the child selectors to achieve this or there is any other way?
Can I make the images, overflow: scroll like we do in case of text? As I don't know jquery/javascript as of now.
* {
box-sizing: border-box;
}
body {
background:gray;
/*border: 2px solid yellow;*/
}
.wrapper {
width: 93%;
height: auto;
margin: auto;
}
.headwrap {
padding-top: 70px;
}
.logo {
margin: 0;
float: left;
}
.socialbuttons {
float: right;
}
.socialbuttons ul {
list-style: none;
float: right;
}
.socialbuttons ul li {
float: left;
width:50px;
height:50px;
padding:0;
margin-right: 30px;
background: #000;
border-radius:30px;
}
.socialbuttons ul li img{
margin-left:20px;
margin-top:20px;
}
.navbar {
margin-top: 40px;
width: 100%;
background: #db3636;
float: left; /* this and see changes */
}
.navbar ul {
list-style: none;
margin: 0;
padding: 0 5px; /* the 0 helps with making the borders span full height of navbar*/
/* float producing wrong results */
}
.navbar ul li {
float: left; /* height of menu bar increases when float is defined */
display: inline; /* does it have any use ? */
padding: 25px 10px;
border-right: 1px solid black;
border-left: 1px solid black;
color: white;
font-size: 14px;
font-weight: bold;
font-family: sans-serif;
text-align: center;
width: 15%;
}
.navbar ul li:first-child {
border-left: none;
}
.navbar ul li:last-child {
border-right: none;
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
line-height: 0;
}
.clearfix:after {
clear: both;
}
.slider img {
float:left;
width:100%;
}
.text{
color:white;
margin-top:-35%;
float:left;
margin-left: 80px;
font-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
font-size : 50px;
line-height: .5;
}
#project {
background-color: #555653;
width: 100%;
margin-top: 10px;
float: left;
}
.head {
float: left;
background-color: #1D1D1C;
width: 100%;
}
.head h3 {
color: white;
font-family: Arial , sans-serif;
font-weight: lighter;
margin-left: 20px;
}
.imgContainer img {
margin-top: 20px;
padding-left: 40px
}
<!DOCTYPE html>
<html>
<head>
<title>Industrial Website demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<link href="damion.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<header class="headwrap">
<div class="logo">
<img src="logo.png" alt="Damion max">
</div>
<div class="socialbuttons">
<ul>
<li><img src="facebook.png"></img></li>
<li><img src="twitter.png"></img> </li>
<li><img src="feed.png"></img></li>
<li><img src="google.png"></img></li>
</ul>
</div>
<nav class="navbar">
<ul class="clearfix">
<li style="width:5%;"><img src="home.png"></li>
<li>ABOUT US</li>
<li>GALLERY</li>
<li>EVENTS</li>
<li>BLOG</li>
<li>CONTACTS</li>
<li style="padding:0; width:20%;"><input type="text" style="background:black; height:30px; width:90%; margin:20px 0 0 20px; border:0; border-radius:10px;"></li>
</ul>
</nav>
</header>
<div class="slider">
<img src="industrial.jpg" />
<div class="text">WE ARE PROFESSIONAL,<p><span style="font-weight:lighter; line-height:100%; color: yellow ;">COMPETITIVE AND COMPETENT</span></p></P></div>
</div>
<div id="project">
<div class="head">
<h3>FEATURED PROJECTS</h3>
</div>
<div class="imgContainer">
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="3.jpg"/>
<img src="4.jpg"/>
<img src="5.jpg"/>
<!--<img src="6.jpg"/>-->
</div>
</div>
</div>
</body>
</html>
Use :first-child selector for this:
.imgContainer img:first-child{
margin-left:10px;
}
You can easily achieve this using this css
.imageContainer img:first-child
{
margin-left:20px;
}
You can select the first child with any of the given selectors below:
.imgContainer img:first-of-type
.imgContainer img:first-child
.imgContainer img:nth-child(1)
If you want to set some sort of overflow to your images, you'll need to wrap them in another element, like a generic div and set your overflow rules to this element, standard overflow rules won't apply directly to img elements.
See CSS Tricks - overflow
I'm working on a simple navigation bar with a logo on the left, an image at the center and some links on the right.
I want this all to be on one line, next to each other, but for some reason I don't manage to get the links on the same line as the rest.
You can see my work here. This is the code:
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
margin: 0;
background-color: #D8D8D8;
color: white;
border: 0;
padding: 0;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
nav {
background-color: #888888;
}
#links {
height: 30px;
padding: 10px;
margin: 0;
}
#links li {
text-align: center;
margin: 0;
height: 30px;
padding: 0;
padding-left: 10px;
padding-right: 10px;
list-style-type: none;
display: inline;
}
#container {
min-width: 624px;
min-height: 100%;
position: relative;
}
* {
margin: 0;
padding: 0;
}
#links {
overflow: auto;
list-style-type: none;
}
#links li {
height: 25px;
float: right;
margin-right: 0;
border-right: 1px solid #aaa;
padding: 0 20px;
}
#links li:first-child {
border-right: none;
}
#links li a {
text-decoration: none;
color: #ccc;
font: 25px/1 Helvetica, Verdana, sans-serif;
text-transform: uppercase;
transition: all 0.5s ease;
}
#links li a:hover {
color: #666;
}
#links li.active a {
font-weight: bold;
color: #333;
}
#logo img {
height: 50px;
float: left;
margin-left: 10px;
cursor: pointer;
}
#arrow {
text-align: center;
}
#arrow img {
height: 30px;
margin-top: 10px;
margin-bottom: 10px;
cursor: pointer;
}
<div id="container">
<nav>
<ul id="logo">
<img src="images/logo_tekst.png">
</ul>
<ul id="arrow">
<img src="images/remove-arrow-hi.png">
</ul>
<ul id="links">
<li class="link">Pro
</li>
<li class="link">Recreative
</li>
</ul>
</nav>
</div>
The code stripped to the bare minimum with just the essentials to make the positioning work, should look something like this:
<div id="container">
<nav>
<img id="logo" src="images/logo_tekst.png" />
<img id="arrow" src="images/remove-arrow-hi.png" />
<ul id="links">
<li> Pro
</li>
<li> Recreative
</li>
</ul>
</nav>
</div>
nav {
position: relative;
}
#logo {
float: left;
}
#links {
float: right;
}
#links > li {
float: left;
margin-left: 10px;
}
#arrow {
position: absolute;
left: 50%;
width: 40px;
margin-left: -20px; /* halve the width of the image */
}
What i did:
I fixed your html, img can not be a direct child of ul, only li can. No need for any extra wrappers anyway, so I just removed them and moved the id's to the image.
to make your logo be always on the left, I just floated it left
to make your menu be always on the right, I just floated it right.
to center that arrow, I went a bit more creative. I positioned it absolute (note the relative on the nav so it will act as the reference) and set the left to 50%. This causes the left edge of the image to be in the exact center. I then moved that edge to the left, by setting the left margin to negative halve the width of the image. If you do not know the width of the image in advance (or if it isn't an image, but some sort of dynamic content) you can also do transform: translate(-50%,0) in stead of the margin-left to get the same effect.
A demo can be found here: http://jsfiddle.net/73ejv2sg/
The problem you have is you only float your logo. You need to float all elements and add padding or width to align. Also add height to nav to display the background.
Per your comments position absolute and set the left:
#arrow {
position:absolute;
left:45%;
}
Here I just set 45% but you could use JavaScript to easily grab the width of the screen and image width and force it to the center every time.
$(document).ready(function() {
var imageWidth = $("#arrow").width();
var pageWidth = $(window).width();
var left = ((pageWidth/2) - (imageWidth/2));
$("#arrow").css('left',left);
});
$(window).resize(function() {
var imageWidth = $("#arrow").width();
var pageWidth = $(window).width();
var left = ((pageWidth/2) - (imageWidth/2));
$("#arrow").css('left',left);
}
html {
height: 100%;
margin:0;
padding:0;
}
body {
height:100%;
margin:0;
background-color:#D8D8D8 ;
color:white;
border:0;
padding:0;
font-family: "Helvetica Neue",Arial, Helvetica, sans-serif;
}
nav {
background-color: #888888;
height:55px;
}
#links {
height:30px;
padding:10px;
margin:0;
}
#links li {
text-align:center;
margin:0;
height:30px;
padding:0;
padding-left:10px;
padding-right:10px;
list-style-type: none;
display:inline;
}
#container {
min-width: 624px;
min-height:100%;
position:relative;
}
* {
margin: 0;
padding: 0;
}
#links {
overflow: auto;
list-style-type: none;
float:right;
}
#links li {
height: 25px;
float: right;
margin-right: 0;
border-right: 1px solid #aaa;
padding: 0 20px;
}
#links li:first-child {
border-right: none;
}
#links li a {
text-decoration: none;
color: #ccc;
font: 25px/1 Helvetica, Verdana, sans-serif;
text-transform: uppercase;
transition: all 0.5s ease;
}
#links li a:hover {
color: #666;
}
#links li.active a {
font-weight: bold;
color: #333;
}
#logo img {
height:50px;
float:left;
margin-left:10px;
cursor:pointer;
}
#arrow {
position:absolute;
left:45%;
}
#arrow img {
height:30px;
margin-top: 10px;
margin-bottom: 10px;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<nav>
<ul id="logo">
<img src="images/logo_tekst.png">
</ul>
<ul id="arrow">
<img src="images/remove-arrow-hi.png">
</ul>
<ul id="links">
<li class="link">Pro</li>
<li class="link">Recreative</li>
</ul>
</nav>
</div>
In the #nav ul li, i cant seem to fix the position of the text without changing the size of the block. Whenever I try to use padding, the size of the block changes. How can I move the text without changing the size of the block? Here is the code.
<!DOCTYPE html>
<html>
<head>
<style>
body
{
padding: 0;
background-color: #FFC0CB;
}
#container
{
margin: 0 auto;
width:100%;
height: 1500px;
padding: 0px;
}
#header
{
overflow: auto;
background-color: red;
margin: 0px;
}
#headTable
{
float:right;
}
#logo
{
background-color: green;
margin: 5px 0px 5px 70px;
float: left;
width:150px;
height:100px;
}
#headTable ul
{
list-style-type: none;
margin: 0;
}
#headTable ul li
{
font-size: 35px;
padding-top: 20px;
color: black;
float: left;
margin: 20px 50px;
}
#headTable ul li:hover
{
background-color: blue;
color:red;
}
#nav
{
clear: both;
width:100%;
height: 95px;
background-color: purple;
}
#nav ul
{
overflow: auto;/*
background-color: yellow;*/
margin: 0px;
padding: 0px;
}
#nav ul li
{
background-color: black;
color:white;
font-size: 30px;
list-style-type: none;
text-decoration: underline;
margin: 20px;
padding: 10px 10px 10px 20px;
float: left;
/*text-indent: 0px;
*/}
#page
{
float: left;
margin: 10px;
height:700px;
width:700px;
background-color: #FFC0CB;
}
#page p
{
padding:100px 0px 0px 50px;
font-size: 20px;
color: navy;
}
#content
{
height: 1000px;
width: 1334px;
position: absolute;
margin:0px;
background-color: #00B2EE;
}
#top
{
float: right;
position: relative;
margin: 10px;
background-color: #7A67EE;
width:500px;
height:300px;
}
#low
{
position: relative;
clear: both;
float: right;
margin:-300px 10px 10px 10px;
background-color: #7A67EE;
width:500px;
height:300px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<img src="plane.jpg" width="150" height="100">
</div>
<div id="headTable">
<ul>
<li>Google</li>
<li>Google</li>
<li>Google</li>
</ul>
</div>
</div>
<div id="nav">
<ul>
<li>Menu</li>
<li>Blog</li>
<li>Ins</li>
<li>BBC</li>
<li>Contact</li>
<li>Wow</li>
<li>Doge</li>
<li>Such fun</li>
</ul>
</div>
<div id="content">
<div id="page">
<p>This is a paragraph that should
stay intact inside the id of Page.
</p>
</div>
<div id="top">
<p>THis is a paragraph that should
stay intact inside the id of top.
</p>
</div>
<div id="low">
<p>This is a paragraph that should
stay intact inside the id of bottom.
</p>
</div>
</div>
</div>
</body>
</html>
You need to set the width for an li element, and wrap the nav text in span tags. Then you can move them left or right and the width of the nav li will not change.
<li><span>Menu</span></li>
<li><span>Blog</span></li>
<li><span>Ins</span></li>
<li><span>BBC</span></li>
<li><span>Contact</span></li>
<li><span>Wow</span></li>
<li><span>Doge</span></li>
<li><span>Such fun</span></li>
#nav ul li{width:70px;background-color: black;color:white;font-size: 30px;list-style-type: none;text-decoration: underline;margin: 20px;padding: 10px 10px 10px 20px;float: left;}
#nav ul li span{margin-left:70px;}
See a working solution here: http://jsfiddle.net/mtruty/73uav/
Using the following CSS, I'm trying to make a navigation bar at the top of the page (fixed to the top) but instead of it being on the absolute left of the screen, I want it centered.
ul#list-nav
{
position:fixed;
top:0;
left:0;
margin:auto;
padding:0px;
width:100%;
height:28px;
font-size:120%;
display:inline;
text-decoration:none;
list-style:none;
background-color: #1F1F1F;
border:none;
z-index:1000;
}
ul#list-nav li
{
float:left;
}
ul#list-nav a
{
background-color:#1F1F1F;
color:#C4C4C4;
/*display:block;*/
padding:5px 15px;
text-align: center;
text-decoration:none;
font-size:14px;
}
ul#list-nav a:hover
{
background-color:#4D4D4D;
text-decoration:none;
}
ul#list-nav a:active
{
background-color:#9C9C9C;
text-decoration:none;
}
Attempts so far make it a vertical list, or make the buttons start in the center (rather than be centered). How can I accomplish this?
EDIT: below is the HTML ... this list is the only thing being styled.
<ul id="list-nav">
<li>Home</li>
<li>Projects</li>
<li>Opinion</li>
<li>Humour</li>
<li>Games</li>
<li>Movies</li>
<li>TV Shows</li>
</ul>
EDIT2: here's a jsFiddle if this helps
http://jsfiddle.net/752jU/1/
You only need one wrapper div to accomplish this...
http://jsfiddle.net/752jU/5/
Note: By using display: inline my answer is also good in IE 6 & 7, if that matters.
CSS:
div#wrapper {
position: fixed;
top: 0;
width: 100%;
text-align: center;
height:28px;
background-color: #1F1F1F;
border: none;
z-index: 1000;
}
ul#list-nav {
padding: 0px;
width: auto;
font-size: 120%;
text-decoration: none;
list-style: none;
}
ul#list-nav li {
display: inline;
}
HTML:
<div id="wrapper">
<ul id="list-nav">
<li>Home</li>
<li>Projects</li>
<li>Opinion</li>
<li>Humour</li>
<li>Games</li>
<li>Movies</li>
<li>TV Shows</li>
</ul>
</div>
You need to insert the list in 3 nested divs:
In your css:
div#container1
{
position:fixed;
top:0;
left:0;
width:100%
}
div#container2
{
margin-left:auto;
margin-right:auto;
text-align: center;
}
div#container3
{
display:inline-block;
}
Then in your html:
<div id="container1">
<div id="container2">
<div id="container3">
<ul id="list-nav">
...
</ul>
</div>
</div>
</div>
See http://jsfiddle.net/jZQ4v/ for a version of your code that center properly
Use:
#list-nav {
padding: 0px;
height: 28px;
font-size: 120%;
margin: auto;
text-align: center;
list-style: none;
background-color: #1F1F1F;
border: none;
z-index: 1000;
}
#list-nav li {
display: inline;
text-align: center;
}
#list-nav a {
color: #C4C4C4;
background-color: #1F1F1F;
display: inline;
text-decoration: none;
padding: 5px 15px;
font-size: 14px;
}
#list-nav a:hover {
background-color: #4D4D4D;
text-decoration: none;
}
#list-nav a:active {
background-color: #9C9C9C;
text-decoration: none;
}
I removed all unnecessary coding which didn't alter the menu in any way.
See a live demo here: http://jsfiddle.net/YFDeX/1/
Edit: Altered for compatibility with IE6+
Hope this helps.
All,
http://rich2233.comoj.com/
Three things I want to do:
I need the navigation bar to sit below the header. This is probably
a simple fix, but for the life of me, I can't figure it out.
I need the text in the navigation to be centered vertically.
How do I put some space between the left and right columns?
Thanks for your help! Below is the css code:
body,html {
margin:0;
padding:0;
color:#101010;
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
}
p {
margin-top: 30px;
font-size: 16px;
line-height: 1.3em;
padding-bottom: 10px;
text-align: center;
color: #ffffff;
}
p a{
text-decoration: none;
color: #4e6f8c;
}
#wrapper {
width:960px;
margin:0 auto;
padding: 0px;
background:#fff;
}
#header {
padding:5px 10px;
background:#fff;
height:137px;
}
#nav {
padding:5px 10px;
background:#fff;
width: 960px;
height: 40px;
font-size: 15px;
color: #7c7c7c;
text-align: center;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
position: absolute;
bottom: 5px;
}
#nav li {
display:inline;
margin:0;
padding:0;
width:160px;
height: 45px;
float: left;
background-color: #f6f6f6;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}
#nav li:hover {
background-color: #df220f;
}
#nav li:hover a{
color: #ffffff;
text-decoration: none;
}
#nav a {
color: #fff;
text-decoration: none;
}
#nav a:link {
color: #7c7c7c;
text-decoration: none;
}
#nav a:visited{
color: #ffffff;
text-decoration: none;
}
#nav a:hover {
color: #ffffff;
text-decoration: none;
}
#nav a:focus {
color: #ffffff;
text-decoration: none;
}
#nav a:active {
color: #ffffff;
text-decoration: none;
}
#leftcontent {
float:left;
width:710px;
height: 300px;
background:#df220f;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
background-image:url('./images/main_placeholder.png');
background-repeat:no-repeat;
background-position:center;
}
h2 {
margin:10px 0 0 20px;
color: #24389b;
font-size: 19px;
padding-bottom: 8px;
}
#rightcontent {
float:left;
width:250px;
background:#df220f;
height: 1%;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
height: 300px;
background-image:url('./images/side_logo.png');
background-repeat:no-repeat;
background-position:bottom center;
}
#footer {
clear:both;
padding:5px 10px;
background:#fff;
}
#footer p {
margin:0;
}
* html #footer {
height:1px;
}
_______ HTML EDIT:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel = "stylesheet" type = "text/css"
href = "./style.css" media = "all" />
</head>
<body>
<div id="wrapper">
<div id="header"><img src="./images/logo.png" alt="Ultrabond Logo" /></div>
<div id="nav">
<ul>
<li>Home</li>
<li>Service<br />Details</li>
<li>Service<br />Request</li>
<li>Crack<br />Repair</li>
<li>FAQs</li>
<li>Contact</li>
</ul>
</div>
<div id="leftcontent">
</div>
<div id="rightcontent">
<p>Average cost of a windshield<br />replacement: $240</p><p>Average <i>repair</i> cost: $60</p><p>Just another reason why<br />windshield <i>repair</i> makes sense</p>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
First of all your link doesn't work
1) Don't set position: absolute for nav ul
2) Use line-height rule (more detailed here)
3) Use margin or padding. Add margin-left: <whatever you want>px to #rightcontent
For #nav li, you don't need to do display:inline and float: left. I would just use float: left, and then you can adjust spacing using margin.
No need to use position: absolute on #nav ul, but if you are going to use that here is a tip that helps me all the time. If you use position:absolute in a container that you haven't specifically set to position:relative, then the absolute positioning is set to the entire page. However, if you have position:relative set on the container div, then you can absolutely position the child element anywhere within that div.
Like this:
#nav
{
width: 500px;
height: 100px;
position: relative;
}
#nav ul
{
position: absolute;
top: 20px;
right: 200px;
}
this places the #nav ul 20px down from the top and 200px from the right within the #nav div. If the #nav div didn't have position: relative on it.. then the #nav ul would be placed at 20px from the top of the page and 200px from the right of the page.