Jump to content



Recommended Posts

So for the past few days I've been reading tutorials and looking at code, but I can't seem to figure exactly how to do this.

What I'm looking for is this www.thekoopa.com/clix to look like this http://img151.imageshack.us/img151/3498/needjj2.jpg and every time I click on of my buttons have it display it in a semi transparent grey box with a white border.


If someone could point me in the right direction I would love it. Thanks.

Link to comment
Share on other sites

OK, I'm going to give you a solution. I haven't tested it in IE6, so make sure that you do so, and it probably isn't complete. You need to understand what went wrong.


- You have no doctype which means that browsers are going to have to guess what to do with the code. Include a doctype, such as html 4.01 strict, in order to get things behaving properly. Then always check your html and css using the w3c validators - http://www.w3.org/QA/Tools/ - correcting any errors that the validators bring to your attention. Once you code is valid you can go about trying to work out why the desired effect/positioning has not been achieved.


- You should not be putting css between <script> tags or in html elements, i.e., don't use <div style="">. I've put all the css in the <head> of the document but you will want to move it all into a separate file (a stylesheet) that you can link to from every page.


- You don't need to use javascript for "rollover" effects. CSS can do the job. What I've provided below is an "image replacement technique" so that people with screen readers and/or no-images can still see the text version of your navigation. It also only uses ONE IMAGE that I created from all the various images you use in your navigation. You can find the image here - http://i20.tinypic.com/nd7w5d.gif - but you should probably remake it yourself using your original images to improve the quality. It gets positioned differently for each link in the menu and prevent delays/flicker when users hover over a link.


- I'm assuming that the text/pages are never going to exceed the dimensions of the semi-transparent area. You should simple add that to the background image and then fiddle around with the positioning of #content to get it lined up precisely so that the text fits properly. I included some css to insert a scrollbar should the content exceed the dimensions of the content area (but this is just a stop-gap solution).


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   <title>Quickclix version 1 | Sponored by "The Desktop" in Lompoc, CA</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
----------------------------------- */

html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, cite, code, em, img, small, strike, strong, dl, dt, dd, ol, ul, li {margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline;}
/* remember to define focus styles! */
:focus {outline:0;}

ol, ul {list-style:none;}

blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}

----------------------------------- */

body {background-color: #000;}
p {margin:5px 0 10px 0; font-size:85%; color:#fff; }

----------------------------------- */

#container {position:relative; width:1043px; height:450px; padding-top:85px; margin:0 auto; background:#000 url(http://www.thekoopa.com/clix/images/content.gif) 0 0 no-repeat;}
/* add the semi-transparent box to the background image above */

#content {width:840px; height:345px; margin:0 auto; overflow:auto; font-family: Verdana, Arial, Helvetica, sans-serif;}

#navigation {position:absolute; bottom:0; right:20px; width:500px; height:40px;}
#navigation li {float:left;}
#navigation li a {position:relative; display:block; width:100px; height:40px;}
#navigation li a span {position:absolute; display:block; width:100%; height:100%; background:url(http://i20.tinypic.com/nd7w5d.gif) 0 0 no-repeat; cursor:pointer;}

/* specific background positions for each default link state */
#navigation li#home a span {background-position:0 0;}
#navigation li#roster a span {background-position:-100px 0;}
#navigation li#about a span {background-position:-200px 0;}
#navigation li#media a span {background-position:-300px 0;}
#navigation li#sponsors a span {background-position:-400px 0;}

/* specific background positions for each link :hover and :focus state */
#navigation li#home a:hover span, #navigation li#home a:focus span {background-position:0 -40px;}
#navigation li#roster a:hover span, #navigation li#roster a:focus span {background-position:-100px -40px;}
#navigation li#about a:hover span, #navigation li#about a:focus span {background-position:-200px -40px;}
#navigation li#media a:hover span, #navigation li#media a:focus span {background-position:-300px -40px;}
#navigation li#sponsors a:hover span, #navigation li#sponsors a:focus span {background-position:-400px -40px;}




<div id="container">
   <div id="navigation">
         <li id="home"><a href="#" title="Return to the Homepage"><span></span>Home</a></li>
         <li id="roster"><a href="#" title="See the Roster"><span></span>Roster</a></li>
         <li id="about"><a href="#" title="About Quickclix"><span></span>About</a></li>
         <li id="media"><a href="#" title="Media"><span></span>Media</a></li>
         <li id="sponsors"><a href="#" title="Our Sponsors"><span></span>Sponsors</a></li>
   <div id="content">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam lectus. Sed a lectus. Aliquam id tortor. Duis euismod enim nec nunc. Fusce lobortis sem sit amet orci. Pellentesque a elit sed dui faucibus suscipit. Pellentesque sagittis lectus congue augue. Nulla orci quam, iaculis non, condimentum at, dapibus id, neque. Donec dapibus scelerisque ante. Nullam sed dui. Mauris metus. Donec vel mauris vel metus tristique consectetuer. Proin vel velit et purus vulputate dictum. Proin metus pede, volutpat vel, dictum eget, bibendum quis, nisl.</p>
      <p>Curabitur vehicula pulvinar quam. Integer non neque. Ut felis urna, vestibulum at, dictum varius, mattis in, eros. In euismod. Fusce leo metus, dignissim sit amet, fermentum consequat, pretium sit amet, est. Fusce in orci. Donec augue neque, iaculis in, accumsan quis, sagittis sed, velit. Duis vehicula justo a mauris. Sed sed turpis et quam dapibus varius. Donec sagittis, leo a iaculis tempus, diam neque laoreet magna, et mattis neque orci vel lectus.</p>



As Bruce Lee might have said had he been interested in web design: Think of this post as a finger pointing to the moon. Don't stare at the finger all you'll miss all that heavenly glory! Try sticking to clean html and css, look at some online tutorials at w3cschools, and it will reward you with a much easier life! Does this deal will all the questions you had?

Link to comment
Share on other sites

Yes, thanks so much. I just started doing this about a week ago and you answered alot of my questions. All the tutorials I have read seem to say different techniques about achieving certain things at different times. I really appreciate the time you put into helping me out and I'm glad I stumpled upon this forum.

Link to comment
Share on other sites

Yes, thanks so much. I just started doing this about a week ago and you answered alot of my questions. All the tutorials I have read seem to say different techniques about achieving certain things at different times. I really appreciate the time you put into helping me out and I'm glad I stumpled upon this forum.


No problem. I know that sometimes you can spend more time trying to find reliable tutorials than actually learning from them! A lot of stuff is out of date or wrong. The best thing to do is get hold of a good ebook from a reputable source and then add to that knowledge by searching through the blogs of other "gurus" and looking at their source code to see how they did things! Good luck with it.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.