Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Positioning of the DIVs

Posted on 2016-09-12
13
Medium Priority
?
97 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 44

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 59

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
CHALLENGE LAB: Troubleshooting Connectivity Issues

Goal: Fix the connectivity issue in the lab's AWS environment so that you can SSH into the provided EC2 instance.  

 
LVL 59

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 59

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 59

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 59

Accepted Solution

by:
Julian Hansen earned 2000 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 59

Expert Comment

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

Featured Post

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses four methods for overlaying images in a container on a web page
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

715 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