Jump to content
Professor GIBS

Navigational Bar *SOLVED!*

Recommended Posts

Sadly after two weeks of time spent on my navigation bar, I still haven't figured it out...

Bonjour, I am stumped on this navigational bar, I cannot figure out how to build it exactly. I've looked over so many tutorials, and cannot seem to find one that works how I want it. I've tried doing it myself, but that was an utter failure. I have an example for you guys this time; HERE.

I want a navigation bar similar to that, just instead of a search bar it will be where my members login/signup. If they are/have already logged in then it will just say Welcome + name; with a down arrow "v" to open up their console.menu.. To show them their messages, profile, edit profile, or signout etc.

 

I had an idea of how to do this, using the <nav>, along with <span> and <div>'s but everything was so off! I just am not too good with CSS. I know how to add the content, and most of the JavaScript/jQuery.. Shoot, I will begin PHP tomorrow for the member system. But this navigational bar is such a big hurdle, I cannot even jump past it. I cannot find help anywhere else, and I use Codecademy, and here to learn most of what I know so this would be a great help to me if someone could take the time to teach me what it is I am doing wrong, or at least work with me till completion. I'm more than willing to program for 24 hours straight, I mean look at my time spent on Codecademy HERE. Whoever chooses to help me, and can take me into the right direction, I could scrounge up some money to pay you Via PayPal. I promise, I will not be a drag, like this was to read. Thanks to all who read, even if you decide not to help. Thanks again.

Edited by Professor GIBS

Share this post


Link to post
Share on other sites

@dsonesuk, you've seen some of my previous problems, you're one of the few that try to help every time. You've seen all I've posted about was a navigation bar, and I still haven't figured it out. I'm still learning, so everything you just said for the most part- made no since. I know some languages are server sided, and some are client sided, but I honestly have no idea of the difference. I used to program RSPS's so I know the client is what the users use, and the server is what runs basically everything. If I am wrong correct me, please I want to learn and be correct.

 

With all of that said, the code you just showed me has been deleted because it wasn't worked properly. The text wouldn't stay in the box, the navbar wouldn't align with my page, and some other CSS problems.

 

ALSO, what is webkit? I see it on almost every example I look at online. Thanks

Edited by Professor GIBS

Share this post


Link to post
Share on other sites

Did you run the the code in its own page, it should work to show you original first nav menu which uses images for text, that is why i wrapped text in span and used position: absolute; left: -9999em; to hide, but still be viewable by search engines, the second is similar representation of the link you gave, it uses unordered list which is the mostly used method, compared to anchor links and div elements.

 

client side is usually javascript which can be disabled

 

server side php, asp, asp.net cannot be disabled, but need to be processed by server and return as html, which means a reload of page each time.

 

web-kit is specific browser based css for chrome, safari.

moz = firefox

Share this post


Link to post
Share on other sites

Alright understanding now, I tried something similar to "-9999em", so I guess were both on the right track there. I see that that example navbar I linked to you guys, uses div's and spans. Okay, that is understood. But, why does nobody use <nav> if it's offered to us? Is there a difference?

 

Also, alright thanks for telling me the difference and about web-kit/moz.

Share this post


Link to post
Share on other sites

The link you gave uses doctype

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

nav is new element specifically for html5 doctype

<!DOCTYPE html>

Share this post


Link to post
Share on other sites

I understand that, but does it go any deeper than that?

Share this post


Link to post
Share on other sites

Okay so these are some of the problems I am having, that is just utterly pissing me off:

  • I remove the "border-top" from my body, and it takes away about 10px from the top when the border was 1px.
  • I try to set a "background-image" for my whole html wrapper (behind the body) and it just stretches the color of the body.
  • I tried again to set the "background-image" for my body, navbar, and more and all it does is stretch or delete something.
  • I tried to make my "ul" have no bullet points with "text-decoration: none;" and it just simply doesn't remove the bullets.
  • I cannot get my navigation bar to line up horizontally like it is supposed to, and make the box I hover over change background colors & more.

Will someone please help me, I've learned 4 languages in the past month so I know for the most part what I am doing.. All of my troubles come from CSS -.-.

