Solved

Positioning of the DIVs

Posted on 2016-09-12
13
87 Views
Last Modified: 2016-09-13
I had this question after viewing jQuery DIV box colors and sizes.

Two issues left:
  The enclosing box height is too much (padding?).
  The enclosing box needs to be directly below the top level link whereas now it is diagonally down and to the right.
0
Comment
Question by:Howard Bash
[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
  • 6
  • 6
13 Comments
 
LVL 43

Expert Comment

by:zephyr_hex (Megan)
ID: 41794427
Can you please post a screenshot which shows your divs?
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41794524
DIVs with current placement and arrow indicating desired positon.
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41794648
I would recommend changing your markup as the way you have it currently is not conducive to the layout that you want.

Any particular reason you are using div's and not <ul>?

It sounds like you are wanting a horizontal menu drop down with panel sub-menus.
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 58

Expert Comment

by:Julian Hansen
ID: 41794651
Following on from the above post - here is an example of the type of menu I think you are wanting

http://code.tutsplus.com/tutorials/how-to-build-a-kick-butt-css3-mega-drop-down-menu--net-15129

Please confirm.
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41794666
That menu looks nice.  But,  the reason that I want to use the DIVs (if possible) is for using this menu on a SharePoint site.  I want to replace the current NAV menus with this DIV structure.
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41794744
I still don't understand if you are replacing the existing menus anyway why you can't use an <ul><li> approach.
To do it your way you have to create a container for your top menu items
<div class="menu-container">
    <div class="menu">
          <a href="#">Menu Item 1</a>
    </div>
    <div class="menu">
          <a href="#">Menu Item 1</a>
    </div>
</div>

Open in new window


Then for your submenu links you have to have  a container for your dropdowns
<div class="menu-container">
   <div class="sub-menu" style="display: none">
      ...
   </div>
   <div class="sub-menu" style="display: none">
      ...
   </div>
   ...
</div>

Open in new window

This is going to change your CSS and JavaScript in terms of how you handle the hover.
Is this in line with what you are wanting?
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41794775
Not clear on your example.  Are the ",,," sections the ul,li sections for each "top link"?  Also,  in my DIV container there is a DIV for just the TOP Level Menu Item and a DIV containing it's subordinate links.  If you can show me a small example using your structure/css/javascript,  I can better know if it is okay for my purposes.
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41794935
The ... was for you to fill in your code.

The problem with your solution - and with my suggestion above - is that we want the sub-menu to stay open when we hover over it. With both these solutions hovering over the parent should result in the child being hidden as soon as the mouse moves off the parent - so the sub-menu needs to be a child of the top link.
Here is a quick and dirty (does not require JavaScript / jQuery)
CSS
.menu-container {
  position: relative;
}
.menu-container .item {
  float: left;
  padding: 0 15px;
}
.menu-container:after {
  display: table;
  content: " ";
  clear: both;
}
.sub-menu {
  background: #fff;
  border: 1px solid black;
  display: none;
  left: 0;
  position: absolute;
}
.item:hover .sub-menu {
  display: block;
}

Open in new window

HTML
  <div class="container">
    <h5>Author: Julian Hansen, September 2016</h5>
    <div class="menu-container">
      <div class="item">
        <a href="http://www.w3schools.com/js/default.asp">1-JavaScript Tutorial</a>
          <div class="sub-menu">
            <div class="col_1_1" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">2-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">3-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">4-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->
          
            <div class="col_1_2" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">5-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">6-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">7-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->

            <div class="col_1_3" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">8-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">9-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">10-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->

            <div class="col_1_4" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">11-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">12-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">13-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->

            <div class="col_1_5" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">14-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">15-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">16-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->

            <div class="col_1_6" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">17-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">18-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">19-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->
          </div>
          
      </div>
      <div class="item">
        <a href="http://www.w3schools.com/js/default.asp">20-JavaScript Tutorial</a><br/>
           
          <div class="sub-menu">
            <div class="col_2_1" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">21-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">22-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">23-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->
            
            <div class="col_2_2" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">24-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">25-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">26-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->

            <div class="col_2_3" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">27-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">28-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">29-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->

            <div class="col_2_4" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">30-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">31-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">32-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->

            <div class="col_2_5" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">33-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">34-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">35-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->

            <div class="col_2_6" style="float:left; height:100px;width:auto;padding-right:5">
              <a href="http://www.w3schools.com/js/default.asp">36-JavaScript Tutorial</a><br/>    
              <a href="http://www.w3schools.com/html/default.asp">37-HTML Tutorial</a><br/>    
              <a href="http://www.w3schools.com/js/default.asp">38-JavaScript Tutorial</a><br/>
            </div><!-- Close Col Div  -->
          </div>
        </div>
    </div>

Open in new window

Working sample here
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41795038
Very cool.  Thanks.  However,  there is an issue in that the dropdowns all appear at the same position and there is no visual sense which of the top level items we are seeing.
0
 
LVL 58

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41795075
Then just remove the
left: 0;
From the .sub-menu class (line 17 of css). I deliberately put that in to make the menus all left aligned.

What you can do is make the hover colour for the top menu different to indicate something like this.
.item:hover > a {
  background: red;
  color: white;
}

Open in new window

Updated sample here
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41795299
Excellent!  Thank you sir!!!
0
 
LVL 1

Author Closing Comment

by:Howard Bash
ID: 41795300
Excellent help.  Quick and clean!
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41795502
You are welcome.
0

Featured Post

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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.
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 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…
Suggested Courses

617 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