Introduction
This post will go over my naive implementation of a style sheet to build the "Chicken Sandwich" page, as it is currently implemented. As mentioned in the previous post, this site functions well under all the major browsers (IE9, Firefox, Chrome, Safari). IE9 currently doesn't support the gradient in the background (to my knowledge) so It uses a fallback of a solid color background that is somewhere between the two values in the start/end gradient you see in the other browsers.
There are many ways to style your web page elements. Step one is to identify the element you want to style. This can be done by referencing either the element as it's known by the DOM, the element's class, or it's id.
So let's take a look at the "div" element <div> in HTML.
<div class="divider" id="divStyle"> This is my Divider</div>
If I want to identify this object in my CSS file, I can do that four ways. (to my knowledge)
div{} - assigns default style to all elements of this type.
div.divider{} - assigns style to all div elements with the class "divider" set by <div class="divider">
.divider{} - assigns the style to all elements with the class set to "divider" set by <element class="divider"> This could be anything defined by the user. For instance:
.hamburger{} -- <element class="hamburger">
#divStyle{} - assigns style to the element who's id is "divStyle". Set by <div id="divStyle">
Most of the time the id for an element is going to be unique and this method should be applied to elements who have their own unique style, not for general style settings. A good design rule would be to stylize your elements through their class, and only use the id reference for edge cases where you need a one-off style for a unique element or element that derives from a class of elements.
So let's get started.
The first thing everyone wants to know is, "how do I position elements on my page in an aesthetically pleasing way?"
Well, first you have to have an aesthetically pleasing design, which we can go over at another time, but for now let's assume that you have a design in mind.
You'll want to put it together in a program similar to Photoshop, or at the very least sketch it out on paper. Designing in an graphical program is benificial because you have the advantage of getting measurements and color data from the images you create. Also, you'll want to create some images yourself anyhow, and not rely solely on clip art and images you find off the web.
That in mind, you don't want your website to be too image heavy because these types of graphics take longer to load than elements generated through CSS and script (sometimes).
Containers
All web pages should have a main container. This container can be any element that wraps around the content and establishes the main dimensions of the page.
In this example, we'll be using a <div>.
Dividers are awesome with the power of CSS. Basically everything that used to be done using tables can now be done way easier and cleaner with a <div> element.
We'll start by opening up our basic HTML and adding a <div> in the body of the page.
<body><div class="container" id="master"></div></body>
Notice the class is "container" and the id is "master"
Now we need to add the CSS block for this container to our stylesheet.
In this particular instance it's ok to reference it by the ID, because there will be only one "master" div for our template, but there could be many "container" divs.
This should be what your stylesheet looks like at this point:
html{
background:#e00000;
height:100%;
background:-moz-linear-gradient(top,#fe471d,#e00000) no-repeat #e00000;
background:-webkit-gradient(linear,left top, left bottom, from(#fe471d), to(#e00000)) no-repeat #e00000;
font-family: "helvetica", Arial, sans-serif;
color:#000;
}
body{
margin:auto;
height:100%;
}
#master{
}
Open it up in your browser and take a look.
Pretty unremarkable, I know... but hey, it's a start.
Notice the div isn't visible. This is because we have both, no content, and no style.
Type some text between the <div> tags, and reload the page.
You'll notice the content shows up just like it would if you had just put it in the body tag. That's because elements like the <div> element take on the properties of the element they are a child of. So if you have a style set for the <body> unless the element the content is contained within has its own stylesheet data, the content will at like it's parent. This makes sense, how else would the element get formatting information if not from the element it is contained within?
So let's add some style to the divider!
#master{
width:900px;
min-height:85%;
margin:auto;
padding:20px;
background:#ffffff;
}
Now take a look.
We've told the master div element to take on the following properties:
Width of 900 pixels. This makes sure the content is contained within the standard visible space of a page, for most devices. Anything larger and you run the risk of the page looking cramped on some devices.
Minimum height of 85% of the body, so that it doesn't go all the way to the bottom of the screen, but it will not be too high on the screen in cases where we have very little content.
Automatic margin is basically saying, "center my business to the parent" in this case, the parent is the body, which is basically the document. In some cases you may have more than one body, and this would change.
padding of 20 pixels will make sure that all the content of the page will be 20 pixels away from the edge of the element.
And finally, the background is white.
Moving Our <DIV>
I don't care for having the div element at the top of the page, so let's move it down a bit. This is simple enough to do, all we have to add to our css is the following line:
top: 20px;
This will move the div element down 20 pixels.
oh, but wait, It won't!
because out element's position attribute is not defined.
there are three types of positioning:
fixed - absolute - and relative
for this example, we will set the div element position to relative by adding the following line to our CSS:
position:relative;
Easy enough, right? reload the page and see what happens. If it doesn't work, make sure your css looks like so:
#master{
background:#ffffff;
position:relative;
width:900px;
min-height:85%;
padding:20px;
margin:auto;
top:20px;
}
None of these attributes require a specific order, but some do. It depends on what you're trying to achieve. This is particularly true in the case of some vender specific attributes, like the ones mentioned earlier that require the prefix -moz- and -webkit-. Usually this only matters in IE because IE is awful.
Adding a Border
Adding a border is easy to do, and should be done with minimalism in mind. Less is always more. In this case, I'll add a solid black border of 2 pixels.
Add the following line to the #master css.
border:2px solid #000;
What? It's boring? Ok, fine, let's add borders for the top, left, right and bottom of different thicknesses.
border-top:1px solid #000;
border-left:1px solid #000;
border-right:3px solid #000;
border-bottom: 5px solid #000;
Looks a bit better yeah? Well, how bout a shadow? That's right, the latest iteration of CSS provides you with the ability to add shadows to your situations. And it's easy, and supported in nearly all browsers.
Try this:
box-shadow: 20px 20px 15px rgba(0,0,0,0.5);
This will add a boxed shadow on the element that is offset on x 20 pixels, on y 20 pixels, blurred 15 pixels, and with the color of black. The rgba color format also allows you to specify an opacity, which is 0.5 (or 50%) in this example.
After you see the effect you can tweak it. But here it is in case you don't feel like writing all this code.
Adding Layered Effects
Now let's add a div within this div that will float underneath and serve as a "menu" or something.
replace your text with another <div> element.
<div class="menu" id="leftMenu">
Copy and paste your #master css block and change the #master portion as follows:
#master --> .menu
and change the dimensions and what-not to be what you'd like. I changed them to 200px and 200px to start with. Remove the formatting of the margin as well, this will push the div to the far left of the parent (left justified being the default of the browsers). I also changed the padding to 5px. My css now looks like this:
#master{
background:#ffffff;position:relative;width:900px;min-height:85%;padding:20px;margin:auto;top:20px;border-top:1px solid #000;border-left:1px solid #000;border-right:3px solid #000;border-bottom: 5px solid #000;box-shadow: 20px 20px 15px rgba(0,0,0,0.5);
}
.menu{
background:#cccccc;position:relative;width:200px;min-height:200px;padding:5px;top:20px;border-top:1px solid #000;border-left:1px solid #000;border-right:3px solid #000;border-bottom: 5px solid #000;box-shadow: 20px 20px 15px rgba(0,0,0,0.5);
}
Save and reload your page, and it will now look like this:
Blowing Your Mind
This next part may blow your mind, so I suggest you be setting down. If you're not already, we need to have a different discussion...
We now want to position this div offset from the main body.
Let's do that by adding the following line to the css of the menu block.
left:-200px;
It's that easy...
Z-Index
To change the depth of your elements, we need to add formatting for the "z-index". Z-index is commonly used to describe the location of objects in the "depth buffer" for most renderers and APIs. Z refers to an axis. And when thinking about the elements in your document you should think of them in terms of how they relate to 3d space. x being left to right, y being up and down, and z being forward and back.
Add z-index information for both the menu and the master dividers.
#master{
z-index:20;
}
#menu{
z-index:19;
}
Notice the z-index isn't 1 and 2. This is because we may want to add background elements, and if we make them 0 and 1, it will make it more difficult to go back and change our indexes once we have more blocks of css.
OH BUT WAIT!!!
This isn't going to work! Because the div doesn't have anything to sort against. The z-index of an object is always inherited from its parent. Starting to see a pattern? So before we can affect the sorting of these elements relative to one another, we need to pull the formatting from the master div and create a "content" div to put within it. This makes sense for several reasons. We don't want to rely on our master div for any visual elements, but rather to use it as the container. Visualizing it initially is good for debugging purposes, and with the copy paste technology, we haven't wasted any work. SO let's create our content div css block by copying the master div block. Then add a <div> for content in the master div...
So, this is what our css looks like after making the appropriate changes. This included:
· removing padding from master, since there was no content in it.
· copying and pasting master and changing the #master --> .content
· removing all visual formatting from the #master css.
#master{
position:relative;width:900px;min-height:100%;padding:0px;margin:auto;top:20px;
}
.menu{
background:#cccccc;position:relative;width:200px;min-height:200px;padding:20px;top:20px;left:-200px;border-top:1px solid #000;border-left:1px solid #000;border-right:3px solid #000;border-bottom: 5px solid #000;box-shadow: 20px 20px 15px rgba(0,0,0,0.5);z-index:19;
}
.content{
background:#ffffff;position:relative;width:900px;min-height:85%;padding:20px;top:0px;left:0px;border-top:1px solid #000;border-left:1px solid #000;border-right:3px solid #000;border-bottom: 5px solid #000;box-shadow: 20px 20px 15px rgba(0,0,0,0.5);z-index:20;
}
And this is what our document looks like now...
Not exactly what we had in mind? Hrmm... ok...
That's because our positioning isn't right for our "content" divider. Changing the "position:relative" to "position:absolute" will fix this problem.
The definitions of the 3 different positions will be explained later on (as i get a better understanding of them) but for now, just do it, and you'll see what I mean.
I've read a few definitions of the three positioning rules, but haven't fully wrapped my head around it in a way that will allow me to break it down one time (so to speak.)
So here's what you've got after all that jazz!
With these techniques, I've created this page:
I'll do more complex and aesthetically pleasing stuff later, but for now, this will do.
Hope you've enjoyed the read, and if there are ways I can improve it, or any errors you can spot, please let me know by adding a comment or sending me message!
Cheers!
