What would be the best way to creat my navigation?

  • SharkShark
  • Guru
  • Guru
  • User avatar
  • Posts: 1013
  • Loc: Living In Today

Post 3+ Months Ago

Hey guys,

Im having a bit of trouble on my current commision site. I need to create the top navigation, but Im honestly not sure how to do it. I do not want to have them as images i want them to be plain text links (i.e the subnav links) but Im not sure how to place them there. Is there a way to do it using CSS or a div? just so you have an idea here is the link:

http://www.playersnmotion.com/main_site

you can see the links across the top are not clickable, that whole section from the banner to the link bar is one image, I tried placing the image as the TD background, but it completely messes up the page. I would like the links to be placed and spaced the same way they are in the image. If any of that made sense to you please help!!!
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

I would do it like this:

Code: [ Select ]
<div style="background:url(myBkgnd.gif);height:Xpx;">
<a href="blah.htm">Blah</a><a href="bleh.htm">Bleh</a><a href="blek.htm">Blek</a>
</div>
  1. <div style="background:url(myBkgnd.gif);height:Xpx;">
  2. <a href="blah.htm">Blah</a><a href="bleh.htm">Bleh</a><a href="blek.htm">Blek</a>
  3. </div>
  • SharkShark
  • Guru
  • Guru
  • User avatar
  • Posts: 1013
  • Loc: Living In Today

Post 3+ Months Ago

Thanks DM! now is there a simpler way to line up the links as I shown on the site, without having to insert a bunch of < br > and &nbsp? because right now the links are at the top left, i need them to sart bottom left. Thanks. :D
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

CSS:
on the TD, vertical-align:bottom

on the links, padding:5px

will send them to the bottom and space them, the links shouls end up 5px from the bottom and sides, 10px from each other.

If a user uses text-zoom the links should expand over the title and not mess up the layout too much.
  • SharkShark
  • Guru
  • Guru
  • User avatar
  • Posts: 1013
  • Loc: Living In Today

Post 3+ Months Ago

Im havent really used CSS. how would you write out that code please?
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Code: [ Select ]
<td id="titleNav">


in the head:

Code: [ Select ]
<link rel="stylesheet" type="text/css" href="/style.css" />

<-- Check it :D


then create a file called style.css and save in the / folder (probably will be www/ )

then in style.css:

Code: [ Select ]
#titleNav{
  vertical-align:bottom;
}
#titleNav a{
  padding:5px;
/* You may also need these styles, remove the comment
  if you do need them
  display:block;
  float:left;  */
}
  1. #titleNav{
  2.   vertical-align:bottom;
  3. }
  4. #titleNav a{
  5.   padding:5px;
  6. /* You may also need these styles, remove the comment
  7.   if you do need them
  8.   display:block;
  9.   float:left;  */
  10. }


You should also have a valid doctype else IE <i>might</i> throw a wobbly on you.

Then got to http://www.w3schools.com and click on the css tutorial and learn :wink:
  • SharkShark
  • Guru
  • Guru
  • User avatar
  • Posts: 1013
  • Loc: Living In Today

Post 3+ Months Ago

lol I started learning yesterday as a matter of fact :). Thanks rtm I got it more or less how i want it. Ill figure the rest out. Thanks both of you :d
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

just out of curiosity, did you need the display block and float?
  • SharkShark
  • Guru
  • Guru
  • User avatar
  • Posts: 1013
  • Loc: Living In Today

Post 3+ Months Ago

ummm.....to be truly honest I have absolutly no idea what it means. So i left it in there :oops: . Your code didnt work for me though. Im not sure why. I already had a link to an external stylesheet and i placed it in there. i posted a link to the webpage in my opening topic, would u take a look for me and tell me what I am missing?
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

I'm really not sure....

You have got a lot of overlapping tags, which need to be sorted out - they can cause all sorts of funkdoobieness because different browsers will do different things with them. I would definately start by losing all of those <br>'s and &nbsp;'s
  • SharkShark
  • Guru
  • Guru
  • User avatar
  • Posts: 1013
  • Loc: Living In Today

