Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need Help With Navigation Bar HTML

    What's goin' on guys. Let me start out by saying I'm a complete newbie at html. Well, maybe not complete. I know a few simple things but what I need help on is this navigation bar I made for my music group's facebook fan page.
    I made it in Photoshop now I just need help converting all of it. For the "about" that's just going to be a seperate page that I'll type up and all that. For the music tab I want it to redirect to our Reverbnation page. For the "Show Dates" section I'd like to incorporate a calendar in there but if not I'll probably type them all up. And for contact that'll be a seperate page also, As for the youtube, facebook, and twitter icons I want that to be linked to the pages. Can anybody help me with this?

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,092
    Thanks
    23
    Thanked 593 Times in 592 Posts
    I would look into creating HTML "Image Maps". That way you could use the image you just made and have it link to the pages you stated. Easy to find instructions with google.

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Location
    Toronto, ON
    Posts
    102
    Thanks
    12
    Thanked 1 Time in 1 Post
    You need to use the slice tool in Photoshop to split this 1 image into multiple images. Do a YouTube search for instructions on how to use this tool. Then you will have 7 different images (1 for each page, and 1 for each social media).

    Then simply link each image to it's respective page.

  • #4
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    You could also just export the whole thing as an image and use it as a sprite, called "links.jpg". Your HTML for the band links would be:

    Code:
    <ul id="links">
        <li><a href="link.to.site" class="about">About</a></li>
        <li><a href="link.to.site" class="music">Music</li>
        <li><a href="link.to.site" class="shows">Show Dates</li>
        <li><a href="link.to.site" class="contact">Contact</li>
        <li><a href="link.to.site" class="youtube">YouTube</li>
        <li><a href="link.to.site" class="facebook">Facebook</li>
        <li><a href="link.to.site" class="twitter">Twitter</li>
    </ul>
    Then in your CSS:

    Code:
    #links li a {
        display: block;
        background: url(images/links.jpg) 0 0 no-repeat;
        text-indent: -9999px;
        width:20px;
        height: 20px;
    }
    Then load this up in firefox. Make sure you have Firebug installed. Right click on the first link and choose "Inspect Element". Make sure you are on the <a>. Then using firebug, set the width so it fits the background element and adjust the two 0's (one is left/right and one is up/down) until the first link looks how you want it. all the other links should look the same. So you .about should look something like this (with arbitrary numbers):

    Code:
    #links li a.about {
        background-position: 10px 0;
        width: 50px;
    }
    Once that's done, rinse and repeat for each of the other links until you've got them all styled. Since you are only using one image, then it only has to be downloaded once.

  • #5
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm.. alright I think I might have to hang of this, thanks resdog & all the others that have replied to this. I'll try it out and let you know how it goes.

  • #6
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Alright, I got the links part down. How do I match them up horizontally with the image though? I'm using FBML on facebook for the HTML so do I have to do this in CSS or what? I'm majorly lost right now lol. Sorry guys

  • #7
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    Can you post your code?

  • #8
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The image code for the image or the whole code for everything? I figured out what css was, I downloaded Firebug for Firefox but I can't understand anything on this. I followed your instructions for the two 0's but nothing happened. I didn't realize doing this was so complicated lol

  • #9
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    I would have to question why you wouldn't use html/css to create this, there's really isn't much to the design and text.

    As stated earlier, splice and sprite would be the best solution. I'm not sure what resdog is talking about using a sprite for a single image. But what you're trying to achieve could probably just be made using standard html/css (I'm thinking of just an overlay). Think of it this way, the navigation image is just a background, while the link's <a>s are actual html/css, while the image you made in photoshop is a background. No need to make this more complicated than it is.
    Last edited by Sammy12; 08-12-2011 at 07:48 AM.

  • #10
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ahh alright, I think I know what you mean. So on the background I put the image link into the () and then paste that into FBML and then the links go into CSS, right? I'm just trying to understand all of this. It's new to me so forgive me if I don't catch on too quickly

  • #11
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    definetly not the best way, but for a beginning coder, probably the easiest to understand. In the end using a sprite with separate images for each also takes a lot of time (even in photoshop). I recommend either making the entire page into a psd (if your going to go heavy on the design) or just sticking with good old html/css, and making the text in html (nothing special about what you did in the image). Once again, I would highly advice you stick with html/css before moving onto psds and images like you tried out here.

    Once you get the hang of that, you can move onto sprites http://spritegen.website-performance.org/ which are primarily used to stop flickering images on hover and psd to html http://vandelaydesign.com/blog/desig...html-services/ and image maps http://www.w3schools.com/tags/tag_area.asp

    I used an html5 doctype but not eric mayer's reset. That's important. You can google the pros and cons to not using it.

    Code:
    <!DOCTYPE HTML>
    <html>
    	<head>
    		<title>Why make something complicated?</title>
    		<style type="text/css">
    			* { margin: 0; padding: 0; }
    			
    			/* not eric mayer html5 reset */
    			body.page {
    				font-family: Arial, sans-serif;
    				font-size: 12px;
    			}
    			
    			.nav {
    				_zoom: 1;
    			}			
    			.nav li {
    				display: inline;
    				float: left;
    				height: 100%;
    			}			
    			.nav li a {
    				display: block;
    				height: 100%;
    			}
    			
    			#nav-bar {
    				background: url('nav-bar.png') 0 0 no-repeat;
    				width: 506px;
    				height: 51px;
    			}			
    			#nav-bar .nav {	height: 100%; }
    			ul#site-links {	width: 388px; float: left; }
    			#site-links li { margin-left: 1px; }
    			#site-links li:first-child { margin-left: 0; }
    			#site-links li a.about { width: 78px; }
    			#site-links li a.music { width: 86px; }
    			#site-links li a.show_dates { width: 128px; }
    			#site-links li a.contact { width: 92px;	}
    			ul#social-follow { width: 118px; float: right; }
    			#social-follow li { margin-left: 3px; }
    			#social-follow li:first-child { margin-left: 6px; }
    			#social-follow li a { width: 33px; }
    		</style>
    	</head>
    	<body class="page">
    		<div id="nav-bar">
    			<ul id="site-links" class="nav">
    				<li><a href="#" class="about"></a></li>
    				<li><a href="#" class="music"></a></li>
    				<li><a href="#" class="show_dates"></a></li>
    				<li><a href="#" class="contact"></a></li>
    			</ul>
    			<ul id="social-follow" class="nav">
    				<li><a href="#" class="youtube"></a></li>
    				<li><a href="#" class="facebook"></a></li>
    				<li><a href="#" class="tumbler"></a></li>
    			</ul>
    		</div>
    	</body>
    </html>

    here's what it will look like (I recommend Chrome's developer tool), it's inspect element is essentially an upgrade as compared to firebug



    IE7 screenshot is the same, though it will not work in ie6 due to the :first-child selector, but I don't really care about that browser anymore

    Last edited by Sammy12; 08-12-2011 at 09:13 AM.

  • #12
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Gotcha, I'll try to play with everything and see what I can up with. Thank you for your help Sammy. Sorry about being so slow at this lol I'm just trying to learn.

  • #13
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    I'm not sure what resdog is talking about using a sprite for a single image.
    In case your curious, here's what I mean:

    You take the image above and create a double image, the top part being the standard state and the bottom being a hover state:



    then your html code would be:
    Code:
    <ul id="links">
            <li><a href="" class="about">About</a></li>
            <li><a href="" class="music">Music</a></li>
            <li><a href="" class="shows">Show Dates</a></li>
            <li><a href="" class="contact">Contact</a></li>
            <li><a href="" class="youtube">YouTube</a></li>
            <li><a href="" class="facebook">Facebook</a></li>
            <li><a href="" class="twitter">Twitter</a></li>
        </ul>
    and your CSS:

    Code:
    #links {
    	list-style-type: none;
    	margin: 0;
    	padding: 0;	
    }
    #links li {
    	float: left;	
    }
    #links li a {
        display: block;
        background: url(nav.jpg) 0 0 no-repeat;
        text-indent: -9999px;
        width:100px;
        height: 51px;
    }
    #links li a:hover {
    	background-position: bottom;	
    }
    #links li .music {
    	width: 87px;
    	background-position: -80px top;
    }
    #links li .music:hover {background-position: -80px bottom;}
    #links li .about {
    	width: 80px;
    	background-position: top left;	
    }
    #links li .about:hover {background-position: left bottom;}
    
    #links li .shows {
    	background-position: -167px top;
        width: 129px;
    }
    #links li .shows:hover {background-position: -167px bottom;}
    
    #links li .contact {
    	background-position: -296px top;
        width: 92px;
    }
    #links li .contact:hover {background-position: -296px bottom;}
    
    #links li .youtube {
    	background-position: -388px top;
        width: 41px;
    }
    #links li .youtube:hover {background-position: -388px bottom;}
    
    #links li .facebook {
    	background-position: -429px top;
        width: 35px;
    }
    #links li .facebook:hover {background-position: -429px bottom;}
    
    #links li .twitter {
    	background-position: -464px top;
        width: 42px;
    }
    #links li .twitter:hover {background-position: -464px bottom;}




    Just another way to solve the problem.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •