Professor GIBS

@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

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.

Okay thank you, I've already studied that post, and it doesn't seem to be working.. I am actually re-trying to apply it into my programming. I'll show you.

Yes, I also did apply everything. All of the things you said, I knew but I just did because I was trying to figure this out and clear everything else out of my way.

HTML CODE

		<nav>			<ul id=navlist>				<li id="Home"><a href="usefulJunkImagesNavBarNavBarMainNav_01.jpg"></a></li>				<li id="Forums"><a href="usefulJunkImagesNavBarNavBarMainNav_02.jpg"></a></li>			</ul>		</nav>

CSS CODE

nav {	position: relative;}nav li{    margin: 0;    padding: 0;    list-style: none;    position: absolute;    top: 100;}nav li, nav a {    height: 50px;    display: block;}#Home {	background: url('usefulJunkImagesNavBarNavBarMainNav_01.jpg') 0 0;	left: 0px;	width: 167px;}#Forums {	background: url('usefulJunkImagesNavBarNavBarMainNav_02.jpg') -168px 0;	width: 216;}

The "usefulJunkImagesNavBarNavBarMain" part was just added at last minute, hasn't worked either way.

@Davej - I recreated my entire HTML/CSS files to reorganize, after I learned a little bit more into it. I will upload that.

@Jonathanks - Thanks for the tips, but all I am doing is trying to get the image to swap, or change on hover. This is my coding at the moment.

HTML

		<nav>			<img id="Home" title="Home" src="" />			<img id="Forums" title="Forums" src="" />		</nav>

CSS

#Home {	background: url('http://i62.tinypic.com/2w3u6w6.jpg');	height: 50px;	width: 167px;}#Home:hover {	background: url('http://i59.tinypic.com/fa7yf7.jpg');	height: 50px;	width: 167px;}#Forums {	background: url('http://i60.tinypic.com/xfxaw8.jpg');	height: 50;	width: 216;}#Forums:hover {	background: url('http://i58.tinypic.com/2i2a8g2.jpg');	height: 50;	width: 216;}

The forums are exactly the same as the Home, the home is working but the forums does this:

|| http://i57.tinypic.com/1fz4h.jpg

Thank you for the tips, but can I get some help with the problem at hand..?

I'm sorry guys I have tried this once before, and I did recieve help just not very clear, and for the most part didn't apply here. I will try again, but please if someone can teach me by showing I learn so much faster, and easier that way...

[br]