Post 3+ Months Ago

ok I got rid of all the break and space tags. Now all i gotta do is get your code to work and I'm all set :D
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Is the div supposed to contain the links or not?

If it is we are in poo. I'll have to think about it lol. Sorry this is messing you about a bit.

Can you also sort out the overlapping tags:
Code: [ Select ]
<td>
  <center>
        <div>
    </center>
            <strong>
                &lt;a>
                    <U>text</U>
                </a>
                ...
        </div>
</td>
  1. <td>
  2.   <center>
  3.         <div>
  4.     </center>
  5.             <strong>
  6.                 &lt;a>
  7.                     <U>text</U>
  8.                 </a>
  9.                 ...
  10.         </div>
  11. </td>


the div and center need sorting out, and the strong needs to be closed.

I think I know how to sort it out now, but I'm gonna have to think about it.
  • SharkShark
  • Guru
  • Guru
  • User avatar
  • Posts: 1013
  • Loc: Living In Today

Post 3+ Months Ago

ok rtm, take a look at it now :D. I know i need to clean up my code a bit but that should be about it! does it show up any different in mozilla?

//edit: You should see a centered webpage with the top links just slightly to bottom left of the link bg. basically a smooth webpage. I had to add some align codes in my style sheet :) Thanks for getting me started!
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

:D

And I thought we were going to be messing around for another half hour - looks fine in FIrefox, mozilla netscape and internet explorer. Even looks good on opera

:D


Sorry, I just noticed, the links look right on all browsers, but the main page is slightly skewed by about 5px. I barely noticed it. Your best bet is to get a copy of firefox and see for yourself.

This is a minor problem, and it's a <b>table</b> problem methinks, so I probably won't be able to sort that one for you.
  • SharkShark
  • Guru
  • Guru
  • User avatar
  • Posts: 1013
  • Loc: Living In Today

Post 3+ Months Ago

NP tables I can handle. Thanks rtm :D
  • SharkShark
  • Guru
  • Guru
  • User avatar
  • Posts: 1013
  • Loc: Living In Today

Post 3+ Months Ago

LOL rtm, you really screwed me up now. I got firefox, and saw the difference in the way it showed the page. So what do i do?? I go and edit the page so it looks good in firefox, but now it look like crap in IE. LOL im so screwed. Is the best thing to do now is redo the site using divs in place of tables? would that clear up the majority of the problems? appreciate the help.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Step One is still valid code. Especially the doctype. Use HTML 4.01:

Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.   "http://www.w3.org/TR/html4/loose.dtd">


The reason I say this is that IE6 has a "quirks mode". If you don't put in a doctype it goes into quirks mode and starts playing up. If you put in a valid doctype then it starts behaving more like mozilla.

If you are lucky this could fix the problem.


Quote:
Is the best thing to do now is redo the site using divs in place of tables

If you are just starting to learn CSS then you will need a week or two to learn how. I'm guessing that isn't an option with this project??
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

Your best bet would be to use ul's and li's for your links since a navigation bar is nothing but a list of pages.

Doing your links as

Code: [ Select ]
<a>link</a> <a>link</a>


would work, but it'd fall apart ungracefully on browsers with little or no css support. The best way to do it would be:

Code: [ Select ]
<ul id="nav">
   <li><a href="page.htm">1</a></li>
   <li><a href="page2.htm">2</a></li>
   <li><a href="page3.htm">3</a></li>
   <li><a href="page4.htm">4</a></li>
   <li><a href="page5.htm">5</a></li>
</ul>
  1. <ul id="nav">
  2.    <li><a href="page.htm">1</a></li>
  3.    <li><a href="page2.htm">2</a></li>
  4.    <li><a href="page3.htm">3</a></li>
  5.    <li><a href="page4.htm">4</a></li>
  6.    <li><a href="page5.htm">5</a></li>
  7. </ul>

