HTML and CSS Help

stargate3216 · April 5 '06, 05:11 PM (#1)

Ok, I am trying to redo my site in CSS because I'm sick of spending hours updating ever page of my site. Now lots of people say "Oh CSS is so wonderful, it's easy and I love it!" I do not find it easy at all.
Here are my questions:
1. Let's say I have a column on 50 pages that I want to be the same, but I need to change its content. What is the best way to do this without editing 50 pages? Don't say CSS, because I can't put HTML and Javascript in CSS files.
2. How do you center tables in CSS? Please don't point me to a totorial, I've read a lot of these, and none of them have given me an answer. I want the table to accually be centered, not x pixels from the left or right.
3. How do you put objects side by side in CSS? I have three tables I want side by side, but they always end up on top of each other. How do I fix this?
4. What is the best way to convert 250 pages from HTML to CSS without working for 10 hours straight?
Sorry if I'm a little bit blunt, I've ask a lot of people these questions and never gotten any asks that were useful.

Eddy Bones · April 5 '06, 06:24 PM (#2)

1) The most plausible solution is to use a PHP include.
You would use something like below in place of the content to be shown (you'd have to put it on each page, of course), and in the file.ext you would put that content.

PHP Code:


			
<?php include("file.ext"); ?>

This is assuming you have PHP support.

2) Define the table's width in CSS, and then use margin: 0px auto;
I believe this will work, though I may be mistaken. I haven't used CSS on tables very much.

3) Tables automatically create a line break, so I think you'd have to use clear: none; on them. Again, I'm not completely sure of this solution, but it's worth a try.

4) I don't think you have much of a choice, unless you can use some sort of find and replace function in Dreamweaver or some other program. Would beat scanning the code and replacing stuff by hand. But you're bound to have to do a lot of work to fix it.

stargate3216 · April 5 '06, 09:24 PM (#3)

Thanks for the help.
I do have Dreamweaver, so if you know of a repet fuction that would be very helpful.
Is it possible to use PHP tags on a page that doesn't end in .php?

stargate3216 · April 5 '06, 09:45 PM (#4)

Darn, the php tag didn't work...the table came up blank.

audiofreak9 · April 6 '06, 12:59 AM (#5)

1. Make the column a <div> instead of a table or table cell. Assign each of those 50 column (divs) the same class on each page they appear, changing only the content for each page, not the class. They will have the same look/feel but different content. Fortunately if you make one CSS change ALL of the 50 columns look/feel will change on each page.

2. Wrap the table(s) in one <div> that has the CSS code: margin: 0px auto;

3. ~~I believe assigning the table(s) a class that includes the CSS: display: inline would work.~~ Or wrap each in a <div> and assign each <div> the following CSS: float: left;. Don't forget you will nead a clearing <div> for the floats: clear: both;

4. Make a finalized template that will be for all the 250 pages. Then just copy/paste the content into the template's HTML, saving each under the correct page name. YES it will suck!

Includes would make this most easy as Eddy stated

. Typically the header, navigation, and footer don't change, allowing you to just write them once and globally include them.

I'm sure you have heard this before, try to avoid tables, using <div> and <span> instead.

karinne · April 6 '06, 08:45 AM (#6)

1- If you're not going to be using PHP in your site I suggest Server-Side Includes (SSI).

- Rename your pages to have the .shtml extension instead of .html .

