UL CSS help needed.... Simple Problem

amandeepmail Banned

Messages:: 408

Likes Received:: 7

Best Answers:: 0

Trophy Points:: 0

#1

Hello Guys,
I run a website please visit it here-
bollymp3 dot co dot in

My main problem is the avigation. On the top od the right side of website oyu will see the navigation (Home, Albums, Contact, TOS) I want it to be vertical list but it is aligned horizontal overlapping my header image. How can I fix this?

My CSS-


/*  
Theme Name: VectorMusic
Description: Urban music theme for wordpress
Version: 1.0
Author: Templates4all.com
Author URI:http://templates4all.com
*/
* {
margin:0;
padding:0;
}

html,body {
color:#333;

}

body {
font:12px arial,helvetica,verdana,sans-serif;
padding:0;
background:#Fffffff url(images/bg1.jpg) no-repeat ;
}

h1 {
font-size:16px;
}

h2 {
font-size:16px;
}

h3 {
font-size:16px;
color: #939394;
}

h4 {
font-size:14px;
}

h5 {
font-size:10px;
color:#7f7f7f;
padding-left:1px;
font-weight:400;
}
.alignright {
float: right;
}

.alignleft {
float: left;
}

.centered {
display: block;
margin: 0 auto;
}

.floatleft {
float:left;
margin:3px 7px 0 0;
}

.floatright {
float:right;
margin:3px 0 0 7px;
}

.right {
float:right;
}

.left {
float:left;
}

.clear {
clear:both;
}

.fix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.fix {
display:inline-block;
}

* html .fix {
height:1%;
}

.fix {
display:block;
}
pre, code {
	font-family:"Courier New", Courier, monospace;
	color:#2175BC;
	background:#fbfbda;
}
pre {
	padding:0 2em 1.7em 2em;
	background:#fbfbda;
	border:1px solid #B4C24B;
	overflow:auto;
	width: 50%;
	width /**/:auto;
}
pre strong { background:#efc }
blockquote {padding:20px 10px 15px 50px; border-left: 0px solid #1e1e1e; background:url(images/blockquote-bg.jpg) no-repeat left}

a {
color:#939394;
text-decoration:none;
}

a:hover {
color:#E52102;
}
#wrap{
width:100%;
margin:0;
background:url(images/bg1.jpg) no-repeat left top ;
}
#header{
margin:0 auto;
min-width: 1000px;
height:269px;
background:#FFF url(images/header.jpg) no-repeat;
text-align:center;
overflow:hidden;
float:left;
}
#title{
margin-top:220px;
text-align:left;
margin-left:370px;
font-size:20px;
}
#title a{
	color:#850001;
}

ul#menu{
float:left;
width:590px;
height:23px;
padding:0px 0px 0px 270px;
color:#000000;
list-style-type:none;
}
ul#menu li {
	float:right;
	}
ul#menu li a {
	padding:3px 10px 3px 5px;
	color:#E52102;
	margin-right:2px;
	font-weight:bold;
	}
ul#menu li a:hover {
	padding-top:2px;
	}
#container{
width:688px;
margin:0 auto;
padding:0px 0px 0px 0px;
background:#ffffff url(images/container1.jpg);
margin-left:0px;
}

#container2{
width:668px;
margin:0 auto;
padding:0px 0px 0px 0px;
background:#ffffff url(images/container1.jpg);
margin-left:0px;
}

#container2 a:link {
	text-decoration:underline;
	}

#albanner{
margin-bottom:5px;
}


/* Posts */
#content {
float:left;
padding:0px 0px 0px 60px;
width:600px;
overflow:hidden;
background: transparent;
}
#content_cse {
float:left;
padding:0px 0px 0px 55px;
width:600px;
overflow:hidden;
background: transparent;
}
.date {
background: #F2EDE5;
border: 1px solid #DAD7D1;
height: 16px;
width: 100%;
float: left;
padding:0px 0px 0px 10px;
line-height:2em;
font:12px trebuche MS,arial,helvetica,verdana,sans-serif;
font-weight:bold;
color:#777888;
}
.one{
background:#FFF;
}
.two{
background:#f3f3f3;
}
.postMain {
overflow:hidden;
margin-bottom:0px;
margin:0 auto;
padding:0px 0px 0px 0px;
background:#ffffff url(images/entry_h2.gif) no-repeat;
margin-left:0px;
}

.post {
margin:5px;
padding:0px;
color: #000;
padding:0px 0px 0px 0px;
margin-bottom:10px;
background: transparent;
}

.post a {
outline:none;
color: #BE2C13;
}

.post a:hover {
color: #939394;
}

.post h2 {
padding:12px 5px 2px 60px;
}

.post h2 a {
outline:none;
color: #939394;
}


.post h2 a:hover {
color: #BE2C13;
}

.entry img{
padding: 4px; 
border: 1px solid #DAD7D1; 
background-color: #F2EDE5;
}

.entry h3 a {
margin:1em 0;
color: #939394;
}

.post h3 a:hover {
color: #BE2C13;
}


.post .entry {
line-height:1.4em;
overflow:hidden;
padding:0px 30px 30px 5px;
}

.post .entry p {
margin:5px 0;
}

.post .entry p a {
font-weight:700;
color: #939394;
}

.post .entry p a:hover {
font-weight:700;
color: #BE2C13;
}

.entry ul {
margin:0 1.3em;
list-style:none;
}

.entry li a {
color:#333;
font-weight:700;

}

.entry ul li {
background:url(images/li.gif) no-repeat 0 1px;
padding-left:18px;
margin-bottom:7px;
}

.entry ol {
margin:0 1em 0 3em;
}

.entry ol li {

margin:0 0 7px;

}

.entry table tr {
padding:15px 0;
}

.entry table tr.alt {
background:#eee;
}

.author {
overflow:hidden;
margin:0 auto;
padding:4px 0px 0px 5px;
background:#000 url(images/author_bg.gif) no-repeat;
height:24px;
margin-left:0px;
font-weight:bold;
}

.postdate {
overflow:hidden;
margin-bottom:10px;
margin:0 auto;
font-weight:none;
}

/* Comments */
.commentsMain {
overflow:hidden;
margin-bottom:10px;
margin:0 auto;
padding:10px 0px 0px 15px;
background:#ffffff;
margin-left:10px;
}

.commentsblock textarea {
	margin: 1em 0;
	width: 330px;
	background-color: #F2EDE5;
	margin-left:20px;
}

.commentsblock input, .commentsblock textarea {
	border: 1px solid #DAD7D1;
	width: 330px;
	background-color: #F2EDE5;
	margin-left:20px;
}

.commentsblock textarea:focus {
	border: 1px solid #DAD7D1;
	width: 330px;
	background-color: #F2EDE5;
	margin-left:20px;
}

.commentsblock textarea:focus, .commentsblock input:focus {
background: #F2EDE5;
border: 1px solid #DAD7D1;
padding:0px 30px 30px 5px
margin-left:20px;
}

ol.commentlist {
color: #666;
list-style-type: none;
margin: 0;
margin-top: 1.5em;
padding: 0;
}

.commentlist li {
margin-bottom: 2em;
padding: 0.5em 1em;
}

.alt1 {
background: #F2EDE5;
border: 1px solid #DAD7D1;
padding: 0.5em;
width: 380px;
}

.alt2 {
background: #F2EDE5;
padding: 0.5em;
border: 1px solid #DAD7D1;
}

h3#comments {
margin:5px;
font-size: 1.2em;
}
h3#respond {
margin:5px;
font-size: 1.4em;
}
/* Sidebar */
.sideblock
{
	padding: 5px 12px;
	margin-bottom: 20px;
	background-position: top;
	background-repeat: no-repeat;
	background-image: url(images/sidebar.gif);
}

.sideblock ul { }

.sideblock h3 { margin-top: 3px; margin-right: 20px; font-size: 13px; align: right; color: #BE2C13; }

#sideblock{ margin: 0; padding-top: 5px; font-weight: bold; color: #939394; }

#sidebar dd { margin: 0 0 5px; padding-bottom: 5px; line-height: 1.8em; }

#sideblock a:link { border-bottom-width: 0; font-weight: normal; text-decoration: none; color: #939394; }

#sideblock a:visited { border-bottom-width: 0; font-weight: normal; text-decoration: none; color: #939394;}

#sideblock a:hover, #sideblock a:active { border-bottom: 1px solid #cfcfcf; text-decoration: none; color: #939394;}

#sidebar_two {
position: absolute; left: 500pt; Top: 50pt;
float:right;
width:180px;
padding:0px 0px 0px -30px;
}

#sidebar_two p {
color:#777;
}

#sidebar_two ul {
list-style:none;
margin:8px 0 4px;
}

#sidebar_two img {
border:0;
}

#sidebar_one {
float:right;
width:180px;
padding:0px 0px 0px -39px;
}

#sidebar_one p {
color:#777;
}

#sidebar_one ul {
list-style:none;
margin:8px 0 4px;
}

#sidebar_one img {
border:0;
}



/* searchdiv */
	#searchdiv {
		clear:both;
		width:150px;
		height: 80px;
		padding: 5px 15px;
	}
		#searchdiv .inputtext {
			border: 1px solid #CCC;
			height: 18px;
			margin: 0 0 5px 0;
			width: 100%;
		}
		#searchdiv .radiocombo {
			width: 100px;
			float:left;
		}
		#searchdiv .radiobut {
			float:left;
			margin: 0 0 1px 0;
			padding: 0;
			width: 25px;
			height: 15px;
		}
		#searchdiv .radiolabel {
			float:left;
			font: 13px Georgia, "Times New Roman", Times, serif;
			text-align:left;
			margin: 0 0 1px 0;
			padding: 4px 0 2px 0px;
			width:70px;
		}
		#searchdiv .inputsubmit {
			background: url(images/search.gif);
			float:right;
			margin-top: 3px;
			border:none;
			width: 38px;
			height: 38px;
		}


