Hello,

 

As posted earlier I'm new to this forum and I'm a rookie when it comes to web design but i'm looking to get into it, and with help hopefully I can learn some more.

 

I've just started my first serious website for a friend; www.riseonenation.co.uk

 

Just to give you a bit of background with my setup. I use Dreamweaver and Photoshop to create websites. I download free templates then modify them. All the stuff I know is self taught (very little) and I have an account with 1and1.

 

So here goes;

 

My first problem is that i've managed to change the font to a really small size on my navigation and I'm struggling to get it back to the original size.

 

Can someone please supply me with basic instructions of how to change the size?

 

All help is much appriecated. Thanks for your patience.

 

SmuJ

In the css

 

body{font-size:12%;}

 

thats whats doing it

Thanks for your help mteam. I've managed to get the navigation font back to the orginial size however I only want the blue bar to appear underneath the page im viewing not every tab.

 

Secondly I want to change the hover colour to white on the tabs. I only managed to change the hyperlinks hover colour in the main body of text- not the tabs in the nav bar.

 

Any help would be much appriecated. Thanks once again.

I've edited your code to do both your requests:-

CSS

#menu li a 
{ display: block;
 float: left; 
 height:26px;
 text-decoration: none; 
 padding: 6px 19px 0px 19px;
 border-right: 2px solid;
 font-weight: bold;
 background: #40403E;
 color: #929280;
 border-color: #2C2C2A;
 background:transparent url(images/nav_tab_bg.png) no-repeat scroll left 
top; font-size: x-small; /*font-size added*/
} 

#menu li a:hover  /* I deleted , #menu li a.selected, #menu li a.selected:hover including the , comma*/
{
background: #82974B;
color: #929280;
border-color: #2C2C2A;
background:transparent url(images/nav_tab_bg.png) no-repeat 
scroll left top;
background-position: 0 -34px;
font-size: x-small;
} 

#menu li a.selected:hover { color: #ffffff; } /*.selected now only controls white hover color*/

#home .home,
#listen .listen,
#profiles .profiles,
#timetable .timetable,
#events .events,
#shouts .shouts { background: #82974B;
color: #929280;
border-color: #2C2C2A;
background:transparent url(images/nav_tab_bg.png) no-repeat 
scroll left top;
background-position: 0 -34px;
font-size: x-small; }

 

HTML markup:-

<div id="menu">
   <ul id="home"> <--the id changes on every page to id="listen" etc-->     
<li><a href="index.html" class="selected home">Home</a></li>
     <li></li>
     <li><a class="selected listen" href="#">Listen</a></li>
     <li></li>
      <li></li>
     <li><a href="#" class="selected profiles">DJ/MC Profiles</a></li>
     <li></li>
     <li></li>
  <li><a href="#" class="selected timetable"> Timetable 
</a></li>
     <li><a href="#" class="selected events">Events</a></li>
     <li></li>
     <li><a href="#" class="selected shouts">Shouts</a></li>
     <li></li>
   </ul>
 </div>

 

The li tags are the same for every page but you need to edit the ul tag id on every page <ul id="listen"> <ul id="profiles"> etc. so then the image changes only when there is a matched pair. I tested on IE7 and Firefox and it's OK.

 

I've got it coded so that the current page has a permanent blue underline but also the tab being hovered over but you could change that.

I've edited your code to do both your requests:-

CSS

#menu li a 
{ display: block;
 float: left; 
 height:26px;
 text-decoration: none; 
 padding: 6px 19px 0px 19px;
 border-right: 2px solid;
 font-weight: bold;
 background: #40403E;
 color: #929280;
 border-color: #2C2C2A;
 background:transparent url(images/nav_tab_bg.png) no-repeat scroll left 
top; font-size: x-small; /*font-size added*/
} 

#menu li a:hover  /* I deleted , #menu li a.selected, #menu li a.selected:hover including the , comma*/
{
background: #82974B;
color: #929280;
border-color: #2C2C2A;
background:transparent url(images/nav_tab_bg.png) no-repeat 
scroll left top;
background-position: 0 -34px;
font-size: x-small;
} 

#menu li a.selected:hover { color: #ffffff; } /*.selected now only controls white hover color*/