Share this post


Link to post
Share on other sites

Describing your problem is not really that helpful as it could be styling of other elements outside or inside the element that has the problem.

1) try using overflow: hidden;

2) ?????? no clue could be anything might be child float elements where (1) MIGHT fix.

3) ??? probably did not do it right.

4) text decoration is related to text styling like underline, nothing to do with bullets, whereas list-style-type: none; does. as shown several times in examples.

5) not using float or display: inline; or display: inline-block;? MIGHT cause this.

 

link is preferred, where we do not requireto register before seeing said page.

Share this post


Link to post
Share on other sites

Well, I don't have it up yet? Because it cost money to host it, and it is still being designed so it's not ready? Which is why I've asked in previous posts if someone would look over team-viewer or something.

Share this post


Link to post
Share on other sites

NO it does not, IF you bothered to search you would find free hosting for html only site and even some for php, mysql, some might show adds, but just for testing who care about them.

 

AND if it is not a massive page, why not give use html and css code to work with? otherwise people will think if you can't be bothered to give us something to work with, then I'm just not going to bother until there IS, and just bypass your topic and go to next.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Okay I searched, and Uploaded Here.

Edited by Professor GIBS

Share this post


Link to post
Share on other sites

Why don't you help me then, that hosts the files doesn't it? I can't read you mind, and do exactly as you please unless you actually help me.

Share this post


Link to post
Share on other sites

Its like you have a problem with your car in a multi-story car park, a mechanic arrives, you tell him the cars in there bye! Mechanic response, bye and returns to garage to repair cars he that he knows where they are, and not waste his time searching.

Share this post


Link to post
Share on other sites

Ah, well could you give me a better hoster? I want to help you, help me. You can obviously see that I am completely ignorant to some things that I haven't encountered yet.

I mean for now here is my HTML:

<!DOCTYPE html><html id="CodeMode"><head><link href="home.css" rel="stylesheet" type="text/css"/><link href="css/layout.css" rel="stylesheet" type="text/css" /><link href="css/menu.css" rel="stylesheet" type="text/css" /><script src="http://code.jquery.com/jquery-1.11.1.min.js"></script><script type='text/javascript' src='home.js'></script><title>CodeMode - Home</title><meta name="author" content="Kevin Micheal Cox" /><meta name="description" content="CodeMode is an online way of learning anything technological, including programming, game designing, and graphic design with so much more to offer!"><meta name="keywords" content="HTML, CSS, JavaScript, Java, Python, Boo, C++, C#, C Sharp, Programming, Coding, CodeMode, Code Mode, Graphic, Design, Graphic Design, Kevin Micheal Cox, Game, Development, Game Development, Chat, Fourms, Fun, Learning, College, School, Home, home, Free"><meta charset="utf-8" /></head><body><header><!--logo--></header>        <nav>         <div id="navlist">           <ul>            <li>|</li>               <li id="home"><a href="..homeindex.html" title="Home"><span> Home </span></a></li>               <li>|</li>               <li id="forums"><a href="..forumsforums.html" title="Forums"><span> Forums </span></a></li>               <li>|</li>               <li id="prog"><a href="..progprog.html" title="Programming"><span> Programming </span></a></li>               <li>|</li>               <li id="des_teams"><a href="#" title="Design Teams"><span> Design Teams </span></a>               <ul>               <li id="game_dev"><a href="..game_devgame_dev.html" title="Game Design"><span>Game Design</span></a></li>               <li id="web_des"><a href="..web_desweb_des.html" title="Web Design"><span>Web Design</span></a></li>               <li id="grap_des"><a href="..grap_desgrap_des.html" title="Graphic Design"><span>Graphic Design</span></a></li>               </ul>               </li>               <li>|</li>               <li id="chat"><a href="..chatchat.html" title="Chat"><span> Chat </span></a></li>               <li>|</li>           </ul>            </div>        </nav>        <script src="home.js"></script></body><footer><p class="center">CodeMode - Copyright © 2014 - All Rights Reserved.</p><p><a href="..aboutUsaboutUs.html">About Us</a> ♦ <a href="..contactUscontactUs.html">Contact Us</a> ♦ <a href="..applyapply.html">Join Us</a> <br> <a href="..termsOfServicetermsOfService.html">Terms of Service</a> ♦ <a href="..privacyPolicyprivacyPolicy.html">Privacy Policy</a></p></footer></html><!--|=======================================|| Developer's Note || Creation Date: 7/28/2014 || Creator: Kevin Michael Cox - 4518 || Date Released: N/A || File type: HTML || Current Progress: 5% || Online Date: N/A ||=======================================||_______________________________________|-->

