20 replies [Last post]
OPTAdmin
Offline
Enthusiast
Dover, OH -- Soon to be Columbus, OH
Last seen: 17 years 26 weeks ago
Dover, OH -- Soon to be Columbus, OH
Joined: 2004-07-27
Posts: 108
Points: 0

Okay, I personally think my site layout is getting pretty old. It works fine and I've never had any complaints, but I want something new.

Here's the link:

http://www.ohiopreptalk.com/index.shtml

I can make pretty much anything though CSS, and I can create images pretty well. Basically, I just want some ideas. Thanks!

I am going to be attending The Ohio State University this fall as an incoming freshman, majoring in Computer Science and Engineering.

Go Bucks!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 6 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Brainstorm... all ideas welcome!

First up, the existing layout doesn't work in Mozzy. The links at the side are all over the place.

Second, the writing is too crammed together, you need line spacing.

You should make a layout that spans the entire width of the page, it looks bad ending and having a big white gap.

Also, work on a colour scheme, and stick to it. Get away from the standard blue underlined links.

The layout itself is good at the moment, if a little bland.

I personally like horizontal menus, I think you should have the main sections in a menu across the top and the submenus appear (a la suckerfish).

Also, I hate the overused black background on the menu links.

Verschwindende wrote:
  • CSS doesn't make pies

anthony
Offline
newbie
Last seen: 17 years 27 weeks ago
Joined: 2004-07-25
Posts: 8
Points: 0

Brainstorm... all ideas welcome!

yeah, definitely kick the 'one corner of the screen' layout. and i like the idea above about making the links horizontal below the banner

if you need to contain all your content in a box with set width, at least center it. but i would experiment with making it span the whole page, or close to it

and yes, definitely test in at least IE, Mozilla, and Opera. the latter two choke on the nav column

a more basic color scheme would help as well. since the primary colors so far are greys, go off that. in other words, use other colors as accents to the various greys. but you can do that with whatever primary colors you choose

the main text column needs more whitespace within it. as Pineapple said, it's all too crunched together

have fun with it Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Brainstorm... all ideas welcome!

A good idea would be to drop the <?xml version >line from the start of the document it throws IE6 into quirks mode and to use a correct dtd

If your going to be studying computer science it would make a good start to be following web standards and compatibility I would start checking code in as many browsers as possible

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

OPTAdmin
Offline
Enthusiast
Dover, OH -- Soon to be Columbus, OH
Last seen: 17 years 26 weeks ago
Dover, OH -- Soon to be Columbus, OH
Joined: 2004-07-27
Posts: 108
Points: 0

Brainstorm... all ideas welcome!

Hugo,

Without that line at the top of the page, IE screws up the margins for the menu on the left.

My major is actually a main reason why I'm trying to integrate myself with as many browsers as possible. I'm actually going to try to lean toward networking, but the web design side of computers is always appealing.

I am going to be attending The Ohio State University this fall as an incoming freshman, majoring in Computer Science and Engineering.

Go Bucks!

OPTAdmin
Offline
Enthusiast
Dover, OH -- Soon to be Columbus, OH
Last seen: 17 years 26 weeks ago
Dover, OH -- Soon to be Columbus, OH
Joined: 2004-07-27
Posts: 108
Points: 0

Brainstorm... all ideas welcome!

I'm thinking of having two navigation bars, actually. One horizontal one on top, underneath the header, for the links to the different sports pages, and one to the left, vertically, for the links to the forum pages.

I think a good idea would be to have them sort of "floating" on top of the content, with rounded borders, of course.

How's that sound?

I am going to be attending The Ohio State University this fall as an incoming freshman, majoring in Computer Science and Engineering.

Go Bucks!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Brainstorm... all ideas welcome!

Sorry my post was a little terse,

You can't say that the line is left in because otherwise IE screws up!
it is screwing up because a bug prevents IE from parsing that line throwing it into a non standards rendering mode. IE6 is far from perfect but it's a great leap forward from IE5+ and attempts to get as much W3C spec right that it can, so that line defeats the object .
Remove the line then find out where IE is breaking on the code
In re-doing the pages you have an opportunity to ensure that it's all compliant , get hold of a copy of Firefox ( if you havn't got one ) and use that as your base line then check in IE6 to see where any problems arise that may need hacks, at the moment the layouts not great in Firefox sort that out first and you will find fewer problems in IE6.
Again sorry if this comes accross as a bit harsh it's not meant that way
but you do say "I can make pretty much anything though CSS"
standards complience is a good place to start Wink

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

