CSS Newbie - help needed

triunereni · #1 (**permalink**) 07-13-2006, 07:45 PM

Hi,

I am lot of trouble with the css on my website. I have had my website for over a year and started out using Templates and SiteCreators. As I learned more I progressed to switching between code and wysiwyg. When I moved out of the SiteCreators it was necessary to edit the menu of my site in the code. I found the cascading style sheet but coudn't get it to work. So, I began to edit the menu page by page, in the wysiwyg. (I kick myself for that everytime add a new page) I have decided I should try and get the Css to work properly as my site is getting to big to maintain page by page.

The problem is that the css file does not seem to have anything specifically relating to the navigation bar (or my sidebar) rather just a 'body' section. I don't know how to add to it or fix it.

My css code is;

.header {
background-image: url(http://www.viewfromthemirror.com/My%...edBanner.jpg);
font-family: Arial, Helvetica, sans-serif;
font-size: 36px;
font-weight: bold;
color: #ffffff;

}
.menufont {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
font-weight: bold;
color: #c7ddeb;
text-decoration: none;

}
.bodytext {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff;
text-decoration: none;
}
.copyright {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #ffffff;
text-decoration: none;
}

And you could see the code of one of my pages by going to www.viewfromthemirror.com and viewing the source.

I've been working on this for three and a half hours today. All I want to do is be able to update the menu in one place and have it update all pages. If I ever got that accomplished I would like to be able to do the same with the right container/sidebar.

I would appreciate any help, ideas, suggestions or useful links. I just don't know where to start.

Thanks,

Coreyna.

curtiss · #2 (**permalink**) 07-13-2006, 09:10 PM

Well, there isn't anything in your CSS that affects your navigation bar, currently.

Also, I think you are slightly misunderstanding the purpose of CSS (much like I did when I first started looking into it, and just like many, many other people have on these boards).

CSS simply controls the "style" of your site. It can control the positioning of elements, the color, font, size, etc. of various elements on your site. It cannot include content for your site. If you want to use the exact same menu on every page of your site, then you need to look into server side includes. There are essentially two different types of server side includes. There are HTML includes, and there are PHP includes. Either way, basically what you do is create a single file that only contains the content of your menu. Then, in all of your pages, you replace your menu code with an "include" statement that "includes" your menu file in that spot.

Perform a Google search for information on server side includes (SSI).

john-formby · #3 (**permalink**) 07-14-2006, 02:16 AM

Here is a simple example of PHP SSI:

header.php

Code:

<html>
<head>
<title>TITLE OF SITE</title>
</head>
<body>

footer.php

Code:

</body>
</html>

index.php

Code:

<?php
include("header.php");
?>

SOME PAGE CONTENT

<?php
include("footer.php");
?>

header.php & footer.php contain the content that you want to display on every page. index.php is a normal page that calls these includes.

Hope this helps,

John

triunereni · #4 (**permalink**) 07-19-2006, 08:03 AM

Hi Guys,

Thanks for all the help, I really appreciate, I've been set on the right path. For the past couple of days I have been reading up on and learning about ssi's. Although I've made a lot of mistakes I finally got the nav bar to work as an include! Yay! The only problem I seem to be having now is that after placing the include into my webpage the page becomes to wide for the screen. Don't know why this would be happening as I copied the code directly from another page (no new code added) so it should work the same should it not.

A correctly working page is here; www.viewfromthemirror.com . It is not currently using ssi.

The page I am trying to get ssi to work on is www.viewfromthemirror.com/woe.shtml .

What I'm going to do is post twice, my next post being my include code (won't fit in this post) if there's no problem there maybe someone could take a quick look at the woe's source. .. Maybe I deleted something I shouldn't have when removing the nav bar code from it...

Again, thankyou for all your help, I'm so excited about this. The width problem is most likely something trivial as it is 11pm now and I'm pretty tired...

Cheers,

Coreyna

triunereni · #5 (**permalink**) 07-19-2006, 08:05 AM

This is the code I am using for my navigation bar include (I know the code looks extremely messy.. it was generated by a Wysiwyg when I first built my website)

Hopefully there is something helpful in there.

Code:

