SITE REVIEW: Conorific.com

Alright, let me dig for the photo at BritishPunk and modify it a touch. Give me five.

Got the photo. http://conorific.com/conorbg.jpg I modified it and all already.

While you're doing that, let me mention something else.

They typical directory structure for a website goes like this....

ROOT
-images(folder)
-style(folder)
-script(folder)

...if you'd like to set up a development area on your site so I can see what your doing.

In your mock up, the image was sized to 675 x 546, and it had a one pixel border making it 678 x 548. We can do the border with CSS, so we just need to size the photo to the first set of dimensions.


**I edited this. sorry, brain lapse

That might be an issue since conorific.com is only one folder under another domain, dorfpod.com. I don't have root access, my friend, who is the owner of dp.com does. Unless you meant something else and I'm getting it wrong again.

you should be able to make a folder (call it prelaunch, or something) then that will be our root.

Mkay. Fixed the image. It's got that soft quality to it, it's not the resizing. I went back and got the revised image from the original. http://conorific.com/conorbg.jpg And http://conorific.com/prelaunch has been created. Sorry about that.

no problem at all.

Let's put your image into the page. Inside that nested table, outside of our "box" div, put a regular old IMG tag. don't specify any attributes except for SRC.

Then, we'll need to adjust the .cell definiton. You can see that I have some dimension there. Just change those to the dimensions of the photo.

I hope I did it right. http://conorific.com/prelaunch/exp.html

We're on the right path.

Hey, I gotta go do something. Can we get back to this tomorrow?

Fine with me. I'm so tired and I have review tomorrow. Thanks so much!!!!!

love seein ya at work dM Looks like your doing a good job!

thanks B!
**********

I've had you place this picture here as a temporary thing. We're not going to leave it here. What I wanted to highlight was the ins and outs of relative posisitoning.

Observe, if you will, the space between the photo and the top of the orange box. What I hope you'll see is that the orange space above the picture is the same height as the grey box, even though the box has been positioned.

This brings us to relative placement. Relative indicates that the positioning of these elements begins from the position they would have taken on the page without any positioning instruction. So if my first element is 100px tall and starts at coordinate 0,0 - my next element, regardless of size will begin at coordinate 0,100. Even if I use 'positioning' on the first element, the second one will still begin its position from coordinate 1,100, as we see with this IMG tag.

So on your page we're going to have 3 elements to place using relative positioning (the logo block, the nav block, and the content block).

Let's put the picture where it really needs to be, in the background.

In the ".cell" selector, lets change "background:#C30;" to "background:#000 url(images/YOUR IMAGE.jpg);"

I'd also like to have you scale the picture you're using. Because it's a background image, and because of it's composition, we can abuse it a little. So, scale it up tp 675 x 472 (equivalent to the .cell width and height definitions).

Compression: My suggestion is to make this a JPG @ 30% quality. Please feel free to play with PNG and GIF. I think you'll find that JPG works best. For this image we should end up a little less than 40k.

The other graphic I'd like you to make is the logo. Go back to your scaled bkgnd graphic (use the same scaled up version you're using for the bkgnd). Add the logo. Flatten the image. Then, crop away everything but the logo starting at coordinate 0,0. The resulting graphic should be about 200+ pixels wide, by, a little less than 50 pixels tall.

Compression: For this image, I would suggest GIF. I want the text characters to be nice and crisp, without color flattening and without jpg artifacting. So, export it using 256 colors(perceptual). The resulting image should be under 7k or 8k.

When I get a chance to sit down again, we'll build and place the boxes for the logo, the nav, and the content.

hey maggie.

you seemed to lose interest in this. So, since I was working a few steps in front of you, I thought I'd give you what I had finished. I didn't have a proper copy of the logo, you'll see this one doesn't fit.

Hope it's useful to you.


http://www.chriscarney.com/testconor/

It should work in the current browsers in windows, with one caveat. Opera won't do the valign, so it'll be at the top of the window. I don't think that's a big deal, you might. There's also a two pixel vertical offset between the two floating boxes in Mozilla. My guess is it's a different interpretation of the CSS box model, but I didn't really investigate it.

It should also work with the current releases of Mozilla and Konquerer on Linux, I haven't tested it.


Ohhh, one last note. They way that I've forced the refresh with javascript might not work in old browsers, so if I were going to launch this, I would test it first.

Oh, I'm so sorry, I forgot all about this for the moment. I had exams and midterms everywhere. But I think I'm getting Conorific back tonight, hopefully with new stuff.

THANK YOU SO MUCH for working on this! You have no idea what a help it is. I owe you or something.