I am trying to create a navigation bar, one that shows all of the tabs, and places you can go within the website. Here's what it looks like...( ... When you hover a certain word it makes that specific text glow. I got it to work with the Homepage, but it creates a white box around it from my HTML file(when it calls for the image I left it blank in there to call the image in my CSS). But! That's not the main focus here, when I got it to work it made all the rest disappear..? The coding is still up like it was before, but they all just disappeared? Vanished..? Anyways this is what it currently looks like, (http://i62.tinypic.com/30tjw5g.png) ..

Please let me know if you want to see any specific coding. Here is my HTML:

<!DOCTYPE html><html>	<div id="main_wrapper">		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>				<header>					<title>CodeMode - Programming - Game Development - Games - Chat</title>			<center><a href="C:UsersKevinDesktopCodeModeindex.html"; target="_self"><img id="logo" src="ImagesLogoCodeMode.png" title="Logo --> Home"/></a></center>					<nav>					<span id="NavBar">					<a href="C:UsersKevinDesktopCodeModeindex.html"; title="Home" target="_self"><img  id="Home" src="" /></a>					<a href="C:UsersKevinDesktopCodeModeforums.html"; title="Forums" target="_self"><img id="Forums" src="" /></a>					<a href="C:UsersKevinDesktopCodeModecoding.html"; title="Coding" target="_self"><img id="Coding" src="" /></a>					<a href="C:UsersKevinDesktopCodeModegame_dev.html"; title="Game Development" target="_self"><img id="Game_Development" src="" /></a>					<a href="C:UsersKevinDesktopCodeModechat.html"; title="Chat" target="_self"><img id="Chat" src="" /></a>			</span>					</nav>					</header><!--						<body>		<article>				<h3>Recent Topics</h3>					<section class="left_section">'Professor GIBS' posted in:<br> SECTION OF FORUMS</section>					<section class="left_section">'Testuser0123' posted in:<br> SECTION OF FORUMS</section>					<section class="left_section">'Randomname0123' posted in:<br> SECTION OF FORUMS</section>				<h3>Recent News</h3>					<section class="left_section">The whatever was updated.</section>					<section class="left_section">The whoever was updated.</section>					<section class="left_section">The wherever was updated.</section>			</article>						<aside>							<p>This will be the main part of my page with most of the content!</p>						</aside>						<div id="footer">Members online: Professor GIBS, Testuser0123, Randomname01234.			<br><br>			<center>CodeMode Copyrighted 2014, All Rights Reserved.</center></div>					</body>-->			</div></html>

I actually decided to give you the whole file, here is CSS(this one is a bit ugly);

* {	color: #999999;	font-family: Georgia, serif, sans-serif, Times New Roman, Verdana, Arial;	text-align: center;	padding: 0px;	border: 0px;}html {	width: 960px;	background-color: black;}#main_wrapper {	width: 960px;	text-align: left;}header {	float: left;	height: 160px;	width: 960px;}title {}#logo {	margin: 0 0 0 370px;}nav {	float: left;	height: 50px;	width: 976px;}#NavBar {	float: left;	width: 960px;	height: 50px;}#Home {	background: url('http://i62.tinypic.com/2w3u6w6.jpg');	height: 50px;	width: 167px;}#Home:hover {	background: url('http://i59.tinypic.com/fa7yf7.jpg');	height: 50px;	width: 167px;}#Forums {	background: url('http://i60.tinypic.com/xfxaw8.jpg');	height: 80;	width: 216;}#Forums:hover {	background: url('http://i58.tinypic.com/2i2a8g2.jpg');	height: 50;	width: 216;}#Coding {	background: url('http://i58.tinypic.com/2wrq5g6.jpg');	height: 50;	width: 173;}#Coding:hover {	background: url('http://i58.tinypic.com/2zghlsk.jpg');	height: 50;	width: 173;}/*#Game_Development {	background: url('http://i58.tinypic.com/2rh0ah1.jpg');	height: 50;	width: 239;}#Game_Development:hover {	background: url('http://i62.tinypic.com/mi2xx0.jpg');	height: 50;	width: 239;}#Chat {	background: url('http://i59.tinypic.com/242dd77.jpg');	height: 50;	width: 165;}#Chat:hover {	background: url('http://i57.tinypic.com/11975nn.jpg');	height: 50;	width: 165;}*/body {	background-color: black;	width: 960px;}article {	float: left;	width: 225px;	background-color: cyan;}.left_section {	background-color: green;	height: 100px;	width: 225px;	border-top: 1px solid black;	border-bottom: 1px solid black;	margin: 0 0 5px 0;}aside {	background-color: orange;	float: left;	width: 735px;}#footer {	background-color: #707070;	clear: both;	width: 960px;}

Thank you guys for helping me, or even bothering with me.

Hey guys I'm still in the learning stages of HTML, CSS, and JS I was trying to make my own website with Notepad ++. I will not be using any external programs like Wordpress, or DreamWeaver because I want to learn to do everything from scratch. Here's the thing, I am stuck.. I need a quick lesson over TeamViewer, from someone who is very familiar with CSS. My coding seems to be all right, and I feel it should work, but it doesn't? Again, I am trying to make my navigation bar, but it just isn't coming along as I have hoped for it to. I mean, I understand a few things of why it isn't working but those are the side problems, my main problem is the displaying of all elements. Could somebody please help me through TeamViewer so you can see what I see, and take control when you need to. I've just reached out to you guys for the second time, could somebody reach out to me, and help here so I can get past this time consuming problem?

What is wrong, why isn't this working correctly? I want to make a navbar, then every time you hover over over peice of the navbar it changes images.

Hey guys, first time poster for these forums but I was just wondering what is wrong here.. I've tried so many different methods, and none of them have seemed to work.. To skip the part where I ramble on about what's wrong I'll just let you see.