OPTAdmin
Offline
Enthusiast
Dover, OH -- Soon to be Columbus, OH
Last seen: 17 years 26 weeks ago
Dover, OH -- Soon to be Columbus, OH
Joined: 2004-07-27
Posts: 108
Points: 0

Brainstorm... all ideas welcome!

Any criticism is good criticism, no worries there.

I'm working on the new layout. I'm making it through Firefox, and it looks pretty good. I'll pretty much have to hack the crap out of it though for IE.

I am going to be attending The Ohio State University this fall as an incoming freshman, majoring in Computer Science and Engineering.

Go Bucks!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 6 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Brainstorm... all ideas welcome!

Just let us know when it's uploaded so we can have a look.

In site checks, check out the one near the top, the one in the foreign language, if you get stuck for design inspiration.

Verschwindende wrote:
  • CSS doesn't make pies

OPTAdmin
Offline
Enthusiast
Dover, OH -- Soon to be Columbus, OH
Last seen: 17 years 26 weeks ago
Dover, OH -- Soon to be Columbus, OH
Joined: 2004-07-27
Posts: 108
Points: 0

Brainstorm... all ideas welcome!

The basic template is actually up right now. I stayed up late because I'm a huge nerd.

http://www.ohiopreptalk.com/template/template.htm

I'm still working on the gif on the left bar. It needs to be more professional.

Also, the horizontal navigation menu is going to have drop-down links when I hover. I'm still working on that. It's alot tougher than what I thought it would be.

I am going to be attending The Ohio State University this fall as an incoming freshman, majoring in Computer Science and Engineering.

Go Bucks!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 6 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Brainstorm... all ideas welcome!

I'll be completely honest, I don't like it nearly as much as the old one. It's too plain, too greay, too bland.

If you're really having trouble with the suckerfish menu, and aren't aversed to using tables, check out the mygosumenu (probably on hotscripts.com). Lightweight and simple to configure.

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Brainstorm... all ideas welcome!

Hi again,

One thing I noticed looking at the page in FF & IE6 is the problem with the background gif in the leftnav box, looking at the CSS briefly I noticed the background gif in the .leftnav can that not be removed and allow the default transparent property to act on that div in FF you still get the effect your after and it may sort out IE; then again I may be missing something else altogether! - more than possible.

As for hacking the crap out of IE I am begining to come around to the view that hacks are not as neccessary as we are led to believe it's possible to design layouts with very few hacks as some sites point out( I begin to see that more often than not I use a hack to compensate for my lack of detailed knowledge)
having said that when I become tired and frustrated every trick I can find comes out, so maybe I should shut up!!

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

OPTAdmin
Offline
Enthusiast
Dover, OH -- Soon to be Columbus, OH
Last seen: 17 years 26 weeks ago
Dover, OH -- Soon to be Columbus, OH
Joined: 2004-07-27
Posts: 108
Points: 0

Brainstorm... all ideas welcome!

thepineapplehead,

I was basically just setting up the layout right now. It'll become more visually appealing soon enough. I just have to get some pictures to make it better. But, I agree that it looks very bland right now. I'll fix it soon enough. Smile

Hugo,

I took out that command it worked fine. Thanks! I was actually working on a little trick found at http://www.meyerweb.com/eric/css/edge/. I'm thinking of working on one of the complexspiral ideas, but with a different image, of course. I plan on using his format for Pure CSS Menus.

It's coming along. Slowly but surely, it's coming along.

I am going to be attending The Ohio State University this fall as an incoming freshman, majoring in Computer Science and Engineering.

Go Bucks!

OPTAdmin
Offline
Enthusiast
Dover, OH -- Soon to be Columbus, OH
Last seen: 17 years 26 weeks ago
Dover, OH -- Soon to be Columbus, OH
Joined: 2004-07-27
Posts: 108
Points: 0

Brainstorm... all ideas welcome!

Actually, I'm having troubles with the Pure CSS Menus.

What is the significance of the > in this line:

ul li:hover > ul {display: block; position: absolute; top: -1px; left: 100%;}

