Help I need help converting my HTML code in to CSS

Question

dnmoore 0 Light Poster

13 Years Ago

I have to create web site and use CSS for the design/layout and I created the pages for my site using jsut the basic html but thats isnt right, i dont know how to do the font and back ground stuff in CSS and I asked several people to help and they were unsuccessful, im going to paste my home page from my site below but upload the entire site so you could see what my site is suppose to look like (my final grade is riding on this change and i could really use the assistance

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Davina&#39;s Web Page</title>
<style type="text/css">
body {
	background-color: #F0F;
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
}
</style>
<meta name="Microsoft Border" content="t, default">
</head>

<body><!--msnavigation--><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td>

<p align="center"><font size="6"><strong>
Davina&#39;s Web Page</strong></font></p>

<p align="center"><font size="5"><a href="Family.htm">Family</a>&nbsp; |&nbsp; <a href="Friends.htm">Friends</a>&nbsp; 
|&nbsp; <a href="Movies.htm">Interest</a>&nbsp; |&nbsp; </font>
<a href="Feedback.html"><font size="5">Feedback</font></a></p>
<p align="center">&nbsp;</p>

</td></tr><!--msnavigation--></table><!--msnavigation--><table dir="ltr" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><!--msnavigation--><td valign="top">
<p align="center"><img src="me part 2.jpg" alt="my_pic" width="378" height="302" align="middle" /></p>
<p align="center"><font size="4">Welcome to My Website</font></p>
<p align="center"><font size="4">When viewing this site your will learn a little 
about me and my family and the things that I like to do.&nbsp; I graduated from 
Bloomsburg May 2008 with a Bachelor of Science Degree in Computer Information 
Systems with a Concentration in Information Assurance. I am continuing my 
education and getting my Masters Degree in Instructional Technology.&nbsp; I&#39;m 
in my second semester and third class.</font></p>
<p align="center"><font size="4">I&#39;m currently working as a Call Center Agent 
until I find something in my field and after I graduate (tentatively Spring 
2011). The things I like to do on my free time is hangout with my friends and 
sorority sisters, read, go shopping and see new movies, and my favorite food to 
eat is chocolate.</font></p>
<p align="center"><font size="4">I 
recently went to Disney in January 2009 for the Disney College Program where I 
worked in Disney's Animal Kingdom, in Africa Attractions-Pangani Exploration 
Forest Trail. I learned a lot, had a blast, and made many new friends. I'm still 
seasonal in Pangani and currently serve a Disney Campus Representative for 
Northampton Community College in Bethlehem, Pa for the Fall 2009 semester.</font></p></td></tr><!--msnavigation--></table>
<p><div id="footer">
Page created by Davina Moore.<br />
Last updated: June 27, 2010.<br />
</div>

<!--
Davina Moore
This page is my home page. 
-->
<!--msnavigation--></p>
</body>
</html>

web-design

This attachment is potentially unsafe to open. It may be an executable that is capable of making changes to your file system, or it may require specific software to open. Use caution and only open this attachment if you are comfortable working with zip files.

Final_Project.zip (1293.9 KB)

3 Contributors
3 Replies
141 Views
20 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by Lusiphur

All 3 Replies

Lusiphur 185 Practically a Posting Shark

13 Years Ago

Below is a brief example where I've done some (but definitely not all) of your CSS conversion for you. I would recommend that you check into some CSS tutorials to get a better understanding of how they work.

First, the CSS code (I've named my file test.css):

@charset "utf-8";
/* CSS Document */

#Body {
	background-color: #F0F;
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
}
#NavTable {
	border: none;
	padding: 0px;
	margin: 0px;
	width: 100%;
}
.title {
	text-align: center;
	font-size: 6em;
	font-weight: bold;
}
.menuItems {
	text-align: center;
	font-size: 5em;
}

Followed by the HTML page (aptly named test.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
@import url("test.css");
-->
</style>
</head>

<body id="Body">
<table id="NavTable">
<tr><td>
<p class="title">Davina's Web Page</p>
<p class="menuItems"><a href="Family.htm">Family</a>&nbsp; |&nbsp; <a href="Friends.htm">Friends</a>&nbsp;
|&nbsp; <a href="Movies.htm">Interest</a>&nbsp; |&nbsp; </font>
<a href="Feedback.html">Feedback</a></p>
<p align="center">&nbsp;</p>
</td></tr>
</table>
</body>
</html>

Hope this helps. Sorry but I'm too tired and it's too late in the day for me to do your entire page for you. It should, at the very least, give you an idea of how CSS IDs and Classes work however. ;)

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.

macneato 29 Posting Pro in Training · Answer 1 · 2010-07-01T17:56:20+00:00

Hi Davina,

A few tips
-You really should understore your image names.
-Secondly, add them to a folder (images) - its just neater that way.

Lusiphur was on the right track, but since your bgs change with every page. Why dont you give your body ids. eg.

/* Themes */

#homepage {
	background-color: #F0F;
}

#family {
	background-color: #CFC;
}

..
<!-- Home page -->
    <body id="homepage">
        <!--msnavigation-->
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
..
<!-- Family page -->
    <body id="family ">
        <!--msnavigation-->
        <table border="0" cellpadding="0" cellspacing="0" width="100%">

Also not sure if i would import. instead, in the head

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Davina's Web Page</title>
        <meta name="Microsoft Border" content="t, default">
		<!-- Stylesheet -->
		<link rel="stylesheet" href="test.css"/>
    </head>

Lusiphur 185 Practically a Posting Shark Team Colleague Featured Poster · Answer 2 · 2010-07-01T22:03:19+00:00

Ya, my website follows the alternate image path concept as indicated above.

As I said last night, I was just trying to give an 'idea' of how to do it, not be the definitive answer to their needs lol. It was far too late in the evening for me to be doing all their work for them ;)

Help I need help converting my HTML code in to CSS

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers