Wallpaper/Image Gallery Tutorial using HTML/CSS
One of the most important things ive learned while learning about html and css is the power of the unordered list. I was making a wallpaper gallery for my Death Note website and asked on Web Design Forums.net the best way to go about this. The answer I got changed the way I design and the way I layout my sites.
I'd like to thank Shadowfiend for showing me this technique. Learning it has changed the way i design. Check out his blog here: Shadowfiend | http://shadowfiend.posterous.com/
Unordered lists are a familiar topic of study in beginner html courses, however the markup often looks like
<h1>Fruits</h1>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>
However, this is not the only way to use them, nor is it the most powerful.
The unordered list is often used many times with Menus (both vertical and horizontal) as well as with image galleries.
I'm not going to show you the menu, because the wallpaper effect is harder, and if you learn it, you'll easily be able to make a menu.
For this, we are going to use any image. Find one on Google Images Search.
Alright now that we have our wallpaper, we will use a layout we created in my last post. If you want, you can go there and download layoutfooter.html, if you are comfortable with css you can just continue reading.
Now, between <div id="content"> we will add an unordered list as so...
<ul class="gallery">
<li>Image1</li>
<li>Image2</li>
<li>Image3</li>
</ul>
For now, dont use actual images, well use those after.
The first thing you may notice previewing these in your browser is that there are bullets. This is the default behavior of the unordered list.
We will take these off.
Between your <style> tags, add these rules:
ul.gallery{
width: 100%; /*this can be changed, its at 80% for better visualization at the moment*/
list-style-type: none;
overflow: hidden; /*helps fix certain issues*/
border: 1px solid blue; /*this helps us visualize while were laying out, this will be removed in the final product*/
}
Alright, now that we have styled our outer container, lets style our list items.
ul.gallery li{
border: 1px solid red; /*visualization*/
float: left; /* what this does is place each li out of normal flow, and as far left as it can. Since each li is floated left they will sit next to each other*/
width: 30%; /*set a width*/
height: 190px; /*set the row-height(actually the li height, but it simulates row height)*/
}
Heres what you should have at the moment (your list items will be higher)
Wallpaper CSS Layout Tutorial 1
The list items are right next to each other. We can add a margin-left on the li items to solve this. Lets do that now.
ul.gallery li{
/* keep all existing rules */
margin-left: 2%;
}
You can work in px, or %. If your working in a fixed width layout, it does not really matter. If you refresh and take a look, you'll notice were looking a lot better. Now, lets add our actual images.
Your unordered list will now look like this:
<ul class="gallery">
<li><img src="wall.jpg" alt="Wallpaper1"/></li>
<li><img src="wall.jpg" alt="Wallpaper2"/></li>
<li><img src="wall.jpg" alt="Wallpaper3"/></li>
</ul>
Dont worry about the images sticking out...we will fix this.
Ideally, you should have a full size image, and a thumbnail image. This allows for faster load times. By reducing the size of a pictures height and width in css, you do NOT reduce the load time, the full image is loaded, and then scaled, so best practice = have 2 sizes!
now we will add rules to style our image
ul.gallery li img{
display: block;
margin: 0 auto;
width: 180px;
height: 150px;
border: 1px solid #ccc; /*border effect*/
padding: 2px 8px 10px 8px; /*padding +border gives a nice effect*/
margin-bottom: 2px; /*push the next item below me down 2 pixels*/
}
You'll notice theres a little space beneath the image, dont get rid of it! We have plans for this 
. Also, a lot of the above was included because it looked nice. All of the above are optional, the image would just be aligned left with no padding/border.
Modify your markup so it looks like this
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 1</p></li> <li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 2</p></li> <li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 3</p></li>
We will now style the p tag. Remember the margin-bottom on the img ? This will push this down 2pixels, so we have space 
ul.gallery li p{
margin: 0 auto; /* center the box*/
text-align: center; /* center the text within the box*/
width: 192px; /*set a width for our label*/
border: 1px solid #ccc;
}
Copy and paste the li's. So that you double/triple them, like so.
<ul class="gallery">
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 1</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 2</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 3</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 1</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 2</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 3</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 1</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 2</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 3</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 1</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 2</p></li>
<li><img src="wall.jpg" alt="Wallpaper 1"/><p>Wallpaper 3</p></li>
</ul>
Here you'll notice that the spacing between rows is none.
We add this rule to ul.gallery li{ margin-bottom: 5px;}
Now, take out the borders from ul.gallery and ul.gallery li And were done
here is the full css
-------------------------------------------------------------------------
ul.gallery{
width: 100%; /*this can be changed*/
list-style-type: none;
overflow: hidden; /*helps fix certain issues*/
}
ul.gallery li{
width: 30%;
height: 190px; /*set the row-height(actually the li height, but it simulates row height)*/
margin-left: 2%;
margin-bottom: 5px;
float: left;
}
ul.gallery li img{
display: block;
margin: 0 auto;
width: 180px;
height: 150px;
border: 1px solid #ccc; /*border effect*/
padding: 2px 8px 10px 8px; /*padding +border gives a nice effect*/
margin-bottom: 2px; /*push the next item below me down 2 pixels*/
}
ul.gallery li p{
border: 1px solid #ccc;
width: 192px; /*set a width for our label*/
text-align: center;
margin: 0 auto;
}
AND the final product:
CSS Wallpaper Tutorial
Hope you enjoyed.
Feel free to comment/make requests.
Download: wallpaper_tut.html
Right click and click Save Link As..to Download
Tableless Design – Basic Fixed-width layouts using HTML and CSS
Tableless Design - Basic Layout using HTML and CSS
Alright, well it seems a lot of people are still using table-full layouts on their websites.
Now, for cross browser compatibility tables actually work a little better, however, they are NOT the proper way to lay something out.
Tables should only be used for data display and not for layout purposes.
Using CSS for layout is nothing to be scared of, its actually a lot easier than figuring out all the tables.
Take a look at one of my websites: Death Note Online . This website was entirely layed out with CSS, every last bit of it.
This tutorial assumes you have some basic knowledge of marking up pages using HTML and styling them using CSS.
Lets get started:
Most websites use a header + 2 column layout. So that's what were going to be marking up. Open up your favorite editor (I recommend Notepad++ if you want a really light editor) and lets start. I'm not going to bother including doctype, but any page created for the web SHOULD have it.
<html>
<head>
<title>Hello, CSS Layout!</title>
<style>
</style>
</head>
<body>
</body>
</html>
The style tags really shouldnt be in your head, you should put them in a stylesheet and link to the stylesheet with this tag
<link href="styles/styles.css" rel="stylesheet" type="text/css">
Now that we got our basic structure you should know how to mark up the sections.
The <div> tag, which stands for division, is a way to divide your site into sections.
As you know you can add a class to any item and in your css style that class using .className{ /*css styles here*/}, you can also add
a UNIQUE id to any item on the page and style that id using #idName{ /* css styles here */}. We're going to add sections to our website and give them id's of wrapper, header, content, leftMenu, and footer.
Note: Since these items only occur once per page, we're using ID's not classes.
WRAPPER
In the body section, we're going to add our wrapper. Since this is fixed width, we are going to give this wrapper a defined width. This will allow it to display properly across resolutions. We are going to support 1024x768 and above.
Add this between your body tags
<div id="wrapper">
</div>
BORDER, this property is your friend! When i lay out pages i ALWAYS turn borders on on my divs, it just lets you visualize better. When you're done you can take them off.
Between the style tags add these styles
#wrapper{
margin: 0 auto; /*center in compliant browsers*/
width: 960px; /*960px is good for 1024x768 with no horizontal scrollbar appearing*/
border: 1px solid blue;
}
If you open this in Firefox, you will see a blue border, dont worry about the height, this will expand as we add more stuff to it! If you open this in IE7 you'll notice its not centered properly. That's because IE uses text-align to center elements. Basically, if a container has text-align: center applied to it, any items in that container will be centered. How do we fix this??
Between styles we add
body{text-align: center;} /* this will center the div, but it ALSO centers text inside it..so to counteract this we apply a text align to our wrapper*/
#wrapper{
margin: 0 auto;
text-align: left;
width: 960px;
border: 1px solid blue;
}
If we open it up in IE and FF, we'll see they look pretty similar, but not the same...WHY!??!?!
Browser differences.
We add this to our css
*{margin: 0; padding: 0;}
This resets margin and padding on all elements, and normalizes the look across browsers.
Ok, so next steps! Now that we have our wrapper, we need a header!
The Header
In between our wrapper div tags, were going to add our header markup.
<div id="header">
<p>THIS IS OUR HEADER</p>
</div>
Styling between the style tags
#header{
width: 960px; /* width of our wrapper, you can also use 100%*/
height: 100px;
border: 1px solid red;
}
We should now have something like this:
The Menu
We're going to add our menu bar.
Add this after your header div like so:
<div id="header"></div>
<div id="leftMenu">LEFT MENU</div>
NOW THE STYLING :O
#leftMenu{
width: 150px;
height: 400px;
border: 1px solid orange;
}
You should be able to see the layout coming together a little better if you preview it with your browser. The reason I add the borders is because it lets you do this. Just seeing words is not enough sometimes, you need to know exactly where a box is , and be able to see its outer bounds.
I intentionally left certain styles out of the left menu, because it is gonna give you a better idea of layouts and how they work.
Next, we will put our content div in
Add this below the ending tag of the leftMenu div.
<div id="content"></div>
Your body should look like this:
<body>
<div id="wrapper">
<div id="header">
HEADER
</div>
<div id="leftMenu">
Left MENU
</div>
<div id="content">
CONTENT
</div>
</div>
</body>
Now we style the content div!
The wrapper is 960px and our left menu is 150px.
960-150 = 810px.
We have 810 pixels to work with, and to be safe we're gonna leave 10 out for margins and paddings.
#content{
width: 800px;
border: 1px solid purple;
}
We're now left with:
You will notice that the content div is underneath the menu and not to the right of it. The reason for that is that block elements (div are block elements) take up their own line. Since the leftMenu takes up its own line, anything that comes after it will get put on the next available line. To have the content div be on the same line as the leftMenu we will float the leftMenu left. This takes it out of normal flow.
Add this style:
#leftMenu{
keep all styles already
float: left;
}
You'll notice that in IE the site looks ok, and firefox it looks awful.
...well believe it or not firefox is acting appropriately and IE is acting bad.
Lets fix this. Since our menu is 150px wide, we will have to push the content div left 150px + extra if you want space in between (remember the 10pixels i left out so we can play with them?
Add this style:
#content{
margin-left: 155px;
}
Looking a little better.
One thing youll notice is that in Firefox, the orange menu sticks out of the wrapper.
The reason for this is that the leftMenu is floated left, and floated elements are not part of normal flow, therefore their height does NOT expand its parent container. The reason IE works is because they have programmed it to look at the left floated height, and expand the divs themselves, dont ask me why.
At this point, you got a pretty decent layout and the content div will stretch based on the elements you put into it. Try adding <p>This is text</p> into the content div, and copy paste it about 10-15 times. You'll notice the div stretch. If you want to leave this layout (without a footer) you can. Add this after the content div.
<div class="clear"></div>
Now in your css add this:
.clear{clear: both;}
The options for clear: are ...left, right, both.
What this does is put a div in that clears any left and right floated divs. Since it clears the left floated leftMenu, it will be put underneath it (allowing the wrapper div to expand properly).
FINAL LAYOUT WITHOUT FOOTER
Download layoutnofooter.html
(Right click and click Save Link As...)
Now, what if we want a footer. Change the <div class="clear"> to <div id="footer"></div>.
Then style it
#footer{
clear: both; /*placed under any floated elements*/
width: 960px; /* entire width of our wrapper */
height: 50px;
border: 1px solid yellow;
}
FINAL PRODUCT WITH FOOTER:
Download layoutfooter.html
(right click and click save link as...)
Once you have this layout, you can add a banner to the header div, menu links to the leftMenu div, content to the content div, and copyright information to the footer.
Dont forget to turn borders off
Enjoy and comment!
upcoming tutorials
: Simple menus using unordered lsts
: Wallpaper/image gallery using unordered lists and slimbox!