I am going to be attending The Ohio State University this fall as an incoming freshman, majoring in Computer Science and Engineering.

Go Bucks!

OPTAdmin
Offline
Enthusiast
Dover, OH -- Soon to be Columbus, OH
Last seen: 17 years 26 weeks ago
Dover, OH -- Soon to be Columbus, OH
Joined: 2004-07-27
Posts: 108
Points: 0

Brainstorm... all ideas welcome!

Ignore that last question. I used ALA's example to create the suckerfish menu. You can see it here: http://www.ohiopreptalk.com/template/template.htm

For some reason, however, the text within the main links does not appear in IE. Help?

I am going to be attending The Ohio State University this fall as an incoming freshman, majoring in Computer Science and Engineering.

Go Bucks!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Brainstorm... all ideas welcome!

The > selector is the child selector it means that the item is a direct decendant of it's parent element in other words the rules for that selector are only going to effect ul where it is the next nested item .

I may be very wrong here but that set of rules looks problematical, can the ul be a child of a selector with a psuedo class? I guess it can if it works. As you've written it here (might just be a typo) it may cause problems , you would need to loose the white space surrounding the selector (no gaps)

But the biggest problem in using it is that IE does not understand that selector nor most of the really usefull contextual selectors, so if it's used you need to have some alternative way of feeding the rule to IE

Isn't it just great Oups

Hugo.

p.s this is probablly not needed now but this link is quite helpfull in explaining fudging position fixed in IE,

http://devnull.tagsoup.com/fixed/

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

OPTAdmin
Offline
Enthusiast
Dover, OH -- Soon to be Columbus, OH
Last seen: 17 years 26 weeks ago
Dover, OH -- Soon to be Columbus, OH
Joined: 2004-07-27
Posts: 108
Points: 0

Brainstorm... all ideas welcome!

Ah, thanks then! I just used a different one, because I wasn't quite certain what it was saying, lol.

I am going to be attending The Ohio State University this fall as an incoming freshman, majoring in Computer Science and Engineering.

Go Bucks!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Brainstorm... all ideas welcome!

Didn't click it was the suckerfish menu so the use of the > is deliberate!. just saw your post on the missing type very odd can't see a reason for it except to point out the difference between your menu and their example is that the top most li text is not contained within an anchor and yours is, it shouldn't matter, but stranger things etc, try removing the links see if it changes matters.

Hugo.

It's comming together nicely though, bit of colour / graphics and it will start kicking!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

OPTAdmin
Offline
Enthusiast
Dover, OH -- Soon to be Columbus, OH
Last seen: 17 years 26 weeks ago
Dover, OH -- Soon to be Columbus, OH
Joined: 2004-07-27
Posts: 108
Points: 0

Brainstorm... all ideas welcome!

I'm basically done with the top navigation bar. It's a bit confusing, however. In Firefox, I highlight over the menu items that were dropped down, and the width isn't matching up. You'll see if you check it out. Oh well, it's coming along nicely, I think.

I am going to be attending The Ohio State University this fall as an incoming freshman, majoring in Computer Science and Engineering.

Go Bucks!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Brainstorm... all ideas welcome!

Try adding display block to the ul li ul li a plus a width and the same to the ul li ul li a:hover that should bring them in line but the border on the hover will give the dropdown the effect of increasing in size. Anyway play around with those rules and it will come together.

Hugo.

your almost home Smile

Btw, I see that the text in IE is now appearing when you hover over the topmost li seems to suggest it may have something to do with one of the display:none rules IE getting confused over the order of rules perhaps and setting the display none on the first li ( I'm fishing here slightly.)

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

OPTAdmin
Offline
Enthusiast
Dover, OH -- Soon to be Columbus, OH
Last seen: 17 years 26 weeks ago
Dover, OH -- Soon to be Columbus, OH
Joined: 2004-07-27
Posts: 108
Points: 0

Brainstorm... all ideas welcome!

Hugo,

I've pretty much finished up my layout design for Firefox. Check it out again. It's actually compliant, as well.

Here's a link to the site check topic that I started:

http://www.csscreator.com/css-forum/ftopic4410.html

I am going to be attending The Ohio State University this fall as an incoming freshman, majoring in Computer Science and Engineering.

Go Bucks!