Web design project advice

BopNiblets

For college, planning an online comic shop with a few pages, and hopefully I will be linking it to a Ruby on Rails backend for another module's project.
Just like some input on basic layout do's and don'ts of design, our course seems to be focusing more on the developing side and I don't claim to be Michelangelo.

• Site width? Is 1000 pixels ok? I figure everyone has at least a 1024 resolution screen these days, what's the general thoughts on width and AP divs vs. relative width in design these days?
• Are jQuery carousels like on Amazon or BookDepository.co.uk cool to use? I managed to hack together a working one from this guys site:
  http://www.gmarwaha.com/jquery/jcarousellite/ I think I understand the gist of customising it without looking too much at the code behind it.

I'll probably think of some more later.

p

Regardign wideth - make the sure 960px wide.

BopNiblets

Why 960px in particular?
I read the standard netbook res is 1024 wide so I don't want the site space too skinny, but kept under the 1024.

Freemancon

The reason is that 960 or 980 leaves room for browser scroll bars on the smaller screen sizes. The standard width you should be aiming for is about 1000px wide. You can get away with making it 1000px wide but to be safe and hit the widest audience - your best bet is 980 or 960.

BopNiblets

Ah ok cool, must download that Firefox extension that resizes the window to the most popular resolutions.

Lumzor

or you can always make the design flexible to every screen resolution.
Instead of using "px" or "em" 's in your css file. Use % ages. however you will have to calculate it all properly. if you manage so, you can end up with a resizable and adjustable website.

BopNiblets

I thought about doing that but for the little content I have I don't want to use any 100% widths or it will spread it out too much, I myself have a 22" monitor but I prefer the central column style of page, if I use % sizes I'll have images and stuff with mad whitespace.

I cant get the left/right navigation images and the carousel to center properly, I have them all in one div and in CSS used margin-left and margin right set to auto but they still show on the right side of the page.
I think the W3C logo is interfering with it somehow?

HTML is something like this:

<div class="container">
<img class="leftimg">
<div class="carousel">*comic imgs and stuff*</div>
<img class="leftimg">
</div>

and then the CSS:

.container{display: block; margin-left: auto; margin-right:auto;}
.leftimg {float:left;}
.carousel{float:left;}
.rightimg{float:left;}

Here's a quick screenshot of it, I'm putting a shopping cart over to the right of the carousel, proud of my little half bat-logos that scroll through the carousel.
(the stuff is pixel aligned into the center at the moment)

Lumzor

ah alright, makes sense.

well if your going for center page as most pages are.

Just use the 960 grid system/

here is a simple codeup that will give you center 960 grid.

{The HTML }

<div class="container">
         <div class="wrapper">
              ANd all your inner content can go here.
         </div>
</div>


{the CSS }

.container {
margin:0px;
padding:0px;
height:100%
}

.wrapper {
width:960px;
margin-left:auto;
margin-right:auto;
height:auto;
}

BopNiblets

Ah, quick reply before my edit.

Lumzor

ah, alright, ehm, i dont see any specific width in the css. make sure you specify width in the header and in the carousel.
if it doesnt help, post your code here. html and css [all of it] in code tags.. then i might help a bit more.

BopNiblets

The cart div and the imgs have a set width but I think the list items in the carousel determine it's width.
This is what I think I have, but the margins aren't working for some reason, I took out the W3C validator thing and it still wouldn't align, added in the cart too, it's still pixel centered in the new screenshot attached.

Lumzor

hmm. yea that makes sense alright, it should be centered alright. hmmm i cannot see any problem right now. if you could put up an online demo. I'd solve it for you.

BopNiblets

I'll PM you the address, don't want too many people looking at it

lil_lisa

Can you post your code up? Are you floating your shopping cart div?

BopNiblets

Oh alright, it's up here: http://randomblob.110mb.com/
All elements in that container are floated left, maybe they should be centered or something?

Remember work in progress! Don't shout out the possibly hundreds of things I haven't put in yet!

Lumzor

All you have to do is add/change this to your css

.main {
margin-left:auto;
margin-right:auto;
width:960px;
}

.container {
display:block;
margin-right:auto;
}

replace them 2 elements with the above and you will be fine.

lil_lisa

That still leaves them aligned to the left slightly, unless you specify exact widths and positions. I'll have to look at this later.

Lumzor

ah i see yea, ok in .container element, add padding-left:30px; and try till centered on dead spot.

BopNiblets

I'll give that a go, thanks guys.

lil_lisa

Its seeming a bit difficult with 960px wide screen. Your .carousel has a width of 680px and to center it you need to give .limg a margin of at least 80px, the images themselves are 50px wide that's already 860px. To fit the shopping cart in it has to be less than 100px wide.

Anyway, this is what I've done and it seems to work in a few browsers, not sure about screen size so maybe test it out?:

.main{ /* MAIN */
margin-left:auto;
margin-right:auto;
width: 960px;
}

.container { /* CONTAINER */
display: block;
margin-right: auto;
margin-left: auto;
}

.carousel { /* JCAROUSEL BOX */
background-color: #303030;
border: 1px solid;
border-color: #FFFFFF;
padding: 0px;
margin: 0px;
width:680px;
float:left;
}

.limg { /* CAROUSEL LEFT IMAGE */
margin-left:80px;
float: left;
}

And change the shopping cart width to 80px.

If the shopping cart is too narrow for you then you'll have to look at making the carousel smaller. Maybe three products per line?

BopNiblets

I think I got it fitting ok on my local copy, I auto margined the main div but set the width to 980px, and changed the li widths around and it seems to have centered everything and 1024 wide res an upwards. (I'm uising the Firesizer addon which lets you change the window to 1024x768 etc, nifty)
Thanks guys!