In your css, you only need a little bit of code to get started. Feel free to experiment the heck out of this.
Code: [ Select ]
<style type="text/css">
ul#nav{margin:0; list-style-type:none;}
ul#nav li{display:inline;} // don't do that if you want links to be vertical.
</style>
  1. <style type="text/css">
  2. ul#nav{margin:0; list-style-type:none;}
  3. ul#nav li{display:inline;} // don't do that if you want links to be vertical.
  4. </style>

This should work for you. Mess with your margins, padding, colors, and backgrounds to get this to look exactly the way you want. No need for tables or div's what-so-ever. Just lean, mean straight html with a dab of css on the side.

A good website to learn more about list-style navigation: http://css.maxdesign.com.au/

Check out the listamatics.
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

You could actually do your whole design without the use of a single table. This would be a fun team project. All you need is a few "float:right"s thrown in there and you're good to go.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

A list of links is <i>always</i> the best way but I was trying to avoid saying this. For someone who has only a small knowledge of CSS, taming lists is a pain in the ass lol

Quote:
You could actually do your whole design without the use of a single table

Unless you have a grid, you <i>never</i> need to use a table.I'm still not an expert, but I challenge anyone to show me a non-tabular table layout that I cannot reproduce with CSS.
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

I'm going to spend the next couple of weeks on that. :) You ready for a challenge rtm? I'm going to produce the ugliest freakin table layout you've ever seen just so I can give you the challenge of your dreams!

LOL.

Just kidding. I don't have the time. You're absolutely right, and I already know it. :)
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

rtm223 wrote:
A list of links is <i>always</i> the best way but I was trying to avoid saying this. For someone who has only a small knowledge of CSS, taming lists is a pain in the ass lol

Well, the first time, at least. After you do it a few times and get to know the css, it becomes less painful than doing it with tables IMHO. Plus, no better feeling than after creating sleek code.

Note: I feel like such a hypocrite since the navbar on GrooveSeeker (http://www.gsv2.com) is still table based. :oops: I'll get to that soon. I figured out a way to completely eliminate all tables from that site. Well, maybe...
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

on groveseeker: Well, float them left and remove the text zoom disabler. if you make the UL fixed width, use padding to set the widths and heights of the li's and float, they will go onto two lines if someone uses text zoom. Which is about as elegant accessibility as you could possibley hope for :)

On Sharks page, you wouldn't want to float:right as that would place the links "above" the content (in html terms), so float the content left instead

Even better, use absolute positioning, as there is no footer and you then eliminate the possibility of encountering either of the IE Float Bugs
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

Believe me, I'm pretty aware of what needs to be done on gsv2, I just need to DO IT. :) I just moved into a new apartment yesterday and got a new job two months ago, so things have been a bit too hectic to work on my own crap.........

... one of these days ... :) Thanks though.
  • SharkShark
  • Guru
  • Guru
  • User avatar
  • Posts: 1013
  • Loc: Living In Today

Post 3+ Months Ago

LOL wow guys thanks for the input! in response to your first question rtm, I actually have 4 months to complete this project. Its basically an online datacenter, the company currently has a website, but they are looking for an upgrade to introduce in the fall.

So please give me all the advice you got man! My intention is to have most of the site in CSS and use PHP quite a bit. PHP i can handle, more or less, its the CSS im having trouble with.

So Im going to try the codes you and gsv2 suggested, adn Ill be back when I need more help :D
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Four months you say? Well, first step is to get used to CSS syntax, you will need to know:

basic tag selection

selecting specific tags by class and id:
Code: [ Select ]
.classname{
  /*styles for this class here*/
}
#id{
  /*styles for this id here*/
}
  1. .classname{
  2.   /*styles for this class here*/
  3. }
  4. #id{
  5.   /*styles for this id here*/
  6. }