- The portion you want to include in all your files, put it in a separate file and call it whatever.inc (it can be .html or .ssi - extension doesn't matter here)

- In your file you want to include this whatever file you put

Code:

<!--#include file = "whatever.inc" -->

That's it ... you're done.

There's more info in a tutorial on this site - The Basics of Server Side Includes -

stargate3216 · April 6 '06, 04:30 PM (#7)

Ok, how to I use these tags? They don't work. I put in all the right stuff and rename the files and upload it. When I go to my site, it just says "error processing command" in the spot where the content should have been.
What is wrong? Also, is there any way to use these tags without changing the name of ever single page? That also includes all the links, and it would take hours. I've seen sites that use php tags on pages ending in .html, how do they do this?
I have a javascript/CSS menu on my site, and it uses JavaScript tags to put the menu on ever page. All I have to do it update one file and the whole site updates. Is there any way I could use Javascript tags to update multiple pages at once?

stargate3216 · April 6 '06, 06:52 PM (#8)

Quote:

Originally Posted by audiofreak9

2. Wrap the table(s) in one <div> that has the CSS code: margin: 0px auto;

setting the margin: 0px auto only puts the columns on the far left part of the page, and I don't know if it's possible to put all the tables in one <div>

audiofreak9 · April 6 '06, 07:18 PM (#9)

Quote:

Originally Posted by stargate3216

setting the margin: 0px auto only puts the columns on the far left part of the page, and I don't know if it's possible to put all the tables in one <div>

Sure it is, it's like the <body> tag wraps the body of the webpage. Place it before the table(s) start, and at the end of the table(s), wrapping the table(s).

stargate3216 · April 6 '06, 07:25 PM (#10)

But then how do I specipy tables? Most of the time its like
<div id=header>dfjsdlkjfnasd;lkfa</div>
<div id=body>sfasdfasdfasdf</div>

stargate3216 · April 6 '06, 07:30 PM (#11)

Another question:
My site is in one big folder, and my site is pretty big, so it makes it really hard to find things. I would make subfolders exept when I do it wrecks all my links and my javascript menu. Lets say I want a to make a link on epsiodes/101.htm to actorbios/RDA.htm. If I just put actorbios/RDA.htm as the url of the address, the link takes me to epsiodes/101.htm/actorbios/RDA.htm which doesn't exist. How do I correct this problem?

stargate3216 · April 6 '06, 07:37 PM (#12)

I think I answered my own question. You'd go ../actorbios/RDA.htm right?

audiofreak9 · April 6 '06, 07:49 PM (#13)

/ = the root folder
./ = the current folder
../ = one level up the folder tree

audiofreak9 · April 6 '06, 07:53 PM (#14)

Quote:

Originally Posted by stargate3216

But then how do I specipy tables? Most of the time its like
<div id=header>dfjsdlkjfnasd;lkfa</div>
<div id=body>sfasdfasdfasdf</div>

It seems FF doesn't allow the tables to line up inline, even when wrapped in a <div>.

stargate3216 · April 6 '06, 10:28 PM (#15)

Quote:

Originally Posted by audiofreak9

/ = the root folder
./ = the current folder
../ = one level up the folder tree

../../ is two levels up right?

audiofreak9 · April 6 '06, 10:43 PM (#16)

I do not believe so. I would start at the root at that point and add the folders from there.

**mlseim** · April 7 '06, 01:32 PM (#17)

With all of your pages, how much is common between the pages?

I'm still thinking you could use PHP ... I just think you did something wrong
when you did the include. And the name of the pages should have the
extension .php (example: index.php instead of index.html )

Once you have one file that defines the common parts of all your pages, like the
header, footer, basic CSS layout ... that page becomes your "template". Using PHP,
you go into the pages with some variables that define what content will appear in
the content areas of the page.

An example of this is here: http://www.palosantodesigns.com/

The main page is "index.php" ...
Now, mouse over the links in the navigation column (on the left) and look
at the URLs for those links. They all refer to a PHP page called: "page.php"
with a variable assigned that tells the PHP script which content to put into
the content area. So in effect, the whole site (28 pages) has about 3
actual PHP pages and a bunch of text files (for the content) ... and one
CSS style sheet file. With 1 alteration to the CSS file, every page gets
affected as they all use the same CSS file. To change the content on any
page, a plain text file is edited and uploaded by the site owner.

Does this make sense? It's hard to explain on this forum ...

EDIT:
I just noticed this sentence you made on your first post:
"Don't say CSS, because I can't put HTML and Javascript in CSS files"

CSS is "cascading style sheet" ... in the example above, it's one text file
that defines the look and layout for specific areas <div>'s on the web pages.
Your HTML file loads the .css file in the <head> section of each page. Now,
you can access the various <div>'s within your HTML file and do Javascripting,
and PHP stuff, you can even use <tables> There's nothing wrong with mixing
tables and CSS ... it's done all the time, especially for tabular data such as
image galleries, calendars, and other information taken from a database.

.

stargate3216 · April 7 '06, 04:32 PM (#18)

Quote:

Originally Posted by audiofreak9

I do not believe so. I would start at the root at that point and add the folders from there.

Umm...ok. I have a javascript menu and in it I have to put links to different folders. Heres the file structure:
/www/
........./sg1/
................./eps/
............................/file1
......../sga/
.............../eps/
.........................../file2
lets say I need to make a link from file1 to file2. How would I do this?

stargate3216 · April 7 '06, 05:26 PM (#19)

Well I answered my own question again by reading the post about links again.
Here's a different question. How do I make the image that this random image selecter shows into a link? Here's the code.
EDIT: I'd like the picture to become a link, not the code its self.

Code:

<HEAD>
<script language="JavaScript">
theImages[0] = 'banner1.jpg'
theImages[1] = 'banner2.jpg'
theImages[2] = 'banner3.jpg'
theImages[3] = 'banner4.jpg'
theImages[4] = 'banner5.jpg'
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
   preBuffer[i] = new Image()
   preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}
//-->
</script>
</HEAD>
<BODY>
<script language="JavaScript">
<!--
showImage();
//-->
</script>
</html>

HTML and CSS Help

Lots of questions relating to HTML and CSS