Hi all!

I'm new to this forum and is also COMPLETELY new to webdesign and coding and stuff. In fact, I spent an entire day trying to figure out unbelievably simple stuff like vertically centering my page and creating CSS rollover images. ._.

 

Ciaee | Illustrations

 

Please tell me what you think, and if there's anything I can work on (especially code-wise), I'll be happy to hear it!

 

(Also, it seems that my website refuses to align itself nicely in IE5 Mac... and some Linux browsers, is there any way I can fix that? It appears fine on Firefox and IE for Windows though.)

Let me just say you did a hell of job compared to one of my first websites..

 

Overall I like it, and I admire what yove done considering your new to it.

 

Things I would try to think about though:

 

1, Its very squishy squashy and some poeple leave websites if they get confused.

 

2, Its bloody dark . Maybe lightening it up a bit will make it more appealing.

 

At the end of the day, what do I know?

 

Good Job!

Lewwy's right - considering you're completely new to this, you've done a great job. Yes it's a little dark - you could remedy this by changing the font or the font colour (if it's not white already). Sometimes white text on black needs to be a little bigger in order to make it stand up on the page.

Also, have you considered using divs instead of tables for layout? This could help to minimise any problems across browsers provided there's nothing fancy attempted.

Very good work though.

Thank you, Lewwy and notbanksy, for your feedback!

 

1, Its very squishy squashy and some poeple leave websites if they get confused.

 

2, Its bloody dark . Maybe lightening it up a bit will make it more appealing.

1. D: I think that's what happens when I'm too lazy to construct more pages and try fitting everything into one! XD Oh dear. ><

 

2. Hmm, you're right. >< I should probably use a colour other than black....

 

Also, have you considered using divs instead of tables for layout? This could help to minimise any problems across browsers provided there's nothing fancy attempted.

Um, this is going to sound ridiculous but... it's not that I don't want to, I just don't know how! D: Time to google-hunt for tutorials. XD

It's well worth the effort, and you'll be surprised how simple it is. I don't know if you used a wysiwyg editor for that layout, but if you coded it by hand then divs will be a relief.

I recommend W3C schools html & css tutorials, but I also got a lot of inspiration and insight from the css zen garden when I first began. There are probably many other excellent resources out there.

Hopefully some other folks will be along shortly to suggest more

It's well worth the effort, and you'll be surprised how simple it is. I don't know if you used a wysiwyg editor for that layout, but if you coded it by hand then divs will be a relief.

I recommend W3C schools html & css tutorials, but I also got a lot of inspiration and insight from the css zen garden when I first began. There are probably many other excellent resources out there.

Hopefully some other folks will be along shortly to suggest more

I used Macromedia Dreamweaver 8. Is there a better application?

 

Someone taught me how to create a basic website layout using Dreamweaver by slicing and using tables.. so basically, that's about half of all I know. The other half will be from googling and reading whenever I'm faced with a problem. My knowledge on HTML editing is in many stray chunks and bits. X.X"

 

Those are useful links, thanks a lot! I'll read them and update my site in a few days, I hope.

More feedback or suggestions, anyone?

well there is a problem using dreamweaver you usually get totally another look in the program then using a web browser when you are using divs atleast it happens to me.

i would sugesst coding the website in notepad could be a little hard at first but eventually you'll learn

 

other than that i like the overall design just you shouldent put all the information on one page and like lewwy said you sould use brighter colours.

Hi Ciaee,

 

This site is beautiful and an excellent first attempt.

I don't think the site over all is too dark. It's an art page and it creates a mood, as long as that mood is the one you are after you are ok!

 

I would however lighten the text just a tad, not to white but to something like #cccccc.

 

As for making a div layout instead of a table layout, it's very easy when you know how, but a little bit baffling when you don't, I know!

 

I have taken the liberty of recreating your basic page structure with div's and css. I hope that you don't mind me doing this!

 

Basically to create a div layout you have to break your page down into logical sections. On your page you will need a "wrapper" div which contains the central "page" element, and then you have left content, right content and a footer.

 

The html for this (with text place holders rather than your actual content) looks like this:

 

<body>
<div id="wrapper">
<div id="leftcontent">
	LEFT CONTENT
</div>
<div id="rightcontent">
	RIGHT CONTENT
</div>
<div id="footer">
	FOOTER CONTENT
</div>
</div>

</body>

compared to all the table, tr, th, td etc tags in your current page I hope that this shows the benefit of divs, you get clean, simple, logical html that is much easier to work with. Each div that you create for a section of your page gets an id which we can reference in the stylesheets.

 

The rest of the work is done with css. This can go into <style> tags in the <head> section of your html or it can go into a separate file which you link.

 

Your css (for structure only not your styles) will look something like this:

body {
padding: 0px;
margin: auto;
text-align: center; // these three help to align the page centered horizontally
}
#wrapper {
	width: 710px;
height: 554px; // your width and height
margin: auto; // page centering
text-align: left; // text back to left
border: 1px #000000 solid; // border to show the outline
}
#leftcontent{
float: left; // to make the two divs sit side by side, we use float: left and 
width: 354px; // set the width to half the total width minus one because of the border
height: 100%;  
}
#rightcontent{
	float: left; // same again
