Help with navbar. ASAP

This is a discussion on "Help with navbar. ASAP" within the Starting Out section. This forum, and the thread "Help with navbar. ASAP are both part of the Design Your Website category.



Go Back   Webforumz.com > Main Forums > Design Your Website > Starting Out

Notices


Reply
 
LinkBack Thread Tools
  #1 (permalink)  
Old Jul 13th, 2007, 02:32
Reputable Member
Join Date: Jul 2006
Location: USA
Age: 15
Posts: 113
Blog Entries: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Help with navbar. ASAP

I need some Help with my navbar, i am trying to use one image and have it repeat across the the navbar and it works. but then i was wondering how to make it so that if they can click on the picture or the words without problem. because right now it only works if u click on text


Code: Select all
/*NAVBAR STYLE*/





ul.navbar {
    padding: 0px; 
    margin: 0; 
    width: 0;
    display: inline;
     border: none;
    
    }



ul.navbar li {
    margin:0px; 
    text-align: center;
    vertical-text-align:bottom; 
    font-size: 20px; 
    float: left;
    border: 1px solid;
    width: 134px;
    height: 48px;
    background-image: url('navigation_button.PNG');

    }

ul.navbar li:hover {
    margin:0px; 
    text-align: center;
    vertical-text-align:bottom; 
    font-size: 20px; 
    float: left;
    border: 1px solid;
    border-color:white;
    width: 134px;
    height: 48px;
    background-image: url('navigation_button.PNG');

    }

ul.navbar a {
     
    color: white;
    padding: 0; 
    margin: 0; 
     }

ul.navbar a:hover {
     
    color: dark blue;
    padding: 0; 
    margin: 0; 
    width: 0;
     }

div {
    background-color: transparent; 
    border:0; }



#navbar {
    width: 900px; 
    height: 50px;
    margin: 0; 
    padding: 0px; 
    z-index: 1;
    background-color:#356AA0;
    position:absolute;
    top:146px;
    left:0px;
    }
/*END NAVBAR STYLE*/
Code: Select all
<!--Navigation-->


<div id="navbar">
<ul class="navbar">  

  <li><a href="home.html">Home</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="services.html">Services</a></li>
  <li><a href="portfolio.html">Portfolio</a></li>
  <li><a href="contact.html">Contacts</a></li>
 <!-- <li><img alt="" src="blanknavbar.PNG" /></li>-->
  
  
</ul>


</div>
Last Blog Entry: Website critique (Apr 16th, 2008)

Last edited by motormaniac; Jul 13th, 2007 at 03:05.
Reply With Quote

  #2 (permalink)  
Old Jul 13th, 2007, 12:34
SuperMember

SuperMember
Join Date: Sep 2006
Location: Pink House
Posts: 3,946
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Help with navbar. ASAP

I believe if you add padding to your li a the area around the text will be highlighted as well...
Try this:
Code: Select all
ul.navbar a {
     
    color: white;
    padding: 2px 4px 2px 4px; 
    margin: 0; 
     }

ul.navbar a:hover {
     
    color: dark blue;
    padding: 2px 4px 2px 4px; 
    margin: 0;
Reply With Quote
Reply

Tags
image, repeat, wont

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
Navbar help motormaniac Graphics and 3D 14 Nov 4th, 2007 19:54
Navbar Slider Rick Flash & Multimedia Forum 5 Sep 20th, 2007 22:45
HELP! Need navbar help! ozzie123 Flash & Multimedia Forum 3 Nov 2nd, 2006 18:12
UL in a Div problem aka : My Navbar Accurax Web Page Design 3 Oct 11th, 2006 16:55
help with navbar bruno89 Web Page Design 7 Aug 18th, 2005 01:01


All times are GMT. The time now is 07:05.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43