squemish

Author Topic: I need help  (Read 1928 times)

dennard2324

  • Guest
I need help
« on: August 31, 2011, 11:38:07 pm »
Ok I am in IMD 212. I donot for the life of me uderstand creating xhtml pages and linking style sheets to them. Everytime I link it, it doesn't change anything and all of my pages are different. This is what I have for my style sheet so far:

#Body {
   font-size:18px;
   font-style:italic;
   font:Verdana, Geneva, sans-serif;
}

#wrapper {
   border:thin;
   width:auto;
}


#header {
   background-color:#F3F;
   border-top:#630;
   width:auto;
   font:bold;
   font:ChopinScript;
   color:#630;
   font-size:36px;
   text-align:center;
   
}

#link {
   font-family:"MS Serif", "New York", serif;
   font-size:14px;
   font-style:italic;
   color: #630;
}

#Footer {



   font-family:"MS Serif", "New York", serif;
   font-size:16px;
   border-color:#FCF;
   border-bottom:thick;
   width:auto;
   
}

This is the assignment:First, using any Web page that you created last week, apply the wrapper container to the main content.

Next, make a second copy of the same practice external style sheet and give it a new name. Apply a liquid layout. Next, apply the wrapper container to the main content of a second page you developed last week.

This is my xhtml pages:

home page:
<!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>Services</title>
<style type="text/css">
body,td,th {
   font-family: "MS Serif", "New York", serif;
   font-size: 36px;
   color: #FFF;
}
body {
   background-image: url(chocolate-wedding-cake.jpg);
   font-size: 14px;
   font-family: "Monotype Corsiva";
}
#wrapper p {
   font-family: ChopinScript;
   font-size: 36px;
   color: #F06;
}
a {
   font-family: "MS Serif", "New York", serif;
   font-size: 18px;
   color: #630;
}
a:visited {
   color: #F09;
}
a:hover {
   color: #FFF;
}
a:active {
   color: #630;
   font-size: 14px;
   font-family: "Monotype Corsiva";
   font-style: italic;
   font-weight: normal;
   text-decoration: underline;
}
footer div em {
   font-size: 16px;
}
a {
   font-size: 14px;
}
</style>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper">
  <p align="center">Baker's Maam</p>
</div>
<p>&nbsp;</p>

<footer>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p align="center"><em>
    <footer>
    </footer>
</em>
<footer>

<div align="center"><a href="#">Home</a> <a href="#">Gallery</a><a href="#">Services</a>
 
 
</div>
<div align="center"></div>
    <div align="center"><em>Ashley Grier 2011</em></div>
    </p>&nbsp;</p>
</footer>
</div>
</body>


</html>

Gallery page:
<!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>Services</title
>
<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#header {
   font-family: ChopinScript;
}
#header {
   font-size: 36px;
}
#header {
   color: #630;
}
</style>
</head>



<body>



<div id="header">
  <p align="center" id="header">Baker's Maam</p>
 </div>

<p>&nbsp;</p>

<footer>

<div id="footer">

<p align="center">Ashley Grier 2011</p> I can't get the footer to the bottom of the page
 
</div>
</body>
</html>

Services page:
<!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">
body,td,th {
   font-family: ChopinScript;
   font-size: 16px;
   color: #630;
}
body {
   background-color: #FCF;
   font-family: Georgia, "Times New Roman", Times, serif;
   margin-left: 5px;
   margin-top: 5px;
   margin-right: 5px;
   margin-bottom: 5px;
}
h1 {
   font-size: 36px;
   color: #630;
   font-family: ChopinScript;
}
a {
   font-family: "Monotype Corsiva";
   font-size: 14px;
   color: #630;
}
a:hover {
   color: #FFF;
}
a:visited {
   color: #00F;
}
a:active {
   color: #F06;
}
a:link {
   color: #630;
}
.footer {
   font-family: Georgia, Times New Roman, Times, serif;
}
.content {
   font-family: Georgia, Times New Roman, Times, serif;
}
</style>
<link href="file:///C|/Users/Owner/Documents/Bella Design Inc/cake.jpg.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body text="#FFFFB6">  <h1 align="center">Baker's Maam</h1>
<p align="center">&nbsp;</p>
<div id"baker"><span class="content">If You Are Looking For Customized, Ellaborate Cakes, Then You Have Come To The Right Place! Baker's Maam Will Customized Your Cakes To Fit Any Occassion</span>! </div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p align="center">For a Free quote, call 1800-WEDDING</p>
<p>&nbsp;</p>

<footer>
 
    <p>&nbsp;</p>
<p>
<em>
    <footer>
    </footer>
