Lissa Explains it All:  Web Design Forums  

Go Back   Lissa Explains it All: Web Design Forums > LEIA Archives > Web Site Help > CSS

Notices

 
 
Thread Tools Display Modes
  #1  
Old 07-20-2004, 06:58 PM
Tinksie Belle Tinksie Belle is offline
n00bzilla
 
Join Date: Jul 2004
Location: USA
Posts: 12
Tinksie Belle is an unknown quantity at this point
CSS Not Working

Okay, I am making my first web page, although I do already know HTML codes and CSS basics (I have a pretty godd understanding), and decided to use a tutorial to make my layout. The tutorial involved making an HTML file and a CSS file. For some reason, though, none of the CSS is working. My banner is there, my text is there, the text is divided in tables (no lines though because that was done with CSS), but all customizing and designing that I used CSS for just seems to have no effect. My web host is freewebs.com, and I uploaded the file 'index.html' and 'style.css' to the server. Here is my page.

The HTML code:

<html>
<head>
<title>Eraser Smudge</title>
<link rel="stylesheet" href="style.css" type="text/css:>
</head>

<body bgcolor="#ffffff" text="#000000" link="0000ff" vlink="003399" alink="003399">

<table width="768" border="0" cellspacing="0" cellpadding="0" align="center" class="outline">
<tr>
<td class="botline"><img src="http://img78.photobucket.com/albums/v293/l3lackPearl/Animation/HeaderEraserSmudge.gif" width="765" height="120"></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="3" cellpadding="2" name="body">
<tr>
<td valign="top" width="130"><!-- start left navigation -->
<table width="100%" border="0" cellspacing="1" cellpadding="1" class="outline" name="menu">
<tr>
<td class="head">Menu Header</td>
</tr>
<tr>
<td class="menuBody">+ Links<br>
+ Links<br>
+ Links <br>
+ Links</td>
</tr>
</table><!-- end of left navigation -->
</td>
<td valign="top" class="outline"><!-- start contents cell -->
<p class="head">Sample Contents Here</p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>

<!-- end of contents cell --></td>
<td valign="top" width="130"><!-- start right navigation -->
<table width="100%" border="0" cellspacing="1" cellpadding="1" class="outline" name="menu">
<tr>
<td class="head">Menu Header</td>
</tr>
<tr>
<td class="menuBody">+ Links<br>
+ Links<br>
+ Links <br>
+ Links</td>
</tr>
</table><!-- end of right navigation -->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="footer">Eraser Smudge (c) 2004.</td>
</tr>
</table>

</body>
</html>

The CSS:

