7 replies [Last post]
sonny
sonny's picture
Offline
Regular
Southern California
Last seen: 17 years 48 weeks ago
Southern California
Joined: 2004-07-29
Posts: 19
Points: 0

Hello all,
This is my first CSS site, figured I would try a tableless layout. i'm redesigning a site for a client and she also wants it asseccible to, so I figured this type of site is the best type.
I'm having a problem with the top and bottom nav bars, I can't get the text to center vertically, no matter what I do. Can someone help me get this right.
The site is here
http://www.extracurious.com/new%20design/ec_index.html
And the style is here for this container is

.top_nav{
background: url(images/top_nav.gif) no-repeat scroll left top;
height: 35px;
width: 577px;
margin: 0px;
text-align: center;
vertical-align: middle;
padding: 0px;
}
I have tried using padding and all that does is make a gap between the navbar and the content area so I get a grey line under the nav bar. I have tried just about everything, using an ID instead of a class, putting another container inside the navbar to hold the links and nothing works.
Thank you,
Sonny

"Imagination is more important than knowledge."
Albert Einstein

Deborah Puckett
Bee Studios
Graphic Soup Design

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 9 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

New site for client

First of all, give the body some top padding. Then, change everything that is Times New Roman to . . . well, anything other than Times New Roman.

You probably don't need a navbar at both the top and bottom, just one at the top should do fine.

As for the problem . . . I have absolutely no idea.

Verschwindende wrote:
  • CSS doesn't make pies

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 17 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

New site for client

I'll have to disagree with pineapplehead, use the two navbars - especially if the content is going to be as long or longer than your example.

to address the problem:

Quote:

The vertical-align property in CSS has given gray hair to many a starting css coder until they finally realized what this property is, and what it is not.

This property does not vertically align elements inside a box element. It is not the CSS equivalent for the HTML attribute valign="middle".

Vertical-align aligns the content inline. This means it is vertically aligned in comparison to the elements right before and after, and not in reference to parent/child. This means that this property can align text within a line or inside a <td>.

Now there are hacks out there to make it work, but the padding would be simplest in this case (IMHO). The reason for the space you had encountered was probably because you padded all sides, including the bottom. Just pad the top.
Use either -
padding-top: (10)px; or
padding: 10px 0px 0px 0px;

HTH

P.S. That's some friend you have :oops: Laughing out loud

sonny
sonny's picture
Offline
Regular
Southern California
Last seen: 17 years 48 weeks ago
Southern California
Joined: 2004-07-29
Posts: 19
Points: 0

New site for client

Thank you all for your quick replies and help.
Pineapplehead the reason the links are in times roman is because I have not styled them yet. When I style them they will not be times roman.

Quote:
Now there are hacks out there to make it work, but the padding would be simplest in this case (IMHO). The reason for the space you had encountered was probably because you padded all sides, including the bottom. Just pad the top.
Use either -
padding-top: (10)px; or
padding: 10px 0px 0px 0px;

Wolfcry
I will be using both top and bottom nav bars. Hey I got it fixed yeah I did what you said and took out the middle alignment and padded just the top 7px, I did have a gap on the top under the nav bar put fixed it by giving the Content Div a -7 margin.

http://www.extracurious.com/new%20design/ec_index.html

I hope that is ligit. Is it a good idea to nest so many divs like this, I may be able to make the header just one div combine the nav with the top header, I was just playing around with different things trying to fix it and thought it might be easier to separate the two the header from the nav.

I checked it in IE, netscape, mozilla and opera and so far it looks ok, but need to have it checked some more on older browsers and Mac.

Boy when I try to lay our her shopping cart with all the images and text and all I may be pulling my hair out. Thank goodness all her products will be lined up one after another not side by side, that will make it a bit easier.

She does only have a few thumbnails that are side by side put they will only have captions under the images, so that would be pretty easy, I found a great tut on how to do that.

Yeah that is some site hey LOL!!!, i really want to put this in my portfolio, but it scares other clients away. [/url]

"Imagination is more important than knowledge."
Albert Einstein

Deborah Puckett
Bee Studios
Graphic Soup Design

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 17 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

New site for client

I can check it out on Mac for you tomorrow. One thought though, you may want to style the nav text in pixels rather than dynamically with ems or %. That way it will stay centered regardless of what settings the user has. It's okay to nest div - thats what they're for (unlike tables which should display tabular data).

sonny
sonny's picture
Offline
Regular
Southern California
Last seen: 17 years 48 weeks ago
Southern California
Joined: 2004-07-29
Posts: 19
Points: 0

New site for client

wolfcry911 wrote:
I can check it out on Mac for you tomorrow. One thought though, you may want to style the nav text in pixels rather than dynamically with ems or %. That way it will stay centered regardless of what settings the user has. It's okay to nest div - thats what they're for (unlike tables which should display tabular data).

Oh thanks Wolf. yeah i'm used to using pixels for everything. It is very confusing though, there is so much info on the internet and everyone says something different, so I was not sure which measurement to use. I'm so happy pixels is it.

I will be seperating all the navigation and using SSI for this site, after I'm sure the layout is as perfect as can be. This is my first assecibility site too so I'm learning a lot of stuff about that.
I use dreamweaver but was thinking of buying style master and maybe layout master, not sure they will be better or not for building CSS websites, it seems they may be.

Thanks again
Sonny

"Imagination is more important than knowledge."
Albert Einstein

Deborah Puckett
Bee Studios
Graphic Soup Design

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 17 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

New site for client

Okay,

I've included screenshots of safari and ie on the mac. The navbar looks fine now (maybe 1px too low). I noticed a problem in Safari with the left side navigation. Look at the FAQ in relation to the search above it.

Safari:

and IE:

I like to use the dynamic font sizes for the most accessiblilty, allowing users to increase or decrease sizes to their liking. I meant to set only the navbar font size in px to keep it lined up regardless of what the user does on their end.

I thought of another way of centering the navbar text. I've tested it here and it seems to work. Give this a try:

.top_nav{
	background: url(images/top_nav.gif) no-repeat scroll left top;
	height: 35px;
	width: 577px;
	margin: 0px;
	text-align: center;
   vertical-align: middle;
   lineheight: 34px;
   font-size: 1em;
}


This would enable you to use dynamic font size in the nav bar as well.

sonny
sonny's picture
Offline
Regular
Southern California
Last seen: 17 years 48 weeks ago
Southern California
Joined: 2004-07-29
Posts: 19
Points: 0

New site for client

Thanks for taking the time to do this Wolf.

Boy the CSS Layout Generator is pretty good. I know why the FAQ is doing that I took off the <br> because it was going to low but I am going to do something different with the side maybe a list or style it with just blocks and use line heights instead of breaks. I have to play around with it. I really don't want to use a list on this one because she I like the way it lines up horizontaly in plain text. I guess it really does not matter since that long menu is under the main content.

I will use ems or percent on the main text text and side bar but maybe not the top and bottom, but I will try out the code you have, I changed the top and bottm to combine the nav bar with the header so it is 100 pixs high now. i'm worried if the text is at its biggest it will not fit to well on the bar. I had to spread out the links a bit so used span on all the links and put padding there.

My client wanted me to make style sheets of dfferent font sizes and put a style switcher on the site to make the fonts bigger, she really wants to control how people see her site, but I think I may talk her out of that if I can.

She also doesn't want them to be able to change any of the navigation, but I think at least on the side nav it will be OK. I have a feeling even if we do that there may still be some way around it for some. Not sure if it is worth all the work to do that. What do you think?

Again thank you for your help.

"Imagination is more important than knowledge."
Albert Einstein

Deborah Puckett
Bee Studios
Graphic Soup Design