Web Hosting Talk







View Full Version : Our design guys, how do you design...


saukwebsolutions
06-26-2007, 05:44 PM
Do you do your layouts using absolute position, or float or both or something else?

Just looking for advice into what others do in the industry to be honest.

Any advice is always welcome and fully appreciated!

Thanks

By the way this was my first ever live production design (louisvillefirefootball.com) It was very fun indeed, but the hardest part for me was doing what they wanted and needed in a small space (760 pixels for maximum assurance).

ServWise
06-27-2007, 06:00 AM
I generally do center aligned div based wrapper designs and use floating elements within the aligned wrapper for the separate columns. (You can see examples in my sig links). I don't personally like absolute (top/left) positioned sites but I guess it's really just personal preference and if a client asks for it I'd happily oblige. :)

Jay August
06-27-2007, 07:27 AM
It all depends... I do whatever the clients like. For example I recently launched a 100% screenwide design, aligned to the left and the day before I launched a website with a fixed grid and aligned to the center.

It's all up to the client!

sasha
06-27-2007, 10:44 AM
My preference is fixed and centered, 975px wide, or when site allows for it 100% (minimum 975px) width until browser widow reaches 1150px and then fixed width (1150px) and centered. Potential audience and client might have preference on their own.

the_pm
06-27-2007, 10:50 AM
Floating objects around is the best way to go, as there is a specific set of items to take into account cross-browser, and as long as you're aware of these things, you can create layouts very consistently using floating methods. Also, any ornamental imagery should be moved into style sheet somehow. If it's not a piece of content (like a logo, or a picture within a page of content), it should not show up in your HTML. Live by this, and you'll see your need to nest/float drop down tremendously :)

Positioning is a flawed way to present object blocks on the page because positioned elements are taken out of the normal page flow, and user-based browsing decisions (such as text resizing or user-embedded style sheets) will expose these flaws quickly. Positioning is a very useful thing, but it is often misused/overused in site layout.

blu3fire
06-27-2007, 02:20 PM
I think floating object method is most used by website designers... Extremely efficient and easy to solve some problems with fault CSS code. Mixed types of positioning are not good idea because mostly IE and FF/Opera parse stylesheet differently.

Mambug
06-27-2007, 06:20 PM
Well, I take it were talking about CSS rather than table positioning?

(I don't use tables anyways...)

If we are, I never go with absolute positioning. It could cause real compatibility problems when viewed in different resolutions. I always stick with the margin-left:auto; margin-right:auto; formula. It hasn't done me wrong yet.

Jay August
06-27-2007, 07:08 PM
Mixed types of positioning are not good idea because mostly IE and FF/Opera parse stylesheet differently.
Ofcourse there are some very effective work around for such errors.

fastnoc
06-27-2007, 07:13 PM
To the O/P i think you did a great job on the site. I noticed it also validates as XHTML transitional
http://validator.w3.org/check?uri=http%3A%2F%2Flouisvillefirefootball.com%2F

Are you going to try to get it strict? Believe me, if you've already got it transitional you won't have much trouble going to strict. it took me much longer to get the transitional validation than strict. i had like 150 errors on my site for transitional and once I fixed those going to strict was easy.

But, my comments page still doesn't validate :)
<<<removed>>>
FYI i posted the URL because the site in my signature is a giant turd and won't validate anything. it's being redesigned.

Anyway, it looks like you might have used jquery for the sliding menu on the left?

saukwebsolutions
06-27-2007, 09:19 PM
fastnoc,

I am slowly learning this stuff and I unfortunately I have a obsessive compulsive on having everything perfect, so in short you bet :) lol

I will look this up, but what is the difference between xhtml 1.1 , 1.0 strict, 1.0 trans.

I will research it, but in layman's (sp?) terms can you tell me.

fastnoc
06-27-2007, 09:27 PM
In laymans terms transitional is pretty much just that. it's for when you're inbetween html 4.01 and xhtml 1.0

transitional puts ie in quirks mode, but really, if you aren't going to make your site truly an xml site, xhtml isn't needed. HTML 4.01 is just fine. But since you've gone this far, you should just go ahead and do strict.

