News:

Look, I haven't mentioned Zeus, Buddah, or some religion.

Main Menu

Re: How the hell do I code this?

Started by Whitney, May 06, 2009, 08:20:27 AM

Previous topic - Next topic

Whitney

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  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?

karadan

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.
QuoteI find it mistifying that in this age of information, some people still deny the scientific history of our existence.

Whitney

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.

AlP

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.
"I rebel -- therefore we exist." - Camus

Whitney

that's probably the issue.  I was wondering how to know when to use # or .  I guess now I know.

Thanks!

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.
Life in Lubbock, Texas taught me two things. One is that God loves
you and you're going to burn in hell. The other is that sex is the
most awful, dirty thing on the face of the earth and you should save
it for someone you love.
   
   -- Butch Hancock.

Whitney

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?

AlP

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.
"I rebel -- therefore we exist." - Camus

MikeyV

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...
Life in Lubbock, Texas taught me two things. One is that God loves
you and you're going to burn in hell. The other is that sex is the
most awful, dirty thing on the face of the earth and you should save
it for someone you love.
   
   -- Butch Hancock.

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.

MikeyV

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.
Life in Lubbock, Texas taught me two things. One is that God loves
you and you're going to burn in hell. The other is that sex is the
most awful, dirty thing on the face of the earth and you should save
it for someone you love.
   
   -- Butch Hancock.

Whitney

#11
Eh...more questions.  

This is the page with the problems: 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.

Whitney

I ended up scraping what I had done and started over with a different approach.  It works now.

AlP

My advice Whitney is to always remember that CSS hates you.
"I rebel -- therefore we exist." - Camus

Whitney

Quote from: "AlP"My advice Whitney is to always remember that CSS hates you.

Lol, I figured that out this weekend.