Nav bar descreases in height when click on link

This is a discussion on "Nav bar descreases in height when click on link" within the Web Page Design section. This forum, and the thread "Nav bar descreases in height when click on link are both part of the Design Your Website category.


 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design
Reload this Page Nav bar descreases in height when click on link

Notices
Please Register!
Webforumz.com is an education based community supporting web designers, developers and those who are new and learning. If you are a designer, developer, learning web design or are thinking about a career in web design then you have come to the right place. Register for free now to access more information and to participate in discussion and debate.
Hi Unregistered, why not enter WOTM this month and show off your skills? Not only will you win the admiration of your colleagues, but also one years supermember status and your site featured on the home page. Go on enter NOW !




Reply
 
LinkBack Thread Tools
  #1  
Old Apr 12th, 2006, 14:37
Junior Member
Join Date: Jan 2006
Age: 42
Posts: 30
Thanks: 0
Thanked 0 Times in 0 Posts
Nav bar descreases in height when click on link
For some reason the nav bar decreases in height when the guestbook link is clicked on.

Any help would be appreciated:

http://www.club-amigos.co.uk/guestbook/gbook.php
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote

  #2  
Old Apr 13th, 2006, 07:24
Junior Member
Join Date: Nov 2005
Posts: 12
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Nav bar descreases in height when click on link
Hi there matey

Just had a look over your code.

2 things ...

1) Your CSS is very neat, Well done

2) I beleive the problem is being caused because you haven't set the height element of the "#navcontainer li a {"

Currently, Your code says ...

Code: Select all
#navcontainer li a {
     border-right:#84979c 1px solid;
     border-top:#84979c 1px solid;
     border-bottom:#84979c 1px solid;
     display:block;
     background-color:#deffff;
     width:94px;
     color:#444;
     text-decoration:none;
     text-align:center;
     padding-top:2px;
     padding-bottom:2px;
 }
It needs to say ...

Code: Select all
#navcontainer li a {
     border-right:#84979c 1px solid;
     border-top:#84979c 1px solid;
     border-bottom:#84979c 1px solid;
     display:block;
     background-color:#deffff;
     width:94px;
     color:#444;
     text-decoration:none;
     text-align:center;
     padding-top:2px;
     padding-bottom:2px;
     HEIGHT : 17px /* Adjusted to your needs */
}
 
Hope this sorts it :)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Apr 13th, 2006, 08:07
Junior Member
Join Date: Jan 2006
Age: 42
Posts: 30
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Nav bar descreases in height when click on link
Hi,

Thanks for the compiment on my coding, that sort of works.

The only problem which l have now is that the text is not aligned in horizontally in the nav bar when l click on the guestbook and forum links.
Any ideas as to how l resolve this issue?

http://www.club-amigos.co.uk/mboard/mboard.php

http://www.club-amigos.co.uk/guestbook/gbook.php
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4  
Old Apr 13th, 2006, 08:16
Junior Member
Join Date: Nov 2005
Posts: 12
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Nav bar descreases in height when click on link
hmmm

I can honestly say ive never seen this happen before

Try removing the padding-bottom.

Techinically, Its not doing anything.

Hope this helps...
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #5  
Old Apr 13th, 2006, 08:21
Junior Member
Join Date: Jan 2006
Age: 42
Posts: 30
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Nav bar descreases in height when click on link
Still no luck any other ideas or suggestions?
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #6  
Old Apr 13th, 2006, 09:10
Junior Member
Join Date: Nov 2005
Posts: 12
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Nav bar descreases in height when click on link
Hi jj1234

I've re-written your code and come up with this ...

http://www.dpsites.co.uk/help/

Obviously, put your graphics in hehehe ...

That SHOULD work, its coded for HTML 4.0 Strict.

Feel free to use my source code...

the style sheets used can be found ...

Here ...

http://www.dpsites.co.uk/help/css/elements.css

And here ...

http://www.dpsites.co.uk/help/css/layout.css

Hope this helps

Dan
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #7  
Old Apr 13th, 2006, 09:19
Junior Member
Join Date: Jan 2006
Age: 42
Posts: 30
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Nav bar descreases in height when click on link
Hi, many thanks for that it is much appreciated.

I only have one concern and that is that l concerned in putting brand new coding in , in case l make things worse. i..e l am reluctant to cut and paste in case l miss some things out.
Could you possibly tell me what alterations l need to make to my current coding, in case l make a hash of pasting the new code in.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #8  
Old Apr 13th, 2006, 09:27
Junior Member
Join Date: Nov 2005
Posts: 12
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Nav bar descreases in height when click on link
Hi

Just replace you current section of code titled "#navcontainer" with the following ...

Code: Select all
#navcontainer {
 Background: #F0F0F0;
 Display: block;
 Height: 18px;
 Width: 760px; 
}
 
#navcontainer ul {
 Margin: 0;
 Padding: 0;
}
 
