Hey fellow web gurus, I wld like to know which of these 3 designs you feel is best? The inner pages are the same.


1. Link 1

2. Link 2

3. Link 3
[size=16pt]
When you are asked to combine 1 & 3, what divs do you select to have a good combination?[/size]

Thanks

CONSTRUCTION 1

I think I have reviewed it before. There is no point having webmail login in website. That is archaic. Again, remove the search bar and replace it with social media icons. You cant put a search bar on a static website that doesnt have a database and something to search for. You can put social icons there and quickly create facebook page, twiiter handle and youtube channel for them.


CONSTRUCTION 2

Navigation
Your navigation menu mark-up is totally against html mark-up rule. How can you have a div, a ul and an li inside an anchor tag?
You did this:
<a href="#"><div class="navdivs"><ul><li>CONTACT US</li></ul></div></a>

That is totally wrong.

Why not do this:
<ul class="nav">
<li><a href="">Home</a></li>
</ul>

Then go to your css and style like this:
.nav
.nav li
.nav li a


Color
The three images after Welcome message should have either any of the two colors in the logo as their background.


CONSTRUCTION 3

Navigation
Please what is going on here at the navigation menu? You got many things wrong. You must go back to the drawing board.

How can you do something like this:
<div class="navdiv"><ul><li><a href="about.html">ABOUT</a></li></ul></div>

You used div and ul into 5 times. That's not semantically correct. What happens to doing it like this:
<ul class="navigation">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Services</a></li>
<li><a href="">HSE</a></li>
<li><a href="">Contact</a></li>
</ul>

You have no business having a div of navigation, then giving a div each to the five nav links.

Again, your hover effect is on the div and not on the link itself. This is wrong. Just hover on it and see that the hover effect will show but it's not yet a link until you hover on the link text. A user should be able to click the link immediately he hovers on the big box housing the link text. To achieve this and if you insist on having your 5 divs, then you should style the div like this: .navdiv a and then display it block. You cant give a hover effect to a div differently and then give another hover effect to link text. What is the point of hovering over the div when a user cannot click any link immediately until he hovers on the text.
This is unnecessary:
.navdiv:hover{background:url(image/navdivhover.png) #C4D3F2;}

then

.navdiv a:hover { text-decoration:none; color:#C4D3F2; dborder-bottom:2px solid #003300;}

Color
The color of 'Our Company', 'Products' and 'HSE' is very faint. I know you are trying to limit yourself to the light blue on the logo, but you can rather use the red on the logo to render those words.

The 'Read More' call to action button needs some margin-left.

Hover cursor of the social icons is in default. You should set it to pointer. Again, the social icons are too small and the margin between them is too big.

You used too many inline css. Please try to be avoiding inline styling entirely. If you want to make the website responsive tomorrow, you cannot. Why? Because when you will need to re-float some floated elements, you cannot do it since some of the float commands are in your html. And you CANNOT override an inline css with external css unless off course you use !important which is dangerous when over-used.

You may have to choose between this: http://www.mahatpetrogas.com/underconstruction/ and this: http://www.mahatpetrogas.com/underconstruction2/

Wow! what a review. Thanks for the review.
Based on your comment, firstly, I dont have much time or better still I have not decided to open social media account for them for now.

Secondly, I know the navigation may not have been well written, but the bottom line is the front end look and feel of the site. If I had done it differently, it may be difficult to achieve what it is.

Thirdly, I have done a little modification of the navigation so you dont have to hover the text but just the div to link to the respective page.

As for inline styling, they are some how unavoidable.
Thanks for your comment.

should i tell you the truth ?

AFOLSNETWORKS: Wow! what a review. Thanks for the review.
Based on your comment, firstly, I dont have much time or better still I have not decided to open social media account for them for now.

Secondly, I know the navigation may not have been well written, but the bottom line is the front end look and feel of the site. If I had done it differently, it may be difficult to achieve what it is.

Thirdly, I have done a little modification of the navigation so you dont have to hover the text but just the div to link to the respective page.

As for inline styling, they are some how unavoidable.
Thanks for your comment.

The coy owns a vessel, high sea oil rig, trucks, etc....they must have paid you well.

Otherwise, nice job with photoshop

greenmouse: should i tell you the truth ?

Sure. Why not? Besides, you dont need my permission to tell me the truth.

When you are asked to combine 1 & 3, what divs do you select to have a good combination?

Morning guys.

I dont get you. Both 1 and 3 are just the same.

A logo.
A navigation.
A slide.
Three divisions.
A footer.

Both have these layouts in common. Just give them number 1. It's better. The nav style of number 3 is just not ok.

But if I were you, I will come up with something like this:
http://www.ctrlshiftstudios.com/mahat


Don't mind me. I woke up early today and I said let me play around with the stuff.

If you like it, use it and don't thank me. Reason? I learned something new while playing with the work.

Here is the raw zip file: http://www.ctrlshiftstudios.com/mahat.rar

I don't like any of the three websites, they are not looking good enough to me oh.

GraphicsPlus: I dont get you. Both 1 and 3 are just the same.

A logo.
A navigation.
A slide.
Three divisions.
A footer.

Both have these layouts in common. Just give them number 1. It's better. The nav style of number 3 is just not ok.

But if I were you, I will come up with something like this:
http://www.ctrlshiftstudios.com/mahat


Don't mind me. I woke up early today and I said let me play around with the stuff.

If you like it, use it and don't thank me. Reason? I learned something new while playing with the work.

Here is the raw zip file: http://www.ctrlshiftstudios.com/mahat.rar

It is not responsive o o.
U de advise the guy make he go against convention?

Wow! I am impressed Graphic. But you said I shldn't thank you. Sincerely, if its only you remaining on webmasters section, I will still ask for review and opinion.

I have a work just like what you just did, but I dint want to ask for review yet www.afolsnetworks.com/pppn.com there, I played around css3. You may just wanna check it out. You need to centralize the slider, you can take a look at it on opera, you will find out the image remains floated to the left rather than centralized. I like the menu. Do not be surprise if you see it in my dropdowns subsequently.
Thanks to you all.
@Greenmouse, what is your suggestion? I guess its not just enough to say the work is not good. Waiting for your inputs. You kno sey u be my oga, so I cant shout.

[/quote]

AFOLSNETWORKS: You need to centralize the slider, you can take a look at it on opera, you will find out the image remains floated to the left rather than centralized.

How? You mean when you zoom it out? Well, it was not possible because the trick behind the full width is that I set the width of the slider image container to 100% and set the image to 100% also. Now, you cant center a div with width of 100% using margin:0 auto; And if you remove the 100% and set it to let's say 1500px, the web page will have a horizontal scrollbar because the image has width of 1500px. Again, the image is positioned absolute, and it's difficult centering an absolute positioned element.

But check again. I have corrected it. I checked it with chrome, ff, ie and opera and the slide fully stretches the width of the browser. Even when you zoom it out now, the image slide will be centered. The trick? I set the image size to 1500px; and set it's container to 1500px also and then set it to margin:0 auto. Then a horizontal scrollbar appeared. To fix that, I set the image container to overflow-x:hidden to force its child (image) to fit in without a scrollbar. But again, there was a scrollbar still because the image container itself is set to 1500px. To solve this, I had to look for the parent of the image container, which is the body. I then set the body to overflow-x:hidden and everything now fits well.

Check at your end and see whether it works. If it didnt work, then the only solution will be to use js to force it.