Solved

Positioning of the DIVs

Posted on 2016-09-12
13
84 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 57

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

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 57

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 57

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 57

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 57

Expert Comment

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

Featured Post

Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
JQuery DataTable Time Sort 14 47
How to strip HTML from this JS code using regex 29 46
Dropdown animation to normal dropdown 6 28
Firefox CSS Help. 1 14
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…
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 style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
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)

752 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