thekoopa Posted October 16, 2007 Share Posted October 16, 2007 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. Quote Link to comment Share on other sites More sharing options...
thekoopa Posted October 16, 2007 Author Share Posted October 16, 2007 Also it seems that when the page is resized the link <div> moves around. I'm kind of looking for it to stay aligned to the right with the main image. Thanks. Quote Link to comment Share on other sites More sharing options...
moberemk Posted October 16, 2007 Share Posted October 16, 2007 Then add the box to the background image. Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted October 16, 2007 Share Posted October 16, 2007 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"> <html> <head> <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"> /* BASIC CSS RESET ----------------------------------- */ 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:"" "";} /* GLOBAL ----------------------------------- */ body {background-color: #000;} p {margin:5px 0 10px 0; font-size:85%; color:#fff; } /* LAYOUT ----------------------------------- */ #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;} </style> </head> <body> <div id="container"> <div id="navigation"> <ul> <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> </ul> </div> <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> </div> </div> </body> </html> 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? Quote Link to comment Share on other sites More sharing options...
thekoopa Posted October 16, 2007 Author Share Posted October 16, 2007 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. Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted October 16, 2007 Share Posted October 16, 2007 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.