I want to add some shadow to my DIV boxes… How?

So far I have succeeded creating my very basic website layout. However, Im not done. Not by a long shot. I have the basic two column layout with a header and a footer done. I am trying to get the layout just perfect, in both function and looks.

So, after all that now I have moved onto the presentation of the actual layout (eg, colours, spacing and all that good stuff). Im going to use flat colors from this UI website. Flat colors look great, are attractive and a lot of modern really high profile websites use them.  Im going to follow the trend and use them myself.

Ive gone with a really nice green, which UI colors have labelled ‘Green Sea’ This will be used for the header and footer, I think If I used it anywhere else it will be way too overpowering. So, to compliment the green I am looking at using light greys (silver more specifically) a flat silver, that has a really nice bright glow to it.  This will be used for the actual content partition of my website.

I really want to finish of the content box well though, so, I am going to try and add some shadow to the bottom of the div, to make it look like it is jumping off the page when you see it.  I have seen a lot of websites incorporate it, and sometimes go the complete wrong way with it. But I just want to use it ever so lightly to make it have some kind of shape.

Ive used this to get the basic idea of how to add shadow.  It looks kind of rubbish. So I had a little search around on Google at the various suggestions other websites have made into tackling shadow, and I consequently found this website creation tutorial page. This is great! exactly what Im looking for. I can just play around with a couple of these to get it absolutely perfect.

Heres one of the examples from the tutorial I linked abot

box-shadow: 10px 10px;
box-shadow: 10px 10px 5px #888;
box-shadow: inset 2px 2px 2px 2px black;
box-shadow: 10px 10px #888, -10px -10px #f4f4f4, 0px 0px 5px 5px #cc6600;

Overall, adding shadow to my content box has given it some focus, and a slight visual improvement. I plan on tweaking it until I think its just about perfect. The next big issue I have is I have put all the .css information into the actual HTML page and not a .css file. That will be what I plan on sorting out within the next couple of days. It has to be on my priorities list otherwise It will get just way too out of hand.

Using Float to arrange my web page columns

So, like I said in my previous post, I am going to use divs and the float ability to arrange my columns which will be the back bone of my web page.

This has been very tricky for me to learn, I am not good at this (really not good) so it has taken me quite a while to read and understand the actual functions of some of these functions. From what I gather, I need to apply the float:left; mechanic to all my boxes within a ‘container’ div to allow them to function correctly.

I have been using this guide HERE, to show me what I am exactly doing, copying what they say and replicating it on my Dreamweaver document. However once I have got their tutorial piece of code to work, I am tweaking it to my own advantage.

Obviously, once they are aligned how I want them to be, I need to look at adding a margin or some padding, so the content of each div doesn’t clash with the content from its neighbor.  I have gone with two columns on the main page,  a header and a footer. So I have given my menu bar a margin right of 25px which will give me some clearance between the content and the menu.

The footer I have given a top margin so I have some clearance above, and the header some bottom margin for the same reason. It is really starting to take shape. I am very please with the ‘layout’.

Now the next step for me is to add some color, and start identifying the columns with some great color options and some different styles.  I haven’t picked a font or anything like that yet but once Im done with getting the layout sorted as in where everything is going I will return to pick my font at a later time. Im still unsure as to what I want to use!

Guys, remember if you are new to all this like me, then why don’t you check out some of the sites I have used to help you along the way. There are plenty of free resources which will give you a great helping hand!

Stage 1 – Adding color and using ‘div’s

So far in this conquest I have been able to make simple, very simple introductory pages with html, using H1 tags and getting to grips with the small specifics for example body and head tags.

Now Ive got that down per say, Im looking at trying to make something a little more attractive. As in I don’t want a white page with nothing on! Reading around I have found out that tables are a thing of the past for laying out a website, and can be a hindrance to being found on search engines ( something else I will have to look at ). So ghastly tables out, using Divs in.

So what is a div?

A div is a fluid entity that can have pre-designed characteristics set with using a style-sheet(?). You can use them as columns, as a table itself and just to position text within an container. So, it seems, from what Ive read you can do a lot with these Divs. However, I have no idea what Im doing or how to use them. So Im going to start from scratch, by using divs to posotion the rough areas of my website, these being the menu, content area and a footer for links and all that good stuff.

Positioning my website

Im going to use the guide Im readings layout, because coincidentally it is exactly what Im looking for! I am not using an external style-sheet for now, however I will change over to one when I plan on getting my website online for an actual purpose.

This is what I want my end product to look like, so obviously I have used divs for each section, using float and percentage based widths so it is somewhat responsive and will fit all browsers.  In fact I have been reading around using either px or percentages, and I have decided I would like to preferably use percentages to position my content areas to add an aspect of responsiveness to my pages.

Where to start? HTML very basics!

So far, I have found out many things relating to web design. However I am here to start from the very beginning.

 

What is HTML?

Right, so HTML from what Ive read is called a markup language. Meaning it consists of a vast array of tags and commands which will display information of various sorts in a number of different styles or formats. This is a very basic description of what it actually is. However, since im a complete newbie to all this, its a good start for me to even know this much!

My first blank page

So I opened up Dreamweaver to my first blank HTML page. Looking at the guide im using, this is what I start with. The basics of the HTML tag to describe the document. The Body tag to allow some structure of the page and the H1 tag I believe is for headings. 

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
 

Once I had put this into Dreamweaver, I then saved it as a .html document and opened it up in my chosen website browser to see what I had done and if it was correct. It was.

This was my first absolute piece of HTML code. Even though it was barely a ‘page’ and was just 6 words. It was enough to allow me to see some success already! My next step in this long drawn out process is to start adding color, and arrange text in different manners. Learn about how to align stuff and make it look correct and proper!