how would i create a naviagtion bar for my website with CSS and HTML?
From C++ to PHP, debugging to webhosting; help and discussion about writing your latest program to running your website. NOT for help when your PC won't work.
| Announcements | Posted on | |
|---|---|---|
| Please change your TSR password | 23-05-2013 | |
-
- Reputation:
- Thread Starter
- Peer Of The TSR Realm
- Posts: 1,606
how would i create a naviagtion bar for my website with CSS and HTML?i would like to make something similar to the naviagtion bar on facebook.
what is the easiest way to do this?
<div id="toolbar" style="position: fixed; bottom: 0px; left: 0px; width: 100%; color: #fff; background: #000;">
i tried this code but i don't think it work Can cna you try just incase.
thanks.
i don't know too much about programming so please say some quite simple code if that's alright.Last edited by non; 25-06-2012 at 23:29. -
- Reputation:
- Benevolent Member
- Location: Surrey
- Posts: 896
Re: how would i create a naviagtion bar for my website with CSS and HTML?Try going through these videos, they're sidebar related and you'll be able to use javascript for it too.
-
- Reputation:
- Overlord in Training
- Location: Southampton
- Posts: 2,121
Re: how would i create a naviagtion bar for my website with CSS and HTML?(Original post by non)
i would like to make something similar to the naviagtion bar on facebook.
what is the easiest way to do this?
<div id="toolbar" style="position: fixed; bottom: 0px; left: 0px; width: 100%; color: #fff; background: #000;">
i tried this code but i don't think it work Can cna you try just incase.
thanks.
i don't know too much about programming so please say some quite simple code if that's alright.
You'll need something in the DIV, <div> tags are just containers and with no content it won't show up.
e.g.
technically this isn't programming, it's markup. HTML provides content to be displayed and css (the bit in the style= section) provides the formatting.Code:<div id="toolbar" style="position: fixed; bottom: 0px; left: 0px; width: 100%; color: #fff; background: #000;"> This is a footer bar </div>
Idealy you should also split out styling information into a seperate file but you might want to get your layout working first. I assume you have a lot more html than just the little bit you supplied. -
- Reputation:
- Peer Of The TSR Realm
- Posts: 1,568
Re: how would i create a naviagtion bar for my website with CSS and HTML?(Original post by non)
i would like to make something similar to the naviagtion bar on facebook.
what is the easiest way to do this?
<div id="toolbar" style="position: fixed; bottom: 0px; left: 0px; width: 100%; color: #fff; background: #000;">
i tried this code but i don't think it work Can cna you try just incase.
thanks.
i don't know too much about programming so please say some quite simple code if that's alright.
Hi Non.
The easiest way to do this is via using a separate CSS code that you place in the header, and you call whenever you need it.
Something like so:
Sin CeraHTML Code:<html> <head> <style> body{padding:0;margin:0;} .FloatingBar{ bottom:0; left:0; width:100%; position:fixed; background-color:#F00; } </style> </head> <body> <div class="FloatingBar"> <div align="center"> Here you can put the content of the bar<br> This bar is my bar and my bar is red. </div> </div> <p>Some Text</p> This here is a website.<br> Websites have content.<br> Under, there is a bar.<br> This bar does not move, even when the user scrolls. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <p>Some more Text</p> </body> </html>
Tamimi -
- Reputation:
- Thread Starter
- Peer Of The TSR Realm
- Posts: 1,606
Re: how would i create a naviagtion bar for my website with CSS and HTML?thank you so much!(Original post by tamimi)
. -
- Reputation:
- Junior Member
- Location: Huddersfield
- Posts: 58
Re: how would i create a naviagtion bar for my website with CSS and HTML?if your just using html and css you can create it as a list ( <li> tags), i prefer via table tho, and then style in CSS. you can use <div> tags to create a class in CSS ie; if your using a table and your web page contains another table. very easy. check out w3schools.com(Original post by non)
i would like to make something similar to the naviagtion bar on facebook.
what is the easiest way to do this? -
- Reputation:
- Overlord in Training
- Location: Southampton
- Posts: 2,121
Re: how would i create a naviagtion bar for my website with CSS and HTML?Tables should only be used when the data is supposed to be presented in a table. They're not for layout.(Original post by Sparrow_Squire)
if your just using html and css you can create it as a list ( <li> tags), i prefer via table tho, and then style in CSS. you can use <div> tags to create a class in CSS ie; if your using a table and your web page contains another table. very easy. check out w3schools.com
The beauty of using div's and lists is that you can change the whole look of the site with a different bit of CSS. I've done a couple of sites using the same html template but different CSS where one site has had the menu down the side and the other had a menu along the top. If my template had used tables I'd have to re-write the template rather than just choosing the right bit of CSS.
It should also be much easier to create a mobile version of a site using div's and lists rather than tables.
A great example of the power of using CSS properly with html is the CSS Zen Garden. This site uses the same HTML in each version but you can choose different CSS to give it a totally different layout. -
- Reputation:
- Junior Member
- Location: Huddersfield
- Posts: 58
Re: how would i create a naviagtion bar for my website with CSS and HTML?I understand that but you can put your navigation bar in a table if you use <div> tags to class it. i prefer tables to lists because i think it looks a lot neater.(Original post by mfaxford)
Tables should only be used when the data is supposed to be presented in a table. They're not for layout.
The beauty of using div's and lists is that you can change the whole look of the site with a different bit of CSS. I've done a couple of sites using the same html template but different CSS where one site has had the menu down the side and the other had a menu along the top. If my template had used tables I'd have to re-write the template rather than just choosing the right bit of CSS.
It should also be much easier to create a mobile version of a site using div's and lists rather than tables.
A great example of the power of using CSS properly with html is the CSS Zen Garden. This site uses the same HTML in each version but you can choose different CSS to give it a totally different layout. -
- Reputation:
- TSR Idol
- Location: Bristol
- Posts: 9,352
Re: how would i create a naviagtion bar for my website with CSS and HTML?It looks no different. Your markup should only be semantically related to your content, not relying on default styles to make it look as you want.(Original post by Sparrow_Squire)
I understand that but you can put your navigation bar in a table if you use <div> tags to class it. i prefer tables to lists because i think it looks a lot neater. -
- Reputation:
- Junior Member
- Location: Huddersfield
- Posts: 58
Re: how would i create a naviagtion bar for my website with CSS and HTML?negative rating for that?! someone needs to grow up lol everybody programs different i was jjust offering my way as an option to someone asking about ways to do it!?!?!
-
- Reputation:
- Overlord in Training
- Location: Southampton
- Posts: 2,121
Re: how would i create a naviagtion bar for my website with CSS and HTML?Whilst it's possible to do it that way it's the wrong way. Tables are there to present data that should be in a table and nothing else. A few of other reasons that tables are bad for layout are:(Original post by Sparrow_Squire)
I understand that but you can put your navigation bar in a table if you use <div> tags to class it. i prefer tables to lists because i think it looks a lot neater.
SEO - doing it the right way allows you to optimize the content on your site to give you better search rankings. If you're using tables to layout your content you can't optimize the layout of your HTML.
Accessibility - Screen readers will look at the content of the web page. If they see a table they'll treat it as a table of data.
Page loading: Tables require the whole table to be loaded before display, they also require a lot more code meaning your page takes longer to load. This may not be an issue on broadband but where people still have dialup or are on mobile devices it can make a difference.
Looking at the HTML5 spec whilst tables are still in the spec most of the attributes for them are deprecated so you'll have to use CSS to do styling for each element type at which point doing it the right way is likely to be easier.
And if you want some evidence of tables for layout being wrong http://www.w3.org/WAI/PF/HTML/wiki/T...LE_deprecation -
- Reputation:
- TSR Demigod
- Location: Kent
Re: how would i create a naviagtion bar for my website with CSS and HTML?It's a shame it's the wrong way. I understand that's the way you've always done it (it's how I learn too) but we're on CSS3 now. Tables are completely outdated and if you plan to have any future in web design you should immediately look into learning CSS. It's like riding a horse to work while everyone else gets a car. It works but it's outdated.(Original post by Sparrow_Squire)
ah well its just the way i do it. every programmers different anyway
Also HTML and CSS are not programming languages. You're a developer not a programmer. Sorry. /pethate -
- Reputation:
- Junior Member
- Location: Huddersfield
- Posts: 58
Re: how would i create a naviagtion bar for my website with CSS and HTML?lol yeah thats how i was taught i still <div>tag it and style it in css thats what i was trying to say.(Original post by fran.ha)
It's a shame it's the wrong way. I understand that's the way you've always done it (it's how I learn too) but we're on CSS3 now. Tables are completely outdated and if you plan to have any future in web design you should immediately look into learning CSS. It's like riding a horse to work while everyone else gets a car. It works but it's outdated.
Also HTML and CSS are not programming languages. You're a developer not a programmer. Sorry. /pethate
im VB program maker (programmer?!) im *trying* to learn web developer ok with html css learning javascript
see my very confuzzeled posts trying to figure out what im doin
-
- Reputation:
- TSR Legend
- Location: North by Northwest
Re: how would i create a naviagtion bar for my website with CSS and HTML?Actually, if you're just making a simple personal page, a plain old table -- even though it's no longer "the done thing" -- for layout can be simpler than adding class tags to divs and writing unnecessary lines of CSS to make it look as it should, so I don't think it's such a great crime, so long as you're aware that you're straying from the specification (after all, some of the most creative and efficient solutions inevitably break rules; I think it's wrong to say that there's a "wrong way"). The advantages that mfaxford outlines are all valid, but are really negligible for the average neo-Geocities site, as the OP seems to be creating, and may well be outweighed by the extra typing involved (and therefore slightly greater file size, which itself affects loading speed). That said, it probably is good, as a neophyte, to get into the habit of delegating presentation to CSS, but once you understand the orthodoxy, there's no need to be too dogmatic about it.
Last edited by faber niger; 03-07-2012 at 14:36. -
- Reputation:
- Overlord in Training
Re: how would i create a naviagtion bar for my website with CSS and HTML?VB is programming.(Original post by Sparrow_Squire)
lol yeah thats how i was taught i still <div>tag it and style it in css thats what i was trying to say.
im VB program maker (programmer?!) im *trying* to learn web developer ok with html css learning javascript see my very confuzzeled posts trying to figure out what im doin
But I suspect the reason someone negged you is because the <table> method is completely wrong in the context of modern technologies. That is was how layout was done 5-10 years ago because there wasn't really anything better for the job, but now it has been completely superseded and I would recommend learning how to do it in CSS3.
I don't think there is ever an excuse to use HTML in such a blatently non-semantic way.(Original post by jismith1989)
Actually, if you're just making a simple personal page, a simple table -- even though it's no longer "the done thing" -- for layout can be simpler than adding class tags to divs and writing unnecessary lines of CSS to make it look as it should, so I don't think it's such a great crime, so long as you're aware that you're straying from the specification. The advantages that mfaxford outlines are all valid, but are really negligible for the average neo-Geocities site, and may well be outweighed by the extra typing (and therefore slightly greater file size, which itself affects loading speed).
There is absolutely no guarantee of tables rendering in the way you expect them to, especially in mobile browsers. It also teaches and proliferates bad habits to future developers.
Even though I think your point about file size is moot, you can achieve the same thing in CSS with the same if not fewer bytes, unless you rely on a completely vanilla <table>, in which case you are saving 150 bytes for the sake of an aesthetically unpleasing, standards uncompliant, dinosaur. -
- Reputation:
- TSR Legend
- Location: North by Northwest
Re: how would i create a naviagtion bar for my website with CSS and HTML?Sure, I'm not saying that it's the best way, just that it may still be a simple option that offers decent presentation across most browsers (and, unless you do a lot of work to create a properly responsive site, the same presentation issues you mention in mobile browsers can, and do, occur even when following HTML5/4 standards). I'm aware that that's heresy though. And, as I say, it's best to know the rules, if you're going to break them.(Original post by Fallen)
I don't think there is ever an excuse to use HTML in such a blatently non-semantic way.
There is absolutely no guarantee of tables rendering in the way you expect them to, especially in mobile browsers. It also teaches and proliferates bad habits to future developers.
Even though I think your point about file size is moot, you can achieve the same thing in CSS with the same if not fewer bytes, unless you rely on a completely vanilla <table>, in which case you are saving 150 bytes for the sake of an aesthetically unpleasing, standards uncompliant, dinosaur.
Also, even HTML5 isn't entirely semantic; the b tag is still supported and widely used, for example (even though the specification may prefer us to use silly tags like mark and strong, and then bugger about reinventing the wheel by having to set the font-weight of the tag ourselves in CSS).Last edited by faber niger; 03-07-2012 at 15:02. -
- Reputation:
- Overlord in Training
- Location: Southampton
- Posts: 2,121
Re: how would i create a naviagtion bar for my website with CSS and HTML?I'm not going to stop people doing site design the way they want. If you really want to use tables for layout then go ahead, but be aware of the downsides. My initial concern in this thread was that using tables was suggested to someone else that this is a valid way to do it. Telling people the wrong method should never be encouraged! Whilst in web design it just leads to something that isn't standards compliant using the same principle in other industries it can lead to bigger problems.(Original post by jismith1989)
Sure, I'm not saying that it's the best way, just that it may still be a simple option that offers decent presentation across most browsers (and, unless you do a lot of work to create a properly responsive site, the same presentation issues you mention in mobile browsers can, and do, occur even when following HTML5/4 standards). I'm aware that that's heresy though. And, as I say, it's best to know the rules, if you're going to break them.
In terms of page size - for a single page it doesn't make much difference. For a big site with the static CSS content separated into a separate file you start to get the benefits as that can be cached but dynamicly created html cannot. If you're working on slow/high latency links this can become really important. -
- Reputation:
- TSR Demigod
- Location: Kent
Re: how would i create a naviagtion bar for my website with CSS and HTML?Yeah that's fine. Sorry it's just a bit of a pet hate. I understand you're a programmer in other capacities but it gives people the impression that HTML&CSS are programming languages by saying you're a programmer, when in fact they're scripting languages.(Original post by Sparrow_Squire)
lol yeah thats how i was taught i still <div>tag it and style it in css thats what i was trying to say.
im VB program maker (programmer?!) im *trying* to learn web developer ok with html css learning javascript see my very confuzzeled posts trying to figure out what im doin
see my very confuzzeled posts trying to figure out what im doin 