.outline { border-color: #6699ff #6699ff #669955; border-style: solid; border-top-width: 1px; border-right-width: 1 px; border-bottom-width: 1px; border-left-width: 1px}

.botline { border: #6699ff; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px}

.footer {border: #6699ff; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 0px; border-left-width: 1px}

.head { font-weight: bold; color: #00ccff; background-color: #003399; border: #6699ff; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
.menuBody { background-color: #000099}

body { font-family: Rugrats, Kids, Arial; font-size: 11px; color: #000000; background-color: #ffffff}
table { font-size: 11px}


I don't think I messed up the codes, but maybe I did. Also, does the main content text look a little crooked? O_o It does to me.
Sponsored Links
  #2  
Old 07-20-2004, 08:31 PM
Monkey Bizzle's Avatar
Monkey Bizzle Monkey Bizzle is offline
<-- lindsAy
 
Join Date: Feb 2004
Location: Craptown, Va.
Posts: 7,646
Monkey Bizzle will become famous soon enoughMonkey Bizzle will become famous soon enough
change the stuff in bold

<link rel="stylesheet" href="style.css" type="text/css">

you can eliminate some of this code by adding it to your CSS... delete the red...
<body bgcolor="#ffffff" text="#000000" link="0000ff" vlink="003399" alink="003399">


The CSS:

a:link
{color: #0000FF}
a:visited
{color: #003399}
a:active
{color: #003399}

.outline { border-color: #6699ff #6699ff #669955; border-style: solid; border-top-width: 1px; border-right-width: 1 px; border-bottom-width: 1px; border-left-width: 1px;}

.botline { border: #6699ff; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px;}

.footer {border: #6699ff; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 0px; border-left-width: 1px;}

.head { font-weight: bold; color: #00ccff; background-color: #003399; border: #6699ff; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px;}
.menuBody { background-color: #000099;}

body { font-family: Rugrats, Kids, Arial; font-size: 11px; color: #000000; background-color: #ffffff;}
table { font-size: 11px;}
  #3  
Old 07-20-2004, 10:12 PM
Tinksie Belle Tinksie Belle is offline
n00bzilla
 
Join Date: Jul 2004
Location: USA
Posts: 12
Tinksie Belle is an unknown quantity at this point
Yay! It works now! Thank you so much! Now I've just got to go change all of the colors. Heh.
  #4  
Old 07-22-2004, 12:52 AM
Tinksie Belle Tinksie Belle is offline
n00bzilla
 
Join Date: Jul 2004
Location: USA
Posts: 12
Tinksie Belle is an unknown quantity at this point
Grrrr

Okay, I changed some stuff up because I needed to change the color scheme (the colors before were examples from the tutorial), and now it isn't working again! I'm not sure why. Please help.

HTML Code:

<html>
<head>
<title>ThePixelDiaries</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>

<table width="768" border="0" cellspacing="0" cellpadding="0" align="center" class="outline">
<tr>
<td class="botline"><img

src="http://img78.photobucket.com/albums/v293/l3lackPearl/Animation/PixelDiariesHeader.gif" width="765"

height="120"></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="3" cellpadding="2" name="body">
<tr>
<td valign="top" width="130"><!-- start left navigation -->
<table width="100%" border="0" cellspacing="1" cellpadding="1" class="outline" name="menu">
<tr>
<td class="head">Menu Header</td>
</tr>
<tr>
<td class="menuBody">+ Links<br>
+ Links<br>
+ Links <br>
+ Links</td>
</tr>
</table><!-- end of left navigation -->
</td>
<td valign="top" class="outline"><!-- start contents cell -->
<p class="head">Sample Contents Here</p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Text Text Text Text Text Text Text Text Text Text Text </p>

<!-- end of contents cell --></td>
<td valign="top" width="130"><!-- start right navigation -->
<table width="100%" border="0" cellspacing="1" cellpadding="1" class="outline" name="menu">
<tr>
<td class="head">Menu Header</td>
</tr>
<tr>
<td class="menuBody">+ Links<br>
+ Links<br>
+ Links <br>
+ Links</td>
</tr>
</table><!-- end of right navigation -->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="footer">Eraser Smudge (c) 2004.</td>
</tr>
</table>

</body>
</html>

Style Sheet

a:link
{color:#0000ff}
a:visited
{color: #003399}
a:active
{color: #0000ff}

.outline { border-color: #D800FF #D800FF #D800FF; border-style: solid; border-top-width: 1px;

border-right-width: 1 px; border-bottom-width: 1px; border-left-width: 1px;}

.botline { border: #D800FF; border-style: solid; border-top-width: 0px; border-right-width: 0px;

border-bottom-width: 1px; border-left-width: 0px;}

.footer {border: #D800FF; border-style: solid; border-top-width: 1px; border-right-width: 1px;

border-bottom-width: 0px; border-left-width: 1px;}

.head { font-weight: bold; color: #FF0096; background-color: #ffffff; border: #D800FF; border-style: solid;

border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px;}
.menuBody { background-color: #ffffff; background-image: url(LinedPaper.gif); background-repeat: repeat;}

body { font-family: Lucida Handwriting, Arial; font-size: 13px; color: #FF0096; background-color: #ffffff; background-image:url(DearDiary.gif);}
table { font-size: 13px;}

^^Note: I also tried using the <style type="text/css"></style>, and it didn't work.

Sorry about the spacing. It got messed up when I transferred it from Notepad.
  #5  
Old 07-22-2004, 02:02 AM
Tinksie Belle Tinksie Belle is offline
n00bzilla
 
Join Date: Jul 2004
Location: USA
Posts: 12
Tinksie Belle is an unknown quantity at this point
I just can't find what's wrong! The same code worked on another page. Can someone please help me?
  #6  
Old 07-22-2004, 02:05 AM
creme_noire creme_noire is offline
n00bzilla
 
Join Date: Jul 2004
Posts: 27
creme_noire is an unknown quantity at this point
I dunno, but do you know very much about css? cause i need lots of help too! i cant get my back ground images to work! and for some reason, my whole page contents are in the middle...
  #7  
Old 07-22-2004, 02:23 AM
Monkey Bizzle's Avatar
Monkey Bizzle Monkey Bizzle is offline
<-- lindsAy
 
Join Date: Feb 2004
Location: Craptown, Va.
Posts: 7,646
Monkey Bizzle will become famous soon enoughMonkey Bizzle will become famous soon enough
okay, i didn't see anything wrong with your HTML but again, add the stuff in red to your style sheet...


a:link
{color:#0000ff;}
a:visited
{color: #003399;}
a:active
{color: #0000ff;}

that is the only thing that i can find wrong...
  #8  
Old 07-22-2004, 02:27 AM
Tinksie Belle Tinksie Belle is offline
n00bzilla
 
Join Date: Jul 2004
Location: USA
Posts: 12
Tinksie Belle is an unknown quantity at this point
Well, I fixed it. For some reason the background images weren't working. I uploaded them onto Freewebs, but it just wasn't connecting. I put them on Photobucket, and now it works. Thanks for that pointer though.
 

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump


All times are GMT. The time now is 07:14 AM.


Powered by vBulletin® Version 3.8.3
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.