1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

can't get my div tag to display anything in browser

Discussion in 'Web Design & Development' started by tycoon2, Jun 28, 2012.

Thread Status:
Not open for further replies.
Advertisement
  1. tycoon2

    tycoon2 Thread Starter

    Joined:
    Jun 28, 2012
    Messages:
    1
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">
    <title>cup du jour: House and Bakery</title>

    <style type="text/css">

    body {
    background: #003399;
    font-family: verdana;
    font-size:15px;
    }


    div class="container"{
    width:600px;
    margin:0 auto;
    background:#ffffff;
    border:#000000 3px solid;
    }

    div class="header" {
    width:auto;
    height:100px;
    background:ffffff;
    border-bottom:#000000 1px soild;

    }

    div class= "maincontainer"{
    width:600px;

    }

    div class= "sidebar"{
    width:200px;
    border-right:#000000 1px dashed;
    float-left;
    }

    div class="content"{
    width:395px;
    border:none;
    float:right;

    }
    div class="footer"{
    width:auto;
    height:20px;
    border-top:#000000 1px solid;
    clear: both;
    }

    </body>

    </style>
    </head>
    <body>
    <h1>cup du jour</h1>
    <p><a href="index.html">Home</a> <a href="menu.html">Menu</a> <a href="events.html">Events</a> <a href="jobs.html">Jobs</a></p>
    <ul>
    <li>Specialty Coffee and Tea</li>
    <li>Doughnts, Bagels and more!</li>
    <li>music, Poetry and Karaoke!</li>
    <li>Open Mic Night</li>
    </ul>
    <p>Cup Du Jour<br>
    1234 N Main St.<br>
    Opelousas, La<br>
    1-888-123-4567<br></p>
    <small><em>copyright ©2012 Cup Du Jour</em></small>
    <p><small><a href="mailto:[email protected]">Tyrone LeDay</a></small></p>
    </body>
    </html>
     
  2. dukevyner

    dukevyner

    Joined:
    Nov 4, 2011
    Messages:
    787
    Welcome to T.S.G alright this might be long, I can see that you are new to html and css, it's great to learn, but you seem to be confused about a few things you should take a look at w3schools to learn html, now to the problem, there were a few issues with your internal CSS, these are highlighted below, anything in red, should be removed, because it is incorrect or un-needed, anything in green is what needs to be added or changed

    keep in mind this is only for the head(mostly css)
    now it maybe hard to see, but there is a period ( . ) before the name of the class, let explain what was wrong with the way you had it, in css, when defining a class you must start with a . or a # followed by the name of the class, the rest is correct, you also had an </body> inside your internal css... that was un-necessary... now what you need to do now(that your styles are defined correctly) is add the divs, and attach the appropriate style.

    obviously, the placement of the <div class="..."> and </div> depends on where you want each div to start and end... and again the green is what I added.

    Hope this helps

    -Luke
     
  3. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    1,836
    A class that starts with a . in your CSS definition can be used multiple times in an html page however and id which starts with a # can only be used once on an html page.

    So looking at your css all except possibly content should be id's not classes and should be called by

    <div id="header">, for example, in your html page.
     
As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/1058935