What am I missing here?

fididdly · #1 (**permalink**) 09-21-2009, 10:09 PM

I've been trying to upload a template-based web page. I managed to upload a really ugly basic site using Kompozer, but it was my own html code.

There must be some basic/knucklehead/noob step I'm missing. I use a Mac OS 10.5.8. I've tried cutting and pasting the CSS code (the best ones seem to be in CSS) in both TextWrangler and TextEdit, then copying and pasting them into the text window where you put your own HTML code. It doesn't work in either Kompozer or Nvu, which I tried.

Honest, ishkey, I've spent many hours on this, and I've gone over and over your tutorials and lots of others people's too!

Can somebody clue me in? Pleeeze? Thanx.

Mimoun · #2 (**permalink**) 09-22-2009, 02:54 PM

Which version of KompoZer are you using?
Some versions of KompoZer on the Mac have problems with ftp publishing.
Click -> Kompozer -> About Kompozer

ishkey · #3 (**permalink**) 09-22-2009, 02:54 PM

Hello fididdly and welcome to FWT.
Hats off to you for uploading Your Own Code, there is no such thing as a really ugly basic site when you are starting out. The beauty lies in the code you created.

I'm not a Mac user but suggest you stick with TextWrangler over TextEdit, it's not BBEdit but it's beyond BBEdit Lite, as it has remote FTP/SFTP, can perform Find Differences on pairs of files or folders, code writing, or Web site maintenance.
Not bad for a freebe.

Quote:

I've tried cutting and pasting the CSS code (the best ones seem to be in CSS) in both TextWrangler and TextEdit, then copying and pasting them into the text window where you put your own HTML code. It doesn't work in either Kompozer or Nvu, which I tried.

Ok - let's slowdown for a few milliseconds... With all the excessive rain we have had here, it has impeded my xray vision, so I can not see your code or even your your website.

Tried cut/pasting css code in text window where you put html code!!!
Did you write your own css code?
If you did - then in the html file it should look some thing like this (example code);

Code:

<html>
<head>
<style type="text/css"> 
<!--
body {
 font-family: "Courier New", Courier, monospace;
 color: #333;
}
a:link {
 color: #000;
}
a:visited {
 color: #F00;
}
a:hover {
 color: #00F;
}
-->
</style>
</head>
 <body>
 your code here
 more code here
</body>
</html>

or are you tring to reference an external style sheet?
All of us (there are several talented people here) need a little more info to help you out.
Post a link or some of the code you are describing, so we can help you solve this.

fididdly · #4 (**permalink**) 09-22-2009, 06:40 PM

I used Kompozer 0.7.10-mac.dmg. I also tried it with nvu-1.0-mac.dmg.

I was referencing an external style sheet--specifically, the style.css file that opens up in TextWrangler or TextEdit. Actually I copied the html directly from the style.css file. Maybe that's my noob error, but I don't know how else you're supposed to do it.

I tried it with two from www.oswd.org ("lovely" and "cash") and with "babytemplate" just posted on your web site. Tried the first two with all the different permutations of Kompozer/Nvu/TextWrangler/TextEdit.

Learning lots of stuff, that's for sure. Thank you for your help!

ishkey · #5 (**permalink**) 09-23-2009, 01:13 AM

The rain has finally stopped after 9 days straight, cleaned up all the downed trees and my connection is less spotty, but still no email.
Back to your problem - This makes no sense.

Quote:

Actually I copied the html directly from the style.css file.

All of the templates you downloaded came with;
index.html - the file a browser reads which inside tells it "what to display" and it is the file you edit to put in your own words and pictures.
This file is written in html code.
styles.css - stands for Cascading Style Sheets. Styles define "how to display" HTML elements. Written in css code. For now you should just leave this alone...
images directory - Is just a depository for the graphic files which make up the template and can also be a place for you to store your graphic files. Like the pictures in the gallery of the babytemplate. I make a seperate directory for my pics. This way if something needs changing I don't mess up my template. I use alot of directories, so I can group things. Another example is a directory for my java files, another one for my php files, the list goes on and on. (it's a smart way to program - organization)

Next - this is in reference to the "babytemplate" but the other two templates will be the same execpt for the path in the example below.

Open your editor and load index.html from the babytemplate.
In your index.html file in the "<head> </head>" section, which is at the start of the file, is a line of text which tells the browser to go look in the root directory for a file called style.css. In it you will find all the rules to display the code that is written in the index.html file.
Here is that line of code

HTML Code:

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

Lets break it down - look at your index.file in your editor. Look right after the <body> tag you will find the tag <div id="container">
Next comes the tag we want to look at <div id="header"></div>
As it is displayed, it doesen't look like much, does it!
What it tells the browser is to display the header here. Now because of the link to the style.css and the <div id the browser knows to go look in the style.css file and find the formatting properties for this tag.

Are you with me so far... Good

Now open your style.css file look for the header id - #header

Code:

#header {
 background-image:url(images/header.jpg);
 width: 707px;
 height:300px;
 display:block;
 margin:0px;
 padding:0px;
}

What does this tell the browser.
Display a background image called header.jpg located in the images directory and use these parameters when displaying it.

The css file is made up of Elements, IDs and Classes
Each has it's function and all make up the css code or language.

When you are not sure or just need to reference something look to w3schools.com

I think this should clear things up for you.
If not we are here.
Let us know how it goes - make sure you put up a link so we can follow your work and stay active on the forum. People can always benefit from what you learn. We have forums for that.

fididdly · #6 (**permalink**) 09-23-2009, 03:20 AM

Thanks, ishkey...will try it and then post.

fididdly · #7 (**permalink**) 09-25-2009, 12:04 AM

Sorry for the delay--my host was down for a full day

I've kinda sorta gotten a start here. The template doesn't look right (I tried to edit it) but all the text is up on the screen, and the text I input in the head is there where it's supposed to be. So now I can fumble-foot forward.

THANK YOU ishkey and Mimoun. Things are looking up!

fididdly · #8 (**permalink**) 09-25-2009, 12:33 AM

Okay, newbie confession: The problem apparently was that I didn't click the <>Source tab at the bottom of the text portion of the Nvu window.

Miles to go.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode