html5 newbie |
html5 newbie |
Mindapolis |
Jun 27 2012, 02:30 PM
Post
#1
|
Member Group: Members Posts: 67 Joined: 2-April 11 Member No.: 14,256 |
Hi, I'm doing a website in HTML5 for the first time. Most of the concepts are easy but I'm having trouble understanding how to get a oval on the page. I understand the CSS behind it but how do you get the shape on the page? Do you have to use the canvas to draw it?
|
Frederiek |
Jun 28 2012, 03:24 AM
Post
#2
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
Have a look here: http://css-tricks.com/examples/ShapesOfCSS/
|
Mindapolis |
Jun 28 2012, 12:41 PM
Post
#3
|
Member Group: Members Posts: 67 Joined: 2-April 11 Member No.: 14,256 |
I'm still not understanding. here 's what I have so far.
CODE <?php require_once("functions.php"); ?><!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Untitled Document</title> <!--meta description --> <link rel="stylesheet" href="siteServices.css"> <!--[if It IE 9]> <script src="http://html5shiv.googlecode-.com/svn/trunk/html5.js"> </script> <![endif]--> <style type="text/css"> <br> .oval { width: 200px; height: 100px; background: #fc2e5a; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; } </style> <script type="text/javascript" language="javascript"> var slideArray = new Array() slideArray[0]= "Web Design"; slideArray[1]= "Website Maintenance"; slideArray[2]= "Article Writing"; slideArray[3]= "Internet Research"; slideArray[4]= "Blogging"; function textSlideShow() { var total_slides; total_slides=Math.floor(Math.random()*slideArray.length) document.getElementById('div_display').innerHTML=slideArray[total_slides]; setTimeout("textSlideShow()",800); } </script> </head> <body> <div id="mainContent"> <header> <?php logo(); ?> <nav> <?php menu(); ?> </nav> </header> <table id = "skills"> <tr> <td> <div id="div_display"><script type="text/javascript" language="javascript">textSlideShow();</script></div> </td> </tr> </table> <div id="oval"> </div> <footer> <?php contactInfo(); ?> </footer> </div> </body> </html> |
Frederiek |
Jun 29 2012, 02:30 AM
Post
#4
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
In the CSS, you have specified a class (.oval) for a div that has an ID.
Either change the ID to CLASS (use lowercase) in the DIV tag or change the CSS selector to #oval to match the ID. |
Mindapolis |
Jul 2 2012, 01:31 PM
Post
#5
|
Member Group: Members Posts: 67 Joined: 2-April 11 Member No.: 14,256 |
that didn't help.
CODE <?php require_once("functions.php"); ?><!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Untitled Document</title> <!--meta description --> <link rel="stylesheet" href="siteServices.css"> <!--[if It IE 9]> <script src="http://html5shiv.googlecode-.com/svn/trunk/html5.js"> </script> <![endif]--> <style type="text/css"> <br> .oval { width: 200px; height: 100px; background: #fc2e5a; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; } </style> <script type="text/javascript" language="javascript"> var slideArray = new Array() slideArray[0]= "Web Design"; slideArray[1]= "Website Maintenance"; slideArray[2]= "Article Writing"; slideArray[3]= "Internet Research"; slideArray[4]= "Blogging"; function textSlideShow() { var total_slides; total_slides=Math.floor(Math.random()*slideArray.length) document.getElementById('div_display').innerHTML=slideArray[total_slides]; setTimeout("textSlideShow()",800); } </script> </head> <body> <div id="mainContent"> <header> <?php logo(); ?> <nav> <?php menu(); ?> </nav> </header> <table id = "skills"> <tr> <td> <div id="div_display"><script type="text/javascript" language="javascript">textSlideShow();</script></div> </td> </tr> </table> <div class ="oval"> </div> <footer> <?php contactInfo(); ?> </footer> </div> </body> </html> |
Frederiek |
Jul 3 2012, 02:39 AM
Post
#6
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
That's because you have a HTML tag inside the style declaration, which is not allowed:
<style type="text/css"> <br> Get rid of the <br> and it will work. |
Mindapolis |
Jul 3 2012, 02:16 PM
Post
#7
|
Member Group: Members Posts: 67 Joined: 2-April 11 Member No.: 14,256 |
that worked. Sorry for the error on my end
|
Lo-Fi Version | Time is now: 19th April 2024 - 02:56 PM |