#navcontainer li {
 List-style: none;
 Float: left;
 Margin: 0;
 Padding: 0;
}
 
#navcontainer li a {
 Background: #DEFFFF;
 Border-bottom: #84979C 1px solid;
 Border-right: #84979C 1px solid;
 Border-top: #84979C 1px solid;
 Color: #444444;
 Display: block;
 Float: left;
 Height: 17px;
 Padding-top: 2px;
 Text-align: center;
 Text-decoration: none;
 Width: 94px;
}
 
#navcontainer li a:hover {
 Background: #FFFFFF;
 Color: #AA0000;
}
Hope it works for you


Ooooo

And at the top of your atual content pages ...

Change your doctype to

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Now that SHOULD work hehehe
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #9  
Old Apr 13th, 2006, 09:38
Junior Member
Join Date: Jan 2006
Age: 42
Posts: 30
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Nav bar descreases in height when click on link
No luck if you see forum link pages you will see what l mean.

I have not changed the doc-type yet, in case it make things worse.

http://www.club-amigos.co.uk/navbar.jpg

You will notice the text is not aligned in the centre

I have therefore returned it back to its original state
Last edited by jj1234; Apr 13th, 2006 at 09:43.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #10  
Old Apr 13th, 2006, 09:47
Junior Member
Join Date: Nov 2005
Posts: 12
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Nav bar descreases in height when click on link
Hi again

Create a new folder on your web server, copy the site to that folder and play with that ... Then it doesnt matter if it goes WRONG!

You NEED to change the doctype, or the CSS i've written wont take effect

Good luck
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #11  
Old Apr 13th, 2006, 10:38
Junior Member
Join Date: Jan 2006
Age: 42
Posts: 30
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Nav bar descreases in height when click on link
Hi, l have done and it works!

http://www.club-amigos.co.uk/test/index.htm

Many thanks for your help.

I have one small problem and would appreciate your help and that is with the caldner page, for some reason the end nav bars are chopped off.

http://www.club-amigos.co.uk/test/april.html

I have tried to make adjustments but no luck, l have made change to doc type but no luck.

css:
html, body {
margin : 0;
padding : 0;
}

body {
font : 12px "Lucida Sans Unicode", Verdana, sans-serif;
color : #333333;
background: #e9eef4;
width : 100%;
}

a:link {
color : blue;
background : transparent;
text-decoration : none;
}

a:visited {
color : purple;
text-decoration : none;
}

a:hover {
color : red;
}

a:active {
color : red;
}

h1 {
text-align : center;
font : bold 17px "Lucida Sans Unicode", Verdana, sans-serif;
margin: 0px;
clear: left;
padding-top: 1px;
padding-bottom: 2px;
background: #ffffff
}


#wrapper {
background-color: white;
overflow: auto;
text-align : left;
padding : 0;
border-top : 1px solid #66635C;
border-bottom : 1px solid #66635C;
border-left : 1px solid #66635C;
border-right : 1px solid #66635C;
margin : 5px auto;
width : 761px;
}

#header {
background-image : url(club_amigo_logo.jpg);
background-repeat : no-repeat;
margin: 0px;
height : 107px;
}

#content {
margin: 0px;
padding : 10px;
background : #ffffff;
}

#content p {
margin : 0 60px 8px 0;
font-family:verdana,arial,helvetica,sans-serif;
text-align : justify;
}

#rightcol {}

#rightcol p {}


#navcontainer {
Background: #F0F0F0;
Display: block;
Height: 18px;
Width: 760px;
}

#navcontainer ul {
Margin: 0;
Padding: 0;
}

#navcontainer li {
List-style: none;
Float: left;
Margin: 0;
Padding: 0;
}

#navcontainer li a {
Background: #DEFFFF;
Border-bottom: #84979C 1px solid;
Border-right: #84979C 1px solid;
Border-top: #84979C 1px solid;
Color: #444444;
Display: block;
Float: left;
Height: 17px;
Padding-top: 2px;
Text-align: center;
Text-decoration: none;
Width: 94px;
}


#navcontainer .last {

BORDER-RIGHT: none;

WIDTH: 97px;

overflow: hidden;

}

#navcontainer ul li a:hover {
color : #000;
background : #FFCCCC;
}

#navcontainer a:active {
background : #ffecd2;
color : #fff;
}


#specialborder {
border-right : 1px solid #84979C;
}

#searchform {
background: #fff;
padding: 2px;
width: auto;
border: 1px solid #999;
}

#searchbut {
background: #fff;
font-size: 90%;
width: auto;
border: 1px solid #333333;
margin-left : 2px;
}

#searchinput {
background: #deffff;
font-size: 90%;
border: 1px solid #1d4151;
margin-left : 2px;
width : 53px;
}

#footer {
border-bottom : 1px solid #000;
border-top : 1px solid #000;
margin : 0 28px 0 25px;
padding : 10px;
}

#counter {
display : none;
}