Here is my CSS:

/*|=======================================| | Developer's Note   | | Creation Date: 7/28/2014   | | Creator: Kevin Michael Cox - 4518 | | Date Released: N/A   | | File type: CSS   | | Current Progress: 5%   | | Online Date: N/A   | |=======================================| |_______________________________________|*/#CodeMode {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size: 1em;color: black;border: 0;padding: 0;text-align: center;background-color: black;margin: 0 auto 0;}header {/**/}body {background-color: #696969;margin: 0 auto 0;border-top: 1px solid black;border-bottom: 2px dotted black;border-left: 1px solid #01P;border-right: 1px solid #01P;padding: 0;width: 960px;text-align: left;overflow-y: scroll;}footer {border-top: 1px dashed black;font-family: arial black;clear: all;text-align: center;}a {text-decoration: none;font-family: Impact;color: black;border: 0;padding: 0;margin: 0;}nav {background-color: #999;}#navlist {width: 960px;margin: 0 auto;text-align: left;}#navlist ul {list-style-type: none;padding: 0;margin: 0;position: relative;}#navlist ul li {display: inline-block;}#navlist ul li:hover {background-color: #777;}#navlist ul li:visited {color: #ccc;display: block;padding: 5px;}#navlist ul li:hover {color: ccc;text-decoration: none;}

Share this post


Link to post
Share on other sites

Thanks. I'll fix it. So everything is inside the body other than the <head> then?

Share this post


Link to post
Share on other sites

Thanks. I'll fix it. So everything is inside the body other than the <head> then?

Html content to be displayed on the page should go in the body tags. Try getting your site up. There're many free hosting providers. Since it's for testing, using one will not be a problem.

Share this post


Link to post
Share on other sites

Could you link me to a good easy to use one? I found a few, but they all are like webs.com or something they create it all for you.

Share this post


Link to post
Share on other sites

Could you link me to a good easy to use one? I found a few, but they all are like webs.com or something they create it all for you.

Those easy-to-use tools they provide really impede learning. Try doomby.com, wirenode.com, host.sk(for php) and many more you can google. In doomby, you'll find options to either use their already built templates or write your page in html.

Share this post


Link to post
Share on other sites

@dsonesuk , you may be smart man, but the way you go about things in useless to me. You expect people who are new to just know these types of things, all you did to my code there is take out what YOU didn't like to see, and what YOU thought had no purpose. My HTML is fine, my CSS needs help that's the only programming languages I've ever had trouble with. So, if you not actually going to talk me though it, or give me somewhere I can legitimately get help for CSS, or correct something that is completely wrong then please just don't post. Thanks for trying though.

 

@Jonathanks, thanks man! I went online and searched and tried a few, just they all had prebuilt templates. I'll try those out though, thanks again. Also can you or someone give me a place where I can learn to make it where my already built navigation bar will let me have a drop down menu, I got it built in HTML just not CSS. Thanks again.

Share this post


Link to post
Share on other sites

Its obvious you don't bother to read, study any of tutorials, Don't even bother to validate, i explained why some of the problems you had, ands you have the option to ask for explanation, on why i did it that way, well you won't need to ask any more, bye.

Share this post


Link to post
Share on other sites

You know what they say about assumptions, right? They make an ###### out of you and me. So before you assume I don't bother to read, study, or validate, please oh please get some of your facts straight. I guarantee I work harder than you or anybody you know, I am simply just trying to understand CSS a little bit better. Okay, thank you sir. Dismissed.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...