Jump to content

Quick Lesson


Professor GIBS
 Share

Recommended Posts

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?

Link to comment
Share on other sites

Real-time assistance isn't very practical here. It would be more practical for you to generate a small example which demonstrates your problem or lack of understanding and then post that small example or make it available online.

Link to comment
Share on other sites

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...(ws8jyu.jpg ... 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) 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.

Link to comment
Share on other sites

You should go back through the HTML tutorial. You are using the <center> tag which is obsolete and have an overall structure which is quite wrong (you should never comment out your <body> or have any <div> tags outside the body). Also the <link> tag should be inside the head, and css width and height must include px or % and not just an integer. Also your top row of buttons will not fit in 960px.

 

http://www.w3schools.com/html/default.asp

Link to comment
Share on other sites

You want each navigation link to glow when it's hovered. I did not find any styling or html event code up there; or maybe I missed it. Read up html events and css links well. Try to finish everything. Something like this might be a tip:<nav><a href='#' onmouseover...javascript code> or in css - a:hover {font-weight. Color. Etc} just a novice's - or maybe a learner's - thought.

Link to comment
Share on other sites

He accomplishes the "glow" with two background images. I have no idea why he also has a foreground image. The missing foreground image probably creates the unwanted white border he mentions, or maybe I don't understand what he is doing with the foreground.

Link to comment
Share on other sites

@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:

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

Edited by Professor GIBS
Link to comment
Share on other sites

As Dsonesuk says, and as mentioned earlier above, your use of foreground images doesn't make any sense. You are applying a background image to them to create the menu buttons, but it would be far better to apply the background images to something else.

 

Also you did not read or correct the problems I listed earlier above.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

		<nav>			<ul id=navlist><!-- wrong missing quotes -->				<li id="Home"><a href="usefulJunkImagesNavBarNavBarMainNav_01.jpg"></a></li><!-- wrong how are you going to link to specific page when clicked/ -->				<li id="Forums"><a href="usefulJunkImagesNavBarNavBarMainNav_02.jpg"></a></li><!-- wrong again! how are you going to link to specific page when clicked/ -->			</ul>		</nav>
nav {	position: relative;}nav li{    margin: 0;    padding: 0;    list-style: none;    /*position: absolute;    top: 100; ignore this */float: left; /*added by dsonesuk*/}nav li, nav a {    height: 50px;    display: block;}/* these should represent the default state of background image */#Home {	background: url('usefulJunkImagesNavBarNavBarMainNav_01.jpg') 0 0;	/*left: 0px; ignore */	width: 167px;}#Forums {	background: url('usefulJunkImagesNavBarNavBarMainNav_02.jpg') -168px 0; /* IS this image a sprite image with nav01 image on it? very doubtful as its a different image, didn't understand tutorial about sprite images did we now, IF non of these images are sprites, ie image that consist of default and hovered over state combine, these will all use 0 0 */	width: 216; /* wrong where's the unit? */}/* add below styling of menu when hovered over */
Link to comment
Share on other sites

In the tutorial http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav i did not notice that they have used position absolute to position each li element, which is really bad. Normally you would use position: relative; for li elements, and child ul of these would use position: absolute; so i removed it because it was completely wrong to use in the tutorial example, and used wrongly for li element if submenu where going to be added later.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...