Jump to content

cjeanson

Members
  • Posts

    13
  • Joined

  • Last visited

Contact Methods

  • Website URL
    http://

Profile Information

  • Location
    Winnipeg, Canada

cjeanson's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. No didn't work, and it shouldn't because the div code basically creates 6 divs (5 divs inside of 1 parent div), and those linebreaks are inserted in spite of the positioning used.
  2. Hello all, I have a question for those who are used to utilizing positioning with div's.I have added a CSS image map, and have run into a snag regarding the inherent gap that my div's now have created between the header image (image map) and the next bit of dynamic content.Since I am working around a software cms system in place, I do not have complete control over the code, meaning I cannot create (and close) a new division to pull the remaining content up to close the gap. Well, this wouldn't be an ideal fix anyway.What would you suggest to eliminate this gap?Thankscss code: #menu { width : 500px; height : 211px;}#menu a { position: absolute; text-decoration: none;}#menu a em {visibility: hidden; }a#home { position : absolute; right : 525px; top : 179px; height : 10px; width : 49px; }a#account { position : absolute; right : 400px; top : 179px; height : 10px; width : 73px; }a#shop { position : absolute; right : 322px; top : 179px; height : 10px; width : 47px; }a#about { position : absolute; right : 189px; top : 179px; height : 10px; width : 77px; }a#contact { position : absolute; right : 76px; top : 179px; height : 10px; width : 93px; }a#home:hover { background-image: url(http://alteregosports.com/dir/1190/files/active_home.jpg); }a#account:hover { background-image: url(http://alteregosports.com/dir/1190/files/active_account.jpg); }a#shop:hover { background-image: url(http://alteregosports.com/dir/1190/files/active_shop.jpg); }a#about:hover { background-image: url(http://alteregosports.com/dir/1190/files/active_about.jpg); }a#contact:hover { background-image: url(http://alteregosports.com/dir/1190/files/active_contact.jpg); }/* Below is a fix for IE to ensure that the hover element disappears when not hovered over */a#home:hover,a#account:hover, a#shop:hover, a#about:hover, a#contact:hover { border: none; } .aesheader { width : 100%; height : 211px; padding : 0px; border-collapse : collapse;}.aesheadercontainer { border-collapse : collapse; padding : 0px;}.aesheaderleft{ padding : 0px; width : 274px; height : 211px;}.aesheaderspacer{ width : 100%; background-image : url(http://alteregosports.com/dir/1190/files/aesheader_spacer.jpg); background-repeat : repeat-x; height : 211px;}.aesheaderright{ padding : 0px; width : 571px; height : 211px;}.aesheaderdata{ padding : 0px; width : 100%;} html code <table class="aesheader"><tbody><tr><td class="aesheaderdata"><table class="aesheadercontainer"><tbody><tr><td class="aesheaderleft"><img src="http://alteregosports.com/dir/1190/files/aesheader_left.jpg" style="width: 274px; height: 211px" height="211" width="274" /> </td><td class="aesheaderspacer"> </td><td class="aesheaderright"><img src="http://alteregosports.com/dir/1190/files/aesheader_right.jpg" style="width: 571px; height: 211px" height="211" width="571" /></td></tr></tbody></table></td> </tr></tbody></table><div id="nav"><div id="menu"> <a href="http://alteregosports.com/index.cfm" id="home"><em>Home</em></a><a href="http://alteregosports.com/account.cfm" id="account"><em>Account</em></a><a href="http://alteregosports.com/page.cfm?PageID=56" id="shop"><em>Shop</em></a><a href="#" id="about"><em>About Us</em></a><a href="mailto:info@alteregosports.com" id="contact"><em>Contact Us</em></a></div></div>
  3. Hey all, I have a question for you regarding a design I am hoping to accomplish on a web site.Right now, I have a section with two columns, controlled by tables and it works o.k. The design was one from a predecessor of mine, who did everything with tables. It is for a community site, not a forum site, but more of a static site. Doesn't get updated much. Here is a screenshot.Now, I would like to make a change to this format. Ideally I would prefer to get rid of tables completely, which shouldn't be a big problem.However, my question revolves around the title/header section. There are technically two in place, one for "XC SKI SWAP" and the other is "UPCOMING XC SKI EVENTS".I would like to replace the generic colour background with a background that is content specific. So, maybe a new bar with some skis on the left edge, the text in the middle, and maybe some snow on the right side.Now, here is where I always do things the hard/wrong way: what would be the best way to create that header box so that each box takes up 50% width, and has 3 interior sections, with the left and right sections being specific widths, and the center flexing to make up any difference in width?Thinking back to times past, I believe I would use margin:auto as a key spec on the middle classification, but I thought I remember there being a better way to get the job done.Thanks
  4. Check out this article:http://alistapart.com/articles/imagemapIllustrates how to use CSS to get a great effect, completely controlled and (from my experience) cross-browser compliant.
  5. Well, I will have to do some looking to find out why this code is the issue:a.info:hover{z-index:25; background-color:#ff0} If I change the background-color to transparent, or remove the declaration it stops working.However, it should work in IE6 now, seems to run fine on my IE6, 7, FF2, just need to check some other browsers.Thanks again, this should be o.k. for now!
  6. Been trying a lot of different browsers, and have run into an issue.The page is online here: Demo LinkFirefox 2 - OKIE 7 - OKOpera - buggy (doesn't seem to set the width properly, height is too small as well)(still have to check safari and whatnot)CSS In Place:a.info{position:relative; /*this is the key*/background-color:#ffffff;color:#ff3333;text-decoration:underline}a.info:hover{z-index:25; color:#ff3333; background-color:#ffffff}a.info span{display: none}a.info:hover span{ /*the span will display just on :hover state*/display:block;position:absolute;padding: .5em;top:3em; left:2em; width:30em;border:1px solid #000000; /* or black bg?*/background-color:#ffffff; /* e3e3e3 for light grey / ff3846 - red bg*/ color:#000;text-align: center} HTML in use: <a class="info" href="#">Hybritech<span><img src="http://alteregosports.com/dir/1190/files/k2_hybritech.gif" alt="Hybritech Technology"><br />Description</span></a> If everything looks good on your browsers then I will stop worrying, but for some reason I don't think it will...
  7. Apparently I spoke too soon about the JS version.I have copied the Javascript from the dhtmltooltip link into an external JS file (of course excluding the <script> and </script> tags. I have attached it to the page in question.I originally used an <a> selector: <a href="#" onMouseover="ddrivetip('Info')"; onMouseout="hideddrivetip()">Hyper Progressive</a> That didn't work, so I figured that I should use something like in the example. They used a <div> but I would prefer to use an inline selector, so I went with: <span onMouseover="ddrivetip('Info')"; onMouseout="hideddrivetip()">Hyper Progressive</span> Anyway, the mouseover doesn't appear to work at all. I am sure I am making a stupid mistake.I have confirmed from looking at the source code that the .js file is loading, is not corrupt, and matches that from the site.
  8. I was surprised to see that IE7 supports the css method, but IE6 does not.Is there a workaround for IE6?
  9. Thank you so much! I managed to get the JS version going, but I prefer the cleanness and simplicity of css's approach, as well as the ease of modification!Thanks again, you guys are amazing!P.S. I should have thought of this approach, need more coffee.Take Care!
  10. Thanks to both, the tooltip is basically what I am looking to do.However I will have to find a place to include the HTML within the online store so that it loads with every page if I want to use the javascript approach.I will look into it, however if anyone can come up with a non-js solution I would love to hear it as well!Take Care, and thanks to both of you again!
  11. Hello all, I am looking at adding some additional functionality to a website that is running some online store software. I tried running a few searches but came up with nada.Anyway, I am aware of the benefits of using <a title> (and additionally <a alt> for IE) to provide additional information for a specific term or terms.However, I have found a limit of approximately 90 or so characters, which is a bit less than I want. Ideally, I would like to display the information in multiple lines, with a full description.Is there any way to accomplish this with basic HTML?I am aware that Javascript can do something like I have described, but the reason I do not believe that it is a key option is that I would have to load the script HTML into every page of the site to ensure that it works properly. Since it is a site that is largely "closed" I don't have access to the code to make an HTML insertion.Thanks for all of your help!
×
×
  • Create New...