Dear Forum,

 

I have always designed my web site using WYSIWYG type programs such as Frontpage or lately iWeb. I have created a brand new site using just notepad (Text Wrangler on my Mac). This time however, I have tried to learn CSS. I have a very basic newly learned knowledge of CSS and so please would you kindly take a look www.deanbloom.com and let me know what you think.

 

Many thanks.

 

Dean.

Hi there,

First of all, well done on getting started with css.

I notice however that you're still using tables to layout your page.

Try and move to more semantic/structural html.

For example, you have

<p class="h1">BloomTech Solutions</p>

where it should really be

<h1>BloomTech Solutions</h1>

You also have a lot of inline style declarations like

<table class="one" border="1" width="550px">

Try and place all styling into the external stylesheet. It will make your html much easier to read/easier to maintain.

Dear ElanMan,

 

Thank you very much for your information, much appreciated. I think I know what you mean about the code. I think my stylesheet will also need amending to allow me to use <h1> instead of <p class="h1"> in the html file? I am really finding CSS a great way forward and much easier than just using HTML, although difficult at first. I can see the power CSS has.

 

I will have a go at implementing your suggestions when I get a moment.

 

Thank you once again for your help.

 

Regards,

 

Dean.

hey,

 

 

To use style the h1 tag correctly use

 

h1{
font-size: 25px
}

 

instead of

 

p.h1{
font-size: 25px
}

 

Then in the html use <h1>BloomTech Solutions</h1>

 

 

I would suggest you try following some tutorials on CSS layout, there is no need for you to be using tables. You actually have a hell of a lot of code for quite a simple website. For example the header section would ideally be made up of some simple html with all the styling handled by CSS:

 

<div id="header">

<img src="" alt="Logo" />
<h1>BloomTech Solutions</h1>
<p class="Name">Dean Bloom</p>
<p>Established May 1999</p>

</div>

 

Best of luck!

hey,

 

 

To use style the h1 tag correctly use

 

h1{
font-size: 25px
}

 

instead of

 

p.h1{
font-size: 25px
}

 

Then in the html use <h1>BloomTech Solutions</h1>

 

 

Best of luck!

 

Peter,

Thank you for your suggestions and help. I can now see what you mean about the h1 instead of p.h1

 

In the mean time, I have now uploaded a test front page, which I created in iWeb just to show the sort of thing I have created without coding by myself. I am not sure if it's any better and I definitely want to keep trying to stay with coding my own sites in a text editor. I nearly gave up many times and was tempted to go back to WYSIWYG such as iWeb as iWeb is so easy to use and build nice looking sites with. However, I have persevered with my own code. Also, my main issue with iweb, is the massive amount of code it creates just for a very simple page and the pages take ages to load. This is the main reason I decided to go it alone and create my own code by hand and try and keep my site really slim, simple and fast.

 

Anyway, here is my test front page (not my main site you understand) for your comments compared to the one I have created by hand.

 

The test page here http://www.deanbloom.com/test/

 

My main site here http://www.deanbloom.com

 

Thank you once again for your help.

 

Dean.

Dear ElanMan,

 

Thank you very much for your information, much appreciated. I think I know what you mean about the code. I think my stylesheet will also need amending to allow me to use <h1> instead of <p class="h1"> in the html file? I am really finding CSS a great way forward and much easier than just using HTML, although difficult at first. I can see the power CSS has.

 

I will have a go at implementing your suggestions when I get a moment.

 

Thank you once again for your help.

 

Regards,

 

Dean.

 

I tried this, but it changed the font completely from what it was before. It now looks bolder and a different font completely, even though all I changed was the bits you suggested?

 

Dean.

hey,

 

 

To use style the h1 tag correctly use

 

h1{
font-size: 25px
}

 

instead of

 

p.h1{
font-size: 25px
}

 

Then in the html use <h1>BloomTech Solutions</h1>

 

 