#navcal {
margin-top : 0;
margin-left: 10px;
}


#navcal ul {
background: #fff;
list-style : none;
margin : 0 0 0 0px; /* adjust left margin to suit */
padding : 0;
text-align : center;
}

#navcal li {
margin-top: 10px;
background: #fff;
display : block;
float : left;
padding-bottom: 10px;
}

#navcal LI A {

BORDER-left: #84979c 1px solid;

BORDER-TOP: #84979c 1px solid;

DISPLAY: block;

BACKGROUND: #deffff;

WIDTH: 61px;

COLOR: #444;

BORDER-BOTTOM: #84979c 1px solid;

TEXT-DECORATION: none;

TEXT-ALIGN: CENTER;

padding-top: 2px;

padding-bottom: 2px;

}


#navcal .last {

BORDER-RIGHT: #84979c 1px solid;

WIDTH: 50px;

}

#navcal ul li a:hover {
color : #000;
background : #FFCCCC;
}

#navcal a:active {
background : #ffecd2;
color : #fff;
}


#navcalbottom {
margin-top : 0;
margin-left: 0px;
background: #ffffff;
}


#navcalbottom ul {
background: #fff;
list-style : none;
margin : 0 0 0 0px; /* adjust left margin to suit */
padding : 0;
text-align : center;
}

#navcalbottom li {
margin-top: 10px;
background: #fff;
display : block;
float : left;
padding-bottom: 10px;
background: #fff;
}

#navcalbottom LI A {

BORDER-LEFT: #84979c 1px solid;

BORDER-TOP: #84979c 1px solid;

DISPLAY: block;

BACKGROUND: #deffff;

WIDTH: 248px;

COLOR: #444;

BORDER-BOTTOM: #84979c 1px solid;

TEXT-DECORATION: none;

TEXT-ALIGN: CENTER;

padding-top: 2px;

padding-bottom: 2px;

}


#navcalbottom .last {

BORDER-RIGHT: #84979c 1px solid;

WIDTH: 241px;

}

#navcalbottom ul li a:hover {
color : #000;
background : #FFCCCC;
}

#navcalbottom a:active {
background : #ffecd2;
color : #fff;
}
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #12  
Old Apr 13th, 2006, 11:20
Junior Member
Join Date: Nov 2005
Posts: 12
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Nav bar descreases in height when click on link
hmm ... it appears fine in my screen buddy ... Could you explain furthur what you mean?
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #13  
Old Apr 13th, 2006, 11:22
Junior Member
Join Date: Jan 2006
Age: 42
Posts: 30
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Nav bar descreases in height when click on link
Hi,

I managed to rsolve it , the only minor issue l have now is that for some odd reason the text moves verticallally up on the nav bar when l click on the guestbook link, l personally don't think this issue is resolvable, would you agree?
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #14  
Old Apr 13th, 2006, 13:04
Junior Member
Join Date: Nov 2005
Posts: 12
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Nav bar descreases in height when click on link
Hi again

This should sort itself out if ...

You need to add a font-family, and a font-size to your "#navcontainer li a" and your "#navcontainer li a:hover".

Hope it works
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #15  
Old Apr 13th, 2006, 13:15
Junior Member
Join Date: Jan 2006
Age: 42
Posts: 30
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Nav bar descreases in height when click on link
That worked great thanks for that, how did you work that out, l am just curious thats all?

The only issue l have now, which is very minor is that when l click on the forum and guestbook and forum links on the navbar the end link (contact) is not fully aligned to the far right.

It is fine with all the other pages for some reason?
Last edited by jj1234; Apr 13th, 2006 at 13:19.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #16  
Old Apr 13th, 2006, 14:02
Junior Member
Join Date: Nov 2005
Posts: 12
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Nav bar descreases in height when click on link
Working it out was realativly easy mate. Im only 17 but ive been playing with CSS and web standards for nearly 2 years now. Little problems like boxes resizing themselves can only be caused by a small number of things.

I really have no idea why the link at the top doesnt align with the container on JUSt those 2 pages. Ill have a look for you when i get home tonight. Its quite hard to figure out at college :P

Cya soon
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #17  
Old Apr 13th, 2006, 14:05
Junior Member
Join Date: Jan 2006
Age: 42
Posts: 30
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Nav bar descreases in height when click on link
It would be appreciated if you could do this, as l am baffled, l am very impressed by the skills for someone of your age.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #18  
Old Apr 14th, 2006, 09:26
Junior Member
Join Date: Nov 2005
Posts: 12
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Nav bar descreases in height when click on link
Hey JJ

Dont worry mate, i havent forgotton about you, im just a little snowed under with some current work of my own. Ill go voer your code at some point today, And ill have an answer with you for tonight

Cheers

Note to an Admin : Can i ask why 13 year old "James Trickey" has given me -1 brownie points? If someone could just let me know what ive done, That'll be much appreciated.

Thanks