nousername
09-30-2007, 03:07 PM
To All,
First I am new to CSS. I recently inherited a web site from another developer that left and been trying improve the site. Part of the improvements is moving items to a CSS file, but have a few question.
First how do I add something like this to a CSS file:
<span class="content">
<a href="#top">
<img src="images/top.gif" alt="Top of Page" width="17" height="14" border="0" align="middle"></a></span>
Second, I have tried to move the site's body tag to the CSS, but it fails. I have no idea what the background colors.
<link title="MainStyles" href="styles/DefaultStyles.css" type="text/css" rel="stylesheet">
</HEAD>
<BODY background="images/bg_test2.gif" link="#003366" vLink="#003366" aLink="#003366" leftMargin=0 topMargin=0 marginwidth="0" marginheight="0">
BTW - I am using MS Frontpage to edit the web site. The first developer used something to write the site in PHP, since that is what he liked. I have converted the entire site to standard HTML, JavaScript, and ASP.
Thanks!
Kravvitz
09-30-2007, 03:14 PM
Don't use FrontPage. It's so bad that MS discontinued it.
Here's the CSS code to replace all of those deprecated HTML attributes.
body {
background-image: url(images/bg_test2.gif);
margin: 0;
padding: 0;
}
a {
color: #003366;
}
a:visited {
color: #003366;
}
CSS Links for Beginners:
Adding a touch of style (http://www.w3.org/MarkUp/Guide/Style)
http://www.cssbasics.com/
http://www.htmldog.com/guides/cssbeginner/
Integrated Web Design: CSS Beyond the Retrofit (http://www.informit.com/articles/article.asp?p=169546&rl=1)
BrainJar.com: Using Style Sheets (http://www.brainjar.com/css/using/)
Web Design 101 Articles (http://www.digital-web.com/types/web_design_101/)
nousername
09-30-2007, 03:37 PM
Kravvitz,
What do you recommend to replace FrontPage?
Also when I added your body code to my CSS the background did not show.
I am calling the CSS this way: <link title="MainStyles" href="styles/DefaultStyles.css" type="text/css" rel="stylesheet">
Below is the CSS:
body
{
background-image: url(images/bg_test2.gif);
margin: 0;
padding: 0;
}
html
{
padding-top : 0;
padding-right : 0;
padding-bottom : 0;
padding-left : 0;
border-top-width : 0;
border-right-width : 0;
border-bottom-width : 0;
border-left-width : 0;
margin : 0;
}
H1
{
color: #003366;
font-size: 13pt; font-family:
Verdana, Arial, Helvetica, sans-serif; font-weight: bold;
margin-top:0;
margin-bottom: 0;
padding-top:0;
padding-bottom:0;
}
H3
{
color: #003366;
font-size: 7pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top:0;
margin-bottom: 0;
padding-top:0;
padding-bottom:0;
}
H4
{
color: #000000;
font-size: 7pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top:0;
margin-bottom: 0;
padding-top:0;
padding-bottom:0;
}
.blacksm
{
color: #000000;
font-size: 7pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
.blacksm2
{
color: #000000; font-size: 7pt;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif; margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
.blacklg
{
color: #000000;
font-size: 10pt;
font-family: Verdana, Arial, Helvetica, sans-serif
}
.content
{
color: #000000;
font-size: 8.5pt; font-family:
Verdana, Arial, Helvetica, sans-serif
}
.navtitle
{
color: #003366;
font-size: 8.5pt;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif
}
a.sidelinks:link
{
color: #003399;
text-decoration: none;
font-size: 7pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a.sidelinks:visited
{
color : #003399;
text-decoration: none;
font-size: 7pt; font-family:
Verdana, Arial, Helvetica, sans-serif;
}
a.sidelinks:active
{
color: #003399;
text-decoration: none;
font-size: 7pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a.sidelinks:hover
{
color: #003399;
background: #efefef;
text-decoration: none;
font-size: 7pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a.linktext:link
{
color: #003399;
text-decoration: none;
font-size: 10pt;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a.linktext:visited
{
color : #003399;
text-decoration: none;
font-size: 10pt;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a.linktext:active
{
color: #003399;
background: #efefef;
text-decoration: none;
font-size: 10pt;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a.linktext:hover
{
color: #003399;
background: #efefef;
text-decoration: none;
font-size: 10pt;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
switchcontent
{
color: #000000;
font-size: 7pt;
font-family: Verdana, Arial, Helvetica, sans-serif
}
Kravvitz
09-30-2007, 04:26 PM
Oops. I forgot to change the path.
body
{
background-image: url(../images/bg_test2.gif);
margin: 0;
padding: 0;
}
PSpad is a good editor. (http://www.pspad.com/) It's one of the ones I use. One of it's many features is a spell checker. You can download the dictionaries for that feature on the downloads page. You'll need to use a program like IZARC or WinZIP to extract the dictionary from the .cab file.
I suggest you read up on how to write more efficient CSS.
Writing Efficient CSS (http://www.communitymx.com/content/article.cfm?cid=90F55)
Efficient CSS with shorthand properties (http://www.456bereastreet.com/archive/200502/efficient_css_with_shorthand_properties/)
CSS Shorthand (http://codex.wordpress.org/CSS_Shorthand)
Grouping and Nesting (http://www.htmldog.com/guides/cssintermediate/grouping/)
CSS Selectors (http://juicystudio.com/article/div-mania.php#cssselector)
P.S. It would be helpful if you put your code between tags (http://www.phpbb.com/community/faq.php?mode=bbcode#f21) in the future.
nousername
09-30-2007, 04:49 PM
Kravvitz,
Thanks. I think that I have a bigger design problem. When I add the body tag in the CSS all the background colors vanish. The entire page is made up of tables that are creating individual background colors. Some background colors are listed by hex and others by name. Some colors tags are for PHP pages only.
Do you have any idea about adding that top tag that I wanted to the CSS file?
<a href="#top">
<img src="images/top.gif" alt="Top of Page" width="17" height="14" border="0" align="middle">
The other developer also has several tags like this at the bottom:
<TD width=144 background="images/content_bottom.jpg" bgColor="#e5e5e5"> 
Can I add something to the CSS to reduce these bottom tags?
Kravvitz
09-30-2007, 05:21 PM
You can't move elements to a stylesheet. You can only move the presentational things. For example, you can set the border and vertical-align properties for <img>s in the stylesheet.
Why should you avoid using tables for layout? (http://www.dynamicsitesolutions.com/html/tables-for-tabular-data-only/)
<td class="bottom">
td.bottom {
width:144px;
background-image:url(../images/content_bottom.jpg);
background-color:#e5e5e5;
}