I would suggest you try following some tutorials on CSS layout, there is no need for you to be using tables. You actually have a hell of a lot of code for quite a simple website. For example the header section would ideally be made up of some simple html with all the styling handled by CSS:

 

<div id="header">

<img src="" alt="Logo" />
<h1>BloomTech Solutions</h1>
<p class="Name">Dean Bloom</p>
<p>Established May 1999</p>

</div>

 

Best of luck!

 

Hi Peter,

 

I tried your helpful suggestions but when I applied the changes described, it changed all the fonts, spacing, bold font and the whole look of my page layout. I tried experimenting with different combinations but no luck. It seems that when I get rid of the p.h1 in favour of just h1 and then also amend the html page, it changes all the fonts and the whole look of my page. I really value your opinion and really want to implement your suggestions but only if the page looks the same as it does now. Please are you able to help?

 

Best regards and thank you.

 

Dean.

Hi Dean

 

Well done for making the change... don't worry you'll get there!

 

Regarding your text looking different; in your css you have set your font-family differently in the table to the ones stated in your body....

 

In your original table layout your heading is therefore inheriting that, whereas in the second attempt without tables it won't inherit because it's not in a table!

 

Body css >

body
{
background-color: #CCFFFF;
font-family: arial, sans-serif, helvetica, serif, verdana; /* Order in which browser will use fonts that are available on the local OS */
}

 

 

whereas your table css >

font-family: tahoma, arial, cursive, helvetica, sans-serif, helvetica, serif, verdana

 

Change your body font-family to the same as the table css and it should sort it out.

 

I hope this helps

Hi Dean

 

Well done for making the change... don't worry you'll get there!

 

Regarding your text looking different; in your css you have set your font-family differently in the table to the ones stated in your body....

 

In your original table layout your heading is therefore inheriting that, whereas in the second attempt without tables it won't inherit because it's not in a table!

 

Body css >

body
{
background-color: #CCFFFF;
font-family: arial, sans-serif, helvetica, serif, verdana; /* Order in which browser will use fonts that are available on the local OS */
}

 

 

whereas your table css >

font-family: tahoma, arial, cursive, helvetica, sans-serif, helvetica, serif, verdana

 

Change your body font-family to the same as the table css and it should sort it out.

 

I hope this helps

 

Dear Guezala,

 

Thank you very much, however, it still does not work. I have tried everything. I think I will have to just leave the code as it is.

 

I have uploaded the amended page versus the original so you and others can see what I mean. You can see the difference between the two. Hope this helps to explain what I mean?

 

Here is the original index file http://www.deanbloom.com/index.html (this one is linked to default.css)

 

Here is the amended one that does not work http://www.deanbloom.com/index2.html (this one is linked to default2.css)

 

I really am trying hard to get this right but can't seem to get it to work. When I change p.h1 to h1 and amend the html to match it changes the font and also the spacing between the paragraph.

 

Hope you can help.

 

Best regards,

 

Dean.

Dear Guezala,

 

Thank you very much, however, it still does not work. I have tried everything. I think I will have to just leave the code as it is.

 

I have uploaded the amended page versus the original so you and others can see what I mean. You can see the difference between the two. Hope this helps to explain what I mean?

 

Here is the original index file http://www.deanbloom.com/index.html (this one is linked to default.css)

 

Here is the amended one that does not work http://www.deanbloom.com/index2.html (this one is linked to default2.css)

 

I really am trying hard to get this right but can't seem to get it to work. When I change p.h1 to h1 and amend the html to match it changes the font and also the spacing between the paragraph.

 

Hope you can help.

 

Best regards,

 

Dean.

 

 

Wow, over two years later and I have just come across this which I was posting with you all, thank you. I have now moved on to CMS but have always been wondering if I should return to writing my own code by hand CSS etc? If anyone is still monitoring this and wish to have another look at my site deanbloom.com which is CMS then it might help me to decide if I want to go back to CSS static HTML manual website, more control, more power over my own settings etc.

 

Nice to see you all again.

Dean.