Jump to content

1089

Members
  • Content Count

    37
  • Joined

  • Last visited

Community Reputation

0 Neutral

About 1089

  • Rank
    Newbie
  1. 1089

    Columns?

    The problem is that you are referencing an external style sheet, the Tryit editor is looking for a stylesheet that it cannot find and thus your styles are not loaded. With this editor, you have to embed your styles. Another problem is the fact that you are calling a javascript file, which the editor cannot find. So either you should embed it as well, or you should test everything locally where all your files will be where you say the are. Without the javascript to execute, the tabs will not work.Place the CSS inside the style tags:<style type="tex/css">YOUR CSS HERE</style>And your Javascript here:<script src="mini-tabbed-pages/click_menu.js" type="text/javascript">JAVASCRIPT HERE</script>It should look like this (I do not have the javascript you want, so you'll have to add that yourself.): <head><script src="mini-tabbed-pages/click_menu.js" type="text/javascript"></script><style type="text/css">#tabs {width:500px; text-align:left; background:; margin:0px; position:relative; z-index:200; font:bold 11px verdana, arial, sans-serif;}#tabs ul {padding:0; margin:0; width:800px; list-style:none; position:relative;}#tabs ul li.outer { float:left; display:inline; margin:4px 3px 4px; width:125px; height:53px; border-bottom:1px solid #777b02; line-height:50px; color:#777b02; text-align:center; background:#fff url(icon/tab.png) no-repeat top left;}#tabs ul li div {display:none;}#tabs ul li.click {padding-bottom:132px; border-bottom:1px solid #fff; color:#000; margin-bottom:0;}#tabs ul li.click {color:#000; background-position:0 -55px; height:55px; cursor:default;}#tabs ul li.click div {display:block; padding:5px; position:absolute; left:4px; top:55px; width:638px; height:118px; border-bottom:3px solid #fff;}#tabs ul li.click div.tab_left{background:#fff url(icon/tabmid.png);}#tabs ul li.click div.tab_center{background:#fff url(icon/tabmid.png);}#tabs ul li.click div.tab_right{background:#fff url(icon/tabmid.png);}.clear {clear:both; height:0; line-height:0; overflow:hidden;}#tabs span.base {display:block; height:20px;font-size:10px; color:#c60; background: bottom;}#tabs div h5 {font-size:11px; margin:0;}#tabs div p {font-weight:normal; text-align:left; color:#000; margin-top:3px; line-height:15px;}#tabs div a img {border:0;}#tabs div img.image {float:left; border:0; margin-right:5px; margin-top:-15px;}#tabs div a.unlock {background:url(icon/unlock.gif); display:block; width:30px; height:30px; margin:0 auto;}#tabs div a.unlock:hover {border:0;}#tabs div a:hover.unlock img {visibility:hidden;}#tabs p.bold {color:#069; padding-top:5px;}#tabs form {margin-top:-10px; padding:0;}#tabs form fieldset {padding:0;}#tabs p.buttons {text-align:center;}</style></head><body onload="clickMenu('tabs')"><div id="tabs"><ul><li class="outer one">avicularia<div class="tab_left"><h5>Avicularia avicularia</h5><p>This area can hold anything you like, text, images, forms and even links like this one - <a href="index.html">Main Menu</a>.</p></div></li><li class="outer two">UNLOCK<div class="tab_center"><h5>Unlock the Secrets</h5><a href="http://www.w3.org/Style/CSS/" class="unlock" title="Unlock the secrets of CSS at w3.org"><img src="mini-tabbed-pages/icon/lock.gif" alt="Locked" title="Locked" /></a></div></li><li class="outer four"; >SEARCH<div class="tab_left"><h5>Search This Site</h5><p>You can add a search form here.</p></div></li><li class="outer four"; >SEARCH<div class="tab_left"><h5>Search This Site</h5><p>You can add a search form here.</p></div></li><li class="outer three">MAIL<div class="tab_right"><h5>Email</h5><p>Maybe a link to your emails or a form asking to login to retrieve your emails, or even a link to a <a href="http://www.cssplay.co.uk/w3c/contact.html">Contact Page</a>.</p></div></li></ul><br class="clear" /><ul><li class="outer four"; >SEARCH<div class="tab_left"><h5>Search This Site</h5><p>You can add a search form here.</p></div></li><li class="outer four"; >SEARCH<div class="tab_left"><h5>Search This Site</h5><p>You can add a search form here.</p></div></li><li class="outer four"; >SEARCH<div class="tab_left"><h5>Search This Site</h5><p>You can add a search form here.</p></div></li><li class="outer five">PROFILE<div class="tab_center"><h5>Your Profile</h5><form id="two" action="..." method="post"><fieldset id="personal"> <label for="login">login : </label> <input name="login" id="login" type="text" tabindex="1" /></fieldset><p class="buttons"> <input id="button1" type="submit" value="Send" /> <input id="button2" type="reset" value="Reset" /></p></form></div></li><li class="outer six">DRAW<div class="tab_right"><h5>Learn how to Draw</h5><a href="http://www.adobe.com/products/fireworks/"><img class="image" src="mini-tabbed-pages/icon/fireworks.gif" alt="Adobe Fireworks 8" title="Adobe Firerworks 8" /></a><p class="fire">Get top-quality design results. Take creative control with seamless vector and bitmap editing.</p></div></li></ul><br class="clear" /><ul><li class="outer four"; >SEARCH<div class="tab_left"><h5>Search This Site</h5><p>You can add a search form here.</p></div></li><li class="outer four"; >SEARCH<div class="tab_left"><h5>Search This Site</h5><p>You can add a search form here.</p></div></li></ul></div></body></html> The look seems right, but since the javascript is not loading, it won't work correctly.Hope this helps.
  2. Ok... I don't know what happened. But the source code I looked at when I posted this was small and contained a canvas, referencing about 20 lines of text... now I can't find it!When I look at the source now, I see a ton of Javascript, like the rest of you.Sorry about this, don't know where I found that other page.Thanks for the info.
  3. 1089

    Columns?

    You could use various div elements, one for each column. Divs gan be given widths in percentages.This is a quick example of the CSS needed for three columns, with widths of 19%, 50% and 30%. I added borders so that you could see where the columns stop. <div class="column1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />Aenean ut quam ac sem aliquam dapibus sit amet et ante. Mauris luctus ultrices metus et malesuada. Cras est arcu,<br />placerat vitae blandit eu, mattis et ipsum. Sed bibendum turpis sit amet urna dictum id condimentum ante porta.<br />Ut ac nibh eget nisi tristique tristique a eget quam. Praesent a accumsan purus. Nulla at viverra erat.<br />Nam libero nulla, pulvinar vitae eleifend vel, tristique in urna. Nunc sollicitudin justo dui.</div><div class="column2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />Aenean ut quam ac sem aliquam dapibus sit amet et ante. Mauris luctus ultrices metus et malesuada. Cras est arcu,<br />placerat vitae blandit eu, mattis et ipsum. Sed bibendum turpis sit amet urna dictum id condimentum ante porta.<br />Ut ac nibh eget nisi tristique tristique a eget quam. Praesent a accumsan purus. Nulla at viverra erat.<br />Nam libero nulla, pulvinar vitae eleifend vel, tristique in urna. Nunc sollicitudin justo dui.</div><div class="column3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />Aenean ut quam ac sem aliquam dapibus sit amet et ante. Mauris luctus ultrices metus et malesuada. Cras est arcu,<br />placerat vitae blandit eu, mattis et ipsum. Sed bibendum turpis sit amet urna dictum id condimentum ante porta.<br />Ut ac nibh eget nisi tristique tristique a eget quam. Praesent a accumsan purus. Nulla at viverra erat.<br />Nam libero nulla, pulvinar vitae eleifend vel, tristique in urna. Nunc sollicitudin justo dui.</div> Be careful with border, margins etc, they eat up your vertical and horizontal space; if the above 19% would change to 20% there won't be enough space for all three columns together with 6px of borders (2px of border per column). If you use margins, make sure all the percentages add up to 100.If you want to play around with this code, go here (w3schools tryit editor) and past the following text in the left box, click the button and watch as your three columns appear: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">div.column1{width:19%;Float:left;border:1px solid gray;}div.column2{width:50%;Float:left;border:1px solid red;}div.column3{width:30%;Float:left;border:1px solid red;}</style></head><body><div class="column1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />Aenean ut quam ac sem aliquam dapibus sit amet et ante. Mauris luctus ultrices metus et malesuada. Cras est arcu,<br />placerat vitae blandit eu, mattis et ipsum. Sed bibendum turpis sit amet urna dictum id condimentum ante porta.<br />Ut ac nibh eget nisi tristique tristique a eget quam. Praesent a accumsan purus. Nulla at viverra erat.<br />Nam libero nulla, pulvinar vitae eleifend vel, tristique in urna. Nunc sollicitudin justo dui.</div><div class="column2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />Aenean ut quam ac sem aliquam dapibus sit amet et ante. Mauris luctus ultrices metus et malesuada. Cras est arcu,<br />placerat vitae blandit eu, mattis et ipsum. Sed bibendum turpis sit amet urna dictum id condimentum ante porta.<br />Ut ac nibh eget nisi tristique tristique a eget quam. Praesent a accumsan purus. Nulla at viverra erat.<br />Nam libero nulla, pulvinar vitae eleifend vel, tristique in urna. Nunc sollicitudin justo dui.</div><div class="column3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />Aenean ut quam ac sem aliquam dapibus sit amet et ante. Mauris luctus ultrices metus et malesuada. Cras est arcu,<br />placerat vitae blandit eu, mattis et ipsum. Sed bibendum turpis sit amet urna dictum id condimentum ante porta.<br />Ut ac nibh eget nisi tristique tristique a eget quam. Praesent a accumsan purus. Nulla at viverra erat.<br />Nam libero nulla, pulvinar vitae eleifend vel, tristique in urna. Nunc sollicitudin justo dui.</div></body></html> There are various things you can do with the textin your columns, you can give them padding, justify, wrap etc. Look around on the w3 site and you will find countless examples.
  4. Anyone? Any insight would be helpful. Even if you can just tell me where to look for the awnser.
  5. 1089

    IE versions

    Sadly IE9 does not work in XP, but it might just be the BETA
  6. 1089

    IE versions

    Adobe Browserlabs:https://browserlab.adobe.com/en-us/index.htmlRenders almost every browser on the market
  7. Hi,I am to design a new webpage for a company in HTML5 and they want effects I usually associate with Flash.If you look at http://www.beautyoftheweb.com/#/experience/ you will see the nice boxes that pop up when you hover over them and float to the middle. I know this is done with the Canvas element, and some JavaScript, but I have no idea how this is accomplished. Could someone point me in the right direction? (I also saw AJAX in the source code)I've looked at the HTML5 info on w3cschools, but the canvas element is discussed in a very basic manner - gives me no insight into how a page like the one I mentioned above would function.I'm thinking of a mindmap styled intro page, where the users are presented with the company logo in the middle and various boxes surrounding it. Clicking on one of the boxes loads it to the center of the page.How would this function with search engines? Links? I know that AJAX presents difficulties when linking to a page where you want to display spesific content that was loaded dynamically.Futhermore, what would be a good way to show users with older browsers not supporting HTML5 the same info in a relatively similair fashion?Thanks!!!
  8. Hi,I'm working on a Joomla site and I've encountered a problem with my images.The images are floated to the right of the text, but in IE, they just dissapear. (I think the float too far right or something.I want to keep code out of the articles, so that anyone can place an image using the standard editor and it will be where it is supposed to be.How can this be accomplished? I suppose I can just creat two <div> elements for the text and the image and float them next to each other... but I want something that requires no fiddling with html inside the article, The CSS should automatically sort it out.I'm experimenting at the moment, but I thought that I should just try here, someone may have a solution to my woes.If you have IE6/7/8 and you want to see for yourself, Diacoustic Products & ServicesThanks
  9. Me = .. Baffled a bit. I'm getting what you are saying... But how exactly would I do that through a webpage. My head is screaming MySQL... And Apache with a bunch of code that I do not yet know.Willing to learn though :)Ps. Why is there no "ready mix" solution for this like there is for so many other stuff on the web? I'd think there would be a Joomla Plugin at least.Pps. I've read you sig and know the awnser to the question above... But still
  10. Hi,I need to create a page where users of a software packet can register their software and recieve an activation code after inputting their serial no. and product code. I have no idea where to start with this, can anybody please point me in the right direction? The site is using Joomla, but I cannot find a single viable solution in the extension library. Others have had this problem, but no solution seems forthcoming. Google also turns up blank on searches regarding the issue.This might be in the wrong forum, but I believe I'll get the awnser I'm looking for here.Thanks!1089
  11. Self taught. My dad has a website, that had previously been done by a company that screwed up badly etc. Basically the site was dead and he wanted to start it up again. I told him I could do it and spent a week fiddling around with templates etc until I "designed" my first website. I'm currently in the process of giving it a good do-over. My dad then mentioned I know a little about website to a colleage at the university and I ended up recoding (basically kept the layout/design but did everything, CSS & PHP from scratch) the entire site. Just finished the project.Learning the hard way makes you remember everything better. This forum helped me quite a bit while I was struggling to get the grips on CSS.
  12. I also noticed, and lamented this, since I wanted to test text justification, which is useless without a scalable window. I'll have to find another solution for that. They also want the bullets exactly "there" and IE doesn't want to play along. Since I have a mac I could install a VM or use Crossover to run IE 6 etc, but it slows the system down and I hate waiting for programs etc to load. I also noticed that Firefox and Chrome on my Mac, don't render exactly the same as on Windows. Also, I like to keep things legal, and buying VM software along with the windows lisence is a large expense. Since I'm designing on the side as a student, such an exspense is not a possibility. The client I'm currently working for has explicitly asked me to make sure it works on everything, so I do as he asks. If it were minor problems, it would not have been an issue, but currently it makes sections of the site unreadable. (It's a Joomla site with template they bought, driving me nuts!)So yeah, thats why I feel this, as a free service, is an excellent choice.
  13. I just found the most wonderful solution to checking if your site will render properly on basically every popular browser available. All that is missing is Safari for windows!Adobe BrowserlabGo check it out!http://browserlab.adobe.comWhat do you think? Will you use it?Renders just like the real thing.Sucks that it's flash though... now I can't do everything on my iPad anymore
  14. 1089

    404 error

    Thanks... I saw this the other day (the fact that it is relative instead of absolute) and blanched at the idea of editing that into every single page... almost 50.So thanks, I'll fix it now!
  15. 1089

    404 error

    Hi,I just set up a 404.php file and edited the .htaccess file so that it points to the relevant file. It works fine... except when the error occurs in a lower folder level then it seems to fail to find the CSS file, since it displays all the content, but only as text and without the header.eg.If I type the nonexistant berg.diagnostix.co.za/test404.html, I get the 404.php file looking just fine.But as soon as I get to a lower level (berg.diagnostix.co.za/Main/test404.html) the 404.php file still displays, but without formatting.I suspect I have to add another .htaccess file pointing to the right file? But why is it still displaying, yet without the CSS?Thanks
×
×
  • Create New...