does <section id="main"> work?

Question

Pamcakes 0 Newbie Poster

12 Years Ago

I'm taking a website development course and we are supposed to be using HTML5 and CSS3. In my textbook it says that the <div> tag is HTML 4.01 and that in HTML5 it has been replaced with the <section> tag. I know with the <div> tag you can specify whether it is the main, left, or right area, but does that also work with the <section> tag? For instance, my assignment is having me create a web form, and I want to have a small area on the left that is just text, then I want my web form to be in the center section. My code so far in my .htm file is written like <section id="left"> and in my corresponding .css file I have:

section id="left" {
    width: 220px; 
    padding-top: 20px;
    float: left;
    font-size: 0.75em;
    margin: 5px 5px 10px 15px;
    color: black;
}

My layout is not as desired unfortunately, and I'm wondering if this is because I'm not coding properly? Do the id elements on work for the <div> tag? Any help would be appreciated! =D

html-css web-design

2 Contributors
5 Replies
3K Views
3 Hours Discussion Span
Latest Post 12 Years Ago Latest Post by LastMitch

LastMitch

12 Years Ago

@Pamcakes

In my textbook it says that the <div> tag is HTML 4.01 and that in HTML5 it has been replaced with the <section> tag.

In order to used <section> tag you need this:

<!DOCTYPE html> instead of <HTML 4.01>

So far as I know you don't really used CSS for <section> tag maybe for paragraphs

Do the id elements on work for the <div> tag?

Yes, you can used a class or id for a <div> tag

What you trying to do?

Try this #left or .left:

#left{
width: 220px;
padding-top: 20px;
float: left;
font-size: 0.75em;
margin: 5px 5px 10px 15px;
color: black;
}

-

.left{
width: 220px;
padding-top: 20px;
float: left;
font-size: 0.75em;
margin: 5px 5px 10px 15px;
color: black;
}

On your <div>

<div align="left"></div>

Edited 12 Years Ago by LastMitch because: grammer

LastMitch

12 Years Ago

@Pamcakes

OK you can't used this:

/* Main section styles */
section id="left" {
width: 220px;
padding-top: 20px;
float: left;
font-size: 0.75em;
margin: 5px 5px 10px 15px;
color: black;
}
section id="main" {
top: 175px;
left: 0px;
width: 830px;
}
section id="right" {
right: 0;
top: 0;
width: 160px;
bottom: 0;
background: #eee;
padding: 0 10px;
}

because it won't work. Read this link it will give you a better how it works:

http://html5doctor.com/avoiding-common-html5-mistakes/

Try to used <div> tags for your <section> tags.

If you still want to used <section> tags, you can just try this if you want to see how it looks like it's not much differences:

<div align="left">
<section>
<p>Millennium Computers is a discout mail order company, specializing in computers and computer components. Please fill out the form carefully in order to recieve the computer that you desire. If you have any other questions or comments feel free to fill out the comments section of the form or click on the "Contact Me" button at the bottom. <br /></p>
</section>
</div>

Edited 12 Years Ago by LastMitch because: grammer

PrimePackster commented: To Rectify what some retard did to LastMitch +0

JorgeM commented: even though you were bombarded with negative votes, you continued to help people. keep up the great work! +12

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

even though you were bombarded with negative votes, you continued to help people. keep up the great work!

Pamcakes 0 Newbie Poster · Answer 1 · 2012-11-17T01:35:33+00:00

I'll past my html code and then my css so you can see.

