14 replies [Last post]
nick.kirby
Offline
Regular
Last seen: 16 years 17 weeks ago
Joined: 2005-08-08
Posts: 18
Points: 0

Hello, I am trying to keep the top centre navigation bar a part of the heading - so it appears as an extension to the title bar, but shows jsut below it and can have different formatting adn what not.

However, the topnav class appears below the main header.

Could someone kindly explain how I can move the top navigation bar to just below the heading, without leaving any space between them?

Many thanks: here is my current CSS file:

#header
{
height:110px;
width:100%;
background-color:#6969EB;
text-align:center;
font-size:80px;
vertical-align:middle;
font-family:"Book Antiqua";
}

/* the the main top navigation information */
#topnav ul {list-style-type: none; text-align:center; font:"Book Antiqua";}
#topnav ul li {display: inline;}
#topnav ul li a {text-decoration: none; padding: .2em 1em; color: #fff; background-color: #6969EB; font-size:20px; }
#topnav ul li a:hover {color: #fff; background-color: #6969EB; }

Many thanks,

Nick

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 13 years 10 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

Horizontal Navigation bar placement

Can you post a link?

nick.kirby
Offline
Regular
Last seen: 16 years 17 weeks ago
Joined: 2005-08-08
Posts: 18
Points: 0

Horizontal Navigation bar placement

Certainly -

www.niknet.homeip.net

This is my test site, as it were. Please let me know if you are unable to access it. As you (should) see, the menu bar is below the top heading. I would really like it as part of the header.

I'd also like the columns to be the same lenth, and the rounded corners to work as well, but I figure one thing at a time!

Many thanks,

Nick

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 30 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Horizontal Navigation bar placement

One way of approaching it is

body {
  background-color: #C4C4D5;
  max-width:80em;
  margin:0 auto;
  padding:5px;
}
#header { 
  height:1.2em; 
  background-color:#6969EB;
  text-align:center;
  font-size:80px;
  font-family:"Book Antiqua";
}
#topnav {
  margin:10px 0;/*vary margin to suit design*/
}
/* the the main top navigation information */
#topnav ul {list-style-type: none;
 text-align:center;
 font:"Book Antiqua";
 font-size:20px;
 margin:0;
}
#topnav ul li {
  display: inline;
}
#topnav ul li a {text-decoration: none;
  padding: .2em 1em;
  color: #fff;
  background-color: #6969EB;
}
#topnav ul li a:hover {
  color: #fff;
  background-color: #6969EB;
}
/* the left hand column */
#leftcol,
#rightcol {
  width:22%;
  float:left;
  background-color: #6969EB;
  margin:0 1% 0 0;
}
#rightcol {
  margin:0 0 0 1%;/*swap the margins*/
}
#navigation {
  text-align:center;
  font-size:15px;
  vertical-align:middle;
  text-decoration:underline;
  font-family:"Book Antiqua";
}
#maincol {
  width: 54%;
  float:left;
  background-color: #6969EB;
}
/*and so on*/

I've made a few changes to allow a better range of browser and font resizing and adjusted the positional CSS so that it doesn't break. Play with the #topnav { margin:10px 0; } to get the spacing you want.

Please examine our code side by side so you can see the individual changes. I didn't change the font-sizes to ems but you should - fixed px sizing for fonts is unwise as it only works in IE.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

nick.kirby
Offline
Regular
Last seen: 16 years 17 weeks ago
Joined: 2005-08-08
Posts: 18
Points: 0

Horizontal Navigation bar placement

I apologise - I've copied adn pasted, but have made a couple of changes.

I have managed to move the menu bar to the top of the page, however it is still not stretched across in a solid blue bar.

I am perhaps being obtuse here, and not thinking about the later code that changes the left nav bar and creates the rounded box, which is this:

