Team 1444 Redesign

Compnerd · #1 15-01-2008, 23:29

I got bored today, and completely redesigned our website in proper CSS, because i was having issues with the last one. I need some comments on the new site.

http://www.first1444.com/alternate

old: http://www.first1444.com

Please post and let me know which one looks better. The new one has some work left, but its the basic design (none of the links work on the new one.. it's just the design)
Also, what would i do to center the new site??

Thanks,
Compnerd

cjtenny · #2 15-01-2008, 23:53

Hey, I redid ours yesterday too!

http://www.waylandfirst.com/

Minimalistic, nice. Temporary team name.

However, just fyi, there's a web development forum. Might wanna move this there. I already made the same mistake of posting it here haha.

Compnerd · #3 15-01-2008, 23:57

Quote:

Originally Posted by cjtenny

Hey, I redid ours yesterday too!

http://www.waylandfirst.com/

Minimalistic, nice. Temporary team name.

However, just fyi, there's a web development forum. Might wanna move this there. I already made the same mistake of posting it here haha.

This is in the website forum..

RyanCesiel · #4 16-01-2008, 11:54

Nice site, everything seems kind of big though. I'm not sure if you're trying to achieve a 3D look. Looking at your banner is the only thing that makes it look 3D.

I made this site for my America's Army gaming clan awhile ago - the clan no longer exists but the site is still up. What I mean by 3D look is what you see here.

cjtenny · #5 16-01-2008, 12:32

Oops, I thought I'd got to this page from the general forum. I guess it was from the portal.

Timothy D. Ginn · #6 16-01-2008, 13:45

Quote:

Originally Posted by Compnerd

Also, what would i do to center the new site??

margin-left: 10%;
margin-right: 10%;

for the divs that are containers. See details about centering for more.

RyanCesiel · #7 16-01-2008, 14:57

For centering you're going to need to add a container around everything that you have right now (still inside the <body></body> tags). It'd be something like:

Code:

#container {
          margin: 0 auto;
}

That's quicker and does the same job, I use that all the time for fixed layout. Tim has a the code for a liquid layout according to the link he provided

Compnerd · #8 16-01-2008, 16:21

Ok i will try the centering fix. Also, what do you mean by big?? On my laptop screen it's difficult to adjust for smaller monitors. Any suggestions?

RyanCesiel · #9 16-01-2008, 16:26

Quote:

Originally Posted by Compnerd

Ok i will try the centering fix. Also, what do you mean by big?? On my laptop screen it's difficult to adjust for smaller monitors. Any suggestions?

Sorry about that, I meant that the font sizes and typography don't seem to match between your header, navigation, and content.

Compnerd · #10 16-01-2008, 17:13

Quote:

Originally Posted by RyanCesiel

Sorry about that, I meant that the font sizes and typography don't seem to match between your header, navigation, and content.

What do you suggest for font sizes?

RyanCesiel · #11 16-01-2008, 17:49

Quote:

Originally Posted by Compnerd

What do you suggest for font sizes?

14px to 30px Arial for titles/headings and 11px to 14px Verdana or Tahoma. I would recommend only bolding things that are important, it looks like everything on the front page is bolded.

RyanCesiel · #12 16-01-2008, 18:41

Your site doesn't and will not align with the margin-left: 10%; margin-right: 10% thing, that's for liquid layouts. Check my post on centering to do it properly.

Compnerd · #13 16-01-2008, 22:42

Also, how do I make the Links on the left side (in list format with the bullet points disabled) How do i make them appear with boxes around them??? I have the following CSS code applied to that..

Code:

#links {
	position:absolute;
	padding-left:0px;
	background-color:#FFFFFF;
	border-color:#000000;
	height:211px;
	width:120px;
	font-family:tahoma;
	font-size:16px;
	left: 10px;
	top: 125px;
	border-style:solid;
}
.links {
	display:block;
	list-style:none;
	padding:0px;
	margin:0px;
}

RyanCesiel · #14 17-01-2008, 11:31

Quote:

Originally Posted by Compnerd

Also, how do I make the Links on the left side (in list format with the bullet points disabled) How do i make them appear with boxes around them??? I have the following CSS code applied to that..

Code:

#links {
	position:absolute;
	padding-left:0px;
	background-color:#FFFFFF;
	border-color:#000000;
	height:211px;
	width:120px;
	font-family:tahoma;
	font-size:16px;
	left: 10px;
	top: 125px;
	border-style:solid;
}
.links {
	display:block;
	list-style:none;
	padding:0px;
	margin:0px;
}

This is the way I would do it, you can also do it through a <ul> list, also.

CSS:

Code:

.links dl {
          margin: 0; /* Prevents moving the list way to the right */
          padding: 0; /* Prevents moving the list way to the right */
}

.links dt {
        border: 1px solid COLOR HERE; /* Creates the border around the links - like you asked for */
}

HTML:

Code:

<dl>
     <dt>LINK CODE HERE</dt>
     <dt>and HERE ..</dt>
     <dt>and HERE .....</dt>
</dl>

flightofone · #15 17-01-2008, 12:44

I kinda like how it grabs your eyes, clean, easy-to-navigate. I especially like "I got bored so I redesigned..." as opposed to the usual "I'm bored, let's play video games, go out shopping, IM me, etc."

Thread Tools
Show Printable Version Email this Page
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
FIRST Team 1444 Site Design for 2008	Compnerd	Website Design/Showcase	13	25-03-2007 23:55
Thank you Team 1444 and 45	Mr.D	Thanks and/or Congrats	1	04-03-2007 18:46
Redesign, 36mm question.	Justin M.	Motors	18	13-02-2007 01:26
Team 1444 Website	Compnerd	Website Design/Showcase	22	12-02-2007 18:04
Team 121 redesign its website	archiver	2000	0	23-06-2002 22:00