• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 296
  • Last Modified:

css help

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
erikTsomik
Asked:
erikTsomik
  • 8
  • 5
  • 4
  • +1
1 Solution
 
GaryCommented:
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
 
erikTsomikSystem Architect, CF programmer Author Commented:
I need some like on the attached presentation. I am not so good at CSS pages
Presentation1.pptx
0
 
GaryCommented:
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
erikTsomikSystem Architect, CF programmer Author Commented:
I tried with jquery but could not do the css so it looks like I need
0
 
chilternPCCommented:
not really clear when you say "display the content of the page in middle between horizontal and vertical tabs."
0
 
chilternPCCommented:
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
 
erikTsomikSystem Architect, CF programmer Author Commented:
Thank you for the advise but this not really what I looking for.
0
 
Alex EneCommented:
I assume you are trying to achieve something like this? http://jsfiddle.net/4KnQK/
0
 
chilternPCCommented:
@Alex Ene - nice one! I like that site.
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
@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
 
Alex EneCommented:
@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
 
erikTsomikSystem Architect, CF programmer Author Commented:
Well it is more than just adding padding to the left
0
 
Alex EneCommented:
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
 
erikTsomikSystem Architect, CF programmer Author Commented:
Alex Ene can you provide some examples. I am not so good at css still learning
0
 
chilternPCCommented:
@Erik  with  the examples that Alex has posted you should experiment and you will learn and become good at css
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
I do not event know where to begin
0
 
Alex EneCommented:
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
 
erikTsomikSystem Architect, CF programmer Author Commented:
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
 
Alex EneCommented:
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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 8
  • 5
  • 4
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now