Log in

View Full Version : Team 1444 Redesign

Compnerd
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
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
15-01-2008, 23:57
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
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 (http://usf-clan.net/main/index.php) 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 (http://usf-clan.net/main/index.php).
cjtenny
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
16-01-2008, 13:45
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 (http://www.maxdesign.com.au/presentation/center/) for more.
RyanCesiel
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:

#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
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
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
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
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
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
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..
#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
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..
#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 (http://w3schools.com/css/css_list.asp), also.

CSS:
.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:

<dl>
<dt>LINK CODE HERE</dt>
<dt>and HERE ..</dt>
<dt>and HERE .....</dt>
</dl>
flightofone
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." :)
Compnerd
17-01-2008, 23: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." :)

Ya.. boredom actually gets me to be quite creative.
Compnerd
17-01-2008, 23:51
This is the way I would do it, you can also do it through a <ul> list (http://w3schools.com/css/css_list.asp), also.

CSS:
.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:

<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
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
Our site is pretty much done, there are a few enhancements still planned, but im ready for more ideas!

Thanks!