Search the Community
Showing results for tags 'Html5'.
-
Nice be with you everyone! I found out that input required attribute requires "that an input field must be filled out before submitting the form." like this... <form action="demo_form.asp">Username: <input type="text" name="usrname" required><input type="submit"></form> My question is: Is it possible also to use input required attribute in select? like this... <select name="gender" required><option value="" selected="selected">Choose...</option><option value="male">Male</option><option value="female">Female</option></select> I want to validate gender field if it has already value (male or female)otherwise will not submit like what input required attribute can do Thank you.
-
I know that HTML5 provides Drag and Drop and is a powerful tool for it. However I just used it successfully for dragging and dropping HTML elements, HTML codes and Files. What other thing can I do with this feature? For example can I drag an address from the address bar and drop it on a text box? or can I do it reversely?
-
Is there a Way with Javascript to add Help bubbles over an input Box?For example when you you hover over an input for Name: _____ it would say like First Name????ThanksAn example is this https://edit.europe.yahoo.com/registration?.intl=ukWhen you go over the name field it says First name in a bubble. Ive been searching all over and can not find out how to do it.
-
Hey everyone, I have been scouring the internet trying to solve this layout problem but I haven't found a solution - I want my article section to line up next to my nav bar properly. Using <float> left or right just pushes it above or below the nav bar as you can see here: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--><title> My Magical World </title> <style> html, body { margin: 0px; padding: 0px; border: 0px } body { background-color: silver } article { margin: 20px; padding: 15px; border: 2px solid black; } footer { clear:both; background-color: red; border:5px solid black; text-align:center; } .b { border:5px solid black; text-align: center; background-color: red; } .field { border:2px solid black; text-align: center; background-color: red; } .navlink { border:1px solid #FFF; } </style> </head> <body> <div id="content-wrapper"> <!-- Content Wrapper Start --> <header class="b"> <h1> Hello World! </h1> <h2> Welcome to a magic world </h2> </header> <section id="main-content-area"> <!-- Section Main Content Area Start --> <nav style="background-color: red; border: 2px solid black; margin: 10px; padding: 10px; float: left; "> <fieldset class="field"><a href="BTSMain.html"><b>Home</b> </a></fieldset> <fieldset class="field"><a href="BTSServices.html"><b>Services We Offer</b></a></fieldset> <fieldset class="field"><a href="BTSAboutUs.html"><b>Request Service</b></a></fieldset> <fieldset class="field"><a href="BTSTestPage.html"><b>Contact Us</b></a></fieldset> <fieldset class="field"><a href="BTSTestPage2.html"><b>About BTS</b></a></fieldset> </nav> <article style="float: left"> My world is a strange place... it is populated by lemurs, lobsters, larvae, lampreys, and llamas. Lllaaaammmaaaaaaaaaassssssssssssssssssssssssss........... Lllaaaammmmmmmmaaaaaaassssssssssssssss <h4> <b> Llamas...... </b> </h4> </article> </section><!-- # Section Main Content Area End --> <footer> <h1> <a href="BTSAboutUs.html"><b>About My World </b></h1> </footer> </div><!-- # Content Wrapper End --> </body> </html> Thanks in advance
-
Had some odd results... but I think I fixed it. Are there any remaining problems with this code? <body><canvas id="canvas" width="500" height="500"></canvas> <script>var canvas = document.getElementById('canvas').getContext('2d');canvas.strokeStyle="#FF0000";//redcanvas.lineWidth=10;canvas.beginPath();canvas.moveTo(10,10);canvas.lineTo(490,490); alert('canvas is still blank -- next stroke');canvas.stroke();canvas.strokeStyle="#00FF00";//greencanvas.lineWidth=30; canvas.beginPath();canvas.moveTo(490,10);canvas.lineTo(10,490); alert('next stroke');canvas.stroke();canvas.font="35px Verdana";canvas.strokeStyle="#000";canvas.fillStyle="#F00";//redcanvas.lineWidth=1; alert('next fillText');canvas.fillText("HTML5 abcABC",50,250); //(string, xStart, yStart) alert('next strokeText');canvas.strokeText("HTML5 abcABC",50,250); //(string, xStart, yStart)</script> </body>
-
Hi all, I don't know if this topic should be part of JavaScript or HTML forum, but I think here it is ok - I'm sorry if it's not. I'm developing a school work - chess game for two players. It has to be RIA and we should use HTML5 platform or Silverlight. I decided for HTML5 and I'd like to use HTML5 drag&drop.Well, when somebody clicks e.g. on white pawn on B2, the application should now make field B3 droppable and after drop the dropability should be prevented.So I'm learning HTML5 drag&drop. This is my code: function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { if (ev.target.id == 'B2_piece') { var targetField = document.getElementById('B3_field'); /**** here I'm making field B3 droppable - it's working ****/ targetField.ondragover = function(ev) { allowDrop(ev); }; targetField.className = targetField.className + ' allowed'; } ev.dataTransfer.setData('Text', ev.target.id);} function drop(ev) { ev.preventDefault(); ev.target.appendChild(document.getElementById(ev.dataTransfer.getData('Text'))); ev.target.className = ev.target.className.replace(' allowed', ''); /**** here I'd like to prevent dropability on every field - in this case only field B3 ****/ var xpathResult = document.evaluate('//div[@ondragover]', document, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null); var current = xpathResult.iterateNext(); while (current) { current.ondragover = function(ev) { return true; } current = xpathResult.iterateNext(); }} But the prevention is not working. Don't you know the reason? Thank you very much :-)
-
Hello Friends, I have created a website. Website pages load normally. But if any page remains open for sometime then it stops responding for a couple of seconds. After a couple of seconds, page again responds normally. What can be the problem for page NOT responding? Please HELP.
-
Hello. For some weeks ago, i made a file upload for a gallery.I made it using html5, and everything works fine. the only problem is that when i select multiple files, the uploads funktion works fine when the total of all files is less than 8 mb, because of limitation on the php.I can se, that if i select more than 8mb, the files are uploaded to the server, but i dont think that the php can "move" the files at ones? Does any one have a work around? it is very important to select multiple files due to alot of sub_files! (i was thinking to make something like foreach file(upload and move)) sorry if this should have ben in php section //html// <form action="send.php" method="post" enctype="multipart/form-data"><fieldset> <legend>Upload af billeder</legend> <?php$dirname = "Gallery";$dir = opendir($dirname);echo '<select name="sti">';echo '<option value="Vælg mappe!">Tryk her for at vælge galleri</option>';while(false != ($file = readdir($dir))) { if ($file<>'.' && $file<>'..') { if (is_dir("$file")); echo "<option value=".$file.">$file</option>"; } } echo '</select>'; ?> Vælg venligst det galleri du ænsker at uploade dine billeder til. <br><br>Der kan maks uploades 8mb sammenlagt! Så hvis du ikke får en besked med at billederne er uploaded, har du nok valgt for mange!<br><br> Vælg filer:<br> <input type="file" value="" name="upload[]" multiple><br> <button type="submit">Upload!</button> </fieldset></form> //php "send.php"// <pre><?php $error_message[0] = "Dit forsøg på at uploade billederne lykkedes desværre ikke. <br>DU HAR IKKE VALGT EN MAPPE PRØV IGEN<br>Hvis du ikke har oprettet en mappe, kan du gøre det på upload siden.<br> hvis dette skulle være en fejl, er du velkommen til at skrive til mig. webadmin@domain<br>";$error_message[1] = "Filen du forsøger at uploade er er ALT for stort! du bedes forminske dit billede.";$error_message[2] = "Filen du forsøger at uploade er er ALT for stort! du bedes forminske dit billede.";$error_message[3] = "Kontakt administator: webadmin@domain vdr. fejl 3";$error_message[4] = "Du har ikke valgt nogen fil!";$upload_dir = 'Gallery/'.$_POST['sti']."/";$num_files = count($_FILES['upload']['name']);for ($i=0; $i < $num_files; $i++) { $upload_file = $upload_dir . rand(1000, 9999) . basename($_FILES['upload']['name'][$i]); if (!preg_match("/(gif|jpg|jpeg|png|GIF|JPG|JPEG|PNG)$/",$_FILES['upload']['name'][$i])) { print "Der kan kun uploaded billeder! dvs. ingen dokumenter eller PDF filer! Hvis du mener dette er en fejl, kontakt venligst admin: webadmin@domain"; } else { if (@is_uploaded_file($_FILES['upload']['tmp_name'][$i])) { if (@move_uploaded_file($_FILES['upload']['tmp_name'][$i], $upload_file)) { /* Great success... */ echo "Din fil er nu blevet uploaded til: " . $upload_file . "<br />"; echo "<--*done*--> <br>"; } else { print $error_message[$_FILES['upload']['error'][$i]]; } } else { print $error_message[$_FILES['upload']['error'][$i]]; } }}echo "done";?></pre>
-
Hi I'm a little new to JavaScript and I am trying to make a small program using an HTML5 canvas. However, when the following code is executed:function Prog(){ var self = this; this.init = function() { var d = document; self.canvas = d.getElementById("can"); self.c = self.canvas.getContext("2d");...}var p = new Prog();p.init();The code works in the other major browsers, but in opera, it throws an error saying "cannot convert self.canvas to object" or sometimes just "self.canvas is null"Thanks in advance
-
Hi There, I don't know if I am in the right topic thread for errors or debugging but suggestions was the closest I could find. I was viewing the HTML 5 audio tag examples in W3Schools and I noticed that the controls are not showing up in IE9. Even though on the audio page it says that it is compatible with IE9. Now when I right click on it I do get the options to play/pause but I don't get sound. I tried on Firefox and it worked fine so it wasn't a sound issue. I have attached a screen shot so you can see both the code on the left and example on the right in IE9.
-
Is it possible with HTML5 to make interactive animations? say if I press a link, then an animation will be played, will it work?
-
hi i have a really big problem (for me). i have a html5 animation, but actuali is just a html file with a js, this animation was created in edge from adobe, and i got some thing like this: <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta http-equiv="X-UA-Compatible" content="IE=9"/><title>Ribbon</title><script type="text/javascript" charset="utf-8" src=".../muse/assets/ribbon2/Ribbon2_edgePreload.js"></script><style> .edgeLoad-EDGE-4268933 { visibility:hidden; } </style><!--Adobe Edge Runtime End--> </head><body style="margin:0;padding:0;"><div id="EDGE-4268933" "edgeLoad-EDGE-4268933" style="height: 110px"></div></body></html> so in the Ribbon2_edgePreload.js is all my animation code. so in that code i wanna make a call a function in other html and in this case is a masterpage from asp.net in my masterpage i got this function. <script type="text/javascript" > function redMaster(){ var iframe1 = document.getElementById("iframe1"); iframe1.style.display="none"; }</script> the problem is that my animation html file is in the masterpage but inside of an iframe, so when some one click on an animated button i want to hide the specific iframe with that js code but when in the master page add the referecen to the js (<script type="text/javascript" charset="utf-8" src=".../muse/assets/ribbon2/Ribbon2_edgePreload.js"></script>), something really strange happen and the masterpage is changed for the html animation code (this is in the web browser), so i wanna know is there is another way to archieve this. code in the java js (function($,Edge,compId){var Composition=Edge.Composition,Symbol=Edge.Symbol;//Edge symbol: 'stage'(function(symbolName){Symbol.bindTriggerAction(compId,symbolName,"Default Timeline",3974,function(sym,e){sym.stop();});//Edge binding endSymbol.bindTriggerAction(compId,symbolName,"Default Timeline",3595,function(sym,e){sym.stop();});//Edge binding endSymbol.bindTriggerAction(compId,symbolName,"Default Timeline",3703,function(sym,e){sym.stop();});//Edge binding endSymbol.bindTriggerAction(compId,symbolName,"Default Timeline",3839,function(sym,e){sym.stop();});//Edge binding endSymbol.bindTriggerAction(compId,symbolName,"Default Timeline",4153,function(sym,e){});//Edge binding endSymbol.bindTriggerAction(compId,symbolName,"Default Timeline",4153,function(sym,e){sym.stop();});//Edge binding endSymbol.bindTriggerAction(compId,symbolName,"Default Timeline",4206,function(sym,e){sym.stop();});//Edge binding endSymbol.bindTriggerAction(compId,symbolName,"Default Timeline",3500,function(sym,e){sym.stop();});//Edge binding end//custom code modification for the call of the js methodSymbol.bindElementAction(compId,symbolName,"${_Rojo}","click",function(sym,e){red();});//Edge binding endSymbol.bindElementAction(compId,symbolName,"${_Verde}","click",function(sym,e){sym.play("green");});//Edge binding endSymbol.bindElementAction(compId,symbolName,"${_Moradoso}","click",function(sym,e){sym.play("purple2");});//Edge binding endSymbol.bindElementAction(compId,symbolName,"${_Morado}","click",function(sym,e){sym.play("purple1");});//Edge binding endSymbol.bindElementAction(compId,symbolName,"${_Azul}","click",function(sym,e){sym.play("blue");});//Edge binding endSymbol.bindElementAction(compId,symbolName,"${_Comisions}","click",function(sym,e){sym.play("red");});//Edge binding endSymbol.bindElementAction(compId,symbolName,"${_Prorrateo}","click",function(sym,e){sym.play("blue");});//Edge binding endSymbol.bindElementAction(compId,symbolName,"${_Catalogo}","click",function(sym,e){sym.play("green");});//Edge binding endSymbol.bindElementAction(compId,symbolName,"${_Ventas}","click",function(sym,e){sym.play("purple1");});//Edge binding endSymbol.bindElementAction(compId,symbolName,"${_Gastos}","click",function(sym,e){sym.play("purple2");});//Edge binding endSymbol.bindElementAction(compId,symbolName,"${_Rojo}","mouseover",function(sym,e){sym.play("red");});//Edge binding endSymbol.bindElementAction(compId,symbolName,"${_Comisions}","mouseover",function(sym,e){sym.play("red");});//Edge binding endSymbol.bindElementAction(compId,symbolName,"${_Azul}","mouseover",function(sym,e){sym.play("blue");});//Edge binding endSymbol.bindElementAction(compId,symbolName,"${_Prorrateo}","mouseover",function(sym,e){sym.play("blue");});//Edge binding endSymbol.bindElementAction(compId,symbolName,"${_Catalogo}","mouseover",function(sym,e){sym.play("green");});//Edge binding endSymbol.bindElementAction(compId,symbolName,"${_Verde}","mouseover",function(sym,e){sym.play("green");});//Edge binding endSymbol.bindElementAction(compId,symbolName,"${_Ventas}","mouseover",function(sym,e){sym.play("purple1");});//Edge binding endSymbol.bindElementAction(compId,symbolName,"${_Morado}","mouseover",function(sym,e){sym.play("purple1");});//Edge binding endSymbol.bindElementAction(compId,symbolName,"${_Gastos}","mouseover",function(sym,e){sym.play("purple2");});//Edge binding endSymbol.bindElementAction(compId,symbolName,"${_Moradoso}","mouseover",function(sym,e){sym.play("purple2");});//Edge binding end})("stage");//Edge symbol end:'stage'//=========================================================//Edge symbol: 'Symbol_1'(function(symbolName){})("Symbol_1");//Edge symbol end:'Symbol_1'//=========================================================//Edge symbol: 'Symbol_2'(function(symbolName){})("Symbol_2");//Edge symbol end:'Symbol_2'})(jQuery,AdobeEdge,"EDGE-4268933"); function red() { redMaster();} Thank in advance and sorry for my english i still learning.
-
Hello, I am trying to build a website, and never really done it before.It is a html5 website as it must work on mobile devices and uses the turn.js script.The website works like a book so you turn each page. The turn.js website has some examples of how the script can work and they have table on contents where you can click the title and it takes you to the desired section of the book.I have noticed that the url changes with each page change. My website works differently, I have each image load behind the other as you turn the page so the url does not change. Could someone please point me in the correct direction so that I can have the url change and how I can have the spot hyperlinks in the turn.js script as currently I can only make an entire page a hyper link.I would like to input a table of contents as there will be over 90 pages.Kind RegardsRyan Below is the current code for the website. <!doctype html><html><head><title> Lara Property Services </title><link type="text/css" rel="stylesheet" href="css/jquery.ui.css"></link><link type="text/css" rel="stylesheet" href="css/default.css"></link><link rel="icon" type="image/png" href="favicon.png" /><script type="text/javascript" src="jquery-1.7.1.min.js"></script><script type="text/javascript" src="lib/turn.min.js"></script> <style type="text/css">body{background:#ffffff;background-image: url(pages/pippy-oak_11.png);}#magazine{width:1152px; /*1152px*/height:752px; /*752px*/margin-left:160px;margin-right:160px;}#magazine .turn-page{background-color:#000000;background-size:100% 100%; }</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body><script type="text/javascript">$(window).ready(function() { $('#magazine').turn({ display: 'double', acceleration: true, gradients: !$.isTouch, elevation:50, when: { turned: function(e, page) { /*console.log('Current view: ', $(this).turn('view'));*/ } } });}); $(window).bind('keydown', function(e){ if (e.keyCode==37) $('#magazine').turn('previous'); else if (e.keyCode==39) $('#magazine').turn('next'); });</script><div id="magazine" class="centerStart"><div class="hard" style="background-image:url(pages/Cover.jpg);"></div> <div class="hard" style="background-image:url(pages/01.png);"></div><div style="background-image:url(pages/02.png);"></div><div style="background-image:url(pages/03.png);"></div><div style="background-image:url(pages/05.jpg);"></div><div style="background-image:url(pages/06.jpg);"></div> <div style="background-image:url(pages/7.jpg);"></div><div style="background-image:url(pages/8.jpg);"></div><div style="background-image:url(pages/9.jpg);"></div><div style="background-image:url(pages/oldpage1.png);"></div> <div style="background-image:url(pages/11.jpg);"></div><div style="background-image:url(pages/12.jpg);"></div> <a href="mailto:xxxxxxxxxx@hotmail.com"><img src="pages/contact_us1.gif" alt="Contact Us" width="780" height="315" align="right"></a></div></body></html>
-
Hi, I (roughly) know what the new aside and section tags are supposed to do, but I'm not certain which one to use: I'm working on a 3 column layout for a Joomla site. The left column will contain the sub navigation and some images. The center column is for the main content and the right column for images and banner ads. The left column I would make a section, the center column article and the right column aside. Is this the correct way to do it, or should I name the left and right columns both sections? Thanks, Gany
-
Hello. This is my first post and am very happy to be part of your community!!! I created a site for a client at www.vacationocg.com It is not being displayed at all in older versions of IE. I am assuming this is because it is html5 but I am not certain. All it does is load the background color and freezes up. I found a fix at http://www.designerkawch.com/337/html5-enabling-script/ and copied the script into the header.php file (i am using WordPress) but it still freezes up. It gets a little bit further in the page load when I add that script, but not all the way. I am a student and still learning of course. Just wondering if anyone had any other potential solutions for this. thanks so much!
-
Hello people, i need help on my HTML5 Form with javascript. I have been looking over and over at my textbook as reference to do the scripting. [some with google] However, i dont seem to be able to generate a answer out from my codes. Does anyone know why and how i can fix it?Your help is deeply appreciated! Thank you! Here are my codes <script type="text/javascript"> function CalculateMEPS() { var amt = document.getElementsByName('mepsAMT').value; var bank = document.getElementsByName('bank').value; var selectedbank = document.getElementsByName('bank').options[bank.selectedIndex].value; if (selectedbank == "DBS" || selectedbank == "OCBC" || selectedbank == "UOB") { document.getElementsByName('mepsCost').value = (amt * 0.003); } else if (selectedbank == "HSBC" || selectedbank == "SChart") { document.getElementsByName('mepsCost').value = (amt * 0.005); } else { document.getElementsByName('mepsCost').value = (amt * 0.007); } } </script> <form name="mepsCharge" action="" method="post"><fieldset><legend>Charges for MEPS</legend><label for="Amount">Amount Transferred:</label><input type="text" name="mepsAMT" id="mepsAMT" size="16" maxlength="8" /> <label for="Bank">Name of Recieving Bank</label> <select size="1" name="bank" id="bank"> <option value="DBS">DBS/POSB Bank</option> <option value="OCBC">OCBC Bank</option> <option value="UOB">UOB Bank</option> <option value="HSBC">HSBC Bank</option> <option value="SChart">Standard Chartered Bank</option> <option value="CITI">CitiBank</option> </select> <input type="button" name="Calculate" value="Calculate" onclick="CalculateMEPS()" /> <label for="cost">Total Cost of Transfer</label><input type="text" name="mepsCost" size="16"/></fieldset></form>
-
I would like to know what is used to describe the following section in an html5 document. Do I use header or a section? The section outlined in blue. Thank You You can view the image at this site:https://docs.google....NTZaUWRyb2libmM Thank you
-
How can I create an interactive chart like this: http://se.deltasd.bc.ca/vision/ while using HTML5?
-
Hey! I'm working on an custom map, i have the map from google and altert the style it all works.But i would like to show a HTML5 movie in an overlapping div and then fade it out afer it is finished.This is what i got so far: Jquery: <script type="text/javascript">$('#soundlogo').delay(400).fadeOut(400);</script> CSS: #soundlogo { height:100%;width:100%;display:block; background-color:#FFF;position:fixed;z-index:100;} body: <body onload="initialize()"> <div id="soundlogo"> <video width="100%" autoplay> <source src="video/soundlogo-web.mp4" type="video/mp4" /> Your browser does not support the video tag.</video> </div><div id="nav"><strong>Mode of Travel: </strong><select id="mode" onchange="calcRoute();"> <option value="DRIVING">Driving</option> <option value="WALKING">Walking</option> <option value="BICYCLING">Bicycling</option></select></div> <div id="map_canvas" style="width:100%; height:100%"></div> </body> Problem is that the fade never occurs,thanks in advance!
-
Hi, folks. I want to learn to develop HTML games. Could you guys point me some tutorials about this subject? By the way I have a concern: How does one protect the source code? One the games will use javascript and HTML I think that it's not possible. Am I right? Thanks.
-
I am new in the foray into HTML and am attempting to create a page, but as far as the page goes I always have issues with my navigation barIs this a result of bad coding and markup? My HTML5 does validate, so does my CSS. When I set the li to float left to create a vertical bar the entire bar dissapears off the screen not to be found anywhere...HTML5 code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Homepage</title> <meta name="description" content="fromthericefields, blog, home" /> <meta name="author" content="Joseph Davies" /> <link rel="stylesheet" type="text/css" href="header.css" /> </head> <body> <header id="mainheader"> <hgroup> <h1>fromthericefields</h1> <h2>Death and life are in the power of the tounge, and those loving it eat it's fruit</h2> <h3>Proverbs 18:21;</h3> </hgroup> <nav> <ul> <li><a href="signin.html">Sign in</a></li> <li>|</li> <li><a href="register.html">Register</a></li> </ul> </nav> </header> <nav id="mainnav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="index.html">Blog</a></li> <li><a href="index.html">Gallery</a></li> <li><a href="index.html">About</a></li> <li><a href="index.html">Contact</a></li> </ul> </nav> <section> <article> <h4>Setting up fromthericefields:</h4> <h5>Posted on 10/5/12</h5> </article> </section> <aside> <blockquote> </blockquote> </aside> </body> </html> The CSS: body { } #mainheader { background: blue; margin-top: -25px; margin-left: auto; margin-right: auto; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; height: 200px; width: 1000px; } #mainheader hgroup { padding-top: 10px; width: 1000px; } #mainheader h1 { font-style: italic; color: #ffffff; text-shadow: 5px 5px 5px #000000; font-size: 40px; } #mainheader h2 { font-style: oblique; font-size: 20px; color: #FF0000; margin-left: 20px; margin-top: -20px; } #mainheader h3 { font-family: monospace; font-size: large; color: #AAAAAA; margin-left: 600px; margin-top: -10px; } #mainheader nav { margin-left: 810px; margin-top: -130px; } #mainheader ul { list-style-type: none; } #mainheader li { text-align: center; display: inline; color: white; } #mainheader a { text-decoration: none; color: white; } /*Main Navagation Bar*/ #mainnav { width: 900px; background: red; border-bottom-left-radius: 25px; border-bottom-right-radius:25px; margin-left: auto; margin-right: auto; } #mainnav ul { list-style-type: none; margin-left: -2.5em; } [b] #mainnav li { display: inline; border: solid; }[/b] #mainnav a { text-decoration: none; color: white; text-align: center; } The place where the issue occurs is in bold.setting the display to inline, when I go to adjust the width, nothing happens but they stay the same sizeset it to float: left the whole thing dissapears!Why?
-
Hi, I'm starting out with HTML5/XHTML and CSS/CSS3 and am soon getting around to JavaScript. I have a basic structure of my website that I've been making to practice improving my skills. Building it, it works on Firefox (No support for Chrome or IE9 yet, haven't got around to that) until I zoom in and out, then it breaks. Most speficially the Navagation bar... What am I doing wrong? Here is the HTML <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>Home</title> <meta name="description" content="" /> <meta name="author" content="fromthericefields" /> <meta name="viewport" content="width=device-width; initial-scale=1.0" /> <link rel="stylesheet" href="main.css" type="text/css" /> </head><body> <div id="all"> <header> <h1>fromthericefields</h1> <h2>Death and life are in the power of the tounge, and those loving it eat it's fruit.</h2> </header> <nav> <ul id="mainav"> <li id="leftnav">/</li> <li><a href="index.html">Home</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="advntr.html">Advntr</a></li> <li><a href="about.html">About Us</a></li> <li><a href="contact.html">Contact</a></li> <li id="rightnav">\</li> </ul> </nav> <section id="maincontent"> <article> <h2>Home:</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a turpis urna, ac rhoncus felis. Sed accumsan odio vel justo hendrerit quis egestas neque sagittis. Aliquam sit amet lectus justo, sit amet iaculis justo. Aenean molestie gravida arcu, faucibus feugiat orci viverra a. In hac habitasse platea dictumst. Donec faucibus pulvinar lacus. Suspendisse mattis ornare mauris id tristique. Maecenas scelerisque massa ac ante molestie scelerisque egestas dui rutrum. Nunc elementum nisl eu diam placerat varius. Morbi adipiscing porta malesuada. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a turpis urna, ac rhoncus felis. Sed accumsan odio vel justo hendrerit quis egestas neque sagittis. Aliquam sit amet lectus justo, sit amet iaculis justo. Aenean molestie gravida arcu, faucibus feugiat orci viverra a. In hac habitasse platea dictumst. Donec faucibus pulvinar lacus. Suspendisse mattis ornare mauris id tristique. Maecenas scelerisque massa ac ante molestie scelerisque egestas dui rutrum. Nunc elementum nisl eu diam placerat varius. Morbi adipiscing porta malesuada. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a turpis urna, ac rhoncus felis. Sed accumsan odio vel justo hendrerit quis egestas neque sagittis. Aliquam sit amet lectus justo, sit amet iaculis justo. Aenean molestie gravida arcu, faucibus feugiat orci viverra a. In hac habitasse platea dictumst. Donec faucibus pulvinar lacus. Suspendisse mattis ornare mauris id tristique. Maecenas scelerisque massa ac ante molestie scelerisque egestas dui rutrum. Nunc elementum nisl eu diam placerat varius. Morbi adipiscing porta malesuada. </p> </article> </section> <aside id="sidebox1"> <h2>About:</h2> <article> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a turpis urna, ac rhoncus felis. Sed accumsan odio vel justo hendrerit quis egestas neque sagittis. Aliquam sit amet lectus justo, sit amet iaculis justo. Aenean molestie gravida arcu, faucibus feugiat orci viverra a. In hac habitasse platea dictumst. Donec faucibus pulvinar lacus. Suspendisse mattis ornare mauris id tristique. Maecenas scelerisque massa ac ante molestie scelerisque egestas dui rutrum. Nunc elementum nisl eu diam placerat varius. Morbi adipiscing porta malesuada. </p> </article> </aside> <footer> <p> Copyright: 2012 fromthericefields.inc All rights reserved. </p> <nav id="footernav"> <ul> <li><a href="terms.html">Terms and Conditions</a></li> <li><a href="privacy.html">Privacy Policy</a></li> </ul> </nav> </footer> </div></body></html> The CSS is: #all {width: 900px;height: 400px;margin-left: auto;margin-right: auto;}header {text-align: left;border: outset #946040;border-radius: 25px;height: 100px;background-color: #945129;width: 900px;margin: 0px;}header h1 {text-shadow: 5px 5px 5px #FFFFFF;font-family:"Comic Sans MS", "TSCu_Comic";margin-left: 30px;margin-top: 5px;}header h2 {color: #00CC88;margin-left: 100px;margin-top: -20px;font-size: 15px;}/*The main navgation bar located in the header area*/nav {margin-left: 2px;margin-top: -20px;margin-bottom: 30px;width: 900px;}#mainav {list-style-type: none;margin: 0px;padding: 0px;width: 900px;}#mainav li {background: -moz-linear-gradient(top, #945129 0%, #944020 45%, #944020 55%, #945129 100%);display: inline;padding-top: 2px;padding-bottom: 2px;margin-top: -5px;border-bottom: outset;float: left;}#mainav li:hover {background: -moz-linear-gradient(top, #945129 0%, #d6a98b 45%, #d6a98b 55%, #945129 100%);}#mainav li:hover > a {color: black;}#mainav a {text-decoration: none;color: #ffffff;float: left;padding-left: 63px;padding-right: 63px;}#leftnav {border-bottom-left-radius: 25px;border-left: outset #944020;padding-left: 10px;padding-right: 10px;background: -moz-linear-gradient(top, #945129 0%, #d6a98b 45%, #d6a98b 55%, #945129 100%);float: left;margin-left: -2px;}#rightnav {border-right: outset #944020;border-bottom-right-radius: 25px;padding-right: 10px;padding-left: 10px;background: -moz-linear-gradient(top, #945129 0%, #d6a98b 45%, #d6a98b 55%, #945129 100%);float: left;margin-right: -4px;}/*End*//*The main content of the page*/#maincontent {border: outset #946040;border-radius: 25px;background-color: #945129;width: 75%;float: left;min-height: 500px;}#sidebox1 {border: outset #946040;border-radius: 25px;background-color: #945129;width: 22.6%;float: left;margin-left: 1%;min-height: 500px;}/*End*//*The footer*/footer {border: outset #946040;border-radius: 25px;background-color: #945129;width: 900px;clear: both;float: left;margin-top: 5px;min-height: 20px;text-align: center;}footer p {display: inline;margin-left: 10px;}#footernav {margin-bottom: -10px;}#footernav ul {list-style-type: none;margin-left: -2.5em;}#footernav li {display: inline;margin: 8px;}#footernav a {text-decoration: none;}/*End*/ All help would be appriticated, susgestions, and tips, as I am learning and am egear to learn all I can from my mistakes. This is what my webpage looks like, properly on my browser (Located as attachment) Thanks for your help Forgive me if this should be in another form as it regards both my HTML and CSS.
