The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> html5 newbie
Mindapolis
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jun 28 2012, 03:24 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 3,539
Joined: 23-August 06
From: Europe
Member No.: 9
Have a look here: http://css-tricks.com/examples/ShapesOfCSS/


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Mindapolis
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jun 29 2012, 02:30 AM
Post #4


Programming Fanatic
********

Group: Members
Posts: 3,539
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.


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Mindapolis
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jul 3 2012, 02:39 AM
Post #6


Programming Fanatic
********

Group: Members
Posts: 3,539
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.


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Mindapolis
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 18th May 2013 - 06:23 AM
Invision Power Board © 2013  IPS, Inc.
Licensed to: HTMLHelp.com, LLC