Hi everyone.

I'm having a hard time figuring out how to build CSS-based websites.

 

This is what I've done so far: http://www.sittinpretty.org/TEST/

 

Here are my problems:

 

1) The text on the header should be right under the site logo, but I can't place it in the right position.

 

2) The whole layout is supposed to be centered and it is on IE, but not on Firefox or Safari. There must be something wrong with the code...

 

3) I don't know what to do with the navigation. Any suggestion will be greatly appreciated!

 

 

I've been searching tutorial sites for building CSS-based websites w/ Dreamweaver but I haven't found anything helpful yet. I've been working on this site in a long time now so I should get it finished soon. I will be very grateful if anyone could help me with this over this forum or MSN messanger. Thank you.

1. Add "text-indent: 30px;" or "margin-left: 30px;" to the H1 element.

NOTE: There should never be more than one H1 element in a document. And your first H1 element contains nothing more than an & which is very bad semantic. Instead if adding empty elements like that, use margin or padding to move the elements.

 

2. The reason it won't center is that you use text-align to center the elements. instead, use "margin: 0 auto;".

 

3. Add some space around the text. (As well as the content text) And add some hover effect to give a clear indication that's it's a link. For instance, when you hover over the link it'll change to a darker or lighter variant of the green background. Soething like that.

 

Other notes:

 

* You have several unclosed LI elements. in HTML it was optional to close it, in XHTML it's required. (It's also a good practice as it reduces the chance of bugs.)

 

* The align property is depreciate and should not be used with (X)HTML strict.

 

* The target property of A elements is also not used in Strict mode.

Thomas beat me to it! ^

Thank you SO much, Thomas!

I'm trying to edit my code now.

 

I didn't notice there were an extra h1 element and several unclosed LI elements.

It's because I was just using Design view when I worked on my site last time.

I've removed them!

 

I will keep editing and making it look better.

I might ask more questions later.

Thank you again for your help!!

I quickly edited it, hope I wasen't to late!

aittinprettyt.org.zip

I quickly edited it, hope I wasen't to late!

 

Thank you, Alexander!

 

So, where did you change?

It looks perfect on Firefox, but the header text position isn't the same on IE.

 

Also, I want to remove the space at the top and the bottom.

How can I edit the code for that?

Do I need to change the height?

Thank you, Alexander!

 

So, where did you change?

It looks perfect on Firefox, but the header text position isn't the same on IE.

 

Also, I want to remove the space at the top and the bottom.

How can I edit the code for that?

Do I need to change the height?

 

 

I've made it so there is is no space at the top and the bottom.

 

here:

aittinprettyt.org.zip

Thanks again Alexander.

 

But I have other problems now. http://www.sittinpretty.org/TEST/

 

1) I added some text in the content area, but there's no scrollbar or anything showing up so the layout is messed up.

 

2) I still have the space under the footer. How can I set the height for that?

 

3) Again, the text on the header looks fine on Firefox now, but not on IE. Is there any way to adjust it?

 

 

This is getting confusing even more now.

Could anyone figure this out?

1.) add an auto overflow and a height to the text div. What this will do is should the text exceed the height you have given it rather then break the layout it will add a scroll bar

 

example:

 

 overflow:auto;
height:400px;

 

I'll have a look at the other parts later on today, that is if no one else does that before me

1. Generally it's better to have the content container expand to fit the content instead of setting a fixed width.

 

2. Do you want to push the text further down? If so, then use padding-top on #footer. If you want to get rid of the extra space under the footer text you need to remove the height property. (again, in most cases it's better to let the content define the height of elements.)

 

---

 

What characterset is "shift_jis" ?

il take a look in a bit

1. Generally it's better to have the content container expand to fit the content instead of setting a fixed width.

 

2. Do you want to push the text further down? If so, then use padding-top on #footer. If you want to get rid of the extra space under the footer text you need to remove the height property. (again, in most cases it's better to let the content define the height of elements.)

 

---

 

What characterset is "shift_jis" ?

 

Ok tom, I'm on msn whith rie (daruma) right now as I am typing this, and we have a probelm with the footer, it stays with the nav bar thing, and also the background colour has gone to invisable on the browser, if you go to sittinpretty.org/TEST/ you'll see, and I want it so that the nav stays the same all the time with the main green background text area. Can you help?

1.) add an auto overflow and a height to the text div. What this will do is should the text exceed the height you have given it rather then break the layout it will add a scroll bar

 

example:

 

 overflow:auto;
height:400px;

 

I'll have a look at the other parts later on today, that is if no one else does that before me

 

Thank you, Dizi. I tried and it worked, but it wasn't actually what I wanted. Sorry for confusing you. I added some more texts and it looks better now.

 

And Thomas, I didn't understand what you meant in your reply as English isn't my first language so I asked Alexander to explain when talking with him on MSN messanger. He has been helping me with this on MSN but we both are very confused now. I will be grateful if you could explain it to Alex. Thank you!

thats ok.

 

by he way I know you want the green to go all the way down but it looks good how it is....except for the copyright notice, if the green were to go all the way down it would give too much green space and look wrong. move the copyright to the bottom and I think how it is will complement the design, while a green strip down the side will detract...but that's just my little opinion Just do it how you want rather then how others want

ohh and be careful with your design as it looks like this in IE6...as it is the most commonly used browser you should try and fix it

 

ohh and be careful with your design as it looks like this in IE6...as it is the most commonly used browser you should try and fix it

 

thats ok.

 

by he way I know you want the green to go all the way down but it looks good how it is....except for the copyright notice, if the green were to go all the way down it would give too much green space and look wrong. move the copyright to the bottom and I think how it is will complement the design, while a green strip down the side will detract...but that's just my little opinion Just do it how you want rather then how others want

 

Actually, that's not what I want. Alex and I were trying to fix that, but we were confused and haven't figured out how to fix it. Do you have any idea?

ohh and be careful with your design as it looks like this in IE6...as it is the most commonly used browser you should try and fix it

 

 

OMG, that looks horrible. Actually, that looks just like how it looks on my Dreamweaver. I was wondering why it looks like that. I don't have IE6 installed in my computer. I only use IE7, Firefox and Safari. Can I download IE6 somewhere? Thank you for letting me know that!!

Here is a zip with the site in, it now looks right in IE. I have also put the css into little sections so you can see which bits effect the different parts of your site, this should help you see how it works, hope this helps you, there wasn't much wrong with it to begin with just a slight change to the css

 

site.zip

Here is a zip with the site in, it now looks right in IE. I have also put the css into little sections so you can see which bits effect the different parts of your site, this should help you see how it works, hope this helps you, there wasn't much wrong with it to begin with just a slight change to the css

 

site.zip

 

Thank you! I will take a look.