.sidebar_links h3 {
margin-bottom:5px;
}

.sidebar_links ul li {
color:#7F7F7F;
line-height:1.2em;
border-top:1px solid #BBB;
padding:3px 0 4px;
}

.sidebar_links img {
border:0;
}


.side_content {
margin:0 0 20px;
}

.side_content h3 {
margin-bottom:5px;

}

.rss_links h3 {
margin-bottom:5px;
}

.rss_links {
margin-bottom:20px;
}

.rss_links ul li {
background:url(images/rss.gif) no-repeat 0 3px;
color:#7F7F7F;
line-height:1.2em;
border-top:1px solid #BBB;
padding:3px 0 4px 16px;
}

.user_links h3 {
margin-bottom:5px;
}

.user_links {
margin-bttom:20px;
}

.user_links ul li {
backgrground:url(images/user.gif) no-repeat 0 3px;
color:#7F7F7F;
line-heigolid #BBB;
padding:3px 0 4px 18px;
}

img.wp-smiley {
	border:none;

	background: none;





        padding:0;
	margin:0 2px;
        vertical-align:0;
}

div.alignleft {
	float:left;
}

div.alignright {
	float:right;
}

.navigation {
	width: 100%;
	text-align: center;
	margin-bottom: 30px;
}

p.postmetadata {
	background: #F6F9FB;
	border: 1px solid #E1E1E1;
	padding:10px 10px 15px 10px;
	font-size: 9px;
	color: #999;
}

#left .entry {
	margin: 20px 0;
}
#more {
color:#7F7F7F;
font-s{
color:#7F7F7F;
font-size:11px;
text-transform:uppercase;
margin-bottom:15px;
margin-top:5px;
text-align:right;
}

#more p,#more img {
vertical-align:middle;
}

#more a immg {
border:none;
margin:0 0 3px 0;
}
#more a img:hover {
background-color:#fff;
}

/* footer */
#bottom{
width:880px;
margin:0 auto;
padding:0px 0px 0px 0px;
background:#000 url(images/bg2.jpg);
margin-left:0px;
}

#footer ,#footer a {
font-family:Arial;
font-size:10px;
font-weight:normal;
color:#1e1e1e;
}
#footer a:hover{
text-decoration:underline;
}
#albanner{
margin-left:5

Code (markup):

My header file which has the menu-


.....
<body>
<div id="wrap">
<div id="header">
<ul id="menu">
<li><a href="http://www.bollymp3.co.in/">Home</a></li>
<li><a href="http://www.bollymp3.co.in/albums-list">Albums List</a></li>
<li><a href="http://www.bollymp3.co.in/terms/">Terms of Use</a></li>
<li><a href="http://www.bollymp3.co.in/contact/">Contact Us</a></li>
</ul><br/>
<h1 id="title"><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
</div>
<div id="container"  class="fix">

Code (markup):

Also one more help needed. Can you tell me how can I align the text on my website (Latest Albums) on the yellow image above it. That text should overlap the image.

amandeepmail, Aug 27, 2008 IP

Kunalbhatia Active Member

Messages:: 296

Likes Received:: 7

Best Answers:: 0

Trophy Points:: 60

#2

Might need to see the page source.

Kunalbhatia, Aug 29, 2008 IP

amandeepmail Banned

Messages:: 408

Likes Received:: 7

Best Answers:: 0

Trophy Points:: 0

#3

Kunalbhatia said: ↑

Might need to see the page source.
Click to expand...

Visit my website and see the source of page from there. My website is in my sig.

amandeepmail, Aug 29, 2008 IP

007c Peon

Messages:: 611

Likes Received:: 11

Best Answers:: 0

Trophy Points:: 0

#4

From quick glance you need to float your ul right not your li's with a narrower specified ul width. Also using the display property for the li's would be a good idea along with a specified width and height.

007c, Aug 29, 2008 IP

bvchandu Peon

Messages:: 6

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#5

ul#menu{
color:#000000;
list-style-type:none;
float:right;

}
ul#menu li {
text-align:left;

}

bvchandu, Aug 29, 2008 IP

amandeepmail Banned

Messages:: 408

Likes Received:: 7

Best Answers:: 0

Trophy Points:: 0

#6

I figured it myself. Moved it to sidebar from header...

amandeepmail, Aug 29, 2008 IP

Log in or Sign up

UL CSS help needed.... Simple Problem

amandeepmail Banned

Kunalbhatia Active Member

amandeepmail Banned

007c Peon

bvchandu Peon

amandeepmail Banned

Useful Searches