width: 354px;
height: 100%;
}
#footer{
	clear: both; // clear the footer to after the content
width: 100%; // this could be the same width as wrapper in pixels (account for border)
text-align: center;
}

 

The only thing not done is this code is the vertical alignment. Thats because vertical-align doesn't do the same thing in divs as it does for tables, it's not meant to.

 

To vertically align your page in the center you need to add an extra div around the wrapper.

Call it "outerwrapper" and add the following styles:

 

#outerwrapper { position:relative }
#wrapper { position:absolute; top:50%; margin-top:-277px }

 

The positioning and setting top to 50% drags the top edge of your page to the middle. Then we make a negative margin half the height of your wrapper div (-227px) to pull it back up so the middle of the page is in the middle.

 

With this code, you should be able to put your content in, apply your styles, your background images etc and get exactly the same result.

A really good site, especially if this is one of your first ones!

 

The only improvement I would make design-wise is to add a little more contrast to your content. Perhaps try making the headings a more striking colour so it stands out against the dark background. Also try and make your links stand out just a little bit more, in a slightly brighter colour.

 

Code-wise, I suggest you look at W3Schools to learn about CSS and XHTML. Your layout at the moment is a table layout but the code could be much cleaner if you use a <div> layout. This will require hand-coding it though and I'm not sure whether you used a wysiwyg editor to design your site.

 

But for your first time, this is seriously impressive

 

Nice to see another dA member here

 

Wish you the best of luck.

 

Ravi

1) More spacing please. It's okay to scroll a little bit vertically.

 

2) Consider aligning your text to the left rather than to the right.

 

3) More contrast between the text and the background please.

 

4) MORE CONTRAST ON YOUR LINK HOVERS! I didn't even realise they were links at first.

 

I agree with Eris about switching to a div-based layout rather than one constructed with tables. Also, for your sub-headings, consider using <h1> / <h2> / <h3> which you can then apply a "border-bottom" to with CSS, which will save all your & nbsp ; which is bad practice, and makes your layout break when you enlarge the text.

 

Apart from that though, it's pretty darn good for a newbie! Well done.

With this code, you should be able to put your content in, apply your styles, your background images etc and get exactly the same result.

Omg, thank you so much!! That's very kind of you! This is going to help me a lot.

 

The only improvement I would make design-wise is to add a little more contrast to your content. Perhaps try making the headings a more striking colour so it stands out against the dark background. Also try and make your links stand out just a little bit more, in a slightly brighter colour.

 

I'm not sure whether you used a wysiwyg editor to design your site.

 

Wish you the best of luck.

Hmm, I used Dreamweaver... you're right about the font colour, I'm going to change it. And thanks for the wishes, Ravi!

 

1) More spacing please. It's okay to scroll a little bit vertically.

 

2) Consider aligning your text to the left rather than to the right.

 

3) More contrast between the text and the background please.

 

4) MORE CONTRAST ON YOUR LINK HOVERS! I didn't even realise they were links at first.

 

I agree with Eris about switching to a div-based layout rather than one constructed with tables. Also, for your sub-headings, consider using <h1> / <h2> / <h3> which you can then apply a "border-bottom" to with CSS, which will save all your & nbsp ; which is bad practice, and makes your layout break when you enlarge the text.

 

Apart from that though, it's pretty darn good for a newbie! Well done.

>< With so many people pointing out the lack of contrast of the font colour compared to the background, I guess I'm going to have to change it . XD Also, thank you for your suggestion on using <h1>'s and using "border-bottom". Thanks!

 

 

People in this forum are so helpful! Thanks a lot, everyone.

Can I just say, I really like the illustrations!

Hi Ciaee!

 

Your website is absolutely impressive for a first timer. I hope my website receives favorable reviews like yours when I launch it.

 

The colors of the website are fine. You only need to change the color of the text to add more contrast. Dark is slightly more creative, and in my opinion it looks good.

 

Regarding your layout, divs are extremely easy to grab. I am a new comer to web development too and I think it took me two days to understand how divs and their positioning work. It is pretty easy really.

 

Take care and best of luck with the site.

Does look pretty impressive. The illustration work is great.

 

One problem I had with it though - text size. It didn't look quite right at my default text settings, and I had to lower it one size. I didn't realise it at first.. I went to adjust the sizing just to see how the layout handled different sizes, then noticed a couple of htings that made me realise it was supposed to be at a smaller setting than my default. The most noticeable differences were that at my default, the top and bottom container borders weren't showing, plus the repeat on the main image was making the "Ciaee.com | Illustration" text unreadable.

 

I'd maybe consider changing the heading colours and underline.. nothing major, just lighten them slightly or something.. It all just looks like one block.

 

Very good for a first site.