Advertisement

There's no such thing as a stupid question, but they're the easiest to answer.
Login
Search

Advertisement

Web Design & Development Web Design & Development
Search Search
Search for:
Tech Support Guy > > >

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


(!)

tycoon2's Avatar
tycoon2 tycoon2 is offline
Computer Specs
Member with 1 posts.
THREAD STARTER
 
Join Date: Jun 2012
Experience: Beginner
28-Jun-2012, 05:07 PM #1
Angry can't get my div tag to display anything in browser
<!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:tyday2@hotmail.com">Tyrone LeDay</a></small></p>
</body>
</html>
dukevyner's Avatar
dukevyner   (Luke) dukevyner is offline
Computer Specs
Member with 787 posts.
 
Join Date: Nov 2011
Location: Pakenham, VIC, Australia
Experience: Advanced
28-Jun-2012, 06:50 PM #2
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)
Quote:
<!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>
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.

Quote:
<body><div class="container">
<div class="header">

<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></div>
<div class="sidebar">

<li>Specialty Coffee and Tea</li>
<li>Doughnts, Bagels and more!</li>
<li>music, Poetry and Karaoke!</li>
<li>Open Mic Night</li>
</ul></div>
<div class="footer"><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:tyday2@hotmail.com">Tyrone LeDay</a></small></p>
</div>
</body>
</html>
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

Last edited by dukevyner; 28-Jun-2012 at 07:17 PM..
colinsp's Avatar
colinsp   (Colin) colinsp is offline
Computer Specs
Member with 1,663 posts.
 
Join Date: Sep 2007
Location: Spain
29-Jun-2012, 01:31 AM #3
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

BBC, Reader's Digest, PC Magazine, Today Show, Money Magazine
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.


(clock)
THIS THREAD HAS EXPIRED.
Are you having the same problem? We have volunteers ready to answer your question, but first you'll have to join for free. Need help getting started? Check out our Welcome Guide.

Search Tech Support Guy

Find the solution to your
computer problem!




Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools


WELCOME
You Are Using: Server ID
Trusted Website Back to the Top ↑