WordPress.org

1. xwindowuser
   Member
   Posted 2 years ago #

   the site I am trying to build is here:
   http://www.hivdate.net

   I am trying to customize a template, and as you can see, I have black dots where I would like to have images as spacers. The image I would like to have in between the buttons of pages is like the image after the home button or this one here:
   http://www.hivdate.net/wp-content/themes/bluetheme/images/nav-div.gif

   I do not really know css, or php, but I have been hacking it for so long I can figure most things out, except this part.
   thanks in advance

2. Peter Boosten
   Member
   Posted 2 years ago #

   Hmmm, in your structure are list items (<li>), without the surrounding (un)ordered list defined (<ul> and <ol>). I suspect that these dots come from the list items.

   Peter

3. xwindowuser
   Member
   Posted 2 years ago #

   ok I can add the ol or ul, but then it moves the list of pages down, how should I do this? any suggestions?
   here is the code on the header.php page:

   div class="hMenuContainer">
   
   			<img src="http://www.hivdate.net/wp-content/themes/bluetheme/images/nav-left.gif" style="float: left;"/>
   			<img alt="directory" src="http://www.datingsites-directory.com/wp-content/themes/bluetheme/images/nav-right.gif" style="float: right;"/>
   		<div class="hMenu"><img src="http://www.hivdate.net/wp-content/themes/bluetheme/images/nav-div.gif"/>
   
   		<a href="<?php echo get_settings('home'); ?>">Home</a><img src="http://www.hivdate.net/wp-content/themes/bluetheme/images/nav-div.gif"/>
   		<?php wp_list_pages('title_li=&depth=1');?><img src="http://www.hivdate.net/wp-content/themes/bluetheme/images/nav-div.gif"/>
   
   	</div>

   here is the css file entry:

   .hMenuContainer {
   	height:43px;
   	background:url('images/nav-back.gif') repeat-x;
   }
   
   .hMenu {
   	float:left;
   	width:933px;
   }
   
   .hMenu a:link, .hMenu a:active, .hMenu a:visited {
   	float: left;
   	display: block;
   	height: 30px;
   	color: #FFFFFF;
   	font-weight: bold;
   	font-size: 13px;
   	text-decoration: none;
   	padding: 12px 10px 0px 10px;
   }
   
   .hMenu a:hover {
   	background: url('images/nav-back2.gif') repeat-x;
   	float: left;
   	display: block;
   	height: 30px;
   	color: #FFFFFF;
   	font-weight: bold;
   	font-size: 13px;
   	text-decoration: none;
   }
   
   .hMenu img {
   	float: left;
   	margin-top:5px;
   }

   any help is much appreciated.

Topic Closed

This topic has been closed to new replies.