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 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Beginner, not sure how to use hover state images in my main navigation…

    I want the five button images to use an alternative version of each image I've created for their hover state. Is there a simple way to do this?

    Code:
    <nav>
                	<img src="img/banner_02.jpg" alt="banner"><a href="I Am The Movie.html"><img src="img/IATM.jpg" alt="banner"></a><img src="img/banner_04.jpg" alt="banner"><a href="Commit This To Memory.html"><img src="img/CTTM.jpg" alt="banner"></a><img src="img/banner_06.jpg" alt="banner"><a href="Even If It Kills Me.html"><img src="img/EIIKM.jpg" alt="banner"></a><img src="img/banner_08.jpg" alt="banner"><a href="My Dinosaur Life.html"><img src="img/MDL.jpg" alt="banner"></a><img src="img/banner_10.jpg" alt="banner"><a href="Go.html"><img src="img/GO.jpg" alt="banner"></a><img src="img/banner_12.jpg" alt="banner">
                </nav>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello abai44182,
    Have a look at this demo of a CSS rollover.

    It's a three state rollover but you don't have to put an image on the :visited psuedo-class.

    Google "CSS Rollover" for more examples.
    Also google "CSS sprites" for another approach.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry to ask but I'm really confused. My CSS is probably all messed up but basically I just want 5 images from the nav to be styled to use my rollover (and visited) states I've created. I've created an image that's 900 px tall (a 300 px square for each state stacked on each other) but I just don't know how to tell it how to use them.

    It's confusing me because my nav is set up confusing to display correctly (there's a pseudo-background which is really slivers of an image behind the squares).

    Any help at all would be greatly appreciated. I also want sub navs so I know that probably goes in the same spot in the CSS, and I can probably figure out/look that up but incase it's relevant to the way I'd want to go about this, I thought I'd say. Thanks so much if anyone can help. :/




    Code:
    <!doctype html>
    <html>
    	<head>
        	<meta charset="UTF-8">
    		<title>Motion City Soundtrack: A Story in CDs</title>
            
            <style>
    		
    				#main_wrapper {
    				margin: 0 auto;
    				width: 960px;
    			}
    			
    			#rollover1 {
            height: 300px;
            width: 300px;
        }
    			#roll1 {background: url(roll1.jpg) center;}
            	#rollover1 a:hover {background: url(roll1.jpg) bottom;}
            	#rollover1 a {background: url(roll1.jpg);}
    			
    			header { 
    				
    					width: 578px;
    					height: 127px;
    			}
    			
    			#leftContainer {
    				float: left;
    				width: 191px;
    				}
    			
    			#centerContainer {
    				float: left;
    				width: 578px;
    			}
    			
    			#rightContainer {
    				float: left;
    				width: 191px;
    			}
    			
    			#lyrics {
    				padding-left: 136px;
    			}
    			
    		</style>
            
        </head>
        <body>
        	<!-- main_wrapper starts -->
    		<div id="main_wrapper">
            
            	<div id="leftContainer">
                	<img src="img/jesse.jpg" alt="Background side graphic of Jesse on keyboard">
             	</div>
                
            	<div id="centerContainer">
                <header><img src="img/Title.jpg" alt="banner"></header>
                <nav>
                <img src="img/banner_02.jpg" alt="banner"><div id="roll1"><a href="I Am The Movie.html"></a></div><img src="img/banner_04.jpg" alt="banner"><a href="Commit This To Memory.html"><img src="img/CTTM.jpg" alt="banner"></a><img src="img/banner_06.jpg" alt="banner"><a href="Even If It Kills Me.html"><img src="img/EIIKM.jpg" alt="banner"></a><img src="img/banner_08.jpg" alt="banner"><a href="My Dinosaur Life.html"><img src="img/MDL.jpg" alt="banner"></a><img src="img/banner_10.jpg" alt="banner"><a href="Go.html"><img src="img/GO.jpg" alt="banner"></a><img src="img/banner_12.jpg" alt="banner">
                </nav>
                <section id="lyrics">
                	<article>
                    	<h1>Cambridge</h1>
                        <p>Contact was questioned from the boulevard</p>
    					<p>head colds in frozen weeks of summer holds</p>
    				    <p>I'm fine I'm fine wait waiting on the line</p>
    					<p>we sent ourselves in on the gray card scale</p>
    
    					<p>Hold my head</p>
    			<p>where storms are sand</p>
    			<p>and sand is said</p>
    			<p>to be sad</p>
    
    			<p>Longwinded Cambridge medicative care</p>
    			<p>head first the motor runs the motor must run</p>
    			<p>They confiscated every accident</p>
    			<p>and turned ourselves in on our selfish turns</p>
    
    			<p>With visitations from the underwhelmed</p>
    			<p>five years she fears to hold my broken head</p>
    			<p>Why were you gone why were you gone so long</p>
    			<p>she is the reason that I still believe</p>
    
    			<p>Cover your eyes in the pouring rain</p>
    			<p>cover your eyes everyone is all the same</p>
    
    			<p>Far away</p>
                    </article>
                    </section>
                    </div>
            	
                <div id="rightContainer">
                    	<img src="img/justin.jpg" alt="Side graphic of Justin singing">
                </div>
                
          </body>
    </html>

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    A single image with all states of all buttons is a CSS sprite. Did you find an example of a sprite that looks similar to the menu you're making?

    I've got at least one example.

    Upload your image and we can have a look at how to make a navigation menu with it.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's my image folder (it's small): http://www.2shared.com/file/VTKW7HqE/img.html Thanks a lot for the response. Still looking at that link (thanks) and trying to figure it out…

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by abai44182 View Post
    Here's my image folder (it's small): http://www.2shared.com/file/VTKW7HqE/img.html Thanks a lot for the response. Still looking at that link (thanks) and trying to figure it out…
    See if this gives you a start.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #fc6;
    }
    #container {
    	width: 900px;
    	margin: 0 auto;
    	background: #999;
    }
    ul#nav {
    	width: 900px;
    	height: 300px;
    	padding: 0;
    	list-style: none;
    }
    ul#nav li a {
    	height: 300px;
    	width: 300px;
    	float: left;
    }
    		li#button1 a:link {background: url(roll1.jpg) 0 0;}
    		li#button1 a:hover  {background: url(roll1.jpg) 0 300px;}
    		li#button1 a:active  {background: url(roll1.jpg) 0 600px;}
    li#button2 a:link {background: url(roll2.jpg) 0 0;}
    li#button2 a:hover {background: url(roll2.jpg) 0 300px;}
    li#button2 a:active {background: url(roll2.jpg) 0 600px;}
    		li#button3 a:link {background: url(roll3.jpg) 0 0;}
    li#button4 a:link {background: url(roll4.jpg) 0 0;}
    		li#button5 a:link {background: url(roll5.jpg) 0 0;}
    </style>
    </head>
    <body>
        <div id="container">
            <ul id="nav">
                <li id="button1"><a href="#"></a></li>
                <li id="button2"><a href="#"></a></li>
                <li id="button3"><a href="#"></a>
                    <ul>
                        <li id="button4"><a href="#"></a></li>
                        <li id="button5"><a href="#"></a></li>
                    </ul>
                </li>
            </ul>
        <!--end container--></div>
    </body>
    </html>
    Buttons 4 and 5 are already set up to be dropped menu items, your sub navs. You will still need to look into the CSS that makes a drop work...I have an example of that too - http://nopeople.com/CSS%20tips/CSS_d...ges/index.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks SO much. I think I'm getting closer but still having problems…problem is this is a beginning web design course for a graphic designer who's never done coding. Have to get this working. :/

    Can I post my entire code once more and just ask if I'm on the right track?

    Code:
    !doctype html>
    <html>
    	<head>
        	<meta charset="UTF-8">
    		<title>Motion City Soundtrack: A Story in CDs</title>
            
            <style>
    		
    				#main_wrapper {
    				margin: 0 auto;
    				width: 960px;
    			}
    			
    			header { 
    				
    					width: 578px;
    					height: 127px;
    			}
    			
    			#leftContainer {
    				float: left;
    				width: 191px;
    				}
    			
    			#centerContainer {
    				float: left;
    				width: 578px;
    			}
    			
    			ul#nav {
    				width: 578px;
    				height: 300px;
    				padding: 0;
    				list-style: none;
    			}
    			
    			ul#nav li a {
    				height: 300px;
    				width: 300px;
    				float: left;
    			}
    			
    			li#button1 a:link {background: url(roll1.jpg) 0 0;}
    			li#button1 a:hover  {background: url(roll1.jpg) 0 300px;}
    			li#button1 a:active  {background: url(roll1.jpg) 0 600px;}
    			li#button2 a:link {background: url(roll2.jpg) 0 0;}
    			li#button2 a:hover {background: url(roll2.jpg) 0 300px;}
    			li#button2 a:active {background: url(roll2.jpg) 0 600px;}
    			li#button3 a:link {background: url(roll3.jpg) 0 0;}
    			li#button4 a:link {background: url(roll4.jpg) 0 0;}
    			li#button5 a:link {background: url(roll5.jpg) 0 0;}
    			
    			#rightContainer {
    				float: left;
    				width: 191px;
    			}
    			
    			#lyrics {
    				padding-left: 136px;
    			}
    			
    		</style>
            
        </head>
        <body>
        	<!-- main_wrapper starts -->
    		<div id="main_wrapper">
            
            	<div id="leftContainer">
                	<img src="img/jesse.jpg" alt="Background side graphic of Jesse on keyboard">
             	</div>
                
            	<div id="centerContainer">
                <header><img src="img/Title.jpg" alt="banner"></header>
                <nav>
                	<ul id="nav"><img src="img/banner_02.jpg" alt="banner"><li id="button1"><a href="I Am The Movie.html"><img src="img/IATM.jpg" alt="banner"></a></li><img src="img/banner_04.jpg" alt="banner"><li id="button2"><a href="Commit This To Memory.html"><img src="img/CTTM.jpg" alt="banner"></a></li><img src="img/banner_06.jpg" alt="banner"><li id="button3"><a href="Even If It Kills Me.html"><img src="img/EIIKM.jpg" alt="banner"></a></li><img src="img/banner_08.jpg" alt="banner"><li id="button4"><a href="My Dinosaur Life.html"><img src="img/MDL.jpg" alt="banner"></a></li><img src="img/banner_10.jpg" alt="banner"><li id="button5"><a href="Go.html"><img src="img/GO.jpg" alt="banner"></a></li><img src="img/banner_12.jpg" alt="banner"></ul>
                </nav>
                <section id="lyrics">
                	<article>
                    	<h1>Cambridge</h1>
                        <p>Contact was questioned from the boulevard</p>
    					<p>head colds in frozen weeks of summer holds</p>
    				    <p>I'm fine I'm fine wait waiting on the line</p>
    					<p>we sent ourselves in on the gray card scale</p>
    
    					<p>Hold my head</p>
    			<p>where storms are sand</p>
    			<p>and sand is said</p>
    			<p>to be sad</p>
    
    			<p>Longwinded Cambridge medicative care</p>
    			<p>head first the motor runs the motor must run</p>
    			<p>They confiscated every accident</p>
    			<p>and turned ourselves in on our selfish turns</p>
    
    			<p>With visitations from the underwhelmed</p>
    			<p>five years she fears to hold my broken head</p>
    			<p>Why were you gone why were you gone so long</p>
    			<p>she is the reason that I still believe</p>
    
    			<p>Cover your eyes in the pouring rain</p>
    			<p>cover your eyes everyone is all the same</p>
    
    			<p>Far away</p>
                    </article>
                    </section>
                    </div>
            	
                <div id="rightContainer">
                    	<img src="img/justin.jpg" alt="Side graphic of Justin singing">
                </div>
                
          </body>
    </html>
    That's how I put it in. Since some of my items in my nav are not buttons but in between buttons, I'm not sure if I'm grouping it right.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by abai44182 View Post

    That's how I put it in. Since some of my items in my nav are not buttons but in between buttons, I'm not sure if I'm grouping it right.
    I'll have a look at this in a bit. Just wanted to point out now that the images inside your ul list should be in li's. You can give the narrower and wider li's different class names so you can style them differently.

    Check the code you have so far with the validator. That will answer a lot of questions right away.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Something else you need to know about is the box model rule.

    See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.


    In your case, the buttons in your menu are 300px wide. Floating them left doesn't do much for your nav since you can't even fit 2 beside each other in your 578px wide #centerContainer

    ...

    How did you see your menu looking anyway. I don't really get how the 95px high banners go with the 300px square buttons. Can you do a mockup in ps that would show what the finish product is supposed to look like?

    Something like this, li's floated left, would end up being more than 1600px wide.
    Code:
                	<ul id="nav">
                        	<li><img src="banner_02.jpg" alt="banner" width="29" height="95"></li>
                        <li id="button1"><a href="I Am The Movie.html"></a></li>
                        	<li><img src="banner_04.jpg" alt="banner" width="12" height="95"></li>
                        <li id="button2"><a href="Commit This To Memory.html"></a></li>
                        	<li><img src="banner_06.jpg" alt="banner" width="12" height="95"></li>
                        <li id="button3"><a href="Even If It Kills Me.html"></a></li>
                        	<li><img src="banner_08.jpg" alt="banner" width="12" height="95"></li>
                        <li id="button4"><a href="My Dinosaur Life.html"><img src="img/MDL.jpg" alt="banner"></a></li>
                        	<li><img src="banner_10.jpg" alt="banner" width="11" height="95"></li>
                        <li id="button5"><a href="Go.html"><img src="img/GO.jpg" alt="banner"></a></li>
                        	<li><img src="banner_12.jpg" alt="banner" width="30" height="95"></li>
                    </ul>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks so much. Got pretty close. You were right and my measurements were off. Each CD is 95 px wide, so my sprites are 95 px wide also (but 285 px tall).

    http://www.2shared.com/photo/X28Yh-q...4_at_3434.html

    That's a screenshot of what I want it to look like, except with working buttons.

    I now have it like this:

    Code:
    <!doctype html>
    <html>
    	<head>
        	<meta charset="UTF-8">
    		<title>Motion City Soundtrack: A Story in CDs</title>
            
            <style>
    		
    				#main_wrapper {
    				margin: 0 auto;
    				width: 960px;
    			}
    			
    			header { 
    				
    					width: 578px;
    					height: 127px;
    			}
    			
    			#leftContainer {
    				float: left;
    				width: 191px;
    				}
    			
    			#centerContainer {
    				float: left;
    				width: 578px;
    			}
    			
    			ul#nav {
    				width: 578px;
    				height: 95px;
    				padding: 0;
    				float: left;
    				list-style: none;
    			}
    			
    			ul#nav li a {
    				height: 95px;
    				width: 95px;
    				float: left;
    				padding: 0;
    				margin: 0;
    			}
    			
    			li#button1 a:link {background: url(roll1.jpg) 0 0;}li#button1 a:hover  {background: url(roll1.jpg) 0 95px;}li#button1 a:active  {background: url(roll1.jpg) 0 190px;}li#button2 a:link {background: url(roll2.jpg) 0 0;}li#button2 a:hover {background: url(roll2.jpg) 0 95px;}li#button2 a:active {background: url(roll2.jpg) 0 190px;}li#button3 a:link {background: url(roll3.jpg) 0 0;}li#button3 a:hover {background: url(roll3.jpg) 0 95;}li#button3 a:active {background: url(roll3.jpg) 0 190;}li#button4 a:link {background: url(roll4.jpg) 0 0;}li#button4 a:hover {background: url(roll4.jpg) 0 95;}li#button4 a:active {background: url(roll4.jpg) 0 190;}li#button5 a:link {background: url(roll5.jpg) 0 0;}li#button5 a:hover {background: url(roll5.jpg) 0 95;}li#button5 a:active {background: url(roll5.jpg) 0 190;}
    			
    			#rightContainer {
    				float: left;
    				width: 191px;
    			}
    			
    			#lyrics {
    				padding-left: 136px;
    			}
    			
    		</style>
            
        </head>
        <body>
        	<!-- main_wrapper starts -->
    		<div id="main_wrapper">
            
            	<div id="leftContainer">
                	<img src="img/jesse.jpg" alt="Background side graphic of Jesse on keyboard">
             	</div>
                
            	<div id="centerContainer">
                <header><img src="img/Title.jpg" alt="banner"></header><ul id="nav"><li><img src="img/banner_02.jpg" alt="banner" width="29" height="95"></li><li id="button1"><a href="I%20Am%20The%20Movie.html"></a></li><li><img src="img/banner_04.jpg" alt="banner" width="12" height="95"></li><li id="button2"><a href="Commit%20This%20To%20Memory.html"></a></li><li><img src="img/banner_06.jpg" alt="banner" width="12" height="95"></li><li id="button3"><a href="Even%20If%20It%20Kills%20Me.html"></a></li><li><img src="img/banner_08.jpg" alt="banner" width="12" height="95"></li><li id="button4"><a href="My%20Dinosaur%20Life.html"></a></li><li><img src="img/banner_10.jpg" alt="banner" width="11" height="95"></li><li id="button5"><a href="Go.html"></a></li><li><img src="img/banner_12.jpg" alt="banner" width="30" height="95"></li></ul>
                <section id="lyrics">
                	<article>
                    	<h1>Cambridge</h1>
                        <p>Contact was questioned from the boulevard</p>
    					<p>head colds in frozen weeks of summer holds</p>
    				    <p>I'm fine I'm fine wait waiting on the line</p>
    					<p>we sent ourselves in on the gray card scale</p>
    
    					<p>Hold my head</p>
    			<p>where storms are sand</p>
    			<p>and sand is said</p>
    			<p>to be sad</p>
    
    			<p>Longwinded Cambridge medicative care</p>
    			<p>head first the motor runs the motor must run</p>
    			<p>They confiscated every accident</p>
    			<p>and turned ourselves in on our selfish turns</p>
    
    			<p>With visitations from the underwhelmed</p>
    			<p>five years she fears to hold my broken head</p>
    			<p>Why were you gone why were you gone so long</p>
    			<p>she is the reason that I still believe</p>
    
    			<p>Cover your eyes in the pouring rain</p>
    			<p>cover your eyes everyone is all the same</p>
    
    			<p>Far away</p>
                    </article>
                    </section>
                    </div>
            	
                <div id="rightContainer">
                    	<img src="img/justin.jpg" alt="Side graphic of Justin singing">
                </div>
                </div>
                
          </body>
    </html>
    Which displays like this:

    http://www.2shared.com/photo/k2SYg6a...5_at_1091.html

    , and only the top two buttons change when you hover over them. My other sprites are in the folder and the same dimensions so the problem must be in my code again.

    Validator helped a lot. Much appreciated. Just stuck again (after getting further!) and there aren't any errors besides it not doing what I want it to do!

    Pardon the nav list being cramped. My prof told me to do that with the original nav when it wasn't displaying them correctly right next to each other (was putting one below the other like it's doing now) so I tried getting rid of the lines in between to see if that would help, but it didn't.

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I've made a few changes to make things fit as well as floating the li's so they'll display horizontally.


    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Motion City Soundtrack: A Story in CDs</title>
    <style>
    #main_wrapper {
    	margin: 0 auto;
    	width: 963px;
    	overflow: auto; /*to clear the floats*/
    }
    header {
    	width: 578px;
    	height: 127px;
    }
    #leftContainer {
    	float: left;
    	width: 191px;
    }
    #centerContainer {
    	float: left;
    	width: 581px;
    }
    ul#nav {
    	/*width: 578px;*/
    	height: 95px;
    	padding: 0;
    	float: left;
    	list-style: none;
    }
    ul#nav li {float: left;}
    ul#nav li a {
    	height: 95px;
    	width: 95px;
    	display: inline-block;
    	padding: 0;
    	margin: 0;
    }
    			li#button1 a:link { background: url(roll1.jpg) 0 0; }
    			li#button1 a:hover { background: url(roll1.jpg) 0 95px; }
    			li#button1 a:active { background: url(roll1.jpg) 0 190px; }
    li#button2 a:link { background: url(roll2.jpg) 0 0; }
    li#button2 a:hover { background: url(roll2.jpg) 0 95px; }
    li#button2 a:active { background: url(roll2.jpg) 0 190px; }
    			li#button3 a:link { background: url(roll3.jpg) 0 0; }
    			li#button3 a:hover { background: url(roll3.jpg) 0 95; }
    			li#button3 a:active { background: url(roll3.jpg) 0 190; }
    li#button4 a:link { background: url(roll4.jpg) 0 0; }
    li#button4 a:hover { background: url(roll4.jpg) 0 95; }
    li#button4 a:active { background: url(roll4.jpg) 0 190; }
    			li#button5 a:link { background: url(roll5.jpg) 0 0; }
    			li#button5 a:hover { background: url(roll5.jpg) 0 95; }
    			li#button5 a:active { background: url(roll5.jpg) 0 190; }
    #rightContainer {
    	float: left;
    	width: 191px;
    }
    #lyrics { padding-left: 136px; }
    </style>
    </head>
    <body>
        <div id="main_wrapper">
            <div id="leftContainer"> <img src="jesse.jpg" alt="Background side graphic of Jesse on keyboard"> </div>
                <div id="centerContainer">
                    <header><img src="Title.jpg" alt="banner"></header>
                        <ul id="nav">
                            <li><img src="banner_02.jpg" alt="banner" width="29" height="95"></li>
                            <li id="button1"><a href="I%20Am%20The%20Movie.html"></a></li>
                            <li><img src="banner_04.jpg" alt="banner" width="12" height="95"></li>
                            <li id="button2"><a href="Commit%20This%20To%20Memory.html"></a></li>
                            <li><img src="banner_06.jpg" alt="banner" width="12" height="95"></li>
                            <li id="button3"><a href="Even%20If%20It%20Kills%20Me.html"></a></li>
                            <li><img src="banner_08.jpg" alt="banner" width="12" height="95"></li>
                            <li id="button4"><a href="My%20Dinosaur%20Life.html"></a></li>
                            <li><img src="banner_10.jpg" alt="banner" width="11" height="95"></li>
                            <li id="button5"><a href="Go.html"></a></li>
                            <li><img src="banner_12.jpg" alt="banner" width="30" height="95"></li>
                        </ul>
                    <section id="lyrics">
                        <article>
                            <h1>Cambridge</h1>
                            <p>Contact was questioned from the boulevard</p>
                            <p>head colds in frozen weeks of summer holds</p>
                            <p>I'm fine I'm fine wait waiting on the line</p>
                            <p>we sent ourselves in on the gray card scale</p>
                            <p>Hold my head</p>
                            <p>where storms are sand</p>
                            <p>and sand is said</p>
                            <p>to be sad</p>
                            <p>Longwinded Cambridge medicative care</p>
                            <p>head first the motor runs the motor must run</p>
                            <p>They confiscated every accident</p>
                            <p>and turned ourselves in on our selfish turns</p>
                            <p>With visitations from the underwhelmed</p>
                            <p>five years she fears to hold my broken head</p>
                            <p>Why were you gone why were you gone so long</p>
                            <p>she is the reason that I still believe</p>
                            <p>Cover your eyes in the pouring rain</p>
                            <p>cover your eyes everyone is all the same</p>
                            <p>Far away</p>
                        </article>
                    </section>
                <!--end centerContainer--></div>
            <div id="rightContainer"> <img src="justin.jpg" alt="Side graphic of Justin singing"> </div>
        <!--end main_wrapper--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by abai44182 View Post
    , and only the top two buttons change when you hover over them. My other sprites are in the folder and the same dimensions so the problem must be in my code again.

    Validator helped a lot. Much appreciated. Just stuck again (after getting further!) and there aren't any errors besides it not doing what I want it to do!
    It should still be complaining about not using some sort of measurement unit. In this case you need px since 95 and 190 don't mean anything without it.

    Pardon the nav list being cramped. My prof told me to do that with the original nav when it wasn't displaying them correctly right next to each other (was putting one below the other like it's doing now) so I tried getting rid of the lines in between to see if that would help, but it didn't.
    I would not depend on your professor to be able to teach you modern web building methods.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #13
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey Excavator,

    I can't thank you enough. Read through it & think I understand, at least much more than I did (even how to check for errors) and for your help I'm tremendously grateful.

    My prof helped me with a bit more. Going to finish up the other pages but my one thing I'm still confused on is having sub navs, wanted to list songs on each CD upon hover as links that would display them showing up in my left column. Only if you have an easy way to explain/show an example of that, it would be awesome but if not, I understand. You've helped me a lot!!

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by abai44182 View Post
    My prof helped me with a bit more. Going to finish up the other pages but my one thing I'm still confused on is having sub navs, wanted to list songs on each CD upon hover as links that would display them showing up in my left column.
    A dropped menu (sub nav) is not hard at all. You need to format your ul correctly and the validator can help with that. A very basic example would be like this -
    Code:
    	<ul>
        	<li>linky</li>
            <li>linky
                <ul>
                	<li>dropped linky</li>
                    <li>dropped linky</li>
                </ul>
            </li>
            <li>linky</li>
        </ul>
    After that, all you need to do is hide the dropped ul until a :hover psuedo-class makes it visible. From there, it's easy to position it to some relative point in your menu.

    This is a super simple example of a CSS only dropdown menu. I also have one where the dropped menu is horizontal insteadhttp://nopeople.com/CSS%20tips/new_e...out/index.html.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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