I've recently created a website which offers free Web tutorials and Articles.. the url is http://explosivewebdesign.com

 

The new and improved web page is http://www.explosivewebdesign.com/new.html

 

Your ideas on improvements or changes are appreciated.

 

Thanks,

Joel.

I've recently created a website which offers free Web tutorials and Articles.. the url is http://explosivewebdesign.com

 

Your ideas on improvements or changes are appreciated.

 

Thanks,

Joel.

 

Please take this the right way, but as a web designer you should really move away from tables and onto full css layouts.

 

Pat

I like the overall design, but I agree with pat, lose the tables.

I like the overall design, but I agree with pat, lose the tables.

 

So divs?

Absolutely!

Well it's better that I change it now rather then later when I've got a large amount of tut's and articles thanks

Well it's better that I change it now rather then later when I've got a large amount of tut's and articles thanks

 

Okay so I've changed it all to divs.

 

http://www.explosivewebdesign.com/indexwithdivs.html

 

Now I've got a few questions.. how is this going to save me time? because whenever I create an article I'm going to have to readjust the whole page, were as Tables automatically change.. I'm not sure if I was meant to use absolute positioning or not.. but that's all I've ever used when creating CSS based sites. I'm also unsure how to center the page, and I can't find any way to do it either.

 

I've also been having problems making it looks the same in IE as it is in Firefox.. anyway please correct me if I'm doing something wrong. Thanks.

Margin: 0 auto;

 

That wil center your site if you have a div with a width set.

 

Use:

 

max-height: 100%;

min-height: 100%;

height: auto;

 

on Things you want to be liquid height. Recomend you use a wraper around your site

div#wrap {
margin: 0 auto;
width: 785px; /* adjust this to your site's width */
max-height: 100%;
min-height: 550%;
height: auto;
}

 

I've not looked at your code, but you don't need to set an height on anything. The orange headings at the right colapses over the links when I turn up the text size. Just don't set height on that, but use margin, padding or line-height to give them space. That will create a more flexible layout for you, just like tables.

 

Good luck.

Margin: 0 auto;

 

That wil center your site if you have a div with a width set.

 

Use:

 

max-height: 100%;

min-height: 100%;

height: auto;

 

on Things you want to be liquid height. Recomend you use a wraper around your site

div#wrap {
margin: 0 auto;
width: 785px; /* adjust this to your site's width */
max-height: 100%;
min-height: 550%;
height: auto;
}

 

I've not looked at your code, but you don't need to set an height on anything. The orange headings at the right colapses over the links when I turn up the text size. Just don't set height on that, but use margin, padding or line-height to give them space. That will create a more flexible layout for you, just like tables.

 

Good luck.

 

Thanks for your help! but still it looks great in Firefox then in IE it comes out with spaces everywhere.. I'm not sure if I should return to tables.. I didn't have any compatibility problems.

You should take a look at browser resetting. That gets rid if the compatibility problems

 

* {
  margin: 0;
  padding: 0;
}

 

By doing so, you are resetting all browser differences on margin and padding. You could also use Eric Meyers Css-reset, because some elements looks a bit weird by the above method. Submit buttons and etc will lack style, but just add on yourself then.

 

Eric Meyers are a very much more complex solution, which I don't think you need.

 

Please just scream if you need any help. Css are pretty easy when you've come to know what works and what don't.

 

Edit: just place that code at the top of your stylesheet. Your layout will be messed up again, but this time it WILL look the same in all browsers when you are done.

 

And I'm going to bed now, so don't scream to loud.

Awesome site man!

 

Keep up the good work!

Good work. You site does not collaps when I adjust the text size anymore.

I find your site very hard to read - there is not enough contrast in your text for me to see it without squinting at the monitor right up close...

I really like the header image, but I think it would look even better if it were extended across the whole space, rather than only half way.

I also wonder if everything could do with being a little bigger? It seems very small, and slightly cramped together IMO.

Other than that (and the tables) it's a nice site.

It's somewhat uninspiring - the design seems very '99 (ie- small verdana font, dark color scheme).

 

And tutorials about "Making 'invisible' tables with HTML" is very old hat content...

Hey I've changed the design.. http://www.explosivewebdesign.com/new.html

 

I've learnt a lot from your comments.. tell me what you think of this new design now.

Hey I've changed the design.. http://www.explosivewebdesign.com/new.html

 

I've learnt a lot from your comments.. tell me what you think of this new design now.

 

 

How exactly have you implemented what you have learned mate?

 

You have one big image, aligned using a table and btw its better to use external stylesheets but if its internal due to development than my bad

Keeping in mind that it's goin to be a website for tutorials and articals you might wanna create a bigger display area. Turtorials usualy contain a lot of large images. If you have all that text / images cramped into a small space there's gonna be a lot of scrolling involved. Might wanna try 960px or maybe even more.

How exactly have you implemented what you have learned mate?

 

You have one big image, aligned using a table and btw its better to use external stylesheets but if its internal due to development than my bad

 

It's a design, I havn't gotten to turning it into divs etc.

 

I'll post when I have.

