Hi folks, really hoping you can help me.
I’m trying to finish my website but its just driving me insane.
http://sds.freehostingcloud.com/
I am trying to get my navigation bar at the bottom into the top right corner.
Could someone please tell me how to get that nav bar up to the top right, above everything else.
Pretty please. I can finally move onto the rest of the site if this happens. Also if this gets solved I’ll probably figure out another thing I want to do.
Here is the css code: -
/* HORIZONTAL NAVIGATION BAR
/////////////////////////////////////*/
ul#mainnavigation {
float: right; margin: 40px 35px 0 0; text-transform: uppercase; }
ul#mainnavigation li {
display:inline
}
ul#mainnavigation li a {
height:104px;
float:left;
text-indent:-9999px;
text-decoration:none
}
ul#mainnavigation li a span {
float:left;
display:block
}
ul#mainnavigation li#mainnavigation-1 a {
width:91px;
background:url(../images/menu.png) no-repeat 0px 0
}
ul#mainnavigation li#mainnavigation-1 a:active,
ul#mainnavigation li#mainnavigation-1 a:hover {
background-position:0px -104px
}
ul#mainnavigation li#mainnavigation-1 a.current {
background-position:0px 0px -104px
}
ul#mainnavigation li#mainnavigation-2 a {
width:91px;
background:url(../images/menu.png) no-repeat -91px 0
}
ul#mainnavigation li#mainnavigation-2 a:active,
ul#mainnavigation li#mainnavigation-2 a:hover {
background-position:-91px -104px
}
ul#mainnavigation li#mainnavigation-2 a.current {
background-position:-91px -91px -104px
}
ul#mainnavigation li#mainnavigation-3 a {
width:91px;
background:url(../images/menu.png) no-repeat -182px 0
}
ul#mainnavigation li#mainnavigation-3 a:active,
ul#mainnavigation li#mainnavigation-3 a:hover {
background-position:-182px -104px
}
ul#mainnavigation li#mainnavigation-3 a.current {
background-position:-182px -182px -104px
}
ul#mainnavigation li#mainnavigation-4 a {
width:91px;
background:url(../images/menu.png) no-repeat -273px 0
}
ul#mainnavigation li#mainnavigation-4 a:active,
ul#mainnavigation li#mainnavigation-4 a:hover {
background-position:-273px -104px
}
ul#mainnavigation li#mainnavigation-4 a.current {
background-position:-273px -273px -104px
}
ul#mainnavigation li#mainnavigation-5 a {
width:91px;
background:url(../images/menu.png) no-repeat -364px 0
}
ul#mainnavigation li#mainnavigation-5 a:active,
ul#mainnavigation li#mainnavigation-5 a:hover {
background-position:-364px -104px
}
ul#mainnavigation li#mainnavigation-5 a.current {
background-position:-364px -364px -104px
}
ul#mainnavigation li#mainnavigation-6 a {
width:91px;
background:url(../images/menu.png) no-repeat -455px 0
}
ul#mainnavigation li#mainnavigation-6 a:active,
ul#mainnavigation li#mainnavigation-6 a:hover {
background-position:-455px -104px
}
ul#mainnavigation li#mainnavigation-6 a.current {
background-position:-455px -455px -104px
}
/* GENERAL DEFINITIONS */
*{ margin: 0; padding: 0; outline: 0; }
body { font: .74em Arial, Sans-Serif; background: #f4f4f4 url(../images/bg.png) repeat-x; color: #777; text-align: center; }
a { color: #333; text-decoration: none; }
p { line-height: 1.6em; margin: 0 0 10px; }
img { border: 0; }
.x { clear: both; }
/* LOGO */
h1 { float: left; margin: 25px 0 64px; font-size: 1.4em; letter-spacing: 6px; }
h1 a { color: #999; text-transform: uppercase; padding: 0 0 4px; }
h1 span { color: #B5DFD7; padding: 0 0 4px; }
h1 a:hover{ border-bottom: 1px dotted #444; }
h2 { font-size: 1.3em; color: #222; margin: 0 0 15px; line-height: 1.5em; }
h2 a { color: #222; }
/* CONTENT WRAPPER */
#content { clear: both; width: 960px; margin: 0 auto; text-align: left; }
/* PITCH */
#pitch { clear: both; height: 290px; margin: 0 0 25px; }
#pitch-left { clear: both; width: 620px; float: left; margin: 0 10 1px; color: #777; font-weight: bold; }
#pitch-left img { border-bottom: 2px solid #111; }
#caption { clear: both; float: left; position: relative; margin: -67px 0 0 -11px !important; margin: -67px 0 0 -5px; height: 55px; background: url(../images/caption.gif) repeat-x; }
#caption span { float: left; background: url(../images/featured-span.gif) no-repeat; height: 52px; width: 11px; }
#caption h2 { padding: 21px 30px 0 15px; float: left; color: #222; text-transform: uppercase; font-size: 1.2em; letter-spacing: 3px; }
#pitch-right { height: 309px; width: 290px !important; width: 287px; float: right; }
.templ, .tempr { float: left; margin: 0 0 15px 0; width: 135px; height: 100px; border-bottom: 2px solid #111; }
.tempr { float: right; }
.zoom { position: relative; float: left; width: 35px; height: 37px; margin: -44px 0 0 -6px; background: url(../images/zoom.gif) no-repeat; }
#expl { clear: both; text-align: justify; color: #fff; padding: 0 5px 0 0; font-weight: normal; font-style: italic; color: #999; font-size: 1.2em; height: 97px !important; height: 92px; }
#browse { padding: 9px 17px 9px 26px; background: #fff url(../images/browse.gif) no-repeat 8px 13px; font-size: 1.2em; font-weight: bold; color: #444; border-bottom: 2px solid #111; }
#browse:hover { background: #eee url(../images/browse.gif) no-repeat 8px 13px; color: #000; }
/* COLUMNS (1/3) */
.col { float: left; width: 270px; background: #fff; padding: 15px !important; padding: 15px 15px 2px; margin: 0 30px 35px 0; text-align: justify; border-top: 1px dotted #ddd; }
.col.last { margin-right: 0; }
.col p { margin: 0 0 15px; }
.more { float: left; position: relative; margin: 0 0 0 -21px; background: url(../images/more.gif) no-repeat; padding: 11px 21px 6px; color: #fff; font-size: .9em; font-weight: bold; }
.line { clear: both; margin: 0 0 10px; border-bottom: 1px dotted #ccc; }
/* LISTS */
#lists { float: left; width: 630px; margin: 0 0 22px; padding: 18px 0 0 10px