a:link {text-decoration: none; color: #FFFFFF}
a:visited {text-decoration: none; color: #FFFFFF }
a:hover {text-decoration: none;color: #FFFFFF }
a:active {text-decoration: none; color: #FFFFFF }
#sidenav ul {margin: 0; padding: 0; list-style-type: none;}
#sidenav a { display: block; font:"Book Antiqua" color: #FFF; background-color: #6969EB; width: 85%; padding: .2em .8em; text-decoration: none; }
#sidenav a:hover {background-color: #B4B4F5;color: #FFFFFF;}

/* the roundbox */
.rbroundbox {background: url(nt.gif) repeat; }
.rbtop div {background: url(tl.gif) no-repeat top left; }
.rbtop {background: url(tr.gif) no-repeat top right; }
.rbbot div {background: url(bl.gif) no-repeat bottom left; }
.rbbot {background: url(br.gif) no-repeat bottom right; }
.rbtop div, .rbtop, .rbbot div, .rbbot { width: 100%; height: 7px; font-size: 1px; }
.rbcontent { margin: 3%; text-align: justify; }
.rbroundbox {width: 85%; margin: 2% auto; position: relative;}

I have placed this at the end deliberately to ensure that the top nav looks different to the side nav, however aresome features being over written? Surely they wouldn't be, as they are defined as a different class?

Many thanks for your time. it is very much appreciated.

Is there a way of ensuring the columns are the same length as well?

Nick

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 15 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Horizontal Navigation bar placement

To nest the topnav within your header div, try this:

<div id="header">NIKNET
		<div id="topnav">
		<ul>
		<li><a href="#">home</a></li>
		<li><a href="#">writing</a></li>
		<li><a href="#">waffle</a></li>
		<li><a href="#">comps</a></li>
		<li><a href="#">rifts</a></li>
		</ul>
		</div>
</div>

I don't know what changes you have made to DE's css, but it works quite well with this:
#topnav { 
  margin:0 0 10px 0;/*vary margin to suit design*/ 
  padding:0;
} 

Same length columns are a "fallacy" and you need this technique to make them "look" as if they are the same length. http://www.alistapart.com/articles/fauxcolumns/

I'm going to defer to higher authority on your rounded boxes. Tongue

nick.kirby
Offline
Regular
Last seen: 16 years 17 weeks ago
Joined: 2005-08-08
Posts: 18
Points: 0

Horizontal Navigation bar placement

Hello there, I have altered the code only to insert 12px instead of 10, but the gaps between the tabs - which I want, but in the blue background colour (effectively keeping the spacing) and extending that same blue to the whole width of the header bar.

I will try something I have thought of, namely 'width'

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 30 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Horizontal Navigation bar placement

More CSS fun

/* the the main top navigation information */
#topnav
{
  margin:0% 0% 2% 0%; /*vary margin to suit design*/
  background-color: #6969EB;
  padding:.25em 0;
}
#topnav ul
{
  position:relative;/*allows use of relative positioning inside*/
  margin:0;
  list-style-type: none;
  text-align:center;
  font:"Georgia";
  font-size:20px;
}

#topnav ul li 
{
  display: inline;
  line-height:1.8em;/*allows menu to wrap but not overlap*/
}
#topnav ul li a 
{
  text-decoration: none;
  padding: 0 1em;/*let line-height take care of vertical spacing*/
  color: #ffffff;
  background-color: #6969EB;
  border:2px outset #6969EB;
}

#topnav ul li a:hover,
#topnav ul li a:active
{ position:relative;
  top:1px;/*jogs the button when hovered*/
  left:1px;
  border:2px inset #6969EB;
  color: #eee;
  background-color: #6969EB;
}

I'm bored this evening and you are the dubious beneficiary :?

I'm not really into your head in what you are trying to achieve but the above code is how I would approach this. Perhaps you don't want the menu borders - you could still use the jog trick, though. One other thing I saw - get rid of the width on #sidenav a - it is unnecessary and can make your box too wide at larger font sizes. And I want to see those fonts in ems or else I'll send Lorraine to whup yer butt! Please learn to use font shorthand - it'll take a couple tries but will make your life easier.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

nick.kirby
Offline
Regular
Last seen: 16 years 17 weeks ago
Joined: 2005-08-08
Posts: 18
Points: 0

Horizontal Navigation bar placement

Many thanks for that. I hope you don't mind but I turned off the "buttony" effect in favour of two vertical lines.

I have converted the fonts to ems. I hope this works as well.

I have discovered (in my dull witted way!) that the #body tag is not being applied. For exampl, the background colour should be a light grey (a shade of the ore colours) but it is not. The colour is white, and does not change as I fiddle with it.

I have gone through the code ot see if it is over ridden, but it does not appear to be. What am I missing?

Finally, is there a way to "shade/fade" the background colours? Itwould be quite pleasant to have the site start dark at the top and gradually get lighter, especially along the menu bar.

Many thanks for your help so far,

Nick

BonRouge
BonRouge's picture
Offline
Enthusiast
Sendai, Japan
Last seen: 13 years 10 weeks ago
Sendai, Japan
Timezone: GMT+9
Joined: 2005-07-10
Posts: 237
Points: 0

Horizontal Navigation bar placement

Quote:
Finally, is there a way to "shade/fade" the background colours? Itwould be quite pleasant to have the site start dark at the top and gradually get lighter, especially along the menu bar.

You can't do that with css alone - you need an image (a thin vertical gradient, repeat-x).
Here's an example.

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 30 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Horizontal Navigation bar placement

Put the borders on the link but of the same color then swap the colors for the hover like so:

#topnav ul li a
{ text-decoration: none;
  padding: 0 1em;/*let line-height take care of vertical spacing*/
  color: #ffffff;
  background-color: #6969EB;
  border-right:1px solid #6969EB;
  border-left:1px solid #6969EB; 
}

#topnav ul li a:hover,
#topnav ul li a:active
{ position:relative;
  background-color: #6969EB;
  border-color:#FFFFFF;
}

You need to take the '#' off the body tag - that is why the styles aren't getting applied. If you want to use the gradient bonrouge offered, copy it to your site. For visualization purposes you can preview what it would look like with:
body
{ 
  background: #A7A7AD url(http://bonrouge.com/test/bg2.png) repeat-x;
  max-width:100%;
  margin:5px;
  padding:0;
}

Note that having a gradient background will then mess up your nifty corners because of the color contrast.

Also, for your nifty corners to work, you cannot have any padding on the div being "cornered." Instead, you should put a div-in-a-div and "pad" by adding margins to the inner div.

Its coming right along.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

nick.kirby
Offline
Regular
Last seen: 16 years 17 weeks ago
Joined: 2005-08-08
Posts: 18
Points: 0

Horizontal Navigation bar placement

I get the first bit - sort of, but I don't get the div in a div - I am a div, but not sure what to do. Basically I can't quite understand that someone hasn't written a iece of software that lets you draw, freehand what you want, them does the CSS for you!

If i take the padding out - yes, I get the corners. However, then everything gets squashed in the column.

Is there a way to apply a box to the centre column, a bit like a news box with a different colour heading/main area, with specific spaces around it so it looks like it sits inside the main column, and resizes with it?

I am not sure what use i will put the right column to yet, so I am trying to be flexible.

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 30 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Horizontal Navigation bar placement

nick.kirby wrote:
I get the first bit - sort of, but I don't get the div in a div ... However, then everything gets squashed in the column.

Well that is the point of the div in div like:
<div id="I_am_the_div_with_fancy_corners">
  <div class="I_provide_the_spacing">
    Content blah blah
  </div>
</div>

where the CSS is:
div.I_provide_the_spacing {
  margin:5px;
}

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

nick.kirby
Offline
Regular
Last seen: 16 years 17 weeks ago
Joined: 2005-08-08
Posts: 18
Points: 0

Horizontal Navigation bar placement

Hello again! My sincere thanks for everyone's help.

I keep looking at all fo the code and I can't see why there are 1pixel lines above the two columns and below the middle heading.

I also don't understand why the right hand column is not the same width as the left hand column. The only thing I can think of is that it is set to "float" left. What I really want I'd imagine si everything positioned "just so", with set widths in pixels between them, and expanding to fill screens appropriately, but also lining up to the sides of the page, then the middle column centred relative to the left AND right columns.

Does this make sense or am I gibbering again?

Nick

nick.kirby
Offline
Regular
Last seen: 16 years 17 weeks ago
Joined: 2005-08-08
Posts: 18
Points: 0

Horizontal Navigation bar placement

Have fixed the padding issue, now have rouned corners!

I'ev been asking php people if there is a way to have the side menu change depending upon which of the topnav buttons is clicked.

Sort of like:

Click: writing
#sidenav content changes to:
writing1
writing 2
writing3
writing4

similarly with comps. The pervious menu is sort of ignored (in a "multiple if" sort of statement and the new replaced.

Basically, there would be one page with everything called inside of that. Can this be done with CSS? Apaprently it cannot with PHP.

My sincere and grateful thanks to everyone who has helped me so far.

Cheers!