Welcome to WebmasterWorld Guest from 23.22.140.143

Forum Moderators: not2easy

Message Too Old, No Replies

Current page tab

     
10:38 pm on May 10, 2012 (gmt 0)

New User

joined:May 10, 2012
posts: 8
votes: 0


Hi, I need help and wondered if you could help me.

I can't for the life of me figure out how to get my menu to have a current page tab. Everything else works fine.

This is my html...

 <div id="menubar">
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="ourwork.html">Our Work</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul> </div>


This is my CSS...



#menubar
{ width: 720px;
float: right;
height: 50px;
text-align: center;
margin: 0 auto;
background: transparent;}


ul#menu
{ float: right;
margin:0;
border-right: 1px solid #FFF;}

ul#menu li
{ padding: 0 0 0 0px;
list-style: none;
margin: 2px 0 0 0;
display: inline;
background: transparent;}

ul#menu li a
{ font: normal 120% Arial, Helvetica, sans-serif;
float: left;
letter-spacing: -1px;
height: 35px;
padding: 15px 20px 0 20px;
text-align: center;
color: #FFF;
text-decoration: none;
background: transparent url(../images/tab.png);}

ul#menu li a span{
background:url(../images/tab.png) left 60px;
display:block;
height:30px;
margin-right:14px;
padding-left:14px;
}

ul#menu li a:hover{
background:url(../images/tab.png) right 900px;
display:block;
color:#e0ded0;
}


This is for a top right hand navigation bar. IF anyone has any better ways of doing this, I would be hugely greatful.
10:59 pm on May 10, 2012 (gmt 0)

New User

joined:May 10, 2012
posts: 8
votes: 0


Nevermind, I fixed it.

I realised after I was editing a backup index, so the links wern't correct.

My solution was to add...



body#home a#home,
body#contactus a#contact,
body#gallery a#menu,
body#about a#menu
{
background:url(../images/tab.png) left 50px;
display:block;
color:#65748C;;
}


and then use the body id tag for each page. works perfectly now.
10:12 am on May 11, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


Hi tetsuo3, and welcome to WebmasterWorld :)

Pleased you have the issue resolved - and thanks for posting the solution.
3:47 pm on May 19, 2012 (gmt 0)

New User

joined:May 10, 2012
posts: 8
votes: 0


Hi No problem,

I decided to start all over again in the end and I have ran into another problem. I'm wondering if anyone can look at my code and tell me a better way to do the header.

This is some basic layout I've started. I've made the header span the width of the page, while the centre content stays aligned in the centre.

Inside the header, I've put another wrapped mini header, which is where I'll put my logo etc (so they'll stay in line with the nav and stuff).

[img189.imageshack.us...]

As you can see, my inside header div floats a little to the right, and I can't figure out why.

This is my html for the top part of the site (where my error lies)...

<body>

<!-- Begin Header -->
<div id="header">

<div id="wrapperheader">
<div id="headerinner">
all my logo and stuff goes here inside this centre aligned div.
</div>
</div>

</div>
<!-- End Header -->

<!-- Begin Wrapper -->
<div id="wrapper">


<!-- Begin Navigation -->
<div id="navigation">
<div id="menubar">
<ul id="menu">
<li><a id="home" href="index.html">Home</a></li>
<li><a id="work" href="ourwork.html">Repairs</a></li>
<li><a id="testimonials" href="testimonials.html">Testimonials</a></li>
<li><a id="projects" href="projects.html">Custom Projects</a></li>
<li><a id="contact" href="contact.html">Contact Us</a></li>
</ul>
</div>

</div>

<!-- End Navigation -->


and this is the css for those bits...

}
#wrapper {
margin: 0 auto;
width: 922px;
}

#wrapperheader {
margin: 0 auto;
width: 922px;
}

#header {
color: #333;
width: 100%;
padding: 10px;
height: 100px;
margin: 0px 0px 5px 0px;
background: #D1DBDB
}

#headerinner {
color: #333;
width: 922px;
padding: 5px;
height: 90px;
margin: 0px 0px 0px 0px;
background: #fff
3:52 pm on May 19, 2012 (gmt 0)

New User

joined:May 10, 2012
posts: 8
votes: 0


Ok nvm, I'm stupid. I just noticed the code on here, and the #header still has padding. I've changed that and now it lines up to the left fine. Then I just changed the width of the #innerheader to match the rest of the site.

Sorry I keep asking then solving. I'm new at this and constantly experimenting and stuff till it works. But I couldn't figure it out for a while.

Actually. I will have another question. I actually want my navigation on the right hand side, but I can't lock it against the edge of the div. Instead it either overlaps or goes to the line underneath and I can't figure out why either.
7:26 pm on May 19, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member g1smd is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2002
posts:18903
votes: 0


The home page should be linked as href="/" and NOT as a named index file.

Always avoid the ../ notation in links. Start the URL with a leading slash.
10:01 pm on May 19, 2012 (gmt 0)

New User

joined:May 10, 2012
posts: 8
votes: 0


Hi Thanks for the tips. I didn't know that.

However, I'm having problems with the image links.

If I remove the ../ they stop working.
2:10 am on May 20, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

joined:Apr 9, 2011
posts:12709
votes: 244


If I remove the ../ they stop working.

He didn't mean simply replace ../ (relative link) with / (site-absolute link). He meant, replace ../ with the full path to the background image, where / is the top-level directory.

www.example.com/images/background.jpg = /images/background.jpg

www.example.com/directory/images/background.jpg = /directory/images/background.jpg

If you are testing your site locally, the leading-slash format will not work in the browser or html preview. You have to install a pseudo-server like WAMP.
9:39 pm on May 22, 2012 (gmt 0)

New User

joined:May 10, 2012
posts: 8
votes: 0


Hm

Well I've got a major problem. I don't quite understand what links I need. When I upload it to my ftp none of the images work.

My website directory is called web.

So web/images/blah.png

Do I link to the the fulladdress... www.mywebsite.co.uk/web/images/blah.png? (i've tried that actually, it doesn't work).

Sorry for such noob questions lol.
9:52 pm on May 22, 2012 (gmt 0)

New User

joined:May 10, 2012
posts: 8
votes: 0


Ok nvm, I forgot to upload the images into the ftp. Works now. I'm so stupid sometimes.
11:38 pm on May 22, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

joined:Apr 9, 2011
posts:12709
votes: 244


Been there. Done that :)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members