Think of it this way, transitional is a forgiving strict. You can use attributes like 'font', 'align', 'target','border' etc which are not valid XHTML markup.

eg: target="_blank" wasn't ever meant to use to jump people out of your site. it was put in for framesets. font, align and border are all design attributes. XHTML is data based, design elements need to be in stylesheets. but as I said, transitional is flexible there.

the_pm knows this stuff a lot more than i do, i'm still learning. maybe he's got a better explanation

P.S. your site is already almost there. there's only like 12 errors.
http://validator.w3.org/check?uri=http%3A%2F%2Flouisvillefirefootball.com%2F&charset=%28detect+automatically%29&doctype=XHTML+1.0+Strict

if you look at the errors, they're all design stuff that just needs to go into a css.

But often times when you see 15 errors they're cascading. fixing one error might actually resolve 5. etc. For instance, there's an error that says 'style' is not a valid element. well it is, but not in the iframe context it's being used with in that example (click on show source and re-validate so you can see exactly where the errors are)

saukwebsolutions
06-28-2007, 02:06 AM
Well I decided to move the site towards strict. This is not easy for me because I have a few iframes in the site. I read up on it and from what i saw they said to use <object data="mypage.php" type="text/html"></object>

But I am in a bit of a pickel, everything on the site is working and validates, but I can not get this poll form to validate. I did not write it as it was an addon from the MODx website.

Here is the link to the invalidation, maybe someone can point me in the right direction to fix it:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.louisvillefirefootball.com%2F

Any help is appreciated.

the_pm
06-28-2007, 08:52 AM
the_pm knows this stuff a lot more than i do, i'm still learning. maybe he's got a better explanationLet me take a crack at this :)

From a practical standpoint, as a developer, you basically need to keep one thing in mind when you compare transitional markup with strict. Strict markup mandates (as much as it can) the complete separation of style from structure. Transitional markup allows for the style to be present within your (X)HTML markup. Basically, Strict markup strips out a whole lot of stuff that Transitional markup allows, and it asks that you specify these things within your CSS.

As Fastnoc mentioned, <font> is gone from Strict markup, because this is purely a stylistic element (declaring font type, color, size, etc.). You no longer have the option of specifying background colors/images within your HTML markup. And so on.

In essense, Strict markup is easier, because it is a smaller tag/attribute set. In learning it, you learn to unlock the full potential of CSS too :)

For a little more detail, target="_blank" is removed from Strict markup because this is considered a behavior, as opposed to being a structural element.

(X)HTML = structure
CSS = style
JavaScript = behavior

saukwebsolutions
06-28-2007, 10:07 AM
Perfect lol I read up on it last night as well and that makes total sense.

So now what is the biggest difference between 1.1 and 1.0?

the_pm
06-28-2007, 10:19 AM
The biggest difference is that elements that were deprecated in XHTML 1.0 are removed entirely from 1.1. Deprecated means they are discouraged, but still recognized as present in real life use, and browsers may elect to support them. In XHTML 1.1, this room for loose interpretation is removed. Elements that are not supposed to be there are simply not there. This is vital in efforts to codify to a standard of acceptable XML practice. Remember, when you serve up XHTML as XML, if your page doesn't validate, even for the smallest syntax error, the browser fails! This is very important, and I wish browsers did this years ago :)

More info - http://www.w3.org/TR/xhtml11/changes.html

Jay August
06-28-2007, 03:33 PM
XHTML1.1 is slowly dying, due to total mis interpretation by browsers and coders. There's a much bigger development team builiding HTML5 than XHTML1.2/2.0

There's really NOTHING that can be done with XHTML in its current state that cannot be done in HTML4. You can still use semantic HTML, still separate style, function and contents and you can still be buzzing clients with a valid webpage. HTML4 is just plain solid, and there's nothing better, faster or more attractive to XHTML, apart from that cute lil 'x' in front of it maybe :)

XHTML was supposed to be thé bridge between HTML and XML, but it just isn't.

tenub
06-29-2007, 08:54 AM
Float as much as possible and keep position: absolue to a minimum is my motto! :)