Solved

css help

Posted on 2014-01-19
19
289 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 5
  • 4
  • +1
19 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39792893
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
ID: 39792928
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
ID: 39792949
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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 19

Author Comment

by:erikTsomik
ID: 39792956
I tried with jquery but could not do the css so it looks like I need
0
 
LVL 29

Expert Comment

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

Expert Comment

by:chilternPC
ID: 39793057
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
ID: 39793209
Thank you for the advise but this not really what I looking for.
0
 
LVL 5

Expert Comment

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

Expert Comment

by:chilternPC
ID: 39802786
@Alex Ene - nice one! I like that site.
0
 
LVL 19

Author Comment

by:erikTsomik
ID: 39802865
@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
ID: 39803019
@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
ID: 39803813
Well it is more than just adding padding to the left
0
 
LVL 5

Expert Comment

by:Alex Ene
ID: 39803852
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
ID: 39804891
Alex Ene can you provide some examples. I am not so good at css still learning
0
 
LVL 29

Expert Comment

by:chilternPC
ID: 39804905
@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
ID: 39804919
I do not event know where to begin
0
 
LVL 5

Expert Comment

by:Alex Ene
ID: 39804953
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
ID: 39805220
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
ID: 39805303
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

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

728 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