<TR>
<TD vAlign=top align=right width=100 bgColor=#000000>
<TABLE style="WIDTH: 100px; HEIGHT: 730px" cellSpacing=5 cellPadding=5 width=100>
<TBODY>
<TR align=middle>
<TD class=menufont align=right width="15%">
<P align=center><A href="http://www.viewfromthemirror.com/"><FONT face=Arial color=#11aaff size=2>HOME</FONT></A></P>
<P align=center><A href="http://viewfromthemirror.com/news.htm"><FONT face=Arial color=#1188ff size=2>News</FONT></A></P>
<P align=center>
<TABLE style="WIDTH: 120px; HEIGHT: 321px" cellSpacing=5 cellPadding=0 width=120>
<TBODY>
<TR align=middle>
<TD class=menufont align=right width="20%"><FONT face=Serif color=#11aaff size=3>
<P align=center></FONT><FONT face=Arial size=4>Books</FONT></P>
<P align=center><A href="http://www.viewfromthemirror.com/books.htm"><SPAN class=menufont><B><FONT face=Arial color=#1188ff size=2><U>Books</U></FONT></B></SPAN></A></P></TD></TR>
<TR align=middle>
<TD class=menufont align=right width="20%">
<P align=center><SPAN class=menufont><A href="http://www.viewfromthemirror.com/futurebooks.htm"><FONT face=Arial color=#1188ff size=2>Future Books</FONT></A></SPAN></P>
<P align=center><SPAN class=menufont><FONT face=Arial size=4>Book Stuff</FONT></SPAN></P></TD></TR>
<TR align=middle>
<TD class=menufont align=right width="20%">
<P align=center><A href="http://www.viewfromthemirror.com/histories.htm"><SPAN class=menufont><B><FONT face=Arial color=#1188ff size=2><U>Histories</U></FONT></B></SPAN></A></P>
<P align=center><A href="http://www.viewfromthemirror.com/threeworlds.htm"><FONT face=Arial color=#1188ff size=2>The Three Worlds</FONT></A></P>
<P align=center><FONT face=Arial size=4>Fun Stuff</FONT></P>
<P align=center><FONT face=Arial color=#11aaff size=2><U>F</U></FONT><A href="http://www.fanwork.viewfromthemirror.com/"><FONT face=Arial color=#11aaff size=2>anWork</FONT></A></P></TD></TR>
<TR align=middle>
<TD class=menufont align=right width="20%">
<P align=center><A href="http://www.viewfromthemirror.com/quizzes.htm"><SPAN class=menufont><B><FONT face=Arial color=#1188ff size=2><U>Quizzes</U></FONT></B></SPAN></A></P>
<P align=center><A href="http://viewfromthemirror.com/comp.htm"><FONT face=Arial color=#1188ff size=2>Competions</FONT></A></P>
<P align=center><FONT face=Arial size=4>Other</FONT></P></TD></TR>
<TR align=middle>
<TD class=menufont align=right width="20%">
<P align=center><A href="http://www.viewfromthemirror.com/ian.htm"><SPAN class=menufont><B><FONT face=Arial color=#1188ff size=2><U>Ian</U></FONT></B></SPAN></A></P>
<P align=center><FONT face=Arial color=#1188ff size=2><A style="BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; BORDER-LEFT: 0px solid; COLOR: #1188ff; BORDER-BOTTOM: 0px solid" href="http://viewfromthemirror.com/appearances.htm" target="">Appearances</A></FONT></P>
<P align=center><A href="http://www.viewfromthemirror.com/interviews.htm"><FONT face=Arial color=#1188ff size=2>Interviews</FONT></A></P>
<P align=center><A href="http://www.viewfromthemirror.com/links.htm"><FONT face=Arial color=#1188ff size=2>Links</FONT></A></P></TD></TR></TBODY></TABLE></P>
<P align=center><SPAN class=menufont><A href="http://www.viewfromthemirror.com/contactme.htm"><FONT face=Arial color=#1188ff size=2>Contact Me</FONT></A></SPAN><U></U></P></TD></TR>
<TR align=middle><!-- Start of StatCounter Code -->
<SCRIPT language=javascript type=text/javascript>
var sc_project=886016; 
var sc_invisible=0; 
var sc_partition=7; 
var sc_security="d7c298b2"; 
var sc_remove_link=1; 
</SCRIPT>
&nbsp;&nbsp;&nbsp; <script src="http://www.statcounter.com/counter/counter.js"></script><NOSCRIPT><IMG alt="best counter" src="http://c8.statcounter.com/counter.php?sc_project=886016&amp;java=0&amp;security=d7c298b2&amp;invisible=0" border=0> </NOSCRIPT><!-- End of StatCounter Code -->
<TD class=menufont align=right width="20%">
<P align=center>&nbsp;</P>
<P align=center><script src="http://pub17.bravenet.com/minipoll/show.php?usernum=1416476054&amp;cpv=2"></script></P></TD></TR>
<TR align=middle>
<TD class=menufont align=right width="20%"></TD></TR>
<TR align=middle>
<TD class=menufont align=right width="20%"></TD></TR>
<TR align=middle>
<TD class=menufont align=right width="20%"></TD></TR></TBODY></TABLE>
<P align=center><STRONG><U></U></STRONG>&nbsp;</P>
<DIV align=center>&nbsp;</DIV>
<P align=center><!-- End Bravenet.com Service Code -->