<!DOCTYPE html>
<htmL>

    <head>
        <!--    New Perspectives on HTML and XHTML 5th Edition
                    Tutorial 6
                    Case Problem 4

                        Author:  Pamela McKee
                        Date:  November 11, 2012
                        Filename:  pc.htm
                        Supporting files:  mill.css, oform.css, mclogo.jpg
        -->

        <meta charset="UTF-8" />
        <title>Millennium Computers Custom Build Order Form</title>
        <script src="modernizer-1.5.js"></script>
        <script src="formsubmit.js"></script>

        <link href="mill.css" rel="stylesheet" type="text/css" /> 
        <link href="oform.css" rel="stylesheet" type="text/css" />
    </head>

    <body>

            <header>
                <img src="mclogo.jpg" alt="Millennium Computers" />
                <h1>Custom Build Order Form</h1>
            </header>

                <nav>
              <ul>
                 <li><a href="#">Home</a></li>
                 <li><a href="#">Products</a></li>
                 <li><a href="#">Contact Us</a></li>
              </ul>
            </nav>

       <section id="left">
        <p>
        Millennium Computers is a discout mail order company, specializing in computers and computer components.  Please fill out the form carefully in order to recieve the computer that you desire.
                If you have any other questions or comments feel free to fill out the comments section of 
                the form or click on the "Contact Me" button at the bottom. <br />
            </p>
            </section>

            <section id="main">          
             <h1>Computer Order Form</h1>

             <h2>Required values are marked by an asterisk (<span>*</span>)</h2>

                            <form name="cOrder" id="cOrder"
                                action="http://www.mill_computers.com/orders/process.cgi"
                                method="post">
                                <input type="hidden" name="eMail" id="eMail"
                                    value="swalton@mill_computers.com" />

                                <fieldset id="custInfo">
                                    <legend>Customer Information</legend>

                                    <label for="fName">First Name <span>*</span></label>
                                    <input name="fName" id="fName" />

                                    <label for="lName">Last Name <span>*</span></label>
                                    <input name="lName" id="lName" />

                                    <label for="street">Street Address <span>*</span></label>
                                    <input name="street" id="street" />

                                    <label for="city">City</label>
                                    <input name="city" id="city"  />

                                    <label for="state">State</label>
                                    <input name="state" id="state" maxlength="2" />

                                    <label for="zip">ZIP <span>*</span></label>
                                    <input name="zip"  id="zip" maxlength="10"/>

                                    <label for="phone">Telephone <span>*</span></label>
                                    <input name="phone" id="phone" />                        
                                </fieldset>

                                <fieldset id="compSpec">
                                    <legend>Computer Specifications</legend>

                                    <label for="pSpeed">Processor Speed: <span>*</span></label>
                                    <select id="compInfo" name="pSpeed">
                                    <option value="twofour">2.4 GHz</option>
                                    <option value="twosix">2.6 GHz</option>
                                    <option value="threeone">3.1 GHz</option>
                                    </select>

                                    <label for="mem">Memory: <span>*</span></label>
                                    <select id="compInfo" name="mem">
                                    <option value="four">4 GB</option>
                                    <option value="six">6 GB</option>
                                    <option value="eight">8 GB</option>
                                    <option value="sixteen">16 GB</option>
                                    </select>

                                    <label for="monitor">Monitor Size:</label>
                                    <select id="compInfo" name="monitor">
                                    <option value="nineteen">19"</option>
                                    <option value="twentytwo">22"</option>
                                    <option value="twentyfour">24"</option>
                                    <option value="twentyseven">27"</option>
                                    </select>

                                    <label for="hd">Hard Drive:</label>
                                    <select id="compInfo" name="hd">
                                    <option value="fivehundred">500 GB</option>
                                    <option value="sevenfifty">750 GB</option>
                                    <option value="one">1 TB</option>
                                    <option value="two">2 TB</option>
                                    </select> 

                                <fieldset id="options">
                                    <legend>DVD Burner</legend>

                                    <label for="opYes">Yes</label>
                                    <input type="radio" id="opYes" name="dvd" value="yes" />
                                    <label for="opNo">No</label>
                                    <input type="radio" id="opNo" name="dvd" value="no" />
                                </fieldset>

                                <fieldset id="options">
                                    <legend>LAN Card</legend>

                                    <label for="opYes">Yes</label>
                                    <input type="radio" id="opYes" name="LAN" value="yes" />
                                    <label for="opNo">No</label>
                                    <input type="radio" id="opNo" name="LAN" value="no" />
                                </fieldset>

                                <fieldset id="options">
                                    <legend>Media Card Reader</legend>

                                    <label for="opYes">Yes</label>
                                    <input type="radio" id="opYes" name="mCard" value="yes" />
                                    <label for="opNo">No</label>
                                    <input type="radio" id="opNo" name="mCard" value="no" />
                                </fieldset>

                                <fieldset id="warranty">
                                    <legend>Warranty</legend>

                                    <label id="warr">
                                    <input type="checkbox" id="warr" name="warranty" />
                                    Add a 24-month extended warranty
                                    </label>
                                </fieldset>

                                <fieldset id="comments">
                                    <legend>Comments</legend>

                                    <label for="comments">Questions or Comments</label>
                                    <textarea id="comments" name="comments" rows="10" cols="50"></textarea>
                                </fieldset>

                                    <input type="submit" value="Send Order" />
                                    <input type="reset" value="Cancel" />
                                    <input type="button" value="Contact Me" />
                            </form>
            </section>

   <footer>
    <address>    Millennium Computers &bull;
                123 Main St. &bull;
                Anytown, OH  12345 &bull;
                (800) 555 - 5555
    </address>
  </footer>

