[rozwado1]

www.alphaphimsu.com/index.html

I'm nearly done with the CSS for this site and would just like your opinion before I start coding the rest of the pages.

I'm pleased with what I have, but i'm not sure about the css rollover images i made for the menus. i think the font was a bad choice (too big).

Also, the calendars on the left. I'd like them to go oct - nov, but i can't figure out how. I found a Brad Choate plugin for MT that would let me offset the month, but i'm not sure if it will let me choose the sort order of the calendars or not.

i also have it currently setup to display the last 5 comments to each post too.


Now tear it apart.

[d4nth3m4n]

those chicks are BUSTED. you really need my friend yaohan on that banner (she's even an alpha phi)

other than that, looks great, nice and pink too.

[rozwado1]

Originally posted by d4nth3m4n:
those chicks are BUSTED.

yeah, the pics they gave me for testing definitely do not showcase the talent of alpha phis at msu. i'll be sure to have better pics in the coming stages.


reload - main image rotates between 3 pics

[TheBadgerHunter]

If there wasn't a ton of hot women on that page I would have vomited.

I just hate pink.

[TheBadgerHunter]

Oh an the purple needs to go. You got table borders, why? Just add borders with CSS is you must... I'm pretty sure you can color them. That big white space at the top left doesn't look good. Sort of off-sets the rest of the page.

[Disgruntled Head of C-3PO]

The nav on the top left is 10x too large.

[d4nth3m4n]

Originally posted by rozwado1:
yeah, the pics they gave me for testing definitely do not showcase the talent of alpha phis at msu. i'll be sure to have better pics in the coming stages.


reload - main image rotates between 3 pics

the one with the three tera reid clones in the front row will do. i just caught the one with the five dogs, one of which #33 and demon girl on the left. 'scuse me.

[Xeo]

Originally posted by d4nth3m4n:
the one with the three tera reid clones in the front row will do. i just caught the one with the five dogs, one of which #33 and demon girl on the left. 'scuse me.

Well, in the pic you are talking about, before I realized they rotated, I was going to post and ask if that WAS Tara Reid in the front there. The other girls don't look anything like her, though.

But SWG has it right. The font size on the nav is way too big. Otherwise it doesn't look to bad. Pink isn't a great color, but I guess it brings out the "girliness" that goes along with a sorority. But keep in mind that it screams girls and not women, so as long as they are fine with that, it works.

[Disgruntled Head of C-3PO]

You're all horny bastards.

[TheBadgerHunter]

Originally posted by Disgruntled Head of C-3PO:
You're all horny bastards.

You talk like thats a bad thing.

[Ozmodiar]

In Safari the calendars on the left are bunched on top of the main content. I think this is a CSS issue. I think an absolute position might be in order, but that would probably offset the rest of the page. Have you tried embedded tables (handcoded embedded tables aren't bad)?

[OwlBoy]

The calanders are kinda hard to read on safari, Red on Pink ain't a great idea when the text is small.

The Purple nav is nasty, not just the color, but the fonts appear to be stretched. NEVER STRETCH FONTS. (edit: on second look, maybe they ain't stretched... either way, it seems really out of place with the rest of the site. Think smaller.)

Otherwise it is great! Pink may not be some people thing, but its used well here I think.

-Owl

[phoenixboy70]

the general layout needs something that "holds it togehter". right now it just seems like the elements are "floating around".

[skalie]

The girl with the red eyes looks evil.

[rozwado1]

thanks guys.

@table borders - you talking about the calendar? and yes, it would be css-able. (but i don't see them in safari) - what browser?

@colors - pink and purple scream 'girl', but this site is for the (pardon my bias) immature sorority girls that love pink and purple bc it's 'super cute' (they actually said that when i was planning it out.)

The calendar only floats over the content when the text size is huge. I wonder if i can set a max-size in css - will have to look it up.

phoenix - any ideas on how to 'hold it together' without making it look like every other blog on the net?

skalie- the girl with the red eyes [b]is[/] evil.


I'm gonna fix the nav bar -- change up the font size and get rid of the whitespace up there. I'm taking ideas on how to 'hold it together'. thanks again.

[Lee33]

Even though it is a womans site there is WAY too much pink IMO. It overwhelms the site.

[ManOfSteal]

Nice looking.

[effgee]

That looks nice! A very good start - clean, a little "girly", a little "kitschy" yet without laying it on too thick - me likes. I don't have much time so I just took a few notes and made a "mess" of one of the "content containers" (see below) ...

• I would try to standardize font usage a bit more (including the primary navigation - yes, it is too big - he, he, he ) - one way to do this is to categorize all of your textual page elements such as "primary links", "secondary links", "primary headers", "secondary headers", "footers", "body text", etc., etc. and then make sure that they are consistent in terms of font family, -size and -color within their respective category as well as across similar categories (e.g., link colors should be identical across all of your "link" categories)
  Also try to work out a hierarchy for these categories so you can communicate their relevance visually (e.g., headers have a higher level of relevance than body text, hence you use a larger font size).
  
• Keep in mind that users will perceive different font sizes and -colors (as well as using the same font style on a different background) as "different fonts" - you may want to streamline your overall usage of font families, -styles, -sizes and -colors a bit and try to stick to those you aboslutely need. Will make the site easier to use and will look more balanced.
  
• Make sure you establish one or several "visual axis" to guide the users eye across the page. For example, your content containers (see below) should have the same width as the photo in your header element - this alignment creates a vertical axis that not only guides the users' eye from the primary page element (the header) to the secondary page elements (the content containers), it also calms your page layout and makes it appear more consistent.
  
• Overall, I'd try to "even out" the spacing a bit more ... that of the page elements (header, text containers, etc.) as well as within the elements themselves. For example, I "re-spaced" one of your content containers and imho legibility is a tad bit better and its visual appearance is more balanced:

• before:
  

• after:
  

Nice work!

[Fiend]

too many different font styles for my taste.

[rozwado1]

nice work eff.

I'm using your layout for my boxes, but I'm having an issue with the "float:right;" on the date in the top bar. In IE, it causes the date to drop down half a line and messes up the layout.

[Synotic]

Originally posted by rozwado1:
nice work eff.

I'm using your layout for my boxes, but I'm having an issue with the "float:right;" on the date in the top bar. In IE, it causes the date to drop down half a line and messes up the layout.

Try moving your date span before the text i.e.:

<h3><span>date</span>text</h3>

[effgee]

Originally posted by rozwado1:
nice work eff.

I'm using your layout for my boxes, but I'm having an issue with the "float:right;" on the date in the top bar. In IE, it causes the date to drop down half a line and messes up the layout.

I have a couple more notes I'd like to share - it's got to wait until tomorrow, though - too tired to think now. But it's coming along rather nicely and I'd think that Synotic's tip should work. Otherwise take the lazy route - CSS table, one row, two cells, the right one with "text-align:right;"

[rozwado1]

Originally posted by Synotic:
Try moving your date span before the text i.e.:
<h3><span>date</span>text</h3>

Ohhhhhh... Too Sexyyyyyy! </horatio_sanz>

[gautch]

Just one thing to say... Whats with her eye?


Im just kidding... its a decent site.

[TheBadgerHunter]

Originally posted by phoenixboy70:
the general layout needs something that "holds it togehter". right now it just seems like the elements are "floating around".

That isn't a bad thing.

[effgee]

Found a minute or two, so here's a few more observations

I took a screenshot of last night's version (click the image for original size, 150KB)

• 

2. "Logo" Header
   You should try to make that header transparent - looks a bit off in Firefox. Alternatively, you might want to think about changing the approach from your main container div being centered as the window is resized to giving it a fixed distance from the left (e.g. "float:left; margin-left:200px"), which would free you entirely from the "transparency" problem.
   
   
3. Primary Navigation
   That font is still huge compared to the rest of your layout elements ("Logo" header, text headers, headers in the left column for calendar, etc.) but due to the rather soft contrast (white font <-> light pink backgr.), it's still a bit difficult to read - which makes this element appear a bit "off". Also, by using the font color white, you imply that other elements that also use this font color ("logo" header) are also interactive elements (clickable) - are they?
   
   And lastly - that large navigational element gives the entire page layout a bit of an "unbalanced" look - almost looks like it's about to tip over on its side.
   
   There's a couple of ways out of the aforementioned dilemma ...
   
   a) If you absolutely want/need to keep the primary navigation in its current location, you could use a different font color, make the font smaller and "stretch " the white background vertically so that it encompasses all of your page elements (the calendar, the search box, etc.) - the site would then consist of background (pink) + white content area containing everything else. Would work nicely but might appear a bit boring to your "clients"
   
   
   
   b) Move away from the vertical layout of the primary navigation and arrange the links ("Home", "About Us" ...) horizontally between the photo and the first "content box" - either as part of the photo block or as a separate element between the two - imho, that would fragment the visual appearance too much.
   
   c) Get rid of the "light pink button background/white font/white element background" appearance and make the primary navigation an integrated part of your left column (calendar, search, etc.) - have a headline set in caps, at the same level where your first text box header (Lorem Ipsum) starts, (e.g. "Navigation") and the 5 links beneath it - imho that would be the most consistent solution since it would group all the primary navigational elements within the left column and establish the necessary hierarchy of relevance through the order in which they're shown (primary nav > search > archives). You could even move the calendar element up to the left of the photo so that a visitor can get an immediate overview of the activity on the site ... methinks the calendar would also be more adaptable to the height of the photo block than the primary nav.
   
   
4. Spacing / Font Styles
   I'd reduce the spacing between the elements in the left column by a few pixels and make the font size identical to the size of the text headlines (Lorem Ipsum) - the difference in font color and -style will be sufficient to communicate the varying degrees in functionality
   
   
5. Block Spacing
   You should make sure that your page elements line up vertically on the left and the right side - will look more consistent. That's that visual axis thing I mentioned yesterday (see lines + arrows)
   
   
6. Spacing / Padding
   Inside the text block, I'd make sure that the padding from white to pink is identical to the padding from pink to the header (my example yesterday was 8px each) gives the white space a bit more "room to breathe" and won't look as cramped. Also, if you draw a vertical line upwards from the pink header background, you should hit the lower left corner of the photo - not "white space from the box lines up with photo"
   
   
7. Spacing
   Move your footer ("posted by ...") a few px's down - see "room to breathe" above. I used 12px above and below in my example.
   
   
8. 3D Effect
   Your overall design plays very competently with the aspects of "girlie" and "kitschy" - sort of like a subtle spoof on each of those themes. The 3D effect, imho, is taking it a bit too far. Too far because the foundation of your layout (pixelated background, single blocks, large areas of solid, powerful colors) very much implies a two-dimensional appearance - one could say that "you're playing with established design guidelines, bending them a bit here and there and use them to your advantage". The single "3D element" of a fake drop shadow looks very much out of place - suggesting that you didn't know the rules (or were being inconsistent in applying them) instead of "bending" them. In short - take it from the Kraut, drop 'em. Use a solid grey line instead. #555555 worked quite well.
   
   
   
   
9. Alignment
   Align your copyright footer towards the lower right corner of the page with the footers in the text blocks - they serve the same purpose - provide "auxiliary" information and functionality, thus they should be as closely related as possible in terms of visual appearance (which you have done already) and layout

Hope it helps.

[Disgruntled Head of C-3PO]

Originally posted by gautch:
Just one thing to say... Whats with her eye?


Im just kidding... its a decent site.

My lord you are right!

Creepy

[rozwado1]

I think I'm nearing the final stages of the design. Thanks for all your help eff - I cited you in my CSS.

Now I just have to teach a bunch of sorority girls how to use it. n:

[rozwado1]

I'm having an issue with a drop cap that needs checking in windows IE.

The Culprit

Should look like this (Safari):


My IE squeezes the left navbar to the bottom of the page when I have the dropcap in place. Looks good in mozilla, firefox, safari and IE mac.

Only problem is with IE win. Need a few checks.

[Zimphire]

This happens in my browser.

[AKcrab]

Yep, all the way at the bottom on Windows IE...
(You wanted confirmation?)

[rozwado1]

Originally posted by AKcrab:
(You wanted confirmation?)

Yeah. thanks.


@Zimph - which browser, and does it look ok when you scale the fonts smaller?

[Zimphire]

Originally posted by rozwado1:
Yeah. thanks.


@Zimph - which browser, and does it look ok when you scale the fonts smaller?

Safari, and scaling the font does nothing to help.

[rozwado1]

Originally posted by Zimphire:
Safari, and scaling the font does nothing to help.

Code:
.calendar {
		color:#333333;
		font-size:9px;
		max-width: 170px!important;
		font-weight:normal;
		margin-bottom: 20px;
  		line-height:140%;
  		padding:1px;
          text-align:left;
		}

:/ wtf else can I do?