#home .home,
#listen .listen,
#profiles .profiles,
#timetable .timetable,
#events .events,
#shouts .shouts { background: #82974B;
color: #929280;
border-color: #2C2C2A;
background:transparent url(images/nav_tab_bg.png) no-repeat 
scroll left top;
background-position: 0 -34px;
font-size: x-small; }

 

HTML markup:-

<div id="menu">
   <ul id="home"> <--the id changes on every page to id="listen" etc-->     
<li><a href="index.html" class="selected home">Home</a></li>
     <li></li>
     <li><a class="selected listen" href="#">Listen</a></li>
     <li></li>
      <li></li>
     <li><a href="#" class="selected profiles">DJ/MC Profiles</a></li>
     <li></li>
     <li></li>
  <li><a href="#" class="selected timetable"> Timetable 
</a></li>
     <li><a href="#" class="selected events">Events</a></li>
     <li></li>
     <li><a href="#" class="selected shouts">Shouts</a></li>
     <li></li>
   </ul>
 </div>

 

The li tags are the same for every page but you need to edit the ul tag id on every page <ul id="listen"> <ul id="profiles"> etc. so then the image changes only when there is a matched pair. I tested on IE7 and Firefox and it's OK.

 

I've got it coded so that the current page has a permanent blue underline but also the tab being hovered over but you could change that.

 

Thanks very much Wickham! You've been more then helpful.

 

When I'm home tonight I will have a go at replacing the code using the new one you've supplied.

 

I'm beginning to gain a clearer understanding of the CSS style and the way it interacts with the HTML.

Hhhmm... I'm stuck.

 

I think I've put the code in the right places. I can now see the Nav Tabs hover colour has changed to white. But they seem to still all have the blue tint under each tab.

 

I think I'm misunderstanding the code provided.

You've just missed this bit off Wickham's advice

 

 

/* I deleted , #menu li a.selected, #menu li a.selected:hover including the , comma

 

so this

#menu li a:hover, #menu li a.selected, #menu li a.selected:hover
{
background: #82974B;
color: #929280;
border-color: #2C2C2A;
background:transparent url(../images/nav_tab_bg.png) no-repeat scroll left top;
background-position: 0 -34px;
font-size: x-small;
} 

 

should be

 

#menu li a:hover{
background: #82974B;
color: #929280;
border-color: #2C2C2A;
background:transparent url(../images/nav_tab_bg.png) no-repeat scroll left top;
background-position: 0 -34px;
font-size: x-small;
} 

...and where is this part of my CSS?

 

#home .home,
#listen .listen,
#profiles .profiles,
#timetable .timetable,
#events .events,
#shouts .shouts { background: #82974B;
color: #929280;
border-color: #2C2C2A;
background:transparent url(images/nav_tab_bg.png) no-repeat 
scroll left top;
background-position: 0 -34px;
font-size: x-small; }

 

You have used <ul id="Home"> in the html but I used home in lower case. Little things like that matter.

 

I hope you can now get it working, it worked perfectly for me. Look at this

http://www.wickham43.com/forumposts/smujriseonenation101028.html

and this http://www.wickham43.com/forumposts/smujriseonenation101028-listen.html which is the same page as the home page but I used <ul id="listen"> to see how it would work on the Listen page (links don't work because you only have # in the href="#" at present- it's just to test the menu).

 

When you are given code in a forum like this, it's a good idea to copy/paste. If you try to edit manually you will get it wrong, even by just missing a . period.

When I copied & pasted the code, it still had the comments showing on my web page. So I deleted the comments, I probably deleted other parts by mistake. Thank you for the advice mteam and Wickham. It's a bit of School boy error in regards to the capital letters on my behalf. The dummy website is how I want the tabs showing.

 

Again, when i'm back home tonight I shall refer back to this thread and have another go.

 

I've been thinking that the best way for me is when I start a website I should be working on one page at a time, until I've got it exactly how I want it, then make a copy of this page and rename to make then start working with the other pages. Would you recommend this for my situation? Obviously I will have to change the ul tag id's on every page and links.

 

Also, just out of interest do you guys work as Web Designers 9-5?

 

Regards,

All sorted now. Thanks for your help guys.

 

I will start a new thread for further problems.