Solved

need to place css within html -- not working

Posted on 2008-10-22
7
313 Views
Last Modified: 2012-06-21
Hi there  -- I need to replace all imported css files and have the css reside within the html doc. However, when i copy the main.css file and place within the html a few things break.  It works fine via import though so i dont understand why it would render differently.  the zip file contains an index.txt which needs extension changed to html to view (unable to upload .html file not an allowed ext.)  also same goes for the css files in the css folder. All ext need to change to .css
082208National.zip
0
Comment
Question by:WebGirlCrissy
  • 3
  • 2
  • 2
7 Comments
 
LVL 39

Expert Comment

by:Roger Baklund
Comment Utility
You use relative urls, most starting with "../images/". Did you change these when you put it in the html?
0
 
LVL 1

Expert Comment

by:downtap
Comment Utility
Can you show us your html page so that we can see where an error might have come about?
0
 

Author Comment

by:WebGirlCrissy
Comment Utility
The html file is in the attachment (had to change ext to index.txt to be able to upload) change the extension to .html and change the files in the css folder to .css extension.  If you try to copy and paste the main.css file within the .html file instead of attaching it some css doesnt work.  But if you keep the css file attached it looks fine. I need to have the css within the html doc.

I did not change the urls -- The images seem to be ok when i copy/paste-- i think its something in the css? Although i'm unsure. . . .
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 1

Assisted Solution

by:downtap
downtap earned 200 total points
Comment Utility
Oops. Sorry, didn't see the file attachment. :)

Just looking at first blush, this is how you would place the css directly in your html.
Like the other poster said, make sure the images are being linked to properly. Lastly, you do have some css and html errors, but I I'm not sure if that's affecting your css. What exactly is breaking? Might just have to break them down one at a time, but my first suggestion would be to resolve all the errors.
<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Driving Tomorrows Business</title>
 

<style type="text/css">

/*  Tags Declaration  */

BODY {

    margin: 0;

    padding: 0;

    text-align: center;

	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

    background: #000000 url("../images/backgrounds/bg-body.jpg") repeat-x left top;

}

A {text-decoration: none;}

A:HOVER {text-decoration: underline;}

IMG {border: none;}
 

.relax{

	clear: both;

	height: 0;

	line-height: 0px;

	font-size: 0;

}
 

/*  Page  */

#page {

    margin: auto;

    text-align: left;

	width: 977px;

}

.left-col {

	width: 751px;

	float: left;

	padding-bottom: 20px;

}

.left-col IMG.logo {float: left;} 

.left-col H1 {

	padding: 0px;

	margin: 0px;

	font-size: 24px;

	color: #FFFFFF;

	font-style: italic; 

	margin: 28px 0 0 20px;

	display: block;

	float: left;

	font-weight: normal;

}

.main-menu {

	width: 596px;

	float: right;

	margin-top: -23px;

	left: 0px;

	top: 0px;

}

.l-menu {

	width: 31px;

	height: 31px;

	float: left;

	background: url("../images/backgrounds/l-bg-menu.gif") no-repeat left top;

}

.r-menu {

	width: 21px;

	height: 31px;

	float: left;

	background: url("../images/backgrounds/r-bg-menu.gif") no-repeat left top;

}

.main-menu-content {

	width: 544px;

	float: left;

	background: url("../images/backgrounds/bg-menu.gif") repeat-y left top;

	border-bottom: 1px solid #F7D07F;

	height: 30px;

}

.main-menu UL {

	padding: 0px;

	margin: 0px;

	list-style: none;

	height: auto;

	width: 537px;

	float: left;

	padding: 7px 0 0 7px;

}

.main-menu UL LI {

	padding: 0px;

	margin: 0px;

	float: left;

	display: inline;

	background: url("../images/backgrounds/border-li.gif") no-repeat right center;

	position: relative;

	top: 0px;

	left: 0px;

	z-index: 20000;

}

.main-menu UL LI.last-li {background: none;} 

.main-menu UL LI A {

	padding: 0px;

	margin: 0px;

	font-size: 11px;

	color: #000000;

	padding: 3px 7px 7px 5px;

	display: block;

}

.main-menu UL LI A:HOVER, .main-menu UL LI A.selected {

	text-decoration: none;

	color: #FFFFFF;

} 

.main-menu UL LI:HOVER .sub-block {display: block;}

.main-menu UL LI .sub-block {display: none;}

.main-menu UL LI.call-plans:HOVER .sub-block-three {display: block;}

.main-menu UL LI.call-plans .sub-block-three {display: none;}

.sub-block {

	width: 158px;

	float: left;

	position: absolute;

	left: -10px;

	top: 14px;

	z-index: 2001 !important;

	margin-top: 10px;

}

.sub-block-three {

	width: 158px;

	float: left;

	position: absolute;

	left: 142px;

	top: -8px;

	z-index: 2001 !important;

	margin-top: 10px;

}

.sub UL.submenu LI.first-li-three {

	border-top: 1px solid #E4E3E4;	

}

.sub-block-three .sub {

	border-top: none;

} 

.sub-block-three .sub UL.submenu {

	margin-top: 0px;

}

.sub {

	width: 158px;

	float: left;

	background: url("../images/backgrounds/bg-sub-menu.png") repeat-y left top;

	border-top: 1px solid #FFFFFF;

}

.bot-sub-menu {

	width: 100%;

	float: left;

	height: 8px;

	background: url("../images/backgrounds/bot-sub-menu.png") no-repeat left top;

}

