Sidebanner Navigation CSS

[davy_yg]

http://ocklaw.com/new/

Can anyone help me fix the navigation.

1)I would like a horizontal navigation botton NOT vertical like in the link. How to create a horizontal navigation button.

2)I would like to erase the numbers.

If anyone could help me answer one of the question you are welcome to answer my post. Thanks.

sidebanner.css

#containerSide {
 width: 200px;
 height: 200px;
 position:relative;
 margin: 0 0 0 0; 
} 

#nav {
 background: url(images/buttonnav.png);
 background-repeat:no-repeat;
 background-position: 0 -25px; 
 position: absolute;
 bottom: -150px;
 left: 680px;
 display: inline-block;
 width: 20px; 
 z-index: 2;
} 

#nav a:link {
 background: url(images/buttonnav.png);
 background-repeat:no-repeat;
 background-position: 0 -25px; 
 bottom: 20px;
 left: 20px; 
 display: inline-block;
 width: 20px; 
 z-index: 2;
} 

/* mouse over */
#nav a:hover { background: url(images/buttonnav.png);
      background-repeat:no-repeat;
      background-position: 0 -5px;
      bottom: 20px;
      left: 20px;       
      display: inline-block;
      width: 20px; 
      z-index: 2;
     }
     
#nav li{ float:left; padding-right:10px;}
 
/* selected link */
#nav .activeSlide a{ background: url(images/buttonnav.png);
      background-repeat:no-repeat;
      background-position: 0 -5px; 
      bottom: 20px;
      left: 20px;       
      position: absolute;
      display: inline-block;
      width: 20px;
      float: left;
      z-index: 2; 
     } 

#slideshow{
 background: white;
 z-index: 1;
 width: 200px;
}

front-page.php

<div id="body">
<div id="bannerContainer">
<div id="banner"></div> 
        <div id="containerSide">
        <div id="slideshow">
          <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/banner1.png">
          <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/banner2.png">
          <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/banner3.png">              
        </div>
        </div>        
</div>

[marios_neo]

try do add classes on your images and then go on your css and do float left.

like

<img class="im"src="<?php echo get_stylesheet_directory_uri(); ?> /images/banner1.png">
<img class="im" src="<?php echo get_stylesheet_directory_uri(); ?>/images/banner2.png">
<img class="im" src="<?php echo get_stylesheet_directory_uri(); ?> /images/banner3.png">

AND CSS

.im{
	float:left;
	
	}

[davy_yg]

try do add classes on your images and then go on your css and do float left.

like

<img class="im"src="<?php echo get_stylesheet_directory_uri(); ?> /images/banner1.png">
<img class="im" src="<?php echo get_stylesheet_directory_uri(); ?>/images/banner2.png">
<img class="im" src="<?php echo get_stylesheet_directory_uri(); ?> /images/banner3.png">

AND CSS

.im{
	float:left;
	
	}

It doesn't do anything to the navigation button.

[dantinkakkar]

But your navigation bar's perfectly horizontal!

[shifat96]

The nav. bar is normal.

I always use <table> to make menus because it's easier

[dew97]

display:inline;