</em>
<footer>
  <p align="center"><em><a href="#">Home</a> <a href="gallery.html">Gallery</a> <a href="#">Services</a></em></p>
</footer>
    <em>    </em>
<div align="center"></div>
    <div align="center"><em>Ashley Grier 2011</em></div>
    </p>
</body>
</html>
PLEASE HELP!!!!!

Dawn Hawkins

  • Administrator
  • Hero Member
  • *****
  • Posts: 280
Re: I need help
« Reply #1 on: September 01, 2011, 12:26:43 am »
Can you post a link to what you have uploaded?  What I see from your code here is that you are controlling some elements with an external style sheet, but then are also controlling some of those same elements with an embedded stylesheet.  The embedded stylesheet will take priority over anything that is external, so in your home page for instance, you have these external styles:

#Body {
   font-size:18px;
   font-style:italic;
   font:Verdana, Geneva, sans-serif;
}

#wrapper {
   border:thin;
   width:auto;
}


#header {
   background-color:#F3F;
   border-top:#630;
   width:auto;
   font:bold;
   font:ChopinScript;
   color:#630;
   font-size:36px;
   text-align:center; 
}

#link {
   font-family:"MS Serif", "New York", serif;
   font-size:14px;
   font-style:italic;
   color: #630;
}
#Footer {
   font-family:"MS Serif", "New York", serif;
   font-size:16px;
   border-color:#FCF;
   border-bottom:thick;
   width:auto; 
}


but these embedded styles override some of the same styles you already created externally:
body {
   background-image: url(chocolate-wedding-cake.jpg);
   font-size: 14px;
   font-family: "Monotype Corsiva";
}
#wrapper p {
   font-family: ChopinScript;
   font-size: 36px;
   color: #F06;
}
a {
   font-family: "MS Serif", "New York", serif;
   font-size: 18px;
   color: #630;
}
a:visited {
   color: #F09;
}
a:hover {
   color: #FFF;
}
a:active {
   color: #630;
   font-size: 14px;
   font-family: "Monotype Corsiva";
   font-style: italic;
   font-weight: normal;
   text-decoration: underline;
}
footer div em {
   font-size: 16px;
}
a {
   font-size: 14px;
}

additionally you are using a #Body in the external stylesheet which states to look for an element with the id Body, not to apply that style to the <body> HTML element.  The same holds true with #Footer in the external stylesheet, that is looking for an element named Footer, not the HTML <footer> tag.  in order to make these styles apply to the <body> tag and the <footer> tag you would need the following:

body {
   font-size:18px;
   font-style:italic;
   font:Verdana, Geneva, sans-serif;
}

footer {
   font-family:"MS Serif", "New York", serif;
   font-size:16px;
   border-color:#FCF;
   border-bottom:thick;
   width:auto; 
}

dennard2324

  • Guest
Re: I need help
« Reply #2 on: September 01, 2011, 01:36:21 am »
Thanks for responding. Unfortunately, I am waiting for Technical Support. They're working on my student webspace so I haven't been able to upload anything. Is there another way you could view them? I zipped the folder with my assignment in it and attached what I have. I am really confused. I followed the tutorial on here but I really don't understand why my html page won't reflect what is on my style sheet. I changed the two items and it still didn't change. Hmmm.....
Thanks,
Ashley

erikkross

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 399
    • Personal Blog with Classroom Tutorials
Re: I need help
« Reply #3 on: September 01, 2011, 07:21:47 am »
Your styles.css file contains the following styles:


#header {
   background-color:#F9F;
   border-top:#630;
   width:auto;
   font:bold;
   text-align:center;
   
}


#linkSection {
   font-family:"Arial Black", Gadget, sans-serif;
   font-size:14px;
   font-style:italic;
   color:#630;
   
   
   
}

#Content {
   font-size:18px;
   font-style:italic;
   font:Verdana, Geneva, sans-serif;
   
}

#Footer {
   font-family:"MS Serif", "New York", serif;
   font-size:16px;
   border-bottom:thick;
   width:auto;
   
}

However, none of those page elements exist on your HTML page. For example, in home.html you do not have a <div> tag named "header" or "Content" or "Footer". The styles in you styles.css file are not being applied to your page because those page elements do not exist in your page.

I see you are using a "footer" tag: <footer>. In order to style that tag you would need to change #Footer to be just footer like so:

footer {
   font-family:"MS Serif", "New York", serif;
   font-size:16px;
   border-bottom:thick;
   width:auto;
   
}
Erikk Ross
The Art Institute of Pittsburgh, Online Division
Web Design and Interactive Media
Full Time Faculty
eross@aii.edu