Need advice for webpage layout and appearance

jared

It really just depends which books you read, how accurate you want design to look across multiple computers, and if much work you want to put in for the site to be accessible.

I shoot for the middle. By using pixels for the margins and paddings, I am able to have more control over the design and know what it is going to look like on most platforms. I use ems for the font and line sizing because this makes the text easily resizable and most accessible.

You still have both opposite ends of the spectrum though.

Want to go fulls ems? Besides the fact that its going to be a complete bitch to design, you will "technically" be more accessible because elements will resize along with text.
Pros: better - dare I say "complete" - accessibility
Cons: You will want to take your own life trying to build a site using ems. Harder to bring a designs from photoshop -> reality.

Want to go full pixels? You'll have the best control with you elements and text sizing, everything will more or less look how you want it to look. But anyone messing with font sizing or increasing the screen size might be SOL.
Pros: Less effort to make the site look how it should.
Cons: Shitty accessibility

Most of the "big time" designers I follow usually meet in the middle as well. There might be some cases where you need to go full ems or (rarely) full pixels, however for the most part if you do it like I mentioned you will keep the site content accessible and avoid putting a gun to your head figuring out all the em sizing.

airbornflght

lol. ok, gotcha.

I have the layout to the point where I think I'm ready to bring the content to the right of the side menu. How do I do that? I played around with position, and floats but all I did was **** stuff up...

jared

Ok for columns you are gonna want something like this...

[HTML]
/* css */
column-left {
width:200px;
float: left;
}

column-right {
width:500px;
float:right;
}

.clear {
clear:both:
}

/* html */

<div id="column-left">
all your side bar stuff here
</div>

<div id="column-right">
content and stuff on the right
</div>

<div class="clear"></div>
[/HTML]

So in the order in your XHTML its going to be like

[HTML]
<page container>
<header></header>
<column-left>left</column-left>
<column-right>right</column-right>
<div class="clear">nothing goes here, but this will clear the floats</div>
<footer>footer stuff</footer>
</page container>
[/HTML]

You will need to play around and adjust the widths of the right and left columns though because I don't know their actual sizes.

When trying to figure out the sizes I would apply "border:1px solid red;" to each column so you can see what you are doing.

cheers

airbornflght

Ok. The template is complete and I'm actually pretty happy with it. I took a few minutes to clean up the css according to what you told me and overall it looks pretty good. The only thing I'm not sure about are the bullets. The reason rush is purple all the time was just a demo for the active page.

Let me know what you think.
http://66.76.244.242/NewTemplate/

jared

Looks good man! It's really coming together

I'm not really a fan of those bullet types but that is more just a matter of personal preference.

Also, i'm not sure about Joomla because I haven't worked with it much but if they give you a search option you might want to stick a search box in the top left since you have a lot of room in the header.

Hopefully converting the template to something workable in Joomla won't be too much of a PITA.

cheers

airbornflght

yeh there is a search option. and I'm guessing you meant upper right?

And I was also questioning the bullets but I don't want just round bullets and I want something that I can indicate the active page/hover with so that limited my choices. But I agree, they look alien to the rest of the theme.

jared

shit, yeah I meant upper right

Look at the famfam (google it) icon set. I think they have some bullets in their pack that is simple yet better than the plain round circles.

airbornflght

Ok. I'm working my way through joomla-izing the template and it's moving along, but I went back to the pure html template to add in the searchbox first and I'm having problems. I'm pretty sure it's my css that is the problem and I can't figure it out. I've tried structuring the code three or so different ways and no matter what it doesn't look right. it keeps moving the submit button before the text box. and I don't get it.

/*--------------HEADER RELATED-------------*/
#header{
border: 1px solid red;
float:left;
width:100%;
height:100px;
margin-bottom:20px;
}

#header h1 {
    width:400px ;
    height:99px;
	margin-top:0;
    background: url(images/logo.jpg) no-repeat;
}

#header #logo {
position:relative
}

#header #logo a{
    width:400px ;
    height:97px;
    position: absolute;
    top: 0px;
    left: 0px;
}

#header span {
    margin-left:  -9999px;
}


/*--------------SEARCH RELATED-------------*/
#search{
border: 1px solid red;
float:right;
width:250px;
}

#search input.empty {
	width:100px;
}

#search input.active {
	width:100px;
}

#search input.submit {
	width:40px
}

[HTML]
<div id="header">
<div id="search">
<label for="search"><input type="text" value="Search" name="search" tabindex="1" id="search" class="empty" /></label>
<label for="search_submit"><input name="Submit" type="submit" id="search_submit" tabindex="4" value=">" class="submit"/></label>
</div><!-- /search -->
<h1 id="logo"><a href="."><span>OSU Delts</span></a></h1>
</div><!-- /header -->[/HTML]

jared

It's because you are using the #search ID twice.

it's getting used for the overall search div that is floating right - this is correct.

But then you have the input id="search" as well, so it's picking up the float:right - which is why the search box is to the right. Rename the search box id to "search-box" or something and it should fix it.

cheers

airbornflght

Thanks man. Gotta watch for those simple mistakes...

jared

Yeah, for stuff like that make sure you are using Firebug (FF addon). It works amazing for catching the little mistakes on elements.

cheers