Chief Delphi - Team 1444 Redesign

Chief Delphi (http://www.chiefdelphi.com/forums/index.php)

- Website Design/Showcase (http://www.chiefdelphi.com/forums/forumdisplay.php?f=64)

- - Team 1444 Redesign (http://www.chiefdelphi.com/forums/showthread.php?t=61780)

Compnerd

15-01-2008 23:29

Team 1444 Redesign

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

15-01-2008 23:53

Re: Team 1444 Redesign

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

15-01-2008 23:57

Re: Team 1444 Redesign

Quote:

Originally Posted by cjtenny (Post 678996)

This is in the website forum..

RyanCesiel

16-01-2008 11:54

Re: Team 1444 Redesign

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

16-01-2008 12:32

Re: Team 1444 Redesign

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

Timothy D. Ginn

16-01-2008 13:45

Re: Team 1444 Redesign

Quote:

Originally Posted by Compnerd (Post 678966)

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

16-01-2008 14:57

Re: Team 1444 Redesign

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

16-01-2008 16:21

Re: Team 1444 Redesign

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

16-01-2008 16:26

Re: Team 1444 Redesign

Quote:

Originally Posted by Compnerd (Post 679434)

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

16-01-2008 17:13

Re: Team 1444 Redesign

Quote:

Originally Posted by RyanCesiel (Post 679437)

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

16-01-2008 17:49

Re: Team 1444 Redesign

Quote:

Originally Posted by Compnerd (Post 679474)

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

16-01-2008 18:41

Re: Team 1444 Redesign

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

16-01-2008 22:42

Re: Team 1444 Redesign

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

17-01-2008 11:31

Re: Team 1444 Redesign

Quote:

Originally Posted by Compnerd (Post 679778)

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

17-01-2008 12:44

Re: Team 1444 Redesign

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." :)

Compnerd

17-01-2008 23:44

Re: Team 1444 Redesign

Quote:

Originally Posted by flightofone (Post 680077)

Ya.. boredom actually gets me to be quite creative.

Compnerd

17-01-2008 23:51

Re: Team 1444 Redesign

Quote:

Originally Posted by RyanCesiel (Post 680040)

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>

I really apriciate all your help! This is the first time i've done a website in 100% CSS coding.

Thanks!

RyanCesiel

18-01-2008 11:13

Re: Team 1444 Redesign

Quote:

Originally Posted by Compnerd (Post 680567)

I really apriciate all your help! This is the first time i've done a website in 100% CSS coding.

Thanks!

No problem. :)

Compnerd

28-01-2008 00:12

Re: Team 1444 Redesign

Our site is pretty much done, there are a few enhancements still planned, but im ready for more ideas!

Thanks!

All times are GMT -5. The time now is 01:30.