redarrow Posted September 14, 2007 Share Posted September 14, 2007 SAVE AS A .HTML FILE. does it increase your idears in your web designs it does for me. i think it cool i dont relly use css but this get a 10/10 <html> <title>test css</title> <head> <style lanuage="text/css"> a.info{ position:relative; /*this is the key*/ z-index:24; background-color:#ccc; color:#000; text-decoration:none} a.info:hover{z-index:25; background-color:#ff0} a.info span{display: none} a.info:hover span{ /*the span will display just on :hover state*/ display:block; position:absolute; top:2em; left:2em; width:15em; border:1px solid #0cf; background-color:#cff; color:#000; text-align: center} </style> </head> <body> <table align="center"> <td align="center"> <a class=info href="#">Home<span></a>We provide the best cars around!</span> </td><td> <a class=info href="#">About us<span></a>Read all about us were grate at selling cars</span> </td><td> <a class=info href="#">Products<span></a>We wont be beat on price of or products</span> </td><td> <a class=info href="#">Contact us<span></a>Please contact us for a grate deal </span> </td></table> </body> </html> Quote Link to comment Share on other sites More sharing options...
moberemk Posted September 14, 2007 Share Posted September 14, 2007 I'm not seeing the use of this. Maybe it's just me. Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted September 14, 2007 Share Posted September 14, 2007 Pretty standard css knowledge...but make sure you include a doctype and don't use tables for layout. This kind of thing, where you reveal the contents of an element contained within an <a> element when you hover over the <a> element is often used in menus or to reveal little chunks of text/images: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Website</title> <style type="text/css"> /* CSS RESET ----------------------------------- */ *, html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, em, font, img, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tr, th, td {margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline;} ol, ul, li {list-style-type:none;} /* STYLES ----------------------------------- */ body {font-family: "Lucida Grande", Tahoma, Verdana, Arial, Helvetica, sans-serif;; font-size:85%; color:#000; line-height:1.3em; background:#fff; text-align:center; /* part1 of centering hack */} a:link, a:visited {color: #264475; text-decoration:none;} a:hover {color: #4f8ff5; text-decoration:none;} a:focus {color:;} a:active {color:;} h1, h2, h3, h4, h5, h6 {font-size:120%; line-height:1.5em;} h2 {font-size:200%; font-weight:normal; border-bottom:1px solid #000; margin-bottom:10px;} p {margin:5px 0; line-height:1.5em;} #wrapper {margin:20px auto; text-align:left; /* part2 of centering hack */} #header {position:relative; width:700px; height:160px; margin:0 auto;} #header h1 {position:absolute; top:0px; left:0; display:block; width:700px; height:160px;} #header h1 a {display:block; width:700px; height:160px;} #header h1 a span {position:absolute; width:100%; height:100%; background:#f90 url(image) 0 0 no-repeat;} #nav {position:relative; width:700px; height:auto; margin:0 auto; background:#000; text-align: center;} #nav ul {padding: 5px 0 5px 0; margin:0 auto;} #nav ul li {display:inline; width:auto;} #nav ul li a {padding:5px; color:#ddd;} #nav ul li a span {visibility:hidden;} #nav ul li a:hover {color:#fff;} #nav ul li a:hover span {visibility:visible;} #nav ul li a.active {padding-bottom:2px; border-bottom:4px solid #fff; color:#fff;} #nav ul li a.active:hover span {visibility:hidden;} #content {position:relative; width:700px; height:auto; padding:40px 30px; margin:0 auto; font-size:95%;} #tricky {float:right; width:200px; height:auto; border: 1px solid #000; margin-left:20px; text-align:center;} #hide1 a span, #hide2 a span {visibility:hidden; color:#f00;} #hide1 a:hover span, #hide2 a:hover span {visibility:visible;} #footer {width:700px; color:#fff; padding:5px 0; margin:0 auto; font-size:95%; text-align:center; background:#f90;} #footer p {margin:0;} /* CLEARING FLOATS ----------------------------------- */ #header:after, #nav ul:after, #content:after, #footer:after {content:"."; display:block; height:0; font-size:0; clear:both; visibility:hidden;} </style> </head> <body> <div id="wrapper"> <div id="header"> <h1><a href="#" title="Website Logo/Banner"><span></span>Text hidden by span element but visible if use has images off/css on.</a></h1> </div> <div id="nav"> <ul> <li><a href="#" title=""><span>{</span>Home<span>}</span></a></li> <li><a href="#" title=""><span>{</span>About Us<span>}</span></a></li> <li><a href="#" title=""><span>{</span>The Dog<span>}</span></a></li> <li><a href="#" title=""><span>{</span>The Cat<span>}</span></a></li> <li><a href="#" title=""><span>{</span>How to Feed Pets<span>}</span></a></li> <li><a href="#" title=""><span>{</span>Blog<span>}</span></a></li> <li><a href="#" title=""><span>{</span>Contact Us<span>}</span></a></li> </ul> </div> <div id="content"> <h2>Page Title</h2> <div id="tricky"> <div id="hide1"><a href="#no">I Am Hiding Something <br /><span>Look at me, I'm free.</span></a></div> <div id="hide2"><a href="#no">So Am I! <br /><span><img src="http://www.fishinghurts.com/buttons/50-hiddenPig.gif" alt"" /></span></a></div> </div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> </div> <div id="footer"> <p>Copyright © Some Website</p> </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted September 14, 2007 Share Posted September 14, 2007 LOL!!! Both of these are perfect examples of browser incompatibility. I am not trying to be rude. Really. I just need to point out how far we all have to go in our industry until we have coding harmony between real browsers and IE. We have two talented web professionals here ... each of whom obviously doesn't cross-check their code in other browsers for compatibility. First, redarrow, you are obviously a talented web professional ... so why are you only coding for IE ? You are losing @ 30% of your audience. You should start viewing your websites in proper web standards compliant browsers (like Firefox or Opera) to see how complacent and old your code is. It kills me when I see a Pro who still uses old, non-standards valid, IE only proprietary code. Your code does NOT work at all in any other browser because IE has allowed you to get into lazy coding habits - resulting in (sorry) truly bad html. First, so long as you never use a proper doctype you will be an IE puppet and a Microsoft only pet (they love coders who don't care about other browsers). Second, the closing </a> tag belongs AFTER the closing </span> tag. Your table is not a table at all ... YOU HAVE NO TABLE ROWS!!! ARRRGGH!! Where are your <tr> tags?! Come on, you know better than that! Third, <style> has a "type" attribute ... it is not a language. The proper tag is: <style type="text/css"> . Just the fact that IE rewards junk code like this by displaying it shows how little respect they have for both professionalism AND web standards. But it suits them just fine if a page only works in IE ... they're not the one who likes like a newbie coder from the early 90s. Rethink your professionalism. Put some pride in your code by learning how to properly use css and stop using "tables". Any web professional who is cross-browser coding aware, and is bidding against you for a job can make you look like an amateur -easily stealing the job away from you. ************ bronzemonkey - your xhtml code worked fine in standards compliant browsers, and it would be valid web standards code without the typos (I am assuming alt"" />) and (sans-serif;;) were typos ... but it didn't work in IE6 - and it still wouldn't work in IE even without the typos ... because your css was had two MAJOR errors: a:focus {color:;} a:active {color:;} What was that?! Parse error land. Change it to: a:focus {} a:active {} It just struck me how if you both only checked your code in other browsers you would have realized something was wrong. And just to prove that I am not trying to be rude, I just viewed the new home page of my major website in Opera for the first time. I would love to ignore it and say, Ahhh, who uses Opera these days, anyway. LOL, that's what I used to say five years ago about any browser other than IE! I gotta go fix this, now. Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted September 14, 2007 Share Posted September 14, 2007 LOL, it wasn't rude, just a bit much to expect everyone to check that the code in their forum posts validate. Obviously in a real-life project it's going to be valid xhtml/css and work in all major browsers. I knocked up that demo purely for this thread. By the looks of it I didn't get around to choosing some color values for focus/active. It's a little extreme to label my post as a "perfect example of browser incompatibility" just for this reason. The technique I was demonstrating works in all major browsers, the rest of the code was just to provide some context. Maybe you also noticed a few other issues, such as the lack of float-clearing for IE6...which would require the following addition: * html #header, * html #nav ul, * html #content, * html #footer {height:1%;} I also like to use the following for IE7 *:first-child+html #header, *:first-child+html #nav ul, *:first-child+html #content, *:first-child+html #footer {min-height:1px;} Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted September 15, 2007 Share Posted September 15, 2007 Sorry, it just made me laugh out loud when I first tried both examples and his only worked in IE and yours only worked in FF. It wasn't until I quickly debugged your code that I realized it was obviously typos while posting to the forum. I no longer bother with hacks in my css. I LOVE using an IE Conditional Comment to link to one IE only css file that modifies only those portions of elements required to make IE 6 behave. Since IE 7 fixed the bugs that allowed hacks (but NOT the reason for them!) usually one IE only css file works in 6 and 7. Although, as I mentioned, I need to go back to using the old Opera hacks - I had removed them when I started using the IE CCs. 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.