Trying to get one up and running

jus71n742 · Oct 13, 2008

I am currently trying to get a site up and I would like it to have drop down menus and things like that but when I got a css template to use I was unable to get it to display the changes I made. I would like know how to make the site an HTML site with all the css menus and things like that.
I have all the HTML tags in but all I get is text for the site

voodish · Oct 13, 2008

If all you're getting is text with no style, then it is more than likely the link to your style sheet is incorrect - or your CSS is incorrect.

Double check the link to your style sheet; the code should be in the header of your HTML document. ie. between the <head> and </head> tags.

Code:

<link rel="stylesheet" href="my_style_sheet.css" type="text/css" media="screen" />

Without a link to the website, it is very difficult to help any further.

jus71n742 · Oct 13, 2008

good point...let me host it up on the school server (this isn't a school assignment) I will upload it here:
web.utk.edu/~jedwar39

voodish · Oct 13, 2008

Ahh, right.

What you have done is encapsulate the CSS code in <html> tags </html>

To be honest, if you want to learn the basics then head over to W3C Schools, there are tonnes of great tutorials there.

The HTML code you need is:

Code:

<html>
<head>
<title>Jedwar39</title>
<link rel="stylesheet" media="screen" href="jedwar39.css" />
</head>

<body>
<h1>This is a h1 tag</h1>
<h2>This is a h1 tag</h2>
<h3>This is a h1 tag</h3>
<h4>This is a h1 tag</h4>

<p>This is a paragraph tag</p>

<ul>
<li>This is a list item</li>
<li>This is a list item</li>
<li>This is a list item</li>
<li>This is a list item</li>
</ul>

<a href="http://www.voodish.co.uk/" title="voodish">This is a weblink</a>

<p>&nbsp;</p>
<p>&nbsp;</p>

</body>
</html>

The CSS code you need is

Code:

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
	margin: 0;
	padding: 0;
	background: #000000 url(dance.jpg) repeat-x;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #808080;
}

form {
	margin: 0;
	padding: 0;
}

fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

input, textarea, select {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
}

h1, h2, h3 {
	text-transform: lowercase;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #E6E6E6;
}

h1 {
	letter-spacing: -1px;
	font-size: 2.4em;
}

h2 {
	font-size: 1.8em;
}

h3 {
	font-size: 1.2em;
	font-weight: bold;
}

p, ul, ol {
	margin-bottom: 1.6em;
	line-height: 180%;
}

p {
}

blockquote {
	font-style: italic;
}

ul {
}

ol {
}

a {
	color: #FA9C39;
}

a:hover {
	text-decoration: none;
}

small {
}

hr {
	display: none;
}

img {
	border: none;
}

img.left {
	float: left;
	margin: 0 15px 0 0;
}

img.right {
	float: left;
	margin: 0 0 0 15px;
}

/* Header */

#feeds {
	width: 980px;
	height: 28px;
	margin: 0 auto;
	padding-top: 12px;
	text-align: right;
}

#feeds b {
	display: none;
}

#feeds a {
	padding: 0 21px;
	background: url(dance.jpg) no-repeat left center;
	text-decoration: none;
	font-weight: bold;
	color: #FFFFFF;
}

#feeds a:hover {
	text-decoration: underline;
}

#logo {
	width: 980px;
	height: 100px;
	margin: 0 auto;
	padding: 60px 0 0 0;
}

#logo h1, #logo p {
	margin: 0;
	float: left;
	color: #FFFFFF;
}

#logo h1 {
	padding-left: 40px;
	background: url() no-repeat left center;
	font-size: 4em;
}

#logo p {
	padding: 3px 0 0 5px;
	font-size: 1.4em;
}

#logo a {
	text-decoration: none;
	text-transform: lowercase;
	color: #FFFFFF;
}

/* Menu */

#menu {
	width: 980px;
	height: 60px;
	margin: 0 auto;
}

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: left;
	height: 43px;
	padding: 17px 30px 0 30px;
	background: url(dance.jpg) no-repeat;
	text-transform: lowercase;
	text-decoration: none;
	font-size: 1.8em;
	color: #5B6371;
}

#menu a:hover {
	color: #000000;
}

#menu .active a {
	background-color: #738197;
	color: #FFFFFF;
}

/* Page */

#page {
	width: 980px;
	margin: 0 auto;
	padding: 40px 0;
}

/* Content */

#content {
	float: left;
	width: 660px;
	padding-top: 8px;
}

.post {
	text-align: justify;
}

.post .title {
	margin: 0;
	border-bottom: 1px solid #1A1A1A;
}

.post .meta {
	margin: 0;
	padding-left: 6px;
	background: url(file:///C|/DOCUME~1/Napalm/LOCALS~1/Temp/Temporary Directory 1 for artificial.zip/artificial/images/img05.gif) no-repeat left center;
	color: #404040;
}

.post .meta a {
	color: #404040;
}

.post .entry {
	padding: 20px;
}

.post .more {
	text-align: right;
}

.post .more a {
	padding-left: 15px;
	background: url(file:///C|/DOCUME~1/Napalm/LOCALS~1/Temp/Temporary Directory 1 for artificial.zip/artificial/images/img06.gif) no-repeat left center;
	text-decoration: none;
	font-weight: bold;
}

.post .more a:hover {
	text-decoration: underline;
}

.vline {
	border-bottom: 1px solid #1A1A1A;
}

/* Sidebar */

#sidebar {
	float: right;
	width: 280px;
}

#sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#sidebar li {
	margin-bottom: 20px;
	background: #1A1A1A;
	border: 5px solid #050505;
}

#sidebar li ul {
	padding: 20px;
}

#sidebar li li {
	margin: 0;
	background: none;
	border: none;
}

#sidebar li li a {
	padding-left: 15px;
	background: url(file:///C|/DOCUME~1/Napalm/LOCALS~1/Temp/Temporary Directory 1 for artificial.zip/artificial/images/img08.gif) no-repeat left center;
	text-decoration: none;
}

#sidebar li li a:hover {
	text-decoration: underline;
}

#sidebar h2 {
	height: 40px;
	margin: 0;
	padding: 10px 0 0 10px;
	background: #BAD08B url(file:///C|/DOCUME~1/Napalm/LOCALS~1/Temp/Temporary Directory 1 for artificial.zip/artificial/images/img07.gif) repeat-x;
	letter-spacing: -1px;
	font-size: 1.8em;
	color: #000000;
}

/* Search */

#search form {
	padding: 20px;
}

/* Footer */

#footer {
	clear: both;
	height: 100px;
	padding: 20px;
	background: #1A1A1A;
	border-top: 10px solid #050505;
}

#footer p {
	margin: 0;
	text-align: center;
	color: #444444;
}

#footer a {
	color: #444444;
}

Create those two files with .html and .css extensions respectively and load up the html file in your browser making sure that they exist in the same folder as each other.

jus71n742 · Oct 13, 2008

That is exactly what I did...I was reading through the code and saw "class" in there and though hey ...C++ uses classes and calls functions...maybe this should "call" the css and went in a changed it all around and boom it worked....Thanks a lot for your help though

Trying to get one up and running

jus71n742

New Member

voodish

New Member

jus71n742

New Member

voodish

New Member

jus71n742

New Member