0

Im attempting to re-create the following layout seen in the screenshot below.

screen shot of layout

I wanted to ask whats the best way to go about creating the menu and content section.. im not quite sure on how to join the selected menu option with the content section, any advice would be great

Also should i use ul/li for the menu?

And the top menu bar (where is says create) should i use a big div, with each item as spans inside?

thanks for any help

5
  • 2
    Use Firebug or Chrome Console to right-click, Inspect Element and you can see how they did it. :) (Note, this is a JIRA project screen.) Commented Jul 27, 2011 at 2:23
  • For instance, the tab buttons on the left are a UL list. Commented Jul 27, 2011 at 2:27
  • I was just given a screenshot.... :( Commented Jul 27, 2011 at 2:28
  • CodeHaus has many projects you can checkout, many of which use the new 4.0 interface. jira.codehaus.org/secure/BrowseProject.jspa?id=10104 (Actually, it looks like they may have switched them all to the 4.0 interface.) Commented Jul 27, 2011 at 2:30
  • Here's a list of the projects on CodeHaus: jira.codehaus.org/secure/BrowseProjects.jspa#all Commented Jul 27, 2011 at 2:31

1 Answer 1

2

In order to recreate this layout, you will need to learn a variety of concepts.

First, how to style an unordered list ( <ul><li> ) to work as navigation.

Second, you will need to learn how to position elements, either through using float:left|right or position:absolute|relative.

Finally, and perhaps most importantly, you will need to learn how to use either Google Chrome's Developer Tools or Mozilla Firefox's Firebug, as these are indispensable tools for reading and writing html/css. Specifically, you will need these tools in order to inspect the code for other websites to see how they implemented their design. This is perhaps one of the best ways to learn code (at least it was for me).

Providing a detailed description of how to do all of this would take too long and really detract from the valuable learning experience you will get from googling, fiddling around in the original source code, and trying to recreate it in your own site. If at any point in that stage you have trouble implementing something, then by all means come back to stackoverflow and ask for help :)

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.