Jump to content

Search the Community

Showing results for tags 'CSS'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

  1. Whenever I use <a onclick="">on text</a> it ignores the css formatting for the <a>. Why? Is there a way around it?
  2. Hi,I´m new in this forums.Does anybody know how to really make a website look the same in all browsers?Maybe its impossible, but are there ways to even try?Thanks
  3. I've been playing around with site making and through tutorials and such nothing "exactly" tells how to position anywhere you want, at least nothing I've seen. My site is here http://www.moonanbeings.com/I want it to be as you see now, but correctly. I'm using CSS to place that image center there and I don't think that's how it should be. It shouldn't be through CSS and it shouldn't be a background image. Having it like that is like my easy way out. So, how do I get that background image to be a regular image and center, center for every resolution?
  4. I have an image that kind of serves as an opaque background, and once hovered the opaqueness goes away. Also, I have a row of list items to serve as a menu, and once hovered the color of the text darkens to become more visible. This works great. As long as the mouse is directly over each element. The text element is directly over the background. What I want though is to have the background stay apparent as the text is hovered over, instead of the background becoming opaque again if I hover directly over the text. Can this be done without Javascript? Or is there a way with CSS3 to have the element that's being hovered over and another element change while interacting with only the list/menu elements? I would prefer a CSS solution if possible. Thank you in advance! Or even to put CSS inside Javascript? like have an if then statement for the text that says if there is a rollover event on the text/tables then it initiates the CSS :hover for the background?I want to use CSS rather than Javascript as much as possible because 1) I understand CSS and not JS, and 2) JS is ugly. Thanks again!!
  5. Hey mates. I want to share this information with you all who may be having the same issue. On Windows my webpage background and images display well. but on linux/ubuntu i was unable to view the images on the web page. Finally it worked after i changed the image name to its correct case. Example: background-image : url('images/gradient1.png'); changed to background-image : url('images/Gradient1.png'); It applies to html too. Hence i believe its better to practise using correct case when dealing with links and image names.
  6. Hi forum, I've been struggling with an annoying bug in IE7. You can see in the pictures how the nav it's correctly displayed in any friendly browser and in that spooky thing called IE7. I've put a red border around the <li> elements so you can see what's the problem in IE7, hope you can find me to find the solution to it. Chrome IE7As you can see the <li> elements are being extended to the right and overlapping the <span> element in the right. Here's my HTML and CSS for reference HTML <div class="category-image"><img src="images/PipelineImage.jpg" alt="main-pic-development" width="700" height="264"/><ul class="subnav"><span class="left-yell-corner"></span> <li class="yell-bg"><a href="#">Pipeline</a></li> <span class="right-yell-corner"></span><span class="left-blue-corner"></span> <li class="blue-bg"><a href="#">TDD Opportunities</a></li> <span class="right-blue-corner"></span><span class="left-blue-corner"></span> <li class="blue-bg"><a href="#">Technologies</a></li> <span class="right-blue-corner"></span><span class="left-blue-corner"></span> <li class="blue-bg"><a href="#">Publications</a></li> <span class="right-blue-corner"></span></ul></div> CSS .category-image {width:100%;position: relative;float: left;margin-top:20px;margin-bottom: 30px;}[/b][b]ul.subnav {display: block;float: left;width: auto;margin-left: 60px;margin-right: auto;margin-top: -38px;position: relative;}[/b][b]ul.subnav li {display: inline;width: auto;text-decoration: none;list-style-type: none;font-family: Arial, sans-serif;font-size: 15px;font-weight: lighter;border: 1px solid red;}[/b][b]ul.subnav li a{display: block;float: left;text-decoration: none;margin-top: 10px;height: 20px;padding: 0 10px;color: white;position: relative;}[/b][b]ul.subnav li.yell-bg {float: left;list-style-type: none;background: url(../../images/subnav-yellow-pattern.png) repeat-x;height: 55px;}[/b][b]ul.subnav span.left-yell-corner {float: left;display: block;width:9px;height: 55px;background: url(../../images/subnav-yellowcorner-left.png) no-repeat 0 0;}[/b][b]ul.subnav span.right-yell-corner {float: left;display: block;width:9px;height: 55px;background: url(../../images/subnav-yellowcorner-right.png) no-repeat 0 0;margin-right: 2px;}[/b][b]ul.subnav li.blue-bg {float: left;list-style-type: none;background: url(../../images/subnav-blue-pattern.png) repeat-x 0 3px;display: block;height: 38px;padding-top: 1px;position: relative;}[/b][b]ul.subnav span.left-blue-corner {float: left;display: block;width:8px;height: 38px;background: url(../../images/subnav-bluecorner-left.png) no-repeat 0 3px;}[/b][b]ul.subnav span.right-blue-corner {float: left;display: block;position: relative;width:8px;height: 38px;background: url(../../images/subnav-bluecorner-right.png) no-repeat 0 3px;margin-right: 4px;}[/b][b] Thank you very much in advance, hope you can help me guys.
  7. Hi everybody, I could manage to add google translator flags inside my menu bar but unfortunately it is looking nice only in chrome. In ie, the flags are appearing outside the menu bar, not in the same menu line but in a new column at the end of the bar with large buttons associated to the flags.I appreciate if someone could give me a clue.The style and html used are this: <style type="text/css">ul#menu{width:auto;height:30px;font-size:13px;font-weight:normal;font-family:Verdana, Helvetica, sans-serif;}ul#menu li{display:block;float:left;margin:0;padding:0;}ul#menu li a{display:block;float:left;color:#999999;text-decoration:none;font-weight:normal;padding:6px 25px 6px 25px;}ul#menu li a:hover{background-color:rgb(0,0,0);color:#ffffff;padding:6px 25px 6px 25px;}ul#menu li a.current{display:inline;background-color:rgb(0,0,0);float:left;margin:0;}.google_translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; margin:0; border:0; padding:3px 5px 3px 5px; } .google_translate:hover img { filter:alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.30; margin:0; border:0; } .google_translatextra:hover img { filter:alpha(opacity=0.30); -moz-opacity: 0.30; opacity: 0.30; margin:0; border:0; }</style><ul id="menu"><li class="button"><a href="http://ferhairstylist.blogspot.com/">Home</a></li><li class="button"><a href="http://ferhairstylist.blogspot.com/p/profissional-cabeleireira.html">A Profissional</a></li><li class="button"><a href="http://ferhairstylist.blogspot.com/p/portfolio.html">Portifólio</a></li><li class="button"><a href="http://ferhairstylist.blogspot.com/p/precos.html">Serviços</a></li><li class="button"><a href="http://ferhairstylist.blogspot.com/p/contatos.html">Contatos</a></li><li class="button"><a href="http://ferhairstylist.blogspot.com/p/mapa.html">Mapa</a></li><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="right" title="Italiano" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVCskNubI/AAAAAAAAADM/ChdHC6vYT4s/s200/Italy.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="right" title="Español" height="24" src="http://3.bp.blogspot.com/_5jbh95HruKA/S1YVCdHp5VI/AAAAAAAAADE/lWHzr5znExU/s200/Spain.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cen&hl=en'); return false;"><img alt="English" border="0" align="right" title="English" height="24" src="http://4.bp.blogspot.com/_5jbh95HruKA/S1YVBORD9bI/AAAAAAAAACs/XkaLmmin4zg/s200/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24"/></a><div 0px 0pxâ?? style="â??font-size:10px;margin:3px" 3px></div></ul>
  8. I'm using the following code. By clicking on div id="popUpPane", the div and it's childs should appear and slowly fade in.By clicking on the div again, it should slowly fade out and then disappear.Firefox and Chrome (which is webkit too) behave that way and I know Safari did in an earlier version, too. But right know on Safari and on Safari Mobile nothing happens at all when I click on "popUpPane".Is this a bug in Safari or is there something I could change to come back to the intended behaviour?One addition: If I set -webkit-transition to -webkit-transition: opacity .5s ease-in-out; it works fine but the transition only appears on the first click. There's no transitions after that first one... If I delete the opacity-part in the java-script the opo-up works but there's no transition.All other transitions on my site are working. But they all use only opacity and no visibility.Here's my code:CSS:#popUpPane { white-space:normal; position:fixed; width:100%; height:100%; top:0; left:0; text-align:center; vertical-align:middle; visibility:hidden; z-index:90; } #greyOut { position:fixed; width:100%; height:100%; top:0; left:0; background-color:#000; opacity:0; }#popUpPicCanvas { position:relative; top:50%; margin-top:-325px; display:inline; opacity:0; z-index:100; }.fade { -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }HTML: <div id="popUpPane" onClick="noPopUp()"> <div id="greyOut" class="fade"> </div> <canvas id="popUpPicCanvas" width="1000" height="650" title="Bastian Beuttel" class="fade"></canvas> </div>Javascript:var popUpPane = document.getElementById("popUpPane"), greyOut = document.getElementById("greyOut"), popUpPicCanvas = document.getElementById("popUpPicCanvas"), popCanvasContext = popUpPicCanvas.getContext("2d");var doPopUp = function(source,x,y){ var popUpPic = document.getElementById("pic"+source); popCanvasContext.canvas.width = x; popCanvasContext.canvas.height = y; popCanvasContext.drawImage(popUpPic, 0, 0,x,y); popUpPane.style.visibility = "visible"; greyOut.style.opacity = "0.7"; popUpPicCanvas.style.opacity = "1";};var noPopUp = function(){ greyOut.style.opacity = "0"; popUpPicCanvas.style.opacity = "0"; popUpPane.style.visibility = "hidden";};I hope someone can help me.Thanks for your responds!
  9. Hi! I'm new here, and I'm very new to CSS so I'm sorry if I ask silly questions! I've been working on making a website for a new business, and even though only the 'Coming Soon' page is up, it still demonstrates my problems. http://www.youmightlikethis-music.com I tried to use CSS to make sure the background image fits to whatever size the screen is, but on big screens it is too short, and on smaller screens if you scroll down there is a white bar which I can't get rid of. If someone could help me with this I'd be very appreciative! Thank youu
  10. I have attached my sample website. In it how do i arrange multiple "div" and why do some break up at different screen sizes. Check my code and help me find my mistakes. index.html
  11. Hello Everyone, Greetings! As a part of assignment test I have to make the HTML Code in DIVs (tableless) as per the attached "Screenshot.png" file. FYI - On clicking on the "Populate Values" button, the div below the button should populate the values of the selected radio buttons of the preferred and home locations respectively as shown in the attached .png file. --------------------------------------------Current status of My HTML Code:--------------------------------------------<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...ransitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Test</title><meta name="description" content="#" /><meta name="keywords" content="#" /><link rel="stylesheet" type="text/css" href="StyleSheet.css" /></head><body><div id="container"><div> </div><div class="LogoHeader"></div><div style="float:left;width:280px;text-align:left">Home | About XYZ | Contact Us</div><div style="float:left;width:480px;text-align:right">(icon) Print (icon) Share (icon) RSS</div><div class="clearBoth"> </div><div> </div><div id="OL-Bg"><div class="OL">Office Locations</div><div><textarea name="TextArea1" cols="20" class="OL-Text">Blah... Blah... Blah...Blah... Blah... Blah...Blah... Blah... Blah...Blah... Blah... Blah...Blah... Blah... Blah...Blah... Blah... Blah...Blah... Blah... Blah...Blah... Blah... Blah...Blah... Blah... Blah...Blah... Blah... Blah...</textarea></div></div><div style="float:right;width:738px">ABOUT XYZ</div><div class="content">Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...<br /> <br /> Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...<br /> <br /> Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... <img alt="X" src="images/XYZ.png" width="200" height="86" style="float: left" />Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... <br /> Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... <br /></div><div class="clearBoth"> </div><div class="copyRight">Copyright - Blah... blah... Blah...</div></div></body></html> -------------------------------------------Current status of My CSS Code:-------------------------------------------body { margin-top: 0px; margin-bottom: 0px; background-color: #999999;}div#container { width: 980px; margin: 0 auto; background-color: #FFFFFF;}.FloatRight {float: right;}.FloatLeft { float: left;}.clearBoth { clear: both;}.OL-Text { table-layout: fixed; height: 90px; width: 214px; font-family: Verdana; font-size: 10pt;}.OL { font-family: Verdana; font-size: 11pt; font-weight: bold; width: 220px; background-color: #969696; text-align: center; height: 32px; vertical-align: middle; line-height: 30px;}#OL-Bg { border: 1px solid #B0B0B0; width: 220px; padding: 10px; float: left;}.LogoHeader{ background-image: url('images/XYZ.png'); background-repeat: no-repeat; float:left; width:220px; height:35px; text-align:left;}.copyRight { border-color: #808080; font-family: Verdana; margin-top: 0; margin-bottom: 0; font-size: 11px; color: #333333; text-decoration: none; height: 30px; text-align: center; vertical-align: middle; line-height: 30px; border-top-style: groove; border-top-width: 2px;}.content { border: 1px solid #FFCC00; float: right; width: 736px;; font-family: verdana; font-size: 10pt; color: #333333;} Please help... Thank you.
  12. In the HTML tutorials, all images were added from a web location (img src="url"/>), when creating my new site, how do i add the images which are on my computer. Do I have to upload the images to a FTP location on the web first and then create the web pages? OR Should i create everything under one folder on my computer and then upload the entire folder to the web host?
  13. Bunnycorn

    Columns

    So, here's my question. I can make columns, I can edit the size, I can do all that stuff, but I can't get it to go actively down the page or get it to go into the background, if you need my source or anything please just ask. Also; although I doubt you'll be able to help me on this; is there any way to edit an actual in use source? Or even get a fresh one? I'm doing it for a school project and the one who's supposed to be getting the site is incredibly slow, and I don't have money to buy my own, nor would I spend that money to buy my own. I shall attach a copy of my source, incase you need to see it for whatever reason. Oh god...htm
  14. Ok, first let me explain what I try to do. I have a menu with some items containing a submenu. The submenu's should open when a parent is clicked and contains submenu's, and when traveling to another page (from the item clicked, for example a parent of submenu item), the submenu should remain active and visible. Now when I click on a parent item the submenu quickly blinks but is closed even as fast as it opens. I want the submenu to remain open when clicked on a parent that has a submenu, so users can easily navigate. So, here is the code I have so far: <div id="topnav"> <ul> <li> <a href="index.html">Home</a> </li> <li> <a href="#">Over Meves</a> <ul class="submenu"> <li><a href="#" class="suba">Historie</a></li> <li><a href="#" class="suba">Onze mensen</a></li> <li><a href="#" class="suba">Werkzijze</a></li> </ul> </li> <li> <a href="vervolg3.html">Disciplines</a> <ul class="submenu"> <li><a href="vervolg.html" class="suba">Klimaatbeheersing</a></li> <li><a href="#" class="suba">Elektrotechniek</a></li> <li><a href="#" class="suba">Sanitaire techniek</a></li> <li><a href="#" class="suba">Energiebesparingstechniek</a></li> <li><a href="#" class="suba">Bouwfysica en geluid</a></li> <li><a href="#" class="suba">Diensten energiebesparing</a></li> </ul> </li> <li> <a href="#">Expertise</a> <ul class="submenu"> <li><a href="#" class="suba">Woningbouw & Utiliteit</a></li> <li><a href="#" class="suba">Zorg & Welzijn</a></li> <li><a href="#" class="suba">Milieu & Energie</a></li> <li><a href="#" class="suba">Beheer & Onderhoud</a></li> <li><a href="#" class="suba">EPA & EPC</a></li> <li><a href="#" class="suba">Legionella beheersing</a></li> </ul> </li> <li> <a href="#">Contact</a> <ul class="submenu"> <li><a href="#" class="suba">Adres & route</a></li> <li><a href="#" class="suba">Werken bij</a></li> </ul> </li> </ul> </div> The javascript: var ddmenuitem = 0;function jsddm_open(){ jsddm_close(); ddmenuitem = $(this).find('ul.submenu').css('display', 'block');}function jsddm_close(){if(ddmenuitem) ddmenuitem.css('display', 'none');}$(document).ready(function(){ $('#topnav > ul > li').bind('click', jsddm_open) $('#topnav ul li a.suba').click(function(e){ if ($(this).attr('class') != 'active'){ $('#topnav ul li a.suba').removeClass('active'); $(this).addClass('active'); } }); $('a').filter(function(){ return this.href === document.location.href; }).addClass('active') $("ul.submenu > li > a").each(function () { var currentURL = document.location.href; var thisURL = $(this).attr("href"); if (currentURL.indexOf(thisURL) != -1) { $(this).parent("ul.submenu").css('display', 'block'); } });}); And the css: #topnav ul{list-style: none;padding: 0;margin: 0;}#topnav ul li{float: left;margin: 0;padding: 0;}#topnav ul li a{padding: 5px 15px;color: #00537F;text-decoration: none;display: block;font-weight: bold;}#topnav ul li a:link{color: #FFF;text-decoration: none;}#topnav ul li a:visited{color: #FFF;text-decoration: none;}#topnav ul li a:hover{color: #FFF;text-decoration: underline;}#topnav ul li a.active{text-decoration: underline;color: #FFF;}/*#topnav ul li:hover .submenu{display:block;}*/#topnav ul li ul.submenu{float: left;padding: 4px 0;position: absolute;left: 0;top: 24px;display: none;background: #e0e0e0;color: #00537F;}#topnav ul li ul.submenu a{display: inline;color: #00537F;padding: 4px 8px;}#topnav ul li ul.submenu li{border-right-width: 1px;border-right-style: solid;border-right-color: #00537F;}#topnav ul li ul.submenu li:last-child{border-right-style: none;}#topnav ul li ul.submenu a:link{color: #00537F;}#topnav ul li ul.submenu a:visited{color: #00537F;}#topnav ul li ul.submenu a:hover{text-decoration: underline;color: #00537F;}#topnav ul li ul.submenu li.active{text-decoration: underline;color: #00537F;}#topnav ul li ul.submenu a.active{text-decoration: underline;color: #00537F;}
  15. This white space is hiding my image and I dont know why! there is ample space for the image to exist in the div. Here is the CSS: #guitar {position: relative;transform: rotate(30deg);-ms-transform: rotate(30deg); /* IE 9 */-webkit-transform: rotate(30deg); /* Safari and Chrome */-o-transform: rotate(30deg); /* Opera */-moz-transform: rotate(30deg); /* Firefox */padding: 5px;border: 1px solid gray;background-color: #ffffff;width: 180px;height: 290px;} and here is the HTML <div id="guitar"><img src="Index_files/Images/Collage Photos/About Me/guitar1.png"/></div> i think im either missing something, or there is something mundane that i over looked. With this code, everything but the image shows up. thanks guys!
  16. http://www.logoworks1.com/wccs Looks fine in all browsers (that I know of) except for IE. Basically in IE the menu and the content is split apart about 100px. I've attached a screenshot. I don't understand. Any help would be appreciated.
  17. what is a good way to stack more than one div on top of each other.for example the left column has three div one on top of the other, midle column has three and right most column four?I tried putting the three in the left column in an other container div & floating left, worked. But it placed a div I had floating right & top, to floating right and bottom.All this divs are in a wrapper div as well.thank yougray
  18. how do i size a link so when the mouse rolls over it creates a background column for the length of the page? Tried: <li><a href>1399 </a></li> a:hover{background-color:yellow;background-height: auto;} also tried w/a px value but not use. Saw the effect on a website & wanted to try & recreate it. ( Nope can't find the link I used or i'd ckeck the page source )thank you
  19. Hi, I am busy testing out a lightbox form that I'm working on and I've got all to work except the "success" or "thank you" page.Basically I want the user to fill in the online form and when the they are click 'submit', the "thank you" message or page resolves in the same lightbox that the form was in. Go to www.testing123.co.za/test.htm and click on that link you see saying "AJAX SuperBox".The lightbox is opening up an HTML page within in the test.htm page (basically acting like an iFrame?).When I click submit, the page resolves to the success.htm page (which it should) but not in the lightbox frame. I don't want visitors to leave the test.htm page. My headers at the bottom of my process php form shows as: '; $headers = "From: $from\r\nBCC:{$bcc}\r\n"; $headers .= "Content-type: text/html\r\n"; $success = mail($to, $subject, $sBodyNew, $headers); header('Location: http://www.testing123.co.za/success.htm'); ?> I assume the Location url above needs code added to it so that it works within the lightbox? Or is there an easier way to do this? Thanks guys!
  20. very short code, grabbed it from the net and was trying to learn it. very simple workout page. No matter what I try I can not get box4 to fall under the box1 at the top and next to two center panels. Tried all alignments I could think of. My primary frustration is the code for dragging the red square w/the id =mvBox should work but does not. Have gone over it several times and can not find the error. I put some code to track the mouse to try & debug and alert box to make sure the ball.js script source was correctly linking up. I read the code over several times. I see no errors. Thank you in advance for any help and advice. Tried the original code and it only moved the box down and rightward.<!DOCTYPE HTML><html lang="en"><head><meta charset="UTF-8"><title>Fill Shapes Example</title><script src="ball.js"></script><link rel="stylesheet" type="text/css" href="ball.css" /><script language="javascript"> var x; var y; function mouser(event){ x=event.clientX; y=event.clientY; document.getElementById('X-coord').innerHTML = x +'px'; document.getElementById('Y-coord').innerHTML = y +'px'; }</script></head><body onMouseMove="mouser(event);"><div id="wrapper"><div id="header"> </div><div id = box1>X: <span id="X-coord"></span><br><br>Y: <span id="Y-coord"></span> <script type =text/javascript> write(); </script> </div> <div id = box2>box2</div> <!-- Unless canvas size is specified default size is 300 w x 150 h --><canvas id="canvas" width="700" height="350" >[Fallback Message]</canvas><canvas id="canvas" width="700" height="350" >[Fallback Message]</canvas><div id = box3>box3</div> <div id = box4>box4</div> <div id = box5>box5</div> <div id=mvBox class=mvBox onMouseDown="mouse_down(event,'mvBox')" onMouseUp="mouse_up()"></div></div></body></html>css#wrapper{background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #9BEF81 100%);background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #9BEF81 100%);background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #9BEF81 100%);margin-top:25px;margin-bottom:100px;margin-right:auto;margin-left:auto;padding: 50;}#box1{border:2px solid #000;padding:10px 40px; background: #CC3300;width:1000px;height: 150px;border-radius:25px;-moz-border-radius:25px; /* Firefox 3.6 and earlier */}#box2{float:left;border:2px solid #000;padding:0; background:#7DBD9D;width:150px;height: 700px;border-radius:25px;-moz-border-radius:25px; /* Firefox 3.6 and earlier */}#box3{top: 2000px;float:left;border:2px solid #000;padding:0; background: #7DBD9D;width:150px;height: 700px;border-radius:25px;-moz-border-radius:25px; /* Firefox 3.6 and earlier */}#box4{clear:both;border:2px solid #000;padding:0; background: #2E8A2E;width:1000px;height: 25px;border-radius:25px;-moz-border-radius:25px; /* Firefox 3.6 and earlier */}#box5{clear:both;border:2px solid #000;padding:0; background: #2E8A2E;width:1000px;height: 25px;border-radius:25px;-moz-border-radius:25px; /* Firefox 3.6 and earlier */}#mvBox {background: #FF0000;border:4px solid #000;width: 100px;height: 100px;position: absolute; top: 50px; left: 150px; z-index: 5; }canvas{margin-top:10px;margin-bottom:0px;margin-right:0;margin-left:0;float:left;background-color: #c0c0c0;border: 2px solid "#ddd";border-radius: 100px;-moz-border-radius: 100px; /* Firefox 3.6 and earlier */}and lastly jsvar x;var y;var element;var being_dragged = false;//function write()//{//alert("write something");//}function mouser(event){if(event.offsetX || event.offsetY) {x=event.offsetX;y=event.offsetY;}else {x=event.pageX;y=event.pageY;}document.getElementById('X').innerHTML = x +'px';document.getElementById('Y').innerHTML = y +'px';document.getElementById('X-coord').innerHTML = x +'px';document.getElementById('Y-coord').innerHTML = y +'px';if(being_dragged == true) {document.getElementById(element).style.left = x +'px';document.getElementById(element).style.top = y +'px';}}function mouse_down(ele_name) {being_dragged = true;element = ele_name;document.getElementById(element).style.cursor = 'move';}function mouse_up() {being_dragged = false;document.getElementById(element).style.top = y +'px';document.getElementById(element).style.left = x +'px';document.getElementById(element).style.cursor = 'auto';}
  21. zeburrehman

    Id Vs Class

    Hi everybody,Can some body please tell me the difference between Id and class not text wise but function wise. I have studied it every where but i didn't understand it. It's too complicated. Please explain it in simple words. I shall be really thankful to you.Regards
  22. Hello put this post for a js answer but I also have a css qustion.why can't I get box three to line up under the header box, next to the two stacked on top of each other boxes?this is my html code I removed the js stuff.thank you all. <!DOCTYPE HTML><html lang="en"><head><meta charset="UTF-8"><title>Fill Shapes Example</title></head><body onMouseMove="mouser(event);"><div id="wrapper"><div id="header"> </div></div><div id = box2>box2</div><!-- Unless canvas size is specified default size is 300 w x 150 h --><canvas id="canvas" width="700" height="350" >[Fallback Message]</canvas><canvas id="canvas" width="700" height="350" >[Fallback Message]</canvas><div id = box3>box3</div><div id = box4>box4</div><div id = box5>box5</div><div id=mvBox class=mvBox onMouseDown="mouse_down(event,'mvBox')"onMouseUp="mouse_up()"></div></div></body></html> this is my css code #wrapper{background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #9BEF81 100%);background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #9BEF81 100%);background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #9BEF81 100%);margin-top:25px;margin-bottom:100px;margin-right:auto;margin-left:auto;padding: 50;}#box1{border:2px solid #000;padding:10px 40px;background: #CC3300;width:1000px;height: 150px;border-radius:25px;-moz-border-radius:25px; /* Firefox 3.6 and earlier */}#box2{float:left;border:2px solid #000;padding:0;background:#7DBD9D;width:150px;height: 700px;border-radius:25px;-moz-border-radius:25px; /* Firefox 3.6 and earlier */}#box3{top: 2000px;float:left;border:2px solid #000;padding:0;background: #7DBD9D;width:150px;height: 700px;border-radius:25px;-moz-border-radius:25px; /* Firefox 3.6 and earlier */}#box4{clear:both;border:2px solid #000;padding:0;background: #2E8A2E;width:1000px;height: 25px;border-radius:25px;-moz-border-radius:25px; /* Firefox 3.6 and earlier */}#box5{clear:both;border:2px solid #000;padding:0;background: #2E8A2E;width:1000px;height: 25px;border-radius:25px;-moz-border-radius:25px; /* Firefox 3.6 and earlier */}#mvBox {background: #FF0000;border:4px solid #000;width: 100px;height: 100px;position: absolute;top: 50px;left: 150px;z-index: 5;}canvas{margin-top:10px;margin-bottom:0px;margin-right:0;margin-left:0;float:left;background-color: #c0c0c0;border: 2px solid "#ddd";border-radius: 100px;-moz-border-radius: 100px; /* Firefox 3.6 and earlier */} Thank you for any help/replies.
  23. zeburrehman

    Id Vs Class

    Hi everybody,Can some body please tell me the difference between Id and class not text wise but function wise. I have studied it every where but i didn't understand it. It's too complicated. Please explain it in simple words. I shall be really thankful to you.Regards
  24. zeburrehman

    Id Vs Class

    Hi everybody,Can some body please tell me the difference between Id and class. I have studied it every where but i didn't understand it. It's too complicated. Please explain it in simple words. I shall be really thankful to you.Regards
  25. I have this CSS (part of): #topnav ul{margin-left: 140px;padding:0 5px;font-size:15px;color:#3366cc;overflow:hidden;list-style-type: none;}#topnav ul li a{float:left;padding:8px;text-align: left;font-family: Tahoma, Arial, Helvetica, sans-serif;font-size: 15px;text-decoration: none;color: #999;}#topnav ul li a:hover{color: black;cursor:pointer;}#topnav ul .current{font-weight:bold;color: black;} It all works exept one: #topnav ul .current won't show as black. Any ideas?
×
×
  • Create New...