Professor GIBS Posted August 11, 2014 Share Posted August 11, 2014 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 More sharing options...
niche Posted August 11, 2014 Share Posted August 11, 2014 Please post your code as far as you've able to take it. Link to comment Share on other sites More sharing options...
davej Posted August 11, 2014 Share Posted August 11, 2014 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 More sharing options...
Professor GIBS Posted August 11, 2014 Author Share Posted August 11, 2014 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. Link to comment Share on other sites More sharing options...
davej Posted August 11, 2014 Share Posted August 11, 2014 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 More sharing options...
Professor GIBS Posted August 14, 2014 Author Share Posted August 14, 2014 Thank you for the tips, but can I get some help with the problem at hand..? Link to comment Share on other sites More sharing options...
davej Posted August 15, 2014 Share Posted August 15, 2014 I don't understand what the problem at hand is. Did you correct the critical errors I mentioned above? Link to comment Share on other sites More sharing options...
Jonathanks Posted August 15, 2014 Share Posted August 15, 2014 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 More sharing options...
davej Posted August 15, 2014 Share Posted August 15, 2014 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 More sharing options...
Professor GIBS Posted August 16, 2014 Author Share Posted August 16, 2014 (edited) @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 Edited August 16, 2014 by Professor GIBS Link to comment Share on other sites More sharing options...
dsonesuk Posted August 16, 2014 Share Posted August 16, 2014 (edited) You CANNOT use img element for swapping backgrounds, li (list items) or a (anchors) yes! but not img elements see http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_nav and http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav Edited August 16, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
davej Posted August 16, 2014 Share Posted August 16, 2014 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 More sharing options...
Professor GIBS Posted August 16, 2014 Author Share Posted August 16, 2014 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 More sharing options...
dsonesuk Posted August 16, 2014 Share Posted August 16, 2014 <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 More sharing options...
davej Posted August 17, 2014 Share Posted August 17, 2014 I'm not happy to see relative and absolute positioning. Why do you think you need those? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 17, 2014 Share Posted August 17, 2014 (edited) They are from tutorial links i gave. But you do use them for sub menus to work. Edited August 17, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
davej Posted August 17, 2014 Share Posted August 17, 2014 Oh, you added them for sub-menus. Ok. I didn't see any sub-menus in the original. ---edit--- Oh, that was from the sprite example. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 17, 2014 Share Posted August 17, 2014 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now