I have a challenge with CSS and Jquery Sortables.
I am extremely new to Jquery so I have no idea how to achieve this.
Here is the goal:
To have a horizontal plane of Parent Menus.
Parent menus can be sorted by dragging them from right to left.
Each Parent Menu Has its own unique ID.
Each parent menu can have 0 - unlimited sub menus.
Sub menus show up in a vertical fashion.
Sub menus can be sorted (up and down)
sub menus can also be moved to a different parent menu.
I have tried to accomplish this with sortables and nested ULs. I have tried connected lists and nothing works =(
can someone please help me with a simple sample of 3 parent menus each having 3 sub menus.
My goal is to be able to move the sub menus to one parent, and re arrange the parents in the horizontal panel.
After each change a text box within a form on the page gets a serialized list of all the menus.
Here is what i have so far.
But no jquery code:
Thanks in advance
Frank
<style type="text/css">
body {
font-family: Arial;
font-size:12pt;
padding:20px;
width: 800px;
margin:auto;
border:solid 1px black;
padding-top: 20px;
margin-top:20px;
}
h1 {
font-size: 16pt;
}
h2 {
font-size: 13pt;
}
ul {
margin:0px;
padding:0px;
margin-left:20px;
}
.menuholder {
background-color:#000;
width:100%;
height:35px;
}
#AllMenus {
width:100%;
margin:0px;
padding:0px;
margin-left:0px;
list-style-type:none;
border:none;
font-size:10px;
}
#AllMenus li {
float:left;
min-width:100px;
border:none;
padding:0px;
margin:0px;
}
#AllMenus li div {
height:33px;
min-width:114px;
margin:0px;
border:solid 1px black;
text-align:center;
vertical-align:top;
}
.parentmenu_item {
width:100px;
background-color:#000;
color:#FFF;
border:1px solid black;
padding-top:10px;
padding-bottom:9px;
padding-right:6px;
padding-left:6px;
text-align:center;
display:block;
margin-bottom:0px;
border-right:#242424 1px solid;
vertical-align:top;
}
.placeHolder div {
background-color: #0FF !important;
border: dashed 1px gray !important;
width:53px;
}
#babylist, #babylist2, #babylist3, #babylist4 {
width:114px;
list-style-type: none;
margin:0px;
border:none;
padding:0px;
padding:none;
}
#babylist li, #babylist2 li, #babylist3 li, #babylist4 li {
float:left;
width:100px;
background-color:#333;
color:#CCC;
text-align:left;
padding:6px;
border-bottom:1px solid #000;
}
</style>
</head>
<body>
<h1>jQuery List DragSort Example</h1>
Homepage<br/>
<br/>
<h2>PARENT MENUS</h2>
<form name="sortForm" method="get">
<input name="ParentsortOrder" type="text" id="ParentsortOrder" size="100">
<button type="submit" class="submit3" name="submit"><span>Save & Continue...</span></button>
</form>
<div style="clear:both;"></div>
<br />
<br />
<div style="background-image:url(../Users/all/bkri/fs/phase_8.jpg); min-width:500px; height:500px; max-width:1920px;">
<div class="menuholder">
<!--For Background Menu Bar -->
<!--Menus List -->
<ul id="AllMenus">
<!--Top Menu -->
<li id="P1">
<div> <span class="parentmenu_item"> Menu 1 </span>
<!--Child Menus -->
<ul id="babylist">
<li id="s1"><span id="spandex">My Pictures </span></li>
<li id="s2"><span id="spandex">My Music </span></li>
<li id="s3"><span>My Docs </span></li>
<li id="s4"><span>My Friends </span></li>
<li id="s5"><span>My Books </span></li>
<li id="s6"><span>My Computer </span></li>
<li id="s7"><span>My Network </span></li>
<li id="s8"><span>My Test </span></li>
</ul>
</div>
</li>
<!--Top Menu -->
<li id="P2">
<div> <span class="parentmenu_item"> Menu 2 </span>
<!--Child Menus -->
<ul id="babylist2">
<li id="s9"><span>Milk</span></li>
<li id="s10"><span>Cheese </span></li>
<li id="s11"><span>Eggs </span></li>
<li id="s12"><span>Bacon </span></li>
<li id="s13"><span>Flour </span></li>
</ul>
</div>
</li>
<!--Top Menu -->
<li id="P3">
<div> <span class="parentmenu_item"> Menu 3 </span>
<!--Child Menus -->
<ul id="babylist3">
<li id="s14"><span>Cow</span></li>
<li id="s15"><span>Pig </span></li>
<li id="s16"><span>Horse </span></li>
<li id="s17"><span>Lamb </span></li>
</ul>
</div>
</li>
<!--Top Menu -->
<li id="P4">
<div> <span class="parentmenu_item"> Menu 4 </span>
<!--Child Menus -->
<ul id="babylist4">
<li id="s19"><span>Bob</span></li>
<li id="s20"><span>Kevin </span></li>
<li id="s21"><span>Nancy </span></li>
<li id="s22"><span>Stacy </span></li>
<li id="s23"><span>Rochelle </span></li>
</ul>
</div>
</li>
</ul>
</div> <!--End Top Menu Bkr -->
</div> <!--End Background -->
SOLVED IT!
TOOK ALL DAY,
Now just gotta figure out how to serialize the list..
Hope this code sample helps someone out there.
The css Reset linked should not make a different in this.
CSS is very sloppy on my part but it gets the job done.
Works in IE and Chrome.
Here is how it looks:
<html>
<head>
<title>jQueryUI Sortables</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="../Admin/resources/css/reset.css"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
body {
background-color: #CCC;
margin:25px;}
body,td,th {
font-family: Verdana, Geneva, sans-serif;
}
.all-menu {list-style-type:none; margin:0px; padding:0px; width:100%;}
.p-menu {width:115px; margin:0px; padding:0px; float:left; list-style-type:none; }
.p-menu-title {float:left; margin:0px; padding:0px; width:115px; background-color:#000; cursor:move; color:white; text-align:left; font-size:10px; font-weight:bold; border-bottom:1px solid #111; border-left:1px solid #111; text-align:center; padding-bottom:15px; padding-top:15px;}
.ui-state-highlight {float:left; margin:0px; height: 20px; width:100%; background-color:#AFA; text-align:left; padding:0px;; margin:0px; font-size:10px; border:2px green dashed;}
.ui-state-highlight-top {float:left; margin:0px; height: 40px; width:115px;; background-color:#aabeff; text-align:left; padding:0px;; margin:0px; font-size:10px; border:2px blue dashed;}
.all-sub-menu {list-style-type:none; margin:0px; padding:0px; width:115px; min-height:250px; display:block;}
.s-menu {width:115px; list-style-type:none; margin:0px; padding:0px; float:left;}
.s-menu-title {float:left; width:112px; background-color:#111; padding:10px; color:black; text-align:left; padding:0px; font-size:10px; border-bottom:1px solid #222; border-left:1px solid #222;padding-top:8px; padding-bottom:8px; color:#FFF; padding-left:3px; cursor:pointer;}
#drag-handle {cursor:move; margin:0px; padding:0px; width:500px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<form>
<input type="text" id="serialStr" size="150" />Serialized Result
</form>
<div style="clear:both;"></div>
<br /><br />
<br />
<br />
<div style="clear:both;"></div>
<ul id="sortable_parent" class="all-menu">
<!--Parent Menu -->
<li class="p-menu">
<div class="p-menu-title"> 123456789112345</div><!--parent menu title and drag handle -->
<ul id="sortable_child1" class="all-sub-menu">
<li class="s-menu"><div class="s-menu-title"> Sub 1</div></li>
<li class="s-menu"><div class="s-menu-title"> Sub 2</div></li>
<li class="s-menu"><div class="s-menu-title"> Sub 3</div></li>
<li class="s-menu"><div class="s-menu-title"> Sub 4</div></li>
<li ></li> <!--Empty So things can be dropped -->
</ul>
</li>
<!--Parent Menu -->
<li class="p-menu">
<div class="p-menu-title"> MENU 2</div><!--parent menu title and drag handle -->
<ul id="sortable_child2" class="all-sub-menu">
<li class="s-menu"><div class="s-menu-title"> Sub 11</div></li>
<li ></li> <!--Empty So things can be dropped -->
</ul>
</li>
<!--Parent Menu -->
<li class="p-menu">
<div class="p-menu-title"> MENU 3</div><!--parent menu title and drag handle -->
<ul id="sortable_child3" class="all-sub-menu">
<li class="s-menu"><div class="s-menu-title"> Sub 21</div></li>
<li class="s-menu"><div class="s-menu-title"> Sub 22</div></li>
<li class="s-menu"><div class="s-menu-title"> Sub 23</div></li>
<li class="s-menu"><div class="s-menu-title"> Sub 24</div></li>
<li ></li> <!--Empty So things can be dropped -->
</ul>
</li>
<!--Parent Menu -->
<li class="p-menu">
<div class="p-menu-title"> MENU 4</div><!--parent menu title and drag handle -->
<ul id="sortable_child4" class="all-sub-menu">
<li class="s-menu"><div class="s-menu-title"> Sub 31</div></li>
<li class="s-menu"><div class="s-menu-title"> Sub 32</div></li>
<li class="s-menu"><div class="s-menu-title"> Sub 33</div></li>
<li class="s-menu"><div class="s-menu-title"> Sub 34</div></li>
<li class="s-menu"><div class="s-menu-title"> Sub 35</div></li>
<li ></li> <!--Empty So things can be dropped -->
</ul>
</li>
</ul>
<div style="clear:both;"></div>
<script type="text/javascript">
$(function() {
// Make parent top menus sortable..
$('#sortable_parent').sortable({ handle: '.p-menu-title', cursor: 'hand', placeholder: 'ui-state-highlight-top' });
// $("#sortable_parent").disableSelection();
});
</script>
<script type="text/javascript">
//Try to connect all sub menus so user can sort them or drag them to a different top menu..
$(function() {
$(".all-sub-menu").sortable({
connectWith: '.all-sub-menu', placeholder: 'ui-state-highlight', dropOnEmpty: false
}).disableSelection();
});
</script>
</body>
</html>
Related
First of all, I´m not very firm with CSS. I try to show an icon (right side) on my sidebar link (nav-first-level) on mouseover. The Sidebar-Link currently uses 100% of the Sidebar. Do you have a tip for me?
<ul>
<li class="nav-first-level">
<a class="facetGroup" href="#">Cardiology<span class="fa arrow"></span></a>
<span class="markGroup "><i class="fa fa-pencil fa-2" ></i></span>
<ul class="nav nav-second-level collapse">
<li ng-repeat="facet in cardiologyItems">
<span>{{ facet.name }}</span>
</li>
</ul>
</li>
</ul>
this should get you there, take a look (show image icon on rollover with CSS).
• Swap .image class with your .facetGroup > remove <span> use a <div> and swap demo .play class with your .markGroup. Basically follow how it's done below and customize with your selectors!
<div class="itemsContainer">
<div class="image"> <img src="http://www.itsalif.info/blogfiles/video-play/vthumb.jpg" /> </div>
<div class="play"><img src="http://cdn1.iconfinder.com/data/icons/flavour/button_play_blue.png" /> </div>
</div>
CSS:
.itemsContainer {
background:red;
float:left;
position:relative
}
.itemsContainer:hover .play{display:block}
.play{
position : absolute;
display:none;
top:20%;
width:40px;
margin:0 auto; left:0px;
right:0px;
z-index:100
}
Use li:hover property.Try this:
<html>
<body>
<style>
ul li ul li:hover {
list-style-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-forward-16.png');
}
ul li ul li
{
list-style-type: none;
}
</style>
<ul>
<li>Cardiology
<ul>
<li>citem1</li>
<li>citem2</li>
<li>citem3</li>
</ul>
</li>
<li>Other
<ul>
<li>oitem1</li>
<li>oitem2</li>
<li>oitem3</li>
</ul>
</li>
</ul>
</body>
</html>
Working JSFiddle sample: https://jsfiddle.net/t41w9u2w/2/
I have been trying unsuccessfully to create a drop down menu for my navbar, every single CSS method doesnt seem to provide the desired effect that I require. Currently my HTML looks like....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled</title>
</head>
<!-- Reset Sheet -->
<link href="reset.css" rel="stylesheet" type="text/css">
<!-- Main Sheet -->
<link href="main.css" rel="stylesheet" type="text/css">
<!-- Navigation Menu Sheet -->
<link href="navbar.css" rel="stylesheet" type="text/css">
<body>
<table id="header">
<table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0">
<!-- Table containing logo -->
<tr>
<td colspan="2" valign="middle" height="30" align="center">
<img src="logo.JPG" alt="logo" width="570" >
</td></tr>
<!-- Table containing NavBar -->
<tr>
<td colspan="2" valign="middle" height="55" bgcolor="#300000" align="center">
<div class="navbar">
<ul class="horizontal">
<li><a class="first" href="#">Home</a></li>
<li>About Us</li>
<li>Our Products</li>
<li>Environment</li>
<li>Latest News</li>
<li><a class="last" href="#">Contact Us</a></li>
</ul>
</div>
</td></tr>
</table>
</body>
</html>
And to compliment that my CSS for the navbar looks like...
.navbar ul.horizontal
{
list-style-type:none;
margin:40 auto;
width:640px;
padding:0;
overflow:hidden;
}
.navbar ul.horizontal > li
{
float:left;
}
.navbar ul.horizontal li a
{
display: block;
text-decoration:none;
text-align:center;
padding:22px 20px 22px 20px;
font-family:Arial;
font-size:8pt;
font-weight:bold;
color:#FFFFFF;
text-transform:uppercase;
border-right:1px solid #607987;
background-color:#300000;
letter-spacing:.08em
}
.navbar ul.horizontal li a:hover
{
background-color:#680000;
color:#a2becf
}
.navbar ul.horizontal li a.first
{
border-left:0
}
.navbar ul.horizontal li a.last
{
border-right:0
}
My question to the point is if I was to make this menu a drop down menu for the "The products" button following a similar style pattern (such as hover colours and background colours) to the rest of the navbar. how would I go about with CSS to achieve this.
The new HTML for the css in question being...
<div class="navbar">
<ul class="horizontal">
<li><a class="first" href="#">Home</a></li>
<li>About Us</li>
<li>Our Products</li>
<ul>
<li>Apple</li>
<li>HTC</li>
<li>Nokia</li>
<li>Samsung</li>
</ul>
<li>Environment</li>
<li>Latest News</li>
<li><a class="last" href="#">Contact Us</a></li>
</ul>
</div>
I have tried with so many attempts but have failed to achieve a proper result. Your help will be greatly appreciated. Thanks
I am not quite sure if this is what you mean, maybe it needs some style adjustment.
The thing is that your submenu list should be inside the list item of the main menu. Like this:
<ul>
<li>Item
<ul>
<li>...</li>
</ul>
</li>
</ul>
Using that in your code (and optimized the CSS), this is what I came up with:
HTML
<div class="navbar">
<ul class="horizontal">
<li>Home</li>
<li>About Us</li>
<li>Our Products
<ul>
<li>Apple</li>
<li>HTC</li>
<li>Nokia</li>
<li>Samsung</li>
</ul>
</li>
<li>Environment</li>
<li>Latest News</li>
<li>Contact Us</li>
</ul>
</div>
CSS:
.horizontal {
list-style-type:none;
margin:40 auto;
width:640px;
padding:0;
overflow:hidden;
}
.horizontal > li {
float:left;
}
.horizontal li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: block;
}
.horizontal li a {
display: block;
text-decoration:none;
text-align:center;
padding:22px 10px;
font-family:Arial;
font-size:8pt;
font-weight:bold;
color:#FFFFFF;
text-transform:uppercase;
border-right:1px solid #607987;
background-color:#300000;
letter-spacing:.08em
}
.horizontal li a:hover {
background-color:#680000;
color:#a2becf
}
.horizontal li:first-child a { border-left:0; }
.horizontal li:last-child a { border-right:0; }
Like said, you may need to change some of the styles!
Also check the working JSFiddle Demo
I am fairly new to web development and I have been trying to create a site, so far I have managed to do a navigation menu and a logo. My issue is that after thoroughly trying many tutorials and posts I have been unable to resolve my issue.
I want to align my logo with my navbar so that the logo is on the left hand side and the navbar is in line with the logo but on the right hand side, with both of them next to each other.
next questions is how to create a drop down menu for some of navbar tabs?
thankyou
My html is as follows
<!DOCTYPE html>
<html>
<head>
<title>S3ntry Aust Transport</title>
<link href="navbarlog.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container" id="Layout1" style="overflow: auto; ">
<header>
<div id="menu">
<img src="logo.JPG" style="float: left; " alt="logo" name="logo" width="571"
height="176" id="logo"></a>
</div>
</header>
<ul>
<li><a id="nav-index" class="first" href="%E2%80%9D#%E2%80%9D">Home</a></li>
<li><a id="nav-aboutus" href="%E2%80%9D#%E2%80%9D">About Us</a></li>
<li><a id="nav-ourservices" href="%E2%80%9D#%E2%80%9D">Our Services</a></li>
<li><a id="nav-environment" href="%E2%80%9D#%E2%80%9D">Environment</a></li>
<li><a id="nav-latestnews" href="#">Latest News</a></li>
<li><a id="nav-contactus" class="last" href="%E2%80%9D#%E2%80%9D">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
and the css part is as follows
ul {list-style-type:none; margin:0 auto; width:640px; padding:0; overflow:hidden;}li
{float:left;}
ul li a {display:block; text-decoration:none; text-align:center; padding:22px 20px 22px
20px;font-family:Arial; font-size:8pt; font-weight:bold; color:#000000; text-
transform:uppercase; border-right:1px solid #607987; background-color:#FFFFFF; text-
transform:uppercase; letter-spacing:.08em}
ul li a:hover {background-color:#3b6a85; color:#a2becf}
ul li a.first {border-left:0}
ul li a.last {border-right:0}}
#header ul li {
list-style: none;
display:inline-block;
float:right
}
logo.JPG
{
vertical-align:middle;
float:left
}
If you were to restructure your HTML, moving your 'ul' into the header, it's very easy.
<header>
<div id="logo">
<img src="logo.JPG" style="float: left; " alt="logo" name="logo" width="571" height="176" id="logo">
</div>
<div id="menu">
<ul>
<li><a id="nav-index" class="first" href="%E2%80%9D#%E2%80%9D">Home</a></li>
<li><a id="nav-aboutus" href="%E2%80%9D#%E2%80%9D">About Us</a></li>
<li><a id="nav-ourservices" href="%E2%80%9D#%E2%80%9D">Our Services</a></li>
<li><a id="nav-environment" href="%E2%80%9D#%E2%80%9D">Environment</a></li>
<li><a id="nav-latestnews" href="#">Latest News</a></li>
<li><a id="nav-contactus" class="last" href="%E2%80%9D#%E2%80%9D">Contact Us</a></li>
</ul>
</div>
</header>
and the CSS needed
header { width: 700px; }
#logo { float: left; }
#menu { float: right; }
#menu ul { padding: 0; margin: 0; }
Here is a JSFiddle showing it working: http://jsfiddle.net/STu89/
I've also removed a which wasn't opened and stripped out various /div which weren't matched.
EDITED
I'm using Twitter Bootstrap and need to move navbar right(not float:right, but move right on some value). I can move it down, but it doesn't move right.
Css of my nav:
.nav
{
top:1px;
border-bottom: 3px solid #c893c7;
padding-top:20px;
padding-bottom:16px;
}
My html:
<div class="topbar">
<div class="navbar ">
<div class="container">
<img src="logo.png" alt="logo" width="258" height="130" />
<ul class="nav">
<li>Home</li>
<li class="divider-vertical"></li>
<li>Download</li>
<li class="divider-vertical"></li>
<li>F.A.Q.</li>
<li class="divider-vertical"></li>
<li>Support</li>
</ul>
</div>
</div>
</div>
Where is problem ?
Add float right in your nav class
.nav
{
top:1px;
border-bottom: 3px solid #c893c7;
padding-top:20px;
padding-bottom:16px;
float:right;
}
http://jsfiddle.net/rizwanabbasi/WmGpU/
I don't know if this solution is good, but I just put my nav in additional div and added padding in it.
Please check this one:
http://jsfiddle.net/sasindu555/nNyxk/8/
You can see Description, Features and Contact Details <li> tags are not fully filled with the background color. Please help me to solve this.
Here is the CSS:
#h-spacer {
width:auto;
height:1px;
clear:both;
font-size:0
}
#property-details {
margin:0 auto;
width:auto;
height:auto;
float:left;
padding:0px;
border-left:solid #65C6ED 1px;
border-top:solid #65C6ED 1px
}
#property-details ul {
width:auto;
height:auto;
padding:0;
margin:0 auto;
display:block;
border-bottom:solid #65C6ED 1px
}
#property-details ul li {
float:left;
height:auto;
list-style-image:none;
list-style-type:none;
text-align:left;
padding:2px 5px;
color:#4f4f4f;
line-height:1.8em;
font-size:11px;
border-right:solid #65C6ED 1px
}
#property-details ul li.title {
width:140px;
font-weight:600;
background:#e5f8ff
}
#property-details ul li.data {
width:360px;
font-weight:normal;
background:#f1fbff
}
#property-details-sub.sub {
margin:0 auto;
height:auto;
width:369px;
padding:0px;
border-left:solid #65C6ED 1px;
border-top:solid #65C6ED 1px
}
#property-details-sub ul {
width:auto;
height:auto;
padding:0;
margin:0 auto;
display:block;
border-bottom:solid #65C6ED 1px
}
#property-details-sub ul li {
float:left;
height:auto;
list-style-image:none;
list-style-type:none;
text-align:left;
padding:2px 5px;
color:#4f4f4f;
line-height:1.8em;
font-size:11px;
border-right:solid #65C6ED 1px
}
#property-details-sub ul li.title-sub {
width:100px;
font-weight:600;
background:#e5f8ff
}
#property-details-sub ul li.data-sub {
width:247px;
font-weight:normal;
background:#f1fbff
}
And HTML:
<div id="property-details">
<ul>
<li class="title">Category</li>
<li class="data">House for Sale</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title">Reference Number</li>
<li class="data">10066</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title">Published On</li>
<li class="data">June 07,2011</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title">Description</li>
<li class="data">House for Sale Akuregoda House Built in a 12.5 Perch Land Located at 200m away from The Akuregoda Main Road With 6 Rooms, 3 Bath rooms, Living Room, Dining Room Surrounded By walls With an Annex is Available for Sale at Rs 42 (Negotiable) 4.2 Million </li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title">Location - District</li>
<li class="data">Colombo</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title">Location - City</li>
<li class="data">Akuregoda</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title">Property address</li>
<li class="data">Akuregoda, Colombo</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title">Number of Rooms</li>
<li class="data">6</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title">Number of Floors</li>
<li class="data">2</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title">Floor Area </li>
<li class="data">1200</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title">Land Area </li>
<li class="data">Acres : 0 / Perches :28.00</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title">Selling Price </li>
<li class="data">Rs. 4,200,000.00</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title">Features </li>
<li class="data"> » Air Conditioned<br />
» Cable TV<br />
» Garage<br />
» Hot Water<br />
» Internet<br />
» Parapet Wall<br />
» Pipe Bourne Water<br />
» Telephone Line<br />
» Veranda<br /></li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title">Property Availablity</li>
<li class="data">Immediatly available</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title">Advertisment expires</li>
<li class="data">In 10 days</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title">Contact Details</li>
<li id="property-details-sub" class="sub">
<ul>
<li class="title-sub">Name</li>
<li class="data-sub">Sasindu Hewage</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title-sub">Address</li>
<li class="data-sub">627, Thalangama South</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title-sub">Contact number</li>
<li class="data-sub">+94779559589</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title-sub">Inquiry via Email</li>
<li class="data-sub">Send an inquiry</li>
<div id="h-spacer"></div>
</ul>
<ul>
<li class="title-sub">Skype Id</li>
<li class="data-sub">sasindu</li>
<div id="h-spacer"></div>
</ul>
</li>
<div id="h-spacer"></div>
</ul>
</div>
My solution is to set the background color of the li.tittle not in li but set it to ul.
Then problem remains for the border-right property of the li, so move this border-right property to #property-details ul li.data item and change it to border-left.
So, I suggest these changes:
#property-details ul {
background-color: #E5F8FF
}
#property-details ul li.data {
border-right:solid #65C6ED 1px;
border-left:solid #65C6ED 1px;
}
/* remove this from your css:
#property-details ul li {
border-right: solid #65C6ED 1px;
}
*/
http://jsfiddle.net/nNyxk/21/
Why are you using lists? The proper elements to use here are definition lists (<dl>). You can even use tables for this (it is tabular data).
CSS:
* {
margin:0;
padding:0
}
body {
font-size:11px;
margin:1em;
color:#4f4f4f
}
ul {
list-style-position:inside
}
#property-details {
background:#e5f8ff;
border-style:solid;
border-color:#65c6ed;
border-width:1px 1px 0;
line-height:1.8em
}
#property-details dl {
border-bottom:1px solid #65c6ed;
position:relative
}
#property-details dt, #property-details dd {
padding:2px 5px
}
#property-details dt {
font-weight:600;
width:140px;
position:absolute;
top:0;
bottom:0;
left:0
}
#property-details dd {
background:#f1fbff;
position:relative;
left:140px;
margin-right:140px;
border-left:1px solid #65c6ed
}
#property-details .sub {
padding:0
}
#property-details .sub dl:last-child {
border:0
}
HTML (with definition lists):
<div id="property-details">
<dl>
<dt>Category</dt>
<dd>House for Sale</dd>
</dl>
<dl>
<dt>Reference Number</dt>
<dd>10066</dd>
</dl>
<dl>
<dt>Published On</dt>
<dd>June 07,2011</dd>
</dl>
<dl>
<dt>Description</dt>
<dd>House for Sale Akuregoda House Built in a 12.5 Perch Land Located at 200m away from The Akuregoda Main Road With 6 Rooms, 3 Bath rooms, Living Room, Dining Room Surrounded By walls With an Annex is Available for Sale at Rs 42 (Negotiable) 4.2 Million </dd>
</dl>
<dl>
<dt>Location - District</dt>
<dd>Colombo</dd>
</dl>
<dl>
<dt>Location - City</dt>
<dd>Akuregoda</dd>
</dl>
<dl>
<dt>Property address</dt>
<dd>Akuregoda, Colombo</dd>
</dl>
<dl>
<dt>Number of Rooms</dt>
<dd>6</dd>
</dl>
<dl>
<dt>Number of Floors</dt>
<dd>2</dd>
</dl>
<dl>
<dt>Floor Area </dt>
<dd>1200</dd>
</dl>
<dl>
<dt>Land Area </dt>
<dd>Acres : 0 / Perches :28.00</dd>
</dl>
<dl>
<dt>Selling Price </dt>
<dd>Rs. 4,200,000.00</dd>
</dl>
<dl>
<dt>Features </dt>
<dd>
<ul>
<li>Air Conditioned</li>
<li>Cable TV</li>
<li>Garage</li>
<li>Hot Water</li>
<li>Internet</li>
<li>Parapet Wall</li>
<li>Pipe Bourne Water</li>
<li>Telephone Line</li>
<li>Veranda</li>
</ul>
</dd>
</dl>
<dl>
<dt>Property Availablity</dt>
<dd>Immediatly available</dd>
</dl>
<dl>
<dt>Advertisment expires</dt>
<dd>In 10 days</dd>
</dl>
<dl>
<dt>Contact Details</dt>
<dd class="sub">
<dl>
<dt>Name</dt>
<dd>Sasindu Hewage</dd>
</dl>
<dl>
<dt>Address</dt>
<dd>627, Thalangama South</dd>
</dl>
<dl>
<dt>Contact number</dt>
<dd>+94779559589</dd>
</dl>
<dl>
<dt>Inquiry via Email</dt>
<dd>Send an inquiry</dd>
</dl>
<dl>
<dt>Skype Id</dt>
<dd>sasindu</dd>
</dl>
</dd>
</dl>
</div>
And all your spacers are gone...