Happy Atheist Forum

Getting To Know You => Ask HAF => Topic started by: Whitney on May 05, 2009, 10:40:28 AM

Title: How the hell do I code this?
Post by: Whitney on May 05, 2009, 10:40:28 AM
I'm trying to code a website template I created in Illustrator for myself.  I downloaded Amaya which is an open source alternative to programs like dreamweaver.  I have looked at some tutorials but can't get the background images to show up.

#content {
width=600px;
height=510px;
background-color: #546789;
background-image: url(../images/base_02.gif);
background-repeat: no-repeat;
background-attachment: fixed;
}

It also doesn't work with the full url

<div class="content">
</div>

This is what the template looks like http://archgraphics.deviantart.com/art/ ... -121512944 (http://archgraphics.deviantart.com/art/ArchGraphics-Website-Template-121512944)  I already have it sliced.

I guess it is possible that amaya sucks and I need to find a better open source editor.  I've been working on this for 3 hours trying to figure out the code and have only gotten as far as the above with no results.  I don't know what I'm doing wrong.  

So, does anyone know of a good open source editor and a good (like with step by step pictures) tutorial for this?
Title: Re: How the hell do I code this?
Post by: karadan on May 05, 2009, 03:07:48 PM
Hi.

I sent your post to a friend. The below is his response. Please forgive me if it doesn't make much sense but computer programming goes right over my head.

Yes that looks like CSS.  she needs to check that the base_02.gif image in above the directory this file is saved in and that it is in a subfolder of that directory called "images".

Of course she also says that it doesn't work with the full path so she may have already addressed that.


And then:

It probably wont fix it if she understands directory structure.  Which I guess she will.  Can't really help without seeing her webspace.  She should stay away from WYSIWYG tho! tell her to do everything in notepad!

Hope that helps Whitney. If you have any other questions, my mate Alex is a freak with MySql and Phpbb.
Title: Re: How the hell do I code this?
Post by: Whitney on May 05, 2009, 06:52:31 PM
karadan, tell your friend thanks for trying to help.  If I knew how to code it I wouldn't need WYSIWYG.  I edit the whole forum with notebook++ or whatever that beefed up notebook program is called.

Since he didn't notice any code issues, I'm going to assume the  WYSIWYG editor simply isn't working properly.  I'll try throwing the files in an online folder and see if it starts working.  Maybe i'll end up having to code this in notebook after all.
Title: Re: How the hell do I code this?
Post by: AlP on May 06, 2009, 04:28:36 AM
Try changing "#content" to ".content". Like this:
.content {
width=600px;
height=510px;
background-color: #546789;
background-image: url(../images/base_02.gif);
background-repeat: no-repeat;
background-attachment: fixed;
}

'#' selects elements by id attribute. '.' selects them by class attribute.
Title: Re: How the hell do I code this?
Post by: Whitney on May 06, 2009, 05:28:12 AM
that's probably the issue.  I was wondering how to know when to use # or .  I guess now I know.

Thanks!
Title: Re: How the hell do I code this?
Post by: MikeyV on May 06, 2009, 06:52:11 AM
Quote from: "Whitney"that's probably the issue.  I was wondering how to know when to use # or .  I guess now I know.

Thanks!

To expand: # is a one time deal. Only one element can be have an id of a certain name. So, if you have <div id="header"></div>, the css will reference it like #header.

A class can encompass several elements. Like <div class="warning"></div> and then another div with the same class, the css references it with dot notation like .warning.

Clear as mud?

Just remember, a class can be used several times where each id must be unique.
Title: Re: How the hell do I code this?
Post by: Whitney on May 06, 2009, 08:20:27 AM
Quote from: "MikeyV"
Quote from: "Whitney"that's probably the issue.  I was wondering how to know when to use # or .  I guess now I know.

Thanks!

To expand: # is a one time deal. Only one element can be have an id of a certain name. So, if you have <div id="header"></div>, the css will reference it like #header.

A class can encompass several elements. Like <div class="warning"></div> and then another div with the same class, the css references it with dot notation like .warning.

Clear as mud?

Just remember, a class can be used several times where each id must be unique.

So...why not make them all class and not have to deal with the difference?
Title: Re: How the hell do I code this?
Post by: AlP on May 06, 2009, 04:47:23 PM
QuoteSo...why not make them all class and not have to deal with the difference?

The "id" attribute in HTML is a general mechanism for giving an element a name through which it can later be uniquely identified. It isn't primarily for CSS. I most often use it as a way of locating an element from JavaScript using getElementById. While it is sometimes useful to identify by id from CSS, I usually find class more convenient.
Title: Re: How the hell do I code this?
Post by: MikeyV on May 06, 2009, 07:28:52 PM
Quote from: "Whitney"So...why not make them all class and not have to deal with the difference?

Well, when you need uniqueness. For instance,
<div id="wrapper">
  <div id="header"></div>
  <div id="navigation"></div>
  <div id="content">
    <div id="article></div>
  </div>
</div>

That way, you can style each div differently. If you used a class, each div would have the same attributes.

There is also the speed argument. When you use a class, the entire document must be scanned to find and style all of the classes. Not so with ids.

And, as AlP mentioned above, you frequently select elements by id. If you wanted to hide just one div, and all of your divs had the same class name, and your javascript selected by class, all would be hidden. But with an id, you can hide just the one element.

Don't think that only divs can have a class or id, most elements can <h1>, <h2>, <table>, <ol>, etc...
Title: Re: How the hell do I code this?
Post by: Whitney on May 06, 2009, 08:14:39 PM
Oh, ok.  Thanks.

Sigh...I just found out I'm going to have to make a website for a project my friend and I are working on.  It's going to be frustrating since I'll end up wanting to add things to the website I don't know how to code.  But, I guess that means I'll just have to learn faster.
Title: Re: How the hell do I code this?
Post by: MikeyV on May 06, 2009, 08:36:07 PM
Quote from: "Whitney"Oh, ok.  Thanks.

Sigh...I just found out I'm going to have to make a website for a project my friend and I are working on.  It's going to be frustrating since I'll end up wanting to add things to the website I don't know how to code.  But, I guess that means I'll just have to learn faster.

I'll be more than happy to answer any questions you may have.
Title: Re: How the hell do I code this?
Post by: Whitney on May 10, 2009, 12:20:45 PM
Eh...more questions.  

This is the page with the problems: http://www.archfinds.com/RR/ (http://www.archfinds.com/RR/)

I've been trying to get this to work for a few hours now.  :brick:  I wish there were  program that could read my mind and produce the code i need lol.
Title: Re: How the hell do I code this?
Post by: Whitney on May 11, 2009, 05:58:03 AM
I ended up scraping what I had done and started over with a different approach.  It works now.
Title: Re: How the hell do I code this?
Post by: AlP on May 11, 2009, 09:37:16 AM
My advice Whitney is to always remember that CSS hates you.
Title: Re: How the hell do I code this?
Post by: Whitney on May 11, 2009, 06:36:14 PM
Quote from: "AlP"My advice Whitney is to always remember that CSS hates you.

Lol, I figured that out this weekend.