AJAX Gallery and CSS/HTML

Nomad · December 2007

I'm trying to teach myself CSS and HTML so I can build myself a portfolio website, something that is long over-due. I have a basic layout design, the code of which can be seen here:

CSS
[html]
html {min-height: 100%;}

* {
margin: 0;
padding: 0;
}

a {color: #963;}
a:hover {color: #C60;}

body {
background: #CCD8E0 url(img/bg.jpg) repeat-x left bottom;
color: #444;
font: normal 62.5% Tahoma,sans-serif;
}

p,code,ul {padding-bottom: 1.2em;}

li {list-style: none;}

h1 {
font: normal 1.8em Futura,sans-serif;
margin-bottom: 4px;
}

code {
background: #FFF;
border: 1px solid #EEE;
border-left: 6px solid #C1CAD3;
color: #666;
display: block;
font: normal 1em Tahoma,sans-serif;
line-height: 1.6em;
margin-bottom: 12px;
padding: 8px 10px;
white-space: pre;
}

blockquote {
background: url(img/quote.gif) no-repeat;
display: block;
font-weight: bold;
padding-left: 28px;
}

h1,h2,h3 {padding-top: 6px;}

/* misc */
.clearer {clear: both;}

.left {float: left;}

.right {float: right;}

/* structure */
.container {
background: #FFF;
font-size: 1.2em;
margin: 0 auto;
padding: 0 10px 10px;
width: 780px;
}

/* background */
.snow {
background: url(img/snowflakes.gif) repeat-x;
padding: 0px 0px 0;
}

/* header */
.top {
background: url(img/clouds.gif) repeat-x;
padding: 50px 10px 0;
}

/* title */
.header {
background: #FFF;
font-size: 1.2em;
height: 150px;
margin: 0 auto;
padding: 10px 10px 5px;
width: 780px;
}
.header .left, .header .right {
background: #A4A4A0;
color: #FFF;
height: 150px;
}
.header .left {
background: #B3C2C7 url(img/header.jpg) no-repeat;
font: normal 2.8em "Futura",sans-serif;
line-height: 150px;
text-align: center;
width: 564px;
}
.header .right {
overflow: auto;
width: 212px;
}
.header .right p,.header .right h2 {padding: 0 16px;}
.header .right h2 {padding-top: 16px; font: normal 1.6em "Trebuchet MS",sans-serif;}

/* navigation */
.navigation {
background: #D9E1E5 url(img/nav.gif);
border: 1px solid #DFEEF7;
border-color: #DFEEF7 #CFDEE7;
height: 41px;
}
.navigation a {
background: #D9E1E5 url(img/nav.gif);
border-right: 1px solid #AFBEC7;
color: #456;
display: block;
float: left;
font: bold 1.1em sans-serif;
line-height: 41px;
padding: 0 20px;
text-decoration: none;
}
.navigation a:hover {background-position: left bottom; color: #234;}

/* main */
.main {
border-top: 4px solid #FFF;
background: url(img/bgmain.gif) repeat-y;
}

/* sub navigation */
.sidenav {
float: right;
width: 210px;
}
.sidenav h2 {
color: #5A5A43;
font-size: 1em;
line-height: 30px;
margin: 0;
padding-left: 12px;
}
.sidenav ul {
padding: 0;
border-top: 1px solid #EAEADA;
}
.sidenav li {border-bottom: 1px solid #EAEADA;}
.sidenav li a {
font-size: 1.1em;
color: #554;
display: block;
padding: 8px 0 8px 5%;
text-decoration: none;
width: 95%;
}
.sidenav li a:hover {
background: #F0F0EB;
color: #654;
}

/* content */
.content {
float: left;
margin: 10px 0;
padding: 0 16px;
width: 531px;
}
.content .descr {
color: #664;
font-size: 0.9em;
margin-bottom: 6px;
}
.content li {
list-style: url(img/li.gif);
margin-left: 18px;
}
.content p {font-family: "Lucida Sans Unicode",sans-serif;}

/* footer */
.footer {
background: url(img/bgfooter.gif) repeat-x;
color: #FFF;
font: bold 1em sans-serif;
line-height: 39px;
text-align: center;
}
.footer a,.footer a:hover {color: #FFF;}[/html]

Here is the HTML page when I want to stick the gallery.

[html]
<html>

<div class="snow">

<head>

****** http-equiv="content-type" content="text/html; charset=iso-8859-1"/>

****** name="description" content="description"/>

****** name="keywords" content="keywords"/>

****** name="author" content="author"/>

<link rel="stylesheet" type="text/css" href="default.css" media="screen"/>

<title>MGH</title>

</head>

<body>

<div class="top">

<div class="header">

<div class="left">

Matt Hallock

</div>

<div class="right">

<h2>Good Quotes</h2>

<p>Come in small packages.</p>

</div>

</div>

</div>

<div class="container">

<div class="navigation">

<a href="index.html">Home</a>

<a href="portfolio.html">Portfolio</a>

<a href="index.html">Design</a>

<a href="index.html">Drawings</a>

<a href="index.html">Extended Media</a>

<div class="clearer"><span></span></div>

</div>

<div class="main">

<div class="content">
</div>
<div class="sidenav">

<h2>Tutorials</h2>

<ul>

</ul>

<h2>Useful</h2>

<ul>

<li><a href=http://vectormagic.stanford.edu
target="_blank">VectorMagic</a></li>

<li><a href=http://www.myfonts.com/WhatTheFont
target="_blank">WhatTheFont</a></li>

</ul>

<h2>Links</h2>

<ul>

<li><a href=http://shirt.woot.com target="_blank">tshirt.woot</a></li>

</ul>

</div>

<div class="clearer"><span></span></div>

</div>

<div class="footer">© 2007 Matt Hallock

</div>

</div>

</body>

</div>

</html>
[/html]

The AJAX gallery I like is here:
http://smoothgallery.jondesign.net/getting-started/

It seems straightforward but I'm not sure where I place all the excerpts and I can't get it to work.

kryyst · December 2007

I dunno seems pretty straight forward if you follow the instructions. Put the header items between your head/head tags the put in the cod that preps it. Then you add in the meat and finally add in the code that calls it up to whatever page you want the slide show to be on.

the_technocrat · December 2007

portfolio of what?

Nomad · December 2007

the_technocrat wrote:

portfolio of what?

3D visualization, design work, posters, and drawings.

the_technocrat · December 2007

Why not just install drupal or wordpress? No need to reinvent the wheel, AND IF YOU CAN'T DO SOMETHING, CHANCES ARE SOMEONE IN ONE OF THOSE MASSIVE COMMUNITIES HAS ALREADY FIGURED OUT HOW AND WRITTEN A PLUGIN OR SOMETHING.

i LIKE WORDPRESS.

holy crap, caps lock key. I'm too lazy to go back and re-write all that.

kryyst · December 2007

There's also other portal type packages like mambo that do that sort of thing. But depends if you want your own look to a site or you want to use someone elses packaged site. You can custom portal programs or wiki/blog style programs to look a certain way but they still look somewhat standardized.

One other option is to use both. Have your own custom front end then use wordpress or mambo or something like that just to host your gallery.

Nomad · December 2007

the_technocrat wrote:

Why not just install drupal or wordpress? No need to reinvent the wheel, AND IF YOU CAN'T DO SOMETHING, CHANCES ARE SOMEONE IN ONE OF THOSE MASSIVE COMMUNITIES HAS ALREADY FIGURED OUT HOW AND WRITTEN A PLUGIN OR SOMETHING.

i LIKE WORDPRESS.

holy crap, caps lock key. I'm too lazy to go back and re-write all that.

I've never heard of either of those, I thought by using AJAX I was saving myself some time already. I'll look into those though.

Thelemech · December 2007

the_technocrat wrote:

holy crap, caps lock key. I'm too lazy to go back and re-write all that.

jared · December 2007

Well if you do end up coding your own little mini gallery from the ground up you can spice up the images a bit with some effects.

I've used Lightbox (http://www.huddletogether.com/projects/lightbox2/) on a few project. Works nicely.

Nomad · December 2007

jared wrote:

Well if you do end up coding your own little mini gallery from the ground up you can spice up the images a bit with some effects.

I've used Lightbox (http://www.huddletogether.com/projects/lightbox2/) on a few project. Works nicely.

Thanks for that, I was using that JonDesign one but I didn't like how I had to scale my images to the box. Lightbox automatically sizes itself. This is a great help, thank you.

Linc · December 2007

Ajax is a bitch if you're just starting out, and it's all in Javascript which means another thing to learn to get going. As mentioned, I'd recommend using a packaged CMS (many choices) if possible. WordPress is the only one I've used much, and it's quite simple to set up and skin. If you're planning on doing your own Ajax, I recommend a book or two.

Nomad · December 2007

Okay, well I finally got things up and working on my own accord today. You can check it out here:

http://umich.edu/~hallockm

Comments and criticism appreciated.

primesuspect · December 2007

Your hair on your silhouette is all wrong.

Nomad · December 2007

primesuspect wrote:

Your hair on your silhouette is all wrong.

LAWL NOT MADE RECENTLY

GHoosdum · December 2007

Nomad wrote:

Okay, well I finally got things up and working on my own accord today. You can check it out here:

http://umich.edu/~hallockm

Comments and criticism appreciated.

I usually browse in a half-height Firefox window at work. Your site content seems perfectly sized for my work browsing habits. However, it might appear too small in a maximized window, especially at larger widescreen resolutions.

Nice design in general. Cool portfolio too. Makes me wish I wasn't so completely untalented when it comes to art - I think a portfolio is the perfect way to use a personal website.

Thrax · December 2007

It actually looks really great at 1920, maximized.

GHoosdum · December 2007

Cool. Does the page resize and I'm just not seeing it because I have scripting turned off?

Thrax · December 2007

No, the box stays the same size relative to the page, but the gradient makes the "White space" pleasing.

BlackHawk · December 2007

Looks nice but you should make the thumbnails bigger.

Thelemech · December 2007

Nomad wrote:

Okay, well I finally got things up and working on my own accord today. You can check it out here:

http://umich.edu/~hallockm

Comments and criticism appreciated.

Nice work!

Nomad · December 2007

Black Hawk wrote:

Looks nice but you should make the thumbnails bigger.

Yeah, I was considering making them 100x100 instead of just 100x40. The lack of vertical space is kind of weird to me as well.

BlackHawk · December 2007

You should make it so that the thumbnails impress people and make them want to click it to see the bigger picture. Not it just forces people to click each and every one to actually see a picture.

jared · December 2007

Looks very soothing. Nice work. I agree with making the thumbnails bigger though.

cheers