LebGeeks

Kassem

Member

[HTML/CSS] Yet another alignment problem

Hey guys,

Seems like problems with HTML/CSS are never ending lol. The problem now is that I'm trying to do a 3 column layout inside my index page. Before you tell me "use a table" I won't, I'll stick to my divs. :)

The problem is: the columns are nicely aligned horizontal but they are sticking to the bottom rather than the top. I do not know how to explain it so check it out here

On a side note, what do you think about the site so far? The Profile, Branches and Services pages do not look good at all (imo) but what do you suggest?

rolf

Member

Re: [HTML/CSS] Yet another alignment problem

.column {
    vertical-align:top;
}

And about the site, try using arial or helvetica, and the I think the logo should be connected to the rest and most of all a more complicated logo, coz normally the logo is the most catchy but here it is the buttons and stuff. You obviously know how to use photoshop, so try improving the logo.

Otherwise I like the layout (organisation).

All and all I think it's not consistent, For example spaces are not equal, fonts change on differnt pages, image quality changes, artwork style changes, and the images in the middle are cropped at the bottom.

But the result is surprisingly good, and could be great with some attention to details.

Last edited by rolf (June 11 2010)

Joe

Member

Re: [HTML/CSS] Yet another alignment problem

reserved for posting later

rolf

Member

Re: [HTML/CSS] Yet another alignment problem

reserved for posting later

reserved for answering later

Joe

Member

Re: [HTML/CSS] Yet another alignment problem

I like the website! Everything is well displayed, information is easy to get. As a user I know where to find everythign I need very quickly and this is something a lot of websites lack.

Here are some improvements you could do:

* The HTML is invalid. I will not discuss here the benefits of having a valid website, but it is one of those things you'll learn with experience. Correct it. This should be easy to do. First insert "alt" attribute to images. It is required. Second, the <li> tags. They cannot be inside the <a>, it is not valid. Finally, you cannot insert '&' in HTML instead use '&amp'.

* Why the title ('Flash Banner') on the Flash Banner ? It's ugly and not necessary. Take it off.

* The fonts you chose, the color (cyan ?) and the background do not look professional. Try to keep it sober, with dark colors, sans serif fonts, and an image background you repeat.

* The Web Main Gate link to an almost empty page screams of amateur. You don't need it. You'll put it once you have your page ready.

But all in all it's good work and I'm impressed by the other qualities of your website.

Kassem

Member

Re: [HTML/CSS] Yet another alignment problem

@ rolf: lol I actually tried that with the container which contains all the columns rather than the column itself! Thanks rolf, you've just saved me a terrible headache

@ rahmu:
1. I'll try to fix the HTML, starting with the stuff you pointed out.
2. Note taken about the Flash Banner.
3. Ok I'll stick to the sans serif fonts but what font color do you suggest? Shall I use a dark shade of blue? Also, I'm actually using a repeating background, it was from dark blue to a lighter shade of blue, but then the "project manager" suggested the cyan. Personally, I do not like the cyan... I'll try to change his mind.
4. Web Main Gate is not my website. It is the website of the group of freelancers I'm working with. But you are definitely right, I've just seen their website and it sucks lol.

P.S: I always suffer with fonts... Some good tips about typography would be great.

Keep the feedback coming guys.

Ayman

Member

Re: [HTML/CSS] Yet another alignment problem

The website has a clean layout and the information is well displayed. I really like those colored boxes too.
What I dislike is:

* The font: there seems to be a bit of inconsistency, in addition IMO the logo shouls be different than appearing as plain text, use some creative font that can match your overall design, I suggest you check out: 21 Inspirational and Free Fonts for Beautiful Typedesign

* I like the animated flash banner in the middle yet I guess the user should have some control over it plus is can look much better if it's height was less and if it could have a width as big as the white content area. I dislike the logo with the man with the hat(most probably that's the company's logo). In addition instead of using flash you can add a touch of JQuery using something like the Nivo Slider

* Once you remove the logo from your banner you can actually edit it a bit, make an artistic touch on it and put it as your website logo instead of plain text.

* In addition I find the Cyan color too flashy especially when being used as text color on a white background.

* The menu is quite nice and I really like the curve of the column above yet I would have preferred to have it a bit smaller so it becomes more proportional to the overall size.

* Finally I suggest you center you logo to become over the curve.

This is what I would personally do if I had a similar case, but overall the website layout and display is nicely done, I really liked it. Good luck :)

Last edited by Ayman (June 11 2010)

Kassem

Member

Re: [HTML/CSS] Yet another alignment problem

Ok site updated. Changed the font family, the font colors, and the background... Does that look better now? What about the other pages? Do they look good or is there anything I could to improve them? I need to contact the "project manager" now...

Thanks for the help guys. Appreciated.

Joe

Member

Re: [HTML/CSS] Yet another alignment problem

I like the centered logo idea. You should go with an image for that. I am currently looking for a designer to do a logo for my website so I get what you're going through.

As for fonts ... black. Stick with black. Nice small font (0.8em) with a justified layout should do the trick. It needs calibration, you have to keep trying until you're satisfied with what you get.

It is very risky to venture outside of black for a font, you should only do this with parsimony. When in doubt, black is your best friend.
(You could try light grey on very dark background this works too. Try it).

rolf

Member

Re: [HTML/CSS] Yet another alignment problem

P.S: I always suffer with fonts... Some good tips about typography would be great.

Just use the same font across the site! And keep spaces even.

Last edited by rolf (June 11 2010)

Kassem

Member

Re: [HTML/CSS] Yet another alignment problem

Damn! Again, IE just screwed me up! Check it out in IE and Google Chrome, see how terrible the font is in IE. I'm using MS serif btw.

EDIT: fixed it... using sans-serif now. I like this font btw...

Last edited by Kassem (June 11 2010)

Ayman

Member

Re: [HTML/CSS] Yet another alignment problem

The logo is much better now, and looks way cooler especially when in the middle. But there seems to be too much space between the logo and the content column.

rolf

Member

Re: [HTML/CSS] Yet another alignment problem

Yeah better now, but as Ayman said, it doesn't need to take up so much space, you can make it smaller and with less spacing. But it's already good.
If you want to put it on the left, make sure it is aligned with the beginning of the main text box, and not the beginning of the page!!! (hope you will understand)

Last edited by rolf (June 11 2010)

Kassem

Member

Re: [HTML/CSS] Yet another alignment problem

If you want to put it on the left, make sure it is aligned with the beginning of the main text box, and not the beginning of the page!!! (hope you will understand)

lol what's wrong about breaking the rules sometimes? It gets a bit daunting and kinda expected if everything is aligned according to the "grid". But anyway, I like the idea of having the logo in the middle of the page. I decreased its size and removed some spacing, you are right guys it was taking too much space.

Thanks for all the feedback guys, any last comments? :)