</body>

</html>

And this is my CSS code:

/*
        <!--    New Perspectives on HTML and XHTML 5th Edition
                    Tutorial 6
                    Case Problem 4

                        Author:  Pamela McKee
                        Date:  November 11, 2012
                        Filename:  mill.css
                        Supporting files:  pc.htm
        -->
*/


/* Body styles */

body {
    background-color: rgb(255,255,255);
    font-family: Tahoma, Geneva, sans-serif;
    line-height: 1em;
    margin: 0px;
}


/* Header styles */

header {
    text-align: center;
    top: 0px; 
    left: 500px; 
    width: 1000px; 
    height: 150px;
}

header h1 {
    background-color: rgb(15,100,205);
    color: white;
    font-size: 1.5em;
    text-align: center;
    margin: 15px auto 0; 
    clear: left;
}

header h2 {
    background-color: rgb(255,255,255);
    color: red;
    font-size: 1em;
    text-align: center;
    margin: 15px 0px 15px 0px;
}



/* Navigation list styles */

nav ul {    
  list-style-type: none;
  padding-left: 20px;
    top: 150px; 
    left: 2px; 
    width: 1000px;
}

nav ul li { 
  display: inline; 
  float: left; 
  font-size: 0.875em; 
  text-align: center;
  color: white;
  width: 20%;
  margin-right: 0px;
  color: white;
}

nav ul li a {
  display: block; 
  color: black; 
  text-decoration: none;
  background: white; 
  padding: 4px 15px;
}

nav ul li a:hover {
  color: rgb(0, 51, 51);
}


/* Main section styles */

section id="left" {
    width: 220px; 
    padding-top: 20px;
    float: left;
    font-size: 0.75em;
    margin: 5px 5px 10px 15px;
    color: black;
}

section id="main" {
    top: 175px; 
    left: 0px; 
    width: 830px;
}

section id="right" {
    right: 0; 
    top: 0; 
    width: 160px; 
    bottom: 0;
    background: #eee; 
    padding: 0 10px;
}


/* Footer styles */

footer address {
  background-color: rgb(0, 68, 128);
  color: white;
  font-size: 1em;
  font-style: normal;
  text-align: center;
  margin: 20px 0px;
  clear: both;
    padding-top: 10px;
    width: 100%;
}

I'm assuming I'm just doing it wrong.

Pamcakes 0 Newbie Poster · Answer 2 · 2012-11-17T03:01:59+00:00

Thank you so much! That link was incredibly helpful, as were you! I'm a bit frustrated with my textbook though; it made the HTML5 tags sound as if they were a straight replacement for the <div> tags. So very misleading.

Anyway, thank you so much for your help!

<3 Pamcakes

LastMitch · Answer 3 · 2012-11-17T04:05:05+00:00

@Pamcakes

I hope you finish your project!