.sub UL.submenu {

	width: 146px;

	background: none;

	border: none;

	float: left;

	list-style: none;

	margin: 0;

	padding: 0;

	margin-top: -2px;

}

.sub UL.submenu LI {

	float: left;

	width: 147px;

	margin: 0;

	padding: 0;

	position: relative;

	background: none;

	margin: 0 0 0 8px;

	background: url("../images/backgrounds/border-sub-menu.gif") repeat-x left bottom;

}

.sub UL.submenu LI.last-sub-li {

	background: url("../images/backgrounds/border-last-li.gif") repeat-x left bottom;

}

.sub UL.submenu LI A {

	float: none;

	display: block;

	font-size: 10px;

	color: #FFFFFF;

	padding: 5px 0px 10px 10px;

	z-index: 100;

	text-transform: none;

	position: relative;

	display: block;

}

.sub UL.submenu LI A:HOVER {text-decoration: none;}

.sub UL.submenu LI:HOVER {background: #FDC54D;}

.white-block {

	width: 100%;

	float: left;

	background: #FFFFFF;

	position: relative;

	z-index: 1;

} 

.bottom-corner-left {

	width: 100%;

	float: left;

	background: url("../images/corners/left-bottom-white.gif") no-repeat left bottom;

	padding-bottom: 23px;

	position: relative;

}

.white-block IMG {

	float: left;

	margin: 15px 0 0 10px;

}

.place-order {

	width: 124px;

	height: 47px;

	float: left;

	background: url("../images/buttons/place-order.png") no-repeat left top;

	margin-left: -124px;

	margin-top: 164px;

}

.place-order A {

	padding: 0px;

	margin: 0px;

	font-size: 13px;

	color: #29190D;

	margin: 7px 5px 0 18px;

	padding: 3px 0;

	font-weight: bold;

	background: url("../images/icons/place-order-icon.gif") no-repeat right 6px;

	display: block;

	position: relative;

}

.place-order A.dcp-icon {background: url("../images/icons/dcp-icon.gif") no-repeat right 6px;}

.place-order A:HOVER {

	text-decoration: none;

	color: #FFFFFF;

}

.place-order.center-img {

	width: 135px;

	margin-left: -135px;

	background: url("../images/buttons/dcp-services.png") no-repeat left top;

}

.right-col {

	width: 215px;

	float: left;

	margin-left: 9px;

	margin-top: 90px;

	position: relative;

	left: 0px;

	top: 0px;

	display: inline;

}

UL.top-menu {

	padding: 0px;

	margin: 0px;

	list-style: none;

	float: right;

	margin-right: 50px;

	display: inline;

}

UL.top-menu LI {

	display: inline;

	font-size: 11px;

}

UL.top-menu LI A {

	padding: 0px;

	margin: 0px;

	color: #29190D;

	font-size: 11px;

}

.search-form {

	width: 100%;

	float: left;

	margin-top: 5px;

}

.search-form INPUT {

	width: 164px;

	float: left;

	background: #FFFFFF;

	border: 1px solid #868889;

	color: #808183;

	font-size: 10px;

	padding: 3px;

} 

.search-form INPUT.go-search {

	border: none;

	width: 16px;

	height: 16px;

	background: url("../images/buttons/go-search.gif") no-repeat left top;

	cursor: pointer;

	margin: 3px 0 0 7px;

	display: inline;

}

.line-pink-icon {

	width: 100%;

	float: left;

	margin-top: 10px;

	margin-left: 4px;

	display: inline;

	position: relative;

	z-index: 200;

}

.line-pink-icon IMG {

	margin-right: 6px;

	display: inline;

}

.welcome {

	width: 100%;

	float: left;

	margin-left: 4px;

	display: inline;

	margin-top: 10px;

	padding-bottom: 10px;

}

.welcome H1 {

	padding: 0px;

	margin: 0px;

	font-size: 17px;

	color: #291C13;

	font-weight: normal;

	line-height: 21px;

}

.welcome H1 SPAN {font-size: 12px;}

.welcome H1 A {color: #291C13;}

.welcome H1 A.region {

	color: #291C13;

	background: url("../images/backgrounds/bord-region.gif") no-repeat right top;

	padding-right: 7px;

} 

.welcome H1 A.region.last-reg {background: none;}

.welcome H1 A.region:HOVER {

	color: #FFFFFF;

	text-decoration: none;

}

.hot-list {

	width: 201px;

	float: left;

	background: #FFFFFF;

	margin-top: 5px;

	margin-left: 2px;

	display: inline;	

}

.yellow-block {

	width: 201px;

	float: left;

	background: #FFC64E;

	border: 1px solid #8F6F2C;

	margin-top: 5px;

	margin-left: 2px;

	display: inline;

}

.yellow-block.pink-block {

	background: #EC4696;

	border: none;

}

.yellow-block.pink-block.no-border {background: none;}

.corner-yellow {

	width: 100%;

	float: left;

	background: url("../images/corners/corner-yellow.gif") no-repeat right top;

	position: relative;

	top: -1px;

	left: 1px;

}

.corner-yellow.corner-pink {

	background: url("../images/corners/corner-pink-top.gif") no-repeat right top;

	margin-left: -1px;

}

.corner-yellow-bottom {

	width: 100%;

	float: left;

	background: url("../images/corners/corner-yellow-bottom.gif") no-repeat right bottom;

	position: relative;

	bottom: -2px;

}

.corner-yellow-bottom.corner-pink-bottom {

	background: url("../images/corners/corner-pink-bottom.gif") no-repeat right bottom;

	position: relative;

	left: 1px;

} 

.corner-hot-list {

	width: 100%;

	float: left;

	background: url("../images/corners/top-hot-list.gif") no-repeat left top;

}

.hot-list.no-background {background: none;}

.corner-hot-list.corner-hot-list-black {background: url("../images/corners/corner-hot-list-black.gif") no-repeat right top;}

.corner-hot-list-bottom {

	width: 100%;

	float: left;

	background: url("../images/corners/bottom-hot-list.gif") no-repeat left bottom;

	line-height: 0px;

	font-size: 1px;

	margin-top: -5px;

}

.corner-hot-list-bottom.corner-hot-list-bottom-black {background: url("../images/corners/corner-hot-list-bottom-black.gif") no-repeat right bottom;}

.white-bg {

	width: 100%;

	float: left;

	background: #FFFFFF;

	padding-bottom: 5px;

}

.pink-bg {

	width: 200px;

	float: left;

	background: #EC4696;

	margin-top: -1px;

	border-right: 1px solid #A33B5C;

}

.hot-list H1 {

	padding: 0px;

	margin: 0px;

	font-size: 18px;

	color: #EC4E9A;

	background: url("../images/backgrounds/border-hot-list.gif") repeat-x left bottom;

	padding: 14px 0 15px 10px;

	line-height: 16px;

}

.yellow-block H1 {

	width: 186px;

	padding: 0px;

	margin: 0px;

	font-size: 18px;

	color: #FFFFFF;

	padding: 14px 0 15px 10px;

	background: url("../images/backgrounds/border-yellow.gif") repeat-x left bottom;

}

.yellow-block.pink-block H1 {background: url("../images/backgrounds/border-pink.gif") repeat-x left bottom;} 

.yellow-block P {

	padding: 0px;

	margin: 0px;

	font-size: 11px;

	color: #FFFFFF;

	padding: 14px 10px 0 10px;

}

.yellow-block P SPAN {font-size: 12px;}

.yellow-block P.national {

	padding: 0 10px 0 10px;

	color: #722A40;

}

.yellow-block IMG {

	float: right;

	margin-right: 20px;

	display: inline;

}

.yellow-block.pink-block IMG.miles {

	float: left;

	margin-left: 10px;

	display: inline;

	margin-top: 5px;

}

.hot-list UL {

	padding: 0px;

	margin: 0px;

	list-style: none;

	margin-left: 10px;

	display: inline;

	float: left;

	width: 190px;

	margin-top: 5px;

}

.hot-list UL LI {

	width: 100%;

	float: left;

}

.hot-list UL LI A {

	font-size: 11px;

	color: #695E55;

	margin-top: 3px;

	background: url("../images/icons/icon-hot-list.gif") no-repeat left center;

	padding-left: 10px;

	line-height: 17px;

}

.see-more {

	width: 100px;

	float: right;

	text-align: right;

	margin-right: 22px;

	display: inline;

}

.see-more A {

	padding: 0px;

	margin: 0px;

	font-size: 12px;

	color: #695E55;

	background: url("../images/icons/icon-more.gif") no-repeat right center;

	padding-right: 19px;

	line-height: 16px;

	display: block;

	padding-bottom: 5px;

}

.see-more A.more-yellow {

	background: url("../images/icons/icon-more-yellow.gif") no-repeat right center;

	margin-top: 5px;

} 

.see-more A.more-pink {

	background: url("../images/icons/icon-more-pink.gif") no-repeat right center;

	margin-top: 5px;

} 

.icon-14 {

	width: 17px;

	float: left;

	position: relative;

	margin-top: -10px;

	margin-left: 70px;

	display: inline;

	z-index: 500;

}

.icon-14 P {

	padding: 0px;

	margin: 0px;

	font-size: 7px !important;

	color: #FFFFFF;

	padding: 4px 5px 5px 4px;

	background: url("../images/icons/icon-14.gif") no-repeat right center;

	display: block;

}

@media screen and (-webkit-min-device-pixel-ratio:0){

    .icon-14 A {

	padding: 4px 5px 5px 1px;

}

}

/*  Fix for Safari  */

/*\*/

html>body* .icon-14 A {padding: 4px 5px 5px 4px !important;}

.icon-14 A:HOVER {text-decoration: none;}

.line-pink-icon A {

	float: left;

	padding: 0 3px 0 0;

	border: none;

}

.line-pink-icon UL {

	padding: 0;

	margin: 0;

	list-style-type: none;

}

.line-pink-icon UL LI {

	float: left;

	position: relative;

	left: 0;

	top: 0;

	z-index: 10000;

}

.line-pink-icon A:HOVER {text-decoration: none; }

.return-to-national {

	width: 105px;

	display: block;

	height: 26px;

	background: url("../images/buttons/return-to-national.png") no-repeat left top;

	position: absolute;

	left: 0;

	top: -10px;

	display: none;

	z-index: 1000;

	left: 24px;

}

.line-pink-icon UL LI:HOVER .return-to-national {display: block;}

.img-block {

	width: 45px;

	float: left;

	margin: 15px 9px 0 14px;

	display: inline;

	padding-bottom: 18px;

}

.ticker-container {

	float: left;

	width: 450px;

	font-size: 14px;

	color: #29190D;

	font-style: normal;

	position: relative;

	left: 19px;

}

.footer {

	width: 440px;

	float: left;

	margin-top: 8px;

}

P.footer {

	padding: 0px;

	margin: 0px;

	font-size: 9px;

	color: #CA9D3E;

	margin-left: 8px;

	display: inline;

}

P.footer A {

	color: #FFFFFF;

	text-decoration: underline;

}

P.footer A:HOVER {text-decoration: none;}

.empty-block {

	width: 280px;

	float: right;

	background: #FFFFFF;

	border-bottom: 1px solid #C4C4C4;

}

.left-corner-empty-block {

	width: 100%;

	background: url("../images/corners/corner-empty-block.gif") no-repeat left bottom;

	height: 19px;

	position: relative;

	bottom: -1px;

}

/*Sub Page2*/

.return-to-national.return-to-my-portal {background: url("../images/buttons/return-to-my-portal.png") no-repeat left top;}

.white-bg.servicing-white-bg {text-align: center;}

.hot-list.no-background.no-top-hot-list {margin-top: 0px;}

.yellow-list {

	width: 205px;

	height: 193px;

	float: left;

	background: url("../images/backgrounds/bg-yellow-list.gif") no-repeat left top;

	margin: 10px 0 0 2px;

	display: inline;

}

.yellow-list H1.new-for-members {

	color: #211D1E;

	font-weight: normal;

	margin: 0px;

	font-size: 18px;

	padding: 10px 0 12px 8px;

	background: url("../images/backgrounds/border-yellow.gif") repeat-x left bottom;

	margin-left: 2px;

}

H1.no-weight {font-weight: normal;}

.corner-hot-list-bottom.servicing-bottom {height: 16px; margin-top: 0px;}

.corner-yellow.corner-yellow-sub {background: url("../images/corners/corner-yellow-sub.gif") no-repeat right top;}

UL.yellow-list-links {

	padding: 0px;

	margin: 0px;

	list-style: none;

	padding-bottom: 6px; 

	float: left;

	width: 192px;

}

UL.yellow-list-links LI {float: left; width: 100%;}

UL.yellow-list-links LI A {

	background: url("../images/icons/icon-yellow-list.gif") no-repeat left top;

	padding: 0 0 0 9px;

	font-size: 12px;

	text-decoration: underline;

	color: #3D2C1C;

	display: block;

	margin: 10px 0 0 16px;

}

UL.yellow-list-links.pink-list-links LI A {

	background: url("../images/icons/icon-pink-list.gif") no-repeat left top;

	text-decoration: none;

}

UL.yellow-list-links.pink-list-links LI A:HOVER {text-decoration: underline !important;} 

UL.yellow-list-links LI A:HOVER {text-decoration: none;}

.top-white-block {

	width: 100%;

	float: left;

	background: url("../images/backgrounds/top-white-block.gif") no-repeat left top;

	height: 17px;

	line-height: 0px;

	font-size: 1px;

}

.white-center H1.orange-title {

	color: #F26721;

	margin: 0;

	padding-bottom: 20px;

	width: 400px;

}

.welcome-block {

	width: 400px;

	float: left;

	display: inline;

	margin: 15px 0 0 30px;

	padding-bottom: 90px;

}

.welcome-block P {

	padding: 0px;

	margin: 0px;

	font-size: 12px;

	color: #61534C;

}

.welcome-block IMG {

	float: left; 

	margin: 0 7px 0 0;

	display: inline;

}

.latest-news {

	width: 220px;

	float: left;

	display: inline;

	margin: 20px 0 0 50px;

	padding-bottom: 90px;

}

.latest-news H2 {

	padding: 0px;

	margin: 0px;

	font-size: 17px;

	color: #291A10;

	font-weight: normal;

	background: url("../images/icons/icon-latest-news.gif") no-repeat left center;

	padding-left: 20px;

} 

.latest-news IMG {float: left;} 

.news-block H3 {

	padding: 0px;

	margin: 0px;

	font-size: 11px;

}

.news-block P A.orange-link {

	background: url("../images/icons/icon-more-orange.gif") no-repeat right center;

	padding-right: 12px;

	font-size: 12px;

	color: #F27F3E;

	border: 1px solid #FFFFFF;

}

.orange-form-border-bottom {

	width: 212px;

	float: left;

	margin: 15px 0 0 15px;

	display: inline;

	padding-bottom: 21px;

	background: url("../images/backgrounds/border-hot-list.gif") repeat-x left bottom;

}

.orange-form {

	width: 210px;

	float: left;

	border: 1px solid #F79968;

	background: #F4793C;

}

.orange-corner {

	width: 100%;

	float: left;

	background: url("../images/corners/orange-corner.gif") no-repeat left top;

	position: relative;

	top: -1px;

	left: -1px;

	padding-bottom: 6px;

}

.orange-form INPUT.login-button {

	width: 28px;

	height: 28px;

	background: url("../images/buttons/login-button.gif") no-repeat left top;

	border: none;

	cursor: pointer;

	float: left;

}

.orange-form H1 {

	font-size: 18px;

	font-style: normal;

	margin: 0px;

}

.orange-form LABEL {

	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

	font-size: 11px;

	color: #29190C;

	cursor: pointer;

	float: left;

	margin-top: 5px;

	padding-bottom: 6px;

}

.orange-form INPUT.n-p {

	width: 162px;

	background: #FFFFFF;

	border: 1px solid #A09FA0;

	margin-top: 8px;

	font-size: 9px;

	padding: 2px 0 4px 3px;

	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

}

.orange-form A.forgot-pass {

	font-size: 9px;

	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

	color: #FFFFFF;

	line-height: 15px;

}

.orange-form P {

	padding: 0px;

	margin: 0px;

	font-size: 10px;

	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

	color: #432C1D;

	font-weight: bold;

}

.orange-form P A {

	font-family: Arial, Helvetica, sans-serif;

	color: #FFFFFF;

}

.content-orange-form {

	width: 170px;

	float: left;

	display: inline;

	margin: 18px 0 0 20px;

}

.l-menu.l-menu-white {

	width: 30px;

	height: 30px;

	background: url("../images/backgrounds/l-bg-menu-white.gif") no-repeat left top;

}

.r-menu.r-menu-white {

	width: 20px;

	height: 30px;

	background: url("../images/backgrounds/r-bg-menu-white.gif") no-repeat left top;

}

.main-menu-content.main-menu-content-white {

	height: 29px;

	background: #FFFFFF;

	width: 546px;

	border: none;

	border-top: 1px solid #E1CEB6;

}

.main-menu UL.white-main-menu {margin-left: 48px; width: 480px !important;}

.main-menu UL.white-main-menu LI {background: url("../images/backgrounds/border-li-pink.gif") no-repeat right center;}

.main-menu UL.white-main-menu LI.last-li {background: none;}

.main-menu UL.white-main-menu LI A:HOVER {

	text-decoration: none;

	color: #F26638;

} 

.sub.orange-sub {

	background: #F8C457 !important;

	border: none;

	opacity: 0.9;

	position: relative;

	//filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);

        -moz-opacity: 0.9;

        -khtml-opacity: 0.9;

}

.sub.orange-sub UL.submenu LI {background: none !important;} 

.sub.orange-sub UL.submenu LI A {

	color: #291A10; 

	background: url("../images/backgrounds/border-submenu.gif") repeat-x left bottom;

	margin-right: 10px;

	padding-top: 5px;

	font-weight: bold;

	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

	font-size: 10px;

}

.sub.orange-sub UL.submenu LI A.last-li-submenu {background: none;}

.sub.orange-sub UL.submenu LI A:HOVER {color: #F06A22;}

.sub-block.left-sub-block {left: -3px !important;}

.hot-list H1.serv-title {padding: 5px 0 10px 10px;}

.welcome.welcome-sub {

	margin-top: 3px;

	padding-bottom: 7px;

}

.yellow-block.yellow-block-sub {margin-top: 9px;}

.yellow-block.pink-block.no-border.pink-block-top-sub {margin-top: 12px;}
 

.logged-link {

	width: 140px;

	float: left;

	margin-top: 7px;

}

.pass-block {

	width: 100%;

	float: left;

}

.corner-yellow-bottom.corner-pink-bottom.l-corner-pink-bottom  {

	background: url("../images/corners/l-corner-pink-bottom.gif") no-repeat left bottom;

	position: relative;

	left: 0px;

	top: 0px;

} 
 

.center-block {

	width: 100%;

	float: left;

	margin-top: 10px;

}

.center-block H1 {

	padding: 0px;

	margin: 0px;

	font-size: 14px;

	color: #29190D;

	font-style: normal;

}

.with-links {

	width: 280px;

	float: right;

	background: #FFFFFF;

	border-top: 1px solid #DBC7AF;

	margin-top: 5px;

}

.with-links P {

	padding: 0px;

	margin: 0px;

	font-size: 10px;

	font-weight: bold;

	color: #000000;

	margin: 6px 0 0 18px;

}

.with-links P SPAN {

	color: #EC4696;

	background: url("../images/icons/icon-black.gif") no-repeat left center;

	padding-left: 10px;

}

.left-white-corner {

	width: 100%;

	float: right;

	background: url("../images/corners/left-corner-white.gif") no-repeat left top;

	position: relative;

	top: -1px;

}

.left-white-corner.left-white-corner-center {

	background: url("../images/corners/left-corner-white-center.gif") no-repeat left top;

	top: 0px;

	left: -1px;

	padding-bottom: 70px;

}

.white-center {

	width: 750px;

	float: left;

	background: #FFFFFF;

	border-left: 1px solid #CBBCAB;

}

.white-center H1 {

	padding: 0px;

	margin: 0px;

	font-size: 20px;

	margin: 20px 0 0 29px;

	width: 690px;

	display: inline;

}

.column {

	width: 327px;

	float: left;

	margin-left: 30px;

	display: inline;

	margin-top: 20px;

}

.gray-block {

	width: 327px;

	float: left;

}

.head-gray-block {

	width: 100%;

	float: left;

	height: 30px;

	background: url("../images/backgrounds/bg-head-gray-block.gif") repeat-x left top;

}

.head-gray-block H1 {

	padding: 0px;

	margin: 0px;

	font-size: 16px;

	color: #855C1E;

	margin: 5px 0 0 16px;

	width: 180px;

	display: inline;

}

.head-gray-block P {

	padding: 0px;

	margin: 0px;

	color: #855C1E;

	font-size: 12px;

	float: right;

	margin: 7px 10px 0 0;

	display: inline;

}

.head-gray-block A {

	color: #855C1E;

	font-weight: bold;

	text-decoration: underline;

}

.head-gray-block A:HOVER {

	text-decoration: none;

}

.content-gray-block {

	width: 100%;

	float: left;

	background: #EDEAE7 url("../images/backgrounds/bg-gray-block.gif") repeat-x left bottom;

	padding-bottom: 15px !important;

	display: inline;

}

.content-gray-block IMG {

	float: left;	

}

.content-gray-block UL {

	width: 236px;

	float: left;

	padding: 0px;

	margin: 0px;

	list-style: none;

	margin-top: 5px;

}

.content-gray-block UL LI A {

	padding: 0px;

	margin: 0px;

	font-size: 12px;

	color: #73675C;

	background: url("../images/icons/list-style-gray.gif") no-repeat left top;

	padding-left: 14px;

}
 
 

/*Sub-page*/

.left-block-content {

	width: 437px;

	float: left;

	margin: 19px 0 0 29px;

	display: inline;

}

.left-block-grey {

	width: 437px;

	float: left;

	background: #EDEAE7;

	margin-top: 1px;

	height: 204px;

}

.left-block-grey  H1 {

	padding: 0px;

	margin: 0px;

	font-size: 17px;

	color: #EC4696;

	font-weight: normal;

}

.left-block-grey UL {

	padding: 0px;

	margin: 0px;

	list-style: none;

	float: left;

	margin-top: 16px;

}

.left-block-grey UL.right-ul {

	margin-left: 10px;

	margin-top: 0px;

}

.left-block-grey UL LI {margin-top: 5px;}

.left-block-grey UL LI A {

	padding: 0px;

	margin: 0px;

	font-size: 12px;

	color: #73675C;

	background: url("../images/icons/list-style-gray.gif") no-repeat left 5px;

	padding-left: 14px;	

	line-height: 23px;

	display: block;

}

.left-block-grey H1.my-prof-title {width: 160px;}

.place-order.sub-place-order {

	margin-left: 0px;

	margin-top: 0px;

}

.left-img-grey-block {

	width: 72px;

	float: left;

	margin: 14px 0 0 17px;

	display: inline;

}

.order-block {

	width: 155px !important;

	float: left;

	margin: 26px 0 0 26px;

	display: inline;

}

.title-my-profile {

	float: left;

	margin: 10px 0 0 16px;

	display: inline;

	width: 180px;

}

.my-profile-block {

	float: left;

}

.my-profile-block.two-col-my-profile-block {

	margin: 10px 0 0 10px;

	display: inline;

	width: 220px;

}

.place-order.sub-place-order.profile-place-order {margin: 5px 0 0 90px; display: inline;}

.my-profile-block H2 {

	padding: 0px;

	margin: 0px;

	font-size: 12px;

	color: #000000;

	font-style: italic;

	margin-top: 15px;

	padding-bottom: 10px;

}

.my-profile-block P {

	padding: 0px;

	margin: 0px;

	font-size: 11px;

	line-height: 17px;

}

.order-block H1 {width: 150px;}

.right-part-grey-block {

	width: 160px;

	float: left;

	margin: 15px 0 0 5px;

	display: inline;

}

.top-grey-block {

	width: 250px;

	float: left;

}

.top-grey-block UL {

	padding: 0px;

	margin: 0px;

	float: left;

	list-style: none;

}

.top-grey-block UL LI {

	float: left;

	display: inline;

	margin-right: 3px;

}

.top-grey-block UL LI SPAN {

	background: #E8E4E0;

	display: block;

	padding: 6px 15px 7px 13px;

}

.top-grey-block UL LI SPAN:HOVER, .top-grey-block UL LI A.select SPAN {background: #E6619A;}

.top-grey-block UL LI A {

	padding: 0px;

	margin: 0px;

	font-size: 13px;

	color: #EC4696;

	display: block;

}

.top-grey-block UL LI A:HOVER, .top-grey-block UL LI A.select {

	color: #FFFFFF;

	text-decoration: none;

}

.weather-block {

	width: 100%;

	float: left;

	margin-top: 10px;

}

.weather-header {

	width: 100%;

	float: left;

	background: url("../images/backgrounds/bg-weather-header.gif") repeat-x left top;

	height: 31px;

}

.weather-header H1 {

	width: 240px;

	padding: 0px;

	margin: 0px;

	font-size: 18px;

	color: #FFFFFF;

	font-weight: normal;

	margin: 3px 0 0 10px;

}

.weather-header H1 SPAN {

	font-size: 12px;

	color: #EC4696;

}

.weather-header A {

	padding: 0px;

	margin: 0px;

	font-size: 11px;

	float: right;

	color: #FFFFFF;

	background: url("../images/icons/weather-link-icon.gif") no-repeat right top;

	padding: 0 23px 0 0;

	margin: 8px 10px 0 0;

}

.day {

	width: 100%;

	float: left;

	background: #CFCBC8 url("../images/backgrounds/bg-day.gif") repeat-x left top;

	padding-bottom: 3px;

}

.day H1 {

	width: 90px;

	padding: 0px;

	margin: 0px;

	font-size: 12px;

	color: #807C78;

	font-weight: normal;

	float: left;

	margin: 5px 0 0 45px;

}

.day H1 SPAN {color: #EC4696;}

.weather-content {

	width: 100%;

	float: left;

	background: #DAD8D6 url("../images/backgrounds/bg-weather-content.gif") repeat-x left top;

}

.weather-content-block {

	width: 120px;

	float: left;

	margin: 8px 0 0 17px;

	display: inline;

	text-align: center;

}

.weather-content-block P {

	padding: 0px;

	margin: 0px;

	font-size: 11px;

	color: #807C78;

	text-align: left;

}

.weather-content-block P SPAN {font-size: 10px;}

.weather-content-block IMG {margin: 10px 0 0 0;}

.border-grey {

	width: 2px;

	float: left;

	background: #C2BEBB;

	height: 75px;

	margin: 10px 0 0 0;

}

.weather-footer {

	width: 100%;

	float: left;

	background: #DAD8D6 url("../images/backgrounds/bg-weather-footer.gif") repeat-x left top;

}

.weather-form {

	width: 208px;

	float: right;

	margin-top: 7px;

	padding-bottom: 7px;

}

.weather-form LABEL {

	width: 100px;

	float: left;

	font-size: 11px;

	letter-spacing: -1px;

	color: #807C78;

	margin-top: 2px;

}

.weather-form INPUT.in-text {

	width: 71px;

	float: left;

	background: #FFFFFF;

	border: 1px solid #C4C4C4;

	padding-left: 3px;

}

.weather-form INPUT.weather-button {

	width: 13px;

	height: 12px;

	float: left;

	border: none;

	background: none;

	cursor: pointer;

	margin: 2px 0 0 10px;

	display: inline;

	background: url("../images/buttons/weather-button.gif") no-repeat left top;

}

.right-block-content {

	width: 230px;

	float: left;

	margin: 0 0 0 30px;

	display: inline;

	margin-top: -42px;

}

.right-block-content H1 {

	float: left;

	font-size: 17px;

	margin-left: 0px;

	width: 200px;

}

.right-block-content H2 {

	padding: 0px;

	margin: 0px;

	font-size: 13px;

	color: #000000;

}

.right-block-content H2.small-title {font-size: 11px;}

.right-block-content H2.with-icon-h2 {

	background: url("../images/icons/icon-hot-list.gif") no-repeat left center;

	padding-left: 10px;

	margin-top: 5px;

	width: 200px;

	float:left;

}

.right-block-content A {

	padding: 0px;

	margin: 0px;

	background: url("../images/icons/read-more-pink.gif") no-repeat right center;

	padding-right: 12px;

	font-size: 12px;

	color: #EC4696;

} 

.right-block-content A.top-link {margin-left: 12px;}

.news-block {

	width: 100%;

	float: left;

	margin-top: 20px;

}

.news-block IMG {

	float: left;

	margin: 0 7px 0 0;

}

.news-block P {

	padding: 0px;

	margin: 0px;

	font-size: 11px;

}

#imblock {

	float: left;

	width: 437px;

	height: 204px;

	margin: 0;

	padding: 0;

}

</style>

<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="public/css/ie6.css" /><![endif]-->

<!--[if gt IE 6]><link rel="stylesheet" type="text/css" href="public/css/ie7.css" /><![endif]-->

<script src="public/js/jquery-1.2.6.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){

	$(".top-grey-block a").click(function(){

		var largePath = $(this).attr("href");

  		$("#imblock").animate({height: "hide"}, 300);

		$("#imblock").load(largePath);

		$("#imblock").animate({height: "show"}, 300);

		$(".top-grey-block a").removeClass("select");

		$(this).addClass("select");

		return false;

	});

});

</script>
 
 

</head>

<body>

    <!-- Page -->

    <div id="page">

    

       <div class="left-col">

       		<a href="#"><img src="public/images/logotypes/national-dcp.gif" alt="National DCP" class="logo" /></a>

       		<h1>Driving Tomorrow's Business</h1>

       		<div class="main-menu">

       			<div class="l-menu l-menu-white"></div>

	       		<div class="main-menu-content main-menu-content-white">

	       		<ul class="white-main-menu">

	       			<li><a href="#">About Us</a>

	       				<div class="sub-block left-sub-block">

		       				<div class="sub orange-sub">	

			       				<ul class="submenu">

			       					<li><a href="#">History</a></li>

			       					<li><a href="#">Mission</a></li>

			       					<li><a href="#">Services</a></li>

			       					<li><a href="#">Locations</a></li>

			       					<li><a href="#">Quality</a></li>

			       					<li><a href="#" class="last-li-submenu">Charity</a></li>

			       				</ul>	

		       				</div>

	       				</div>

	       			</li>

	       			<li><a href="#">Management Team</a></li>

	       			<li><a href="#">Membership Info</a></li>

	       			<li><a href="#">Careers</a></li>

	       			<li class="last-li"><a href="#">Contact Us</a></li>

	       		</ul>

	       		</div>

	       		<div class="r-menu r-menu-white"></div>

       		</div>

       		<div class="white-block"><div class="bottom-corner-left">

       			<div class="orange-form-border-bottom">

	       			<div class="orange-form">

	       				<div class="orange-corner">

	       					<form action="#">

	       						<div class="content-orange-form">

	       							<h1>Your DCP Login</h1>

	       							<label for="login">Enter your Member login <br />information here:</label>

	       							<input type="text" id="login" class="n-p" value="User Name" onblur="if(this.value == '') this.value = 'User Name'" onfocus="if(this.value == 'User Name') this.value = ''" />

	       							<input type="text" class="n-p" value="Password"/>

	       							<div class="pass-block"><a href="#" class="forgot-pass">Forgot Password?</a></div>

	       							<div class="logged-link"><p>STATUS | <a href="#">Logged On</a></div>

	       							<input type="submit" value="" class="login-button" />

	       						</div>

	       					</form>

	       				</div>

	       			</div>

       			</div>

       			<img src="public/images/pictures/big-img.jpg" alt="" />

       		

       		</div></div>

       		

    <div class="center-block">   		

       		<div class="top-white-block"></div>

       			<div class="white-center">

       				<div class="welcome-block">

       					<h1 class="orange-title">Welcome to the National DCP</h1>	

       					<img src="public/images/pictures/welcome-img.jpg" alt="" /> 

       					<p>Ipsum dolor sit amet consectetuer adipiscing. Illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio? Dolore te feugait nulla facilisi Nam liber tempor cum soluta nobis. Quinta decima Eodem modo typi qui nunc nobis? Aliquip ex ea commodo consequat Duis autem vel eum iriure dolor in hendrerit in vulputate. Dolore magna aliquam erat volutpat Ut wisi. 

							Dolor in hendrerit in vulputate velit esse molestie consequat vel, processus dynamicus qui sequitur mutationem consuetudium, at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit? Feugait nulla facilisi Nam liber tempor

						</p>

       				</div>

       				<div class="latest-news">

       					<h2>Latest NDCP News</h2>

       					<div class="news-block">

       						<img src="public/images/pictures/latest-news-1.jpg" alt="" />

       						<p>Ipsum dolor sit amet consectetuer adipiscing. Illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio? Dolore te feugait nulla facilisi Nam liber tempor cum soluta nobis. Quinta decima Eodem modo typi qui nunc nobis? 

       						<a href="#" class="orange-link">Read More</a>

       						</p> 

       					</div>

       					<div class="news-block">

       						<img src="public/images/pictures/latest-news-2.jpg" alt="" />

       						<h3>Personnel Profile</h3>

       						<p><a href="#" class="orange-link">Read More</a></p> 

       					</div>

       					<div class="news-block">

       						<h3>Personnel Profile</h3>

       						<p>Ipsum dolor sit amet consectetuer <a href="#" class="orange-link">Read More</a></p> 

       					</div>

       				</div>

       			</div>

       			<div class="footer">

       			<p class="footer">Copyright 2008 National DCP, LLC. All Rights Reserved. <a href="#">Terms of Use.</a> <a href="#">Privacy Policy.</a></p>

       			</div>

       			<div class="empty-block">

       				<div class="left-corner-empty-block">

      	 				&nbsp;

       				</div>

       			</div>

       		</div>

       </div>

       <div class="right-col">

       		<ul class="top-menu">

       			<li><a href="#">Help</a></li>

       			<li>|</li>

       			<li><a href="#">Log Out</a></li>

       		</ul>

       		<form action="#">

       			<div class="search-form">

       				<input type="text" value="SEARCH" onblur="if(this.value == '') this.value = 'SEARCH'" onfocus="if(this.value == 'SEARCH') this.value = ''"/>

       				<input type="submit" value="" class="go-search"/>

       			</div>

       		</form>

       		<div class="line-pink-icon">

				<ul>

	       			<li><a href="#"><img src="public/images/icons/icon-pink-4.gif" alt="" /></a>

						<div class="return-to-national return-to-my-portal">&nbsp;</div>

					</li>

				</ul>

       		</div>

       		

       		<div class="welcome welcome-sub">

       			<h1>Welcome <a href="#"><strong>John Smith</strong></a></h1>

       			<h1><span>Your Region: <a href="#" class="region">MA</a> <a href="#" class="region">MW</a> <a href="#" class="region">NE</a> <a href="#" class="region last-reg">SE</a></span></h1>

       		</div>

       		<div class="hot-list no-background no-top-hot-list">

       			<div class="corner-hot-list">

       				<h1 class="serv-title no-weight">Servicing</h1>

       			</div>

       			<div class="white-bg servicing-white-bg">	

       				<a href="#"><img src="public/images/pictures/servicing.jpg" alt="" /></a>

       			</div>

       			<div class="corner-hot-list-bottom servicing-bottom">

       			</div>

       		</div>

     

     		<div class="yellow-list">

     			<h1 class="new-for-members">What's New for <br />Members</h1>

     			<ul class="yellow-list-links">

	       			<li><a href="#">Maecenas Lectus Enim <br /> Etiam</a></li>

	       			<li><a href="#">Nulla Dolor Elit</a></li>

	       			<li><a href="#">Mauris Sagittis Venen</a></li>

       			</ul>

       			<div class="see-more">

       				<a href="#" class="more-yellow">See More</a>

       			</div>

     		</div>

       					

       		<div class="yellow-block pink-block no-border pink-block-top-sub">

       			<div class="corner-yellow corner-pink corner-pink-position">

       				<h1 class="no-weight">The NDCP Delivers</h1>

       			</div>

       			<div class="pink-bg">

       				<div class="corner-yellow-bottom corner-pink-bottom l-corner-pink-bottom">

       					<ul class="yellow-list-links pink-list-links">

	       					<li><a href="#">Services over 5,000 U.S.<br />Shops</a></li>

	       					<li><a href="#">Exports to over 23 <br />international locations</a></li>

	       					<li><a href="#">Provides High Speed network <br />in over 5,000 domestic <br />locations</a></li>

	       					<li><a href="#">Purchases 90 million lbs of <br />coffee per year</a></li>

       					</ul>

       					<div class="see-more">

       						<a href="#" class="more-pink">See More</a>

       					</div>

       				</div>

       			</div>

       		</div>

       		

       </div>  

    </div>    

</body>

</html>

Open in new window

0
 

Author Comment

by:WebGirlCrissy
Comment Utility
if you compare the two attached screen shots you'll see the difference - when css linked externally it looks great, however when place the code in the html things are not appearing correctly.  There the top navigation corners missing and the white box above Welcome to. . , the box color on the right missing.
strange. . . .??
withExternalCSSlinking.jpg
withCSSinHTML.jpg
0
 
LVL 39

Accepted Solution

by:
Roger Baklund earned 300 total points
Comment Utility
These impacts seems to have to do with graphics. When the css is moved to the html document, the relative urls "../images/" should be changed to "public/images/".
0
 

Author Closing Comment

by:WebGirlCrissy
Comment Utility
thank you both--i see that now! -- updating the image path works.
:)
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now