Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question HELP! CSS list style code assistance?

    Hello!

    I am using a new CMS at work that is great for building payment/dontation forms and a lot of the functionality is overall excellent, but unfortunately it's let down on a few simple things.

    One example is navigation, i cannot seem to style a list of links very easily without building an unordered list and adding custom CSS to style it.

    I have a small amount of experience in CSS, but looked to an online generator to build the code for me ('Pure CSS Menu')... if you look at this page: [link removed]

    ...I am happy with this simple navigation layout along the blue bar at the top, except the listed items need to have a bit more space between them, and the whole lot needs to be central horizontally instead of left aligned.

    I have tried editing the code in places that seemed right, but to no avail... i realise there is probably a lot of unneeded code in there, but could someone look at it below and offer forward any amendments for spacing and centralising?

    Code:
    ul.pureCssMenu ul{display:none}
    ul.pureCssMenu li:hover>ul{display:block}
    ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
    ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
    ul.pureCssMenu,ul.pureCssMenu ul {
    	margin:10px;
    	list-style:none;
    	padding:0px 1px 1px 0px;
    	background-color:none;
    	background-repeat:repeat;
    	border-color:none;
    	border-width:0px;
    	border-style:solid;
    }
    ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
    	display:block;
    	zoom:1;
    	float: left;
    }
    ul.pureCssMenu ul{
    	width:0px;
    }
    ul.pureCssMenu li{
    	display:block;
    	margin:1px 0px 0px 1px;
    	font-size:0px;
    }
    ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
    outline-style:none;
    }
    ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
    	display:block;
    	vertical-align:middle;
    	background-color:none;
    	border-width:0px;
    	border-color:none;
    	border-style:solid;
    	text-align:centre;
    	text-decoration:none;
    	padding:5px;
    	_padding-left:0;
    	font:16px Trebuchet MS;
    	color: #CCCCCC;
    	text-decoration:none;
    	cursor:pointer;
    }
    ul.pureCssMenu span{
    	overflow:hidden;
    }
    ul.pureCssMenu li {
    	float:left;
    }
    ul.pureCssMenu ul li {
    	float:none;
    }
    ul.pureCssMenu ul a {
    	text-align:left;
    	white-space:nowrap;
    }
    ul.pureCssMenu li.sep{
    	text-align:left;
    	padding:0px;
    	line-height:0;
    	height:100%;
    }
    ul.pureCssMenu li.sep span{
    	float:none;	padding-right:0;
    	width:3;
    	height:100%;
    	display:inline-block;
    	background-color:none;	background-image:none;}
    ul.pureCssMenu ul li.sep span{
    	width:100%;
    	height:3;
    }
    ul.pureCssMenu li:hover{
    	position:relative;
    }
    ul.pureCssMenu li:hover>a{
    	background-color:none;
    	border-color:none;
    	border-style:solid;
    	font:16px Trebuchet MS;
    	color: #FFFFFF;
    	text-decoration:none;
    }
    ul.pureCssMenu li a:hover{
    	position:relative;
    	background-color:none;
    	border-color:none;
    	border-style:solid;
    	font:16px Trebuchet MS;
    	color: #FFFFFF;
    	text-decoration:none;
    }
    ul.pureCssMenu li.dis a {
    	color: #AAAAAA !important;
    }
    ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:5px;width:16px;
    height:16px;
    }
    ul.pureCssMenu ul img {width:16px;
    height:16px;
    }
    ul.pureCssMenu img.over{display:none}
    ul.pureCssMenu li.dis a:hover img.over{display:none !important}
    ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
    ul.pureCssMenu li:hover > a img.def  {display:none}
    ul.pureCssMenu li:hover > a img.over {display:inline}
    ul.pureCssMenu a:hover img.over{display:inline}
    ul.pureCssMenu a:hover img.def{display:none}
    ul.pureCssMenu span{
    	display:block;
    	background-image:url(./images/arrv_blue_2.gif);
    	background-position:right center;
    	background-repeat: no-repeat;
       padding-right:8px;}
    ul.pureCssMenu li:hover>a>span{	background-image:url(./images/arrv_white_2.gif);
    }
    ul.pureCssMenu a:hover span{	_background-image:url(./images/arrv_white_2.gif)}
    ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_blue_2.gif)}
    ul.pureCssMenu ul li:hover > a span{	background-image:url(./images/arr_white_2.gif);}
    ul.pureCssMenu li a.pureCssMenui0{
    font:n;
    }
    ul.pureCssMenu li a.pureCssMenui0:hover{
    font:o;
    }
    Last edited by VIPStephan; 04-11-2012 at 12:13 PM. Reason: removed link upon request

  • #2
    New Coder
    Join Date
    Feb 2012
    Location
    England
    Posts
    77
    Thanks
    0
    Thanked 12 Times in 11 Posts
    I'm not sure what the problem is. If you need to space something out use padding:_px;
    and to position something you can use float:right/left;

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The problem is that i need to space the list items out (by say another 20px in between each) and centralise the list horizontally... but do not know what/where in that code i need to add to accomplish this.

    Thanks for any assistance, would really appreciate it.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Add
    Code:
    ul.pureCssMenu a{
    padding:5px 35px;
    }
    at the end of the given CSS
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    ampleforthdev (02-15-2012)

  • #5
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •