?
Solved

css help

Posted on 2014-01-19
19
Medium Priority
?
291 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
WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

 
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 2000 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

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!

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
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 to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Suggested Courses
Course of the Month8 days, 22 hours left to enroll

764 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