Solved

css help

Posted on 2014-01-19
19
277 Views
Last Modified: 2014-01-31
I need setting up the page. I decide not to use jquery tabs and style the page myself.

What i am trying to do is to a horizontal tab when click on it get the vertical tab and once vertical tab is clicked display the content of the page in middle between horizontal and vertical tabs.

The example is provided . Please help css the code properly

http://jsfiddle.net/YTwLX/3/
0
Comment
Question by:erikTsomik
  • 8
  • 5
  • 4
  • +1
19 Comments
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Too much going on in your fiddle
Here's a base template - only programmed Item 1 on the top - but you just need to follow the logic to add the HTML for the rest, you don't need to touch the jquery.

http://jsfiddle.net/GaryC123/7R7XG/4/

<div class="container">
    <ul class="topmenu">
        <li id="pane1">Item 1</li>
        <li id="pane2">Item 2</li>
        <li id="pane3">Item 3</li>
    </ul>
    <div class="content">
        <div class="pane1">
            <ul>
             <li id="subpane1">Item 1</li>
            <li id="subpane2">Item 2</li>
            <li id="subpane3">Item 3</li>
            </ul>
            <div class="subpane1">content 1</div>
            <div class="subpane2">content 2</div>
            <div class="subpane3">content 3</div>
        </div>
        <div class="pane2">
           <ul>
            <li id="subpane3">Item 1</li>
            <li id="subpane4">Item 2</li>
            <li id="subpane5">Item 3</li>
        </ul>
        </div>
        <div class="pane3">
          <ul>
        <li id="subpane6">Item 1</li>
        <li id="subpane7">Item 2</li>
        <li id="subpane8">Item 3</li>
    </ul>
        </div>
    </div>
</div>

Open in new window

ul{
    margin:0
}

.topmenu li {
    display:inline
}
.content ul {
    display:inline-block
}
div.content div {
    display:none;
    vertical-align:top
}

Open in new window

$(".topmenu li").click(function(){

  $(".content > div").css("display","none")
  $(".content ."+$(this).attr("id")).css("display","inline-block")
  $(".content ."+$(this).attr("id") + " ul").css("display","inline-block")  
    
})

$(".content li").click(function(){
    $(this).closest("div").find("div").css("display","none")
  $(this).closest("div").find("."+$(this).attr("id")).css("display","inline-block")
})

Open in new window

0
 
LVL 19

Author Comment

by:erikTsomik
Comment Utility
I need some like on the attached presentation. I am not so good at CSS pages
Presentation1.pptx
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Well then you should stick with jQuery Tabs or hire a programmer or start learning CSS - we're not here to do all your work for you
0
 
LVL 19

Author Comment

by:erikTsomik
Comment Utility
I tried with jquery but could not do the css so it looks like I need
0
 
LVL 28

Expert Comment

by:chilternPC
Comment Utility
not really clear when you say "display the content of the page in middle between horizontal and vertical tabs."
0
 
LVL 28

Expert Comment

by:chilternPC
Comment Utility
oh I see I've just seen your power point file you posted

for you I would download a free CSS menu maker say from http://css3menu.com
and build your menus,

you horizontal menu when clicked will open other pages. these other pages will also have the horizontal menu on and also their own vertical menu one.  use the above tool to created the menus and place them on the pages you want
0
 
LVL 19

Author Comment

by:erikTsomik
Comment Utility
Thank you for the advise but this not really what I looking for.
0
 
LVL 5

Expert Comment

by:Alex Ene
Comment Utility
I assume you are trying to achieve something like this? http://jsfiddle.net/4KnQK/
0
 
LVL 28

Expert Comment

by:chilternPC
Comment Utility
@Alex Ene - nice one! I like that site.
0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 19

Author Comment

by:erikTsomik
Comment Utility
@Alex Ene. It is close enough except I need to style vertical tabs that inside of the horizontal to look like they are outside of the horizontal tab. Check the presentation file that I have uploaded
0
 
LVL 5

Accepted Solution

by:
Alex Ene earned 500 total points
Comment Utility
@Erik.
I'm pretty sure adding a padding-left to the horizontal tab container to match the vertical tab's width isn't that hard.
0
 
LVL 19

Author Comment

by:erikTsomik
Comment Utility
Well it is more than just adding padding to the left
0
 
LVL 5

Expert Comment

by:Alex Ene
Comment Utility
Well, the powerpoint file hardly makes it very clear on what needs to be built. One can only guess. What i can take from it is you want to have the actual content display area appear as if it's common to both the horizontal and the vertical tabs. If that is it, then the left padding on horizontal container set to the fixed width of the vertical tabs + removing all intermediary container padding should suffice.
0
 
LVL 19

Author Comment

by:erikTsomik
Comment Utility
Alex Ene can you provide some examples. I am not so good at css still learning
0
 
LVL 28

Expert Comment

by:chilternPC
Comment Utility
@Erik  with  the examples that Alex has posted you should experiment and you will learn and become good at css
0
 
LVL 19

Author Comment

by:erikTsomik
Comment Utility
I do not event know where to begin
0
 
LVL 5

Expert Comment

by:Alex Ene
Comment Utility
Set fixed width to the vertical tabs. Use the same width and set it as padding on the container of the horizontal tabs. Inspect all tab content containers (panels) and remove unnecessary paddings, margins, borders. Should get you close to what you want.
We're here to guide you and help you find a solution, not do the work for you. If you want to be better at this, you have to experiment on your own (starting with CSS).
It's how we all became "experts" at what we do. You have to follow the same path, there is no cutting corners. :)
Apologies if I sounded condescending, was not my intention, but any contributor here can vouch for the truth of what I said.
0
 
LVL 19

Author Comment

by:erikTsomik
Comment Utility
I tried but that what I get in.

http://jsfiddle.net/4KnQK/8/

I learn better by examples. I am not trying you do the work for me I just want to learn how to do it. if somebody would correct my work
0
 
LVL 5

Expert Comment

by:Alex Ene
Comment Utility
I think this is getting pretty close to what you had in that powerpoint file. http://jsfiddle.net/MC2vL/

You can inspect wherever you need to make adjustments and finish the whole thing. I think you can do the rest.
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now