john-formby · #6 (**permalink**) 07-19-2006, 10:33 AM

Can you show the code for the page that calls the include please.

Thanks

Allen · #7 (**permalink**) 07-19-2006, 12:15 PM

I would suggest completely rewriting that code - it is in very bad shape.

Also - you have lots of scripts which I would remove for debugging.

triunereni · #8 (**permalink**) 07-19-2006, 04:38 PM

Here is the code for the page which I am trying to include the include in and yes, this code is awful as well.

Coreyna

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>View From The Mirror</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="/images335/css.css" type="text/css" rel="stylesheet">
</head>
<body bgcolor="#b5dbe6" topmargin="0">
<center>
<table cellspacing="0" cellpadding="0" width="800" border="0">
<tbody>
<tr valign="middle" align="center">
<td class="header" colspan="2" height="100">
<p><a href=""><font face="Arial Black" color="#6000c0" size="6"><em> </em></font></a></p></td></tr>
<tr>
<td width="640" bgcolor="#003d5c">
<table style="border-collapse: separate;" cellspacing="0" cellpadding="0" width="100%" bgcolor="#003d5c" border="0">
<tbody>
<tr>
<td valign="top" width="20%">
<div> </div></td>
<td valign="top" width="20%">
<div> </div></td>
<td valign="top" width="20%" rowspan="2">
<p align="center">
<table style="width: 606px; height: 700px;" cellspacing="5" cellpadding="0" width="606" border="0">
<tbody>
<tr align="center">
<td valign="top" width="20%">
<div> </div>
<div> </div>
<div> </div></td></tr>
<tr bgcolor="#002844"> </tr></tbody></table></p></td>
<td valign="top" width="20%">
<div> </div></td></tr>
<tr>
<td valign="top" width="20%">
<div> </div></td>
<td valign="top" width="20%">
<div> </div></td>
<td valign="top" align="center" width="20%">
<table style="width: 216px; height: 512px;" cellspacing="5" cellpadding="0" width="216" border="0">
<tbody>
<tr>
<td class="menufont" valign="top" align="center" width="20%" bgcolor="#002844"><strong><em><font color="#33eeff"> </font></em></strong></td></tr>
<tr>
<td valign="top" align="center" width="20%"><font color="#1188ff"> </font></td></tr>
<tr>
<td class="menufont" valign="top" align="center" width="20%" bgcolor="#002844"> </td></tr>
<tr>
<td valign="top" align="center" width="20%"><font color="#1188ff"> </font></td></tr>
<tr>
<td class="menufont" valign="top" align="center" width="20%" bgcolor="#002844"><strong><em><font color="#00eeff"> </font></em></strong></td></tr>
<tr>
<td valign="top" align="center" width="20%">
<p> </p></td></tr></tbody></table></td></tr></tbody></table></td></tr>
<tr valign="middle" align="center" bgcolor="#002844">
<td class="copyright" colspan="2" height="25"> </td></tr></tbody></table></center>
</body>
</html>

triunereni · #9 (**permalink**) 07-20-2006, 04:19 AM

Hi again,

I have fixed the problem and everything is now working perfectly. The problem was right in the middle of the code, for some reason it was set to table size; 606 px. A little big. I have changed it to 580. Thankyou so much for pointing me towards ssi, it's going to save me a lot of time.

Coreyna.