hmmm i like the ideas behind it although maybe a red or earth pastel would be more appropriate.

 

I think to stay with the latest trends ("high def") you will need to either improve the quality of you images (buttons) or preferably only decorate the button background. This would provide a clear looking button that is accessible, usable and great looking.

 

Update:

try this,

 

The HTML:

<ul id="menu1">

<li><a href="#" title="page1"><div class="arrow">Page 1</div></a></li>

<li><a href="#" title="page1"><div class="arrow">Page 2</div></a></li>

<li><a href="#" title="page1"><div class="arrow">Page 3</div></a></li>

<li><a href="#" title="page1"><div class="arrow">Page 4</div></a></li>

</ul>

 

The CSS:

#menu1 {}

#menu1 li {background-color:#999999; color:#000; list-style:none; width:180px; padding:0px; margin:0px; background-image:url(http://levi747.s44.co.uk/new_lay/images/menu3.jpg); background-repeat:repeat-x; }

#menu1 li a {background-color:transparent; color:#000; display:block; padding:2px; border:2px outset #ccc; text-decoration:none; background-image:url(http://levi747.s44.co.uk/new_lay/images/menu2.jpg); background-repeat:repeat-x; }

#menu1 li a:hover {background-image:none; color:#FFFFFF; }

#menu1 li a .arrow {background-image:url(new_lay/images/menu.gif); background-repeat:no-repeat; height:100%; width:120px; position:relative; padding-left:20px; cursor:pointer; }

 

 

ps you will need to switch the div for span with display block to make standards compliant or just remove them.

hmmm i like the ideas behind it although maybe a red or earth pastel would be more appropriate.

 

I think to stay with the latest trends ("high def") you will need to either improve the quality of you images (buttons) or preferably only decorate the button background. This would provide a clear looking button that is accessible, usable and great looking.

 

 

Yeah, the current buttons text is only temporary until I have sorted out the design exactly how I want it.

The logo looks pixelate and text areas are not done well.

The logo looks pixelate and text areas are not done well.

 

Thanks for the tips, I've changed the logo, it looks much better now. As for the text areas could you expand on what you are saying? because you just said they arn't done well but not what's wrong with them.

Thanks for your help! but still it looks great in Firefox then in IE it comes out with spaces everywhere.. I'm not sure if I should return to tables.. I didn't have any compatibility problems.

 

Is this problem already resolved?

 

What version of IE you are using? If you are using 6.0 or below, those spaces can be remedied by setting font size of certain div tag to 1px? I cannot tell which div tag because you only provided us with a screen shot. You did not provide us with a code.

 

If you are using IE 7.0, it should behave in the same way as firefox when it comes to spacing between divs.

The design has a lot of potential, I'd say it needs more detail to make it really stand out

Hey guys, I've updated the design.. I'm converting it to css/html when I think I've got it how I want it.. Anyway tell me what you think of it now.. http://www.explosivewebdesign.com/new.html

 

Anyway tell me what you think thanks.

Anyone?

Certainly a huge improvement over the old site! It's sleek. I like the blue swirly graphic at the top. Did you make it yourself, or is there a place you can go to get graphics like that?

 

The only thing I'm not too sure of is the "bomb" with the "e" in it, which is supposed to represent explosive. It wasn't immediately obvious to me.

Hello there, I think the design is very nice and sleek but as most of the other people have replied have said, I think you should equally make your html more professional and move onto CSS.

Also one of your navigation menu blocks has a spelling mistake, not good! haha.

 

But I have to say 9/10 for the designing. Its very nice.

 

the new design looks good but use divs and css not tables.

Design is much better!

Thanks everyone for the feed back.

 

Hello there, I think the design is very nice and sleek but as most of the other people have replied have said, I think you should equally make your html more professional and move onto CSS.

Also one of your navigation menu blocks has a spelling mistake, not good! haha.

 

But I have to say 9/10 for the designing. Its very nice.

 

 

I can't believe I didn't see the spelling mistake .. and I agree with moving onto CSS.. and I use css on all of my pages.. but I've never used divs.. so this is going to be an interesting attempt

 

Certainly a huge improvement over the old site! It's sleek. I like the blue swirly graphic at the top. Did you make it yourself, or is there a place you can go to get graphics like that?

 

Thanks, the blue swirly graphic was originally a brush, though, with a lot of work (filters, layer styles, image adjustments, and editing) I got it to look like it did.. I can post what the original brush looks like if you want

 

 

Again thanks for the comments.. I'll certainly try my hardest to learn divs and use them in my site, hopefully it won't be too hard seeing as I have fairly good knowledge of css.

Okay, I've finished coding.

 

This is my first time using a table less design, with only divs.. so tell me what you think.. please comment on the design and code.

 

New Design.

 

 

Thanks,

Joel

The reason I want to know what you think of the code is because once I'm happy with this page then I'll be able to make all the other pages.

I'd really like to get feed back from someone who has practiced css for a while.. as this is my first 'div' site.. Because once I've got the right code I'm going to use a similar layout for the other pages.

 

Thanks,

Joel