Jump to content

Who Has Done This Them Selves?


Byron

Recommended Posts

Alright guysI am wondering who has been able to create an image using the image sprites and pseudo-class method? If so I need to talk to you!!I would like to know step by step how to do it... My first question follow the css sprite tutorial on here is where do I add the css code? Bearing in mind I am using a separate css file for all of the styling code... Do I need to add it to the navbar section? Or create a different class just for that bit?

body {	background: url(images/background.jpg) ;	margin: 0px auto 0px;	padding: 0px;}#mainbody {	background: #FFFFFF;	width: 920px;	margin: 0px auto 0px;	padding: 0px;	}		/*************************************************	Header									  *************************************************/#header {	background: url(images/header.jpg);	width: 920px;	height: 173px;	color: #FFFFFF;	margin: 0px auto 0px;	padding: 0px;	overflow: hidden;	}	/*************************************************	Navbar									  *************************************************/#navbar {	background: url(images/navbar.jpg);	width: 920px;	height: 35px;	font-size: 12px;	font-family: Arial;	font-weight: smooth;		color: #FFFFFF;	margin: 0px auto 0px;	padding: 0px;	}#nav {	margin: 0px 0px 0px 15px;	padding: 0px;	list-style: none;	}	#nav ul {	margin: 0px;	padding: 0px;	list-style: none;	}#nav a {	background: #2B2B2B;	color: #FFFFFF;	display: block;	font-size: 10px;	font-weight: normal;	text-transform: uppercase;	margin: 0px 15px 0px 0px;	padding: 11px 10px 11px 10px;	}	#nav:hover {	background: #666666;	color: #FFFFFF;	display: block;	text-decoration: none;	margin: 0px 15px 0px 0px;	padding: 11px 10px 11px 10px;	}#nav li {	float: left;	margin: 0px;	padding: 0px;	}	#nav li li {	float: left;	margin: 0px;	padding: 0px;	width: 140px;	}	#nav li li a, #nav li li a:link, #nav li li a:visited {	background: #2B2B2B;	width: 140px;	float: none;	margin: 0px;	padding: 8px 10px 8px 10px;	border-top: 1px solid #C0C0C0;	}	#nav li li a:hover, #nav li li a:active {	background: #666666;	padding: 8px 10px 8px 10px;	}#nav li ul {	position: absolute;	width: 10em;	left: -999em;	}#nav li:hover ul {	left: auto;	display: block;	}	#nav li:hover ul, #nav li.sfhover ul {	left: auto;	}	/*************************************************	Navigation Shadow************************************************/#navshadow {	background: url(images/navshadow.jpg);	width: 920px;	height: 9px;	color: #FFFFFF;	margin: 0px auto 0px;	padding: 0px;	overflow: hidden;	}	/*************************************************	Left Sidebar 									* ************************************************/#l_sidebar {	float: left;	width: 175px;	margin: 0px 0px 0px 10px;	padding: 0px;	line-height: 20px;	display: inline;	}	#l_sidebar p {	padding: 0px;	margin: 0px;	}	#l_sidebar a img {	border: none;	margin: 0px;	padding: 0px;	}	#l_sidebar h2 {	height: 45px;		color: #f9ea45;	font-size: 12px;	font-family: Verdana;	font-weight: bold;	margin: 0px 0px 10px 0px;	padding: 1px 0px 1px 5px;	line-height: 42px;	}			#l_sidebar h3 {	color: #006699;	font-size: 18px;	font-family: Times New Roman, Tahoma, Verdana;	font-weight: normal;	margin: 0px 0px 5px 0px;	padding: 0px;	line-height: 20px;	}		.leftboxheader {	background: #FFFFFF;	float: left;	width: 175px;		height: 33px;	margin: 0px 0px 0px 0px;	padding: 0px 0px 0px 0px;		}		.leftbox {	background: #FFFFFF;	float: left;	width: 171px;	margin: 0px 0px 0px 0px;	padding: 0px 0px 0px 0px;	border-left: 2px solid #9B9B9B;		border-right: 2px solid #9B9B9B;		}	.leftbottom {	 background: #FFFFFF url(images/borderbottom.jpg);;	float: left;	width: 175px;		height: 10px;	margin: 0px 0px 10px 0px;	padding: 0px 0px 0px 0px;			}

And couldnt I just use this?<a href="index.htm"><img src="images/home.jpg" onMouseOver="this.setAttribute('src','images/home2.jpg')" onMouseOut="this.setAttribute('src','images/home.jpg')" border="0"></a><a href="aboutus.htm"><img src="images/aboutus.jpg" onMouseOver="this.setAttribute('src','images/aboutus2.jpg')" onMouseOut="this.setAttribute('src','images/aboutus.jpg')" border="0"></a><a href="productrequest.htm"><img src="images/productrequest.jpg" onMouseOver="this.setAttribute('src','images/productrequest2.jpg')" onMouseOut="this.setAttribute('src','images/productrequest.jpg')" border="0"></a><a href="affiliates.htm"><img src="images/affiliates.jpg" onMouseOver="this.setAttribute('src','images/affiliates2.jpg')" onMouseOut="this.setAttribute('src','images/affiliates.jpg')" border="0"></a><a href="contactus.htm"><img src="images/contactus.jpg" onMouseOver="this.setAttribute('src','images/contactus2.jpg')" onMouseOut="this.setAttribute('src','images/contactus.jpg')" border="0"></a>OR is that the old way??

Link to comment
Share on other sites

you can use JavaScript, but it's no as robust as the CSS or Server-side method, because JS can be disabled. Also, when you do use JS, should really try to separate all your JS into an external file, including the event handlers, look up progressive enhancement and DOM Scripting.I think the most significant point to make here is that CSS :hover, is very lightweight compared to your HTML/JS solution above. However, your solution does mean that the images within the anchors can be resized if you set their widht/height with a CSS em value.Simple code example:HTML:<ul id="nav"><li><a href="">home</a></li><li><a href="">home</a></li><li><a href="">home</a></li><li><a href="">home</a></li></ul>CSS:#nav li a {background-image:url(images/path/imagefile.gif);}#nav li a:hover {background-image:url(images/path/differentimagefile.gif);}Of course if you want a different set of images for each nav item you will need to target each element individually, so assign a class to each li element: (Using class means you can resue the name)<ul id="nav"><li class="home"><a href="">home</a></li><li class="contact"><a href="">contact</a></li><li class="about"><a href="">about</a></li><li class="blog"><a href="">blog</a></li></ul>#nav li.home a {background-image:url(images/path/imagefile.gif);}#nav li.home a:hover {background-image:url(images/path/differentimagefile.gif);}Sprites:If you have two images, change the image file name to point at the relevant image. However, the downside is that when the user first hovers over the list item, their will be a short flicker while the new image loads. A sprite is one image file comprised of often more than one image.so all you need to do is change the position of the image to make the correct portion of the sprite veiwable.E.g:#nav li.home a {background:tranparen url(images/path/imagefile.gif) no-repeat left top;}#nav li.home a:hover {background:tranparen url(images/path/imagefile.gif) no-repeat right top;}Get it?

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...