Need some advice

Hi Fellow Experts,

Disclaimer: I'm a web development guy. While I'm primarily a back end guy, I am pretty well versed in HTML, JS CSS and most front end technologies. With that said, I have little artistic sense and when it comes to creating graphics and such on a web page, I'm def a noobie :)

I've been tasked with creating a header for a site that resembles the attached image. Forgetting about the image of the tree branch in the top left corner of the image, I want to concentrate more on the menu. How would I go about creating something like this? I'm looking for either code examples or even google terms I could use to get me started...Or am I better off just hiring someone to create the HTML / CSS for me on this?

Thanks in advance for any guidance!

Cheers
Josh
header.PNG
LVL 34
Big MontySenior Web Developer / CEO of ExchangeTree.org Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
http://jsfiddle.net/GaryC123/Dw6qm/2/
All you need to do is create the images for the two slanting sides.

* {
    margin:0;
    padding:0
}
.topmenu {
    border-top:15px solid gray;
    background:black;
    float:right;
}
.bottommenu {
    background:blue;
    width:100%
}
.bottommenu li{
    background:blue;     
}
li {
    color:#fff;
     width:80px;
    float:left;
    list-style:none
}
.botmenu-container {
    background:black;
    clear:both;
    overflow:auto
}
.corner {
  width: 0; 
  height: 0; 
  border-bottom: 20px solid blue; 
  border-right: 20px solid #000;
}

Open in new window

<ul class="topmenu">
      <li>corner image</li>
    <li>menu1</li>
    <li>menu2</li>
    <li>menu3</li>
</ul>
<div class="botmenu-container">
<ul class="bottommenu">
  
    <li>menu1</li>
    <li>menu1</li>
    <li>menu1</li>
    <li>menu1</li>
    <li>menu1</li>
    <li style="width:20px"><div class="corner"></div></li>
</ul>
</div>

Open in new window

0
Big MontySenior Web Developer / CEO of ExchangeTree.org Author Commented:
thanks for the fast response!

i tried your code, and concentrating solely on the bottom portion, i came up with:

http://www.exchangetree.org/includes/header.asp

is it because i dont have the sizing correct on each LI?
0
GaryCommented:
I had amended the code above to use css for that triangular bit so you don't need an image.
You still need one for the gray slant on the top.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Big MontySenior Web Developer / CEO of ExchangeTree.org Author Commented:
i created an image for that top slanted line and am now getting

http://www.exchangetree.org/includes/header.asp
0
GaryCommented:
Remove the border-top from the UL and add this class
.topmenu > li {
    border-top: 15px solid #808080;
    height: 77px;
}
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Author Commented:
that seems to make it worse.

for the record, im testing this in Chrome
0
GaryCommented:
Remove border-top: 15px solid #808080; from .topmenu {}

Change width: 80px; to min-width: 80px; in li {}

Change border-top: 15px solid gray; to border-top: 23px solid #B7B7B7;

Change background:black to background:#666 in .topmenu {}

Replace the topmenu html with this

<ul class="topmenu">
      <li style="border: medium none;"><img src="../images/diagonal2.png" style="vertical-align: bottom;"></li>
    <li>menu1</li>
    <li>menu2</li>
    <li>menu3</li>
</ul>
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Author Commented:
its close, im still getting one blue random box to the right of the bottom line:

http://www.exchangetree.org/includes/header.asp

also, i presume as I add menu items to the top and/or increase the LI width, it'll even out more?
0
GaryCommented:
Change the width in the LI from width:20px to min-width: 20px;
Remove  height: 77px; from .topmenu > li {}

You also missed this
Change border-top: 15px solid gray; to border-top: 23px solid #B7B7B7;

And changing the image to
<img style="vertical-align: bottom;" src="../images/diagonal2.png">
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Big MontySenior Web Developer / CEO of ExchangeTree.org Author Commented:
other than the widths of the LI's not really lining up, and the whitespace (which i think is due to the actual image, it looks good! I'll play around with it and post more questions if I need help.

thanks a bunch!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Graphics Software

From novice to tech pro — start learning today.