selecting nested elements:
Code: [ Select ]
div a{
  /*these styles will apply to the and &lt;a> tags that
  are INSIDE a div. a's not inside a div will not be affected*/
}
  1. div a{
  2.   /*these styles will apply to the and &lt;a> tags that
  3.   are INSIDE a div. a's not inside a div will not be affected*/
  4. }


pseudo classes for links:
Code: [ Select ]
a{
  /*these are the styles for a link*/
}
a:hover{
  /*these are the styles for link when you hover
  the mouse over it*/
}
a:visited{
  /*these are the styles for links that have already
  been visited*/
}
  1. a{
  2.   /*these are the styles for a link*/
  3. }
  4. a:hover{
  5.   /*these are the styles for link when you hover
  6.   the mouse over it*/
  7. }
  8. a:visited{
  9.   /*these are the styles for links that have already
  10.   been visited*/
  11. }


Thats it really for syntax, then just start learning properties - play about with position:absolute; on some divs, using the left, right, top, bottom, width and height properties with it.

Hopefully by this point <a href="http://www.caffeinefuelled.net">caffiene fuelled</a> will be up and running, otherwise start googling CSS layouts.

Also try googling taming lists or styling lists
  • SharkShark
  • Guru
  • Guru
  • User avatar
  • Posts: 1013
  • Loc: Living In Today

Post 3+ Months Ago

:D u da man rtm! LOL. here is the thing though, no matter what i do, firefox and IE simply do not display the page the same. Look @ this page:

http://ww.playersnmotion.com/main_site/index2.html

if you view it in both browsers you can see a huge difference. for instance look at Subnav one, in firefox, the links are all lined up neatly, in IE its like they are centered, the are not even on the left side. What would be causing this? I made that page so basically im going to rip apart the code and rewrite it. So im thinking this thread ma get rather long :D
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

SharkShark wrote:
What would be causing this?


Internet explorer being rather inferior....

I saw a site once that lists all the known css bugs for browsers. The gecko browsers had 3 (although I found a new one last week, so four) Internet Explorer 6 has loads, there could be any number of things causing the problem. When you add onto it that you are using html attributes as well, it could be any of a thousand things.

Whilst you are learning CSS, you might as well start using xhtml at the same time - that wil take all of 20 minutes to learn lol.


The only other thing I can say is to bear in mind the box model. At some point you will need to learn the tantek celic box model hack, which is a pain but infinately useful. Basically when you specify the width of an element, this is the content width, padding and borders are extra.
Code: [ Select ]
div{
  width:200px;
  padding:40px;
  border:10px;
}
  1. div{
  2.   width:200px;
  3.   padding:40px;
  4.   border:10px;
  5. }


gives 200px content + (40px+10px)*2
total 300px border to border.

THIS IS IMPORTANT
  • SharkShark
  • Guru
  • Guru
  • User avatar
  • Posts: 1013
  • Loc: Living In Today

Post 3+ Months Ago

LOL i may have to pay you part of my commision at this rate rtm. :D I appreciate the help. OK, i think i got XTHML down. I just removed all tables from the webpage and am proceding to start working with div. *sigh* I never had any problems until i started trying to get proffesional. :P Just keep an eye on this thread cause Im gonna have a million question as we go along. :)
  • SharkShark
  • Guru
  • Guru
  • User avatar
  • Posts: 1013
  • Loc: Living In Today

Post 3+ Months Ago

OK next prob :P

I am trying to get the top bg image (the lines across the top) to stretch across the top. It will work in IE (go figure) but it wont in firefox (go figure again) here is the code on the page:

Code: [ Select ]
<img class="x" src="images/top_bg.jpg" width="100%" height="209">


And this is the code on the stylesheet.

Code: [ Select ]
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
  1. img.x
  2. {
  3. position:absolute;
  4. left:0px;
  5. top:0px;
  6. z-index:-1
  7. }


How should I change and or edit this? Thanks
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

Post Information

  • Total Posts in this topic: 32 posts
  • Users browsing this forum: No registered users and 80 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.