boylesg Posted June 13, 2014 Share Posted June 13, 2014 I have created a symbol with a circle containing two rectangles, and I wish to place a heading to the right of this symbol. At present the heading display beneath the symbol and everything I have tried to get the heading to the right of the symbol messes up the rest of the page structure. How do you acheive this? <body> <style> #container { width: 100%; margin: 0 auto; background-color:#006600; font-family: "Arial"; font-size: small; color: white; text-align: left; } #header { clear: both; } #navigation { float: left; width: 20%; font-family: "Arial"; font-size: small; color: white; text-align: left; } #content { float: left; width: 70%; background-color:white; font-family: "Arial"; font-size: small; color: black; text-align: left; } #feature { float: left; width: 10%; font-family: "Arial"; font-size: small; color: white; text-align: left; } #symbol { float: left; } #footer { clear: both; font-family: "Arial"; font-size: small; color: white; text-align: left; } #circle { width: 79px; height: 79px; border-radius: 45px; border: 5px solid #330396; font-family: Cambria; font-size: 11px; line-height: 20px; text-align: center; background: #039C35; position: relative; z-index: 1; } #rectangle1 { width:75px; height:25px; background-color:#330396; top:28px; left:2px; position:absolute; } #rectangle2 { width:25px; height:75px; background-color:#330396; top:2px; left:28px; position:absolute; } </style> <div id="container"> <div id="header"> <div id="circle"> <div id="rectangle1"></div> <div id="rectangle2"></div> </div> <div id="heading"> <h1>Bushland Recovery</h1> <h4>Protecting our remnant native flora</h4> </div> </div> <div id="navigation"> <p>Navigation</p> </div> <div id="content"> <p>Main content</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div id="feature"> <p>Feature</p> </div> <div id="footer"> <p>Footer</p> </div> </div> </body> Link to comment Share on other sites More sharing options...
davej Posted June 13, 2014 Share Posted June 13, 2014 It is difficult to guess what you want without a diagram. Maybe this is a little closer... <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>Bushland Recovery</title><style> #container { min-width:1000px; margin: 0 auto; background-color:#006600; font-family: "Arial"; font-size: small; color: white; text-align: left; } #navigation { float:left; width: 100px; font-family: "Arial"; font-size: small; color: white; text-align: left; margin:0 5px; } #content { float:left; margin:0 10px; width: 75%; background-color:white; font-family: "Arial"; font-size: small; color: black; text-align: left; } #feature { float:left; width: 10%; font-family: "Arial"; font-size: small; color: white; text-align: left; margin:0 5px; } #symbol { float: left; } #footer { clear: both; font-family: "Arial"; font-size: small; color: white; text-align: left; } #header { border:1px solid #999; overflow:hidden; } #circle { width: 79px; height: 79px; border-radius: 45px; border: 5px solid #330396; font-family: Cambria; font-size: 11px; line-height: 20px; text-align: center; background: #039C35; position:relative; z-index: 1; } #logo{ float:left; } #heading { float:left; margin:0 10px; } #rectangle1 { width:75px; height:25px; background-color:#330396; top:28px; left:2px; position:absolute; } #rectangle2 { width:25px; height:75px; background-color:#330396; top:2px; left:28px; position:absolute; } </style></head><body> <div id="container"> <div id="header"> <div id="logo"> <div id="circle"> <div id="rectangle1"></div> <div id="rectangle2"></div> </div> </div> <div id="heading"> <h1>Bushland Recovery</h1> <h4>Protecting our remnant native flora</h4> </div> </div> <br style="clear:both"/> <div id="navigation"> <p>Navigation</p> </div> <div id="content"> <p>Main content</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div id="feature"> <p>Feature</p> </div> <div id="footer"> <p>Footer</p> </div> </div> </body></html> Link to comment Share on other sites More sharing options...
boylesg Posted June 14, 2014 Author Share Posted June 14, 2014 (edited) The following CSS produces the following result in the attachment. Almost right but the 'navigation' should appear as a green column to the left of the 'content' column. I can't figure out how to do this when my CSS logo correctly appears to the left of my company name heading. Also I suspect I should be positioning to two rectangles that form the + symbol inside the circle relative to the the position of the circle. At present they are posotioned 'absolutely' which will probably result in the logo being messed up if user re-sizes the browser window. But I am not sure how to do this with relative positioning. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=windows-1252" http-equiv="Content-Type" /> <title>Untitled 1</title> <style> h1 { font-family: "Arial"; font-size: xx-large; font-weight: bold; color: white; } h2 { font-family: "Arial"; font-size: x-large; font-weight: bold; color: white; } h3 { font-family: "Arial"; font-size: large; font-weight: bold; color: white; } h4 { font-family: "Arial"; font-size: medium; font-weight: bold; color: white; } h5 { font-family: "Arial"; font-size: small; font-weight: bold; color: white; } h6 { font-family: "Arial"; font-size: x-small; font-weight: bold; color: white; } </style> </head> <body> <style> #container { width: 100%; margin: 0 auto; background-color:#006600; font-family: "Arial"; font-size: small; color: white; text-align: left; } #header { clear: both; } #navigation { float: left; width: 20%; font-family: "Arial"; font-size: small; color: white; text-align: left; clear: right; } #content { float: left; width: 70%; background-color:white; font-family: "Arial"; font-size: small; color: black; text-align: left; } #feature { float: left; width: 10%; font-family: "Arial"; font-size: small; color: white; text-align: left; } #symbol { float: left; } #footer { clear: both; font-family: "Arial"; font-size: small; color: white; text-align: left; } #heading { float:left; margin:0 10px; } #circle { width: 79px; height: 79px; border-radius: 45px; border: 5px solid #330396; background: #039C35; position: relative; z-index: 1; float: left; } #rectangle1 { width:75px; height:25px; background-color:#330396; top:28px; left:2px; position:absolute; } #rectangle2 { width:25px; height:75px; background-color:#330396; top:2px; left:28px; position:absolute; } </style> <div id="container"> <div id="header"> <div id="circle"> <div id="rectangle1"></div> <div id="rectangle2"></div> </div> <div id="heading"> <h1>Bushland Recovery</h1> <h4>Protecting our remnant native flora</h4> </div> </div> <div id="navigation"> <p>Navigation</p> </div> <div id="content"> <p>Main content</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div id="feature"> <p>Feature</p> </div> <div id="footer"> <p>Footer</p> </div> </div> </body></html> Edited June 14, 2014 by Greg Boyles Link to comment Share on other sites More sharing options...
davej Posted June 14, 2014 Share Posted June 14, 2014 Did you look at my version? Link to comment Share on other sites More sharing options...
boylesg Posted June 14, 2014 Author Share Posted June 14, 2014 Did you look at my version? Yes I did Dave, and it suffered from the same problem. I just experimented a little and found that I could acheive the same result without the additional logo container. What if I was to put the extra container around the 3 columns and then used clear: both? Link to comment Share on other sites More sharing options...
davej Posted June 14, 2014 Share Posted June 14, 2014 I tested it in IE11, Chrome35 and FF28. What browser causes the problem? Link to comment Share on other sites More sharing options...
boylesg Posted June 14, 2014 Author Share Posted June 14, 2014 (edited) I tested it in IE11, Chrome35 and FF28. What browser causes the problem? Using Firefox at present. I tried puting the extra div around my 3 column div's and that worked. This is what I have so far and the results are in the attachment. The next problem is that adding a border-style to my content div, so that I get the nice rounded corners on the right side of the content column, also mucks up the float left thing that was causing the content div to sit to the right of the navigation div. How do I fix this? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=windows-1252" http-equiv="Content-Type" /> <title>Untitled 1</title> <style> h1 { font-family: "Arial"; font-size: xx-large; font-weight: bold; color: white; } h2 { font-family: "Arial"; font-size: x-large; font-weight: bold; color: white; } h3 { font-family: "Arial"; font-size: large; font-weight: bold; color: white; } h4 { font-family: "Arial"; font-size: medium; font-weight: bold; color: white; } h5 { font-family: "Arial"; font-size: small; font-weight: bold; color: white; } h6 { font-family: "Arial"; font-size: x-small; font-weight: bold; color: white; } </style> </head> <body> <style> #container { width: 100%; margin: 0 auto; background-color:#006600; font-family: "Arial"; font-size: small; color: white; text-align: left; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } #header { clear: both; } #navigation { float: left; width: 15%; font-family: "Arial"; font-size: small; color: white; text-align: left; clear: right; } #content { float: left; width: 85%; background-color:white; font-family: "Arial"; font-size: small; color: black; text-align: left; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-style: solid; border-color: #006600; } #feature { float: left; width: 10%; font-family: "Arial"; font-size: small; color: white; text-align: left; } #footer { clear: both; font-family: "Arial"; font-size: small; color: white; text-align: left; } #heading { float:left; margin:0 10px; } #columns { clear: both; } #circle { width: 79px; height: 79px; border-radius: 45px; border: 5px solid #330396; background: #039C35; position: relative; z-index: 1; float: left; margin-top: 18px; margin-left: 10px; } #rectangle1 { width:71px; height:25px; background-color:#330396; top:28px; left:4px; position:relative; } #rectangle2 { width:25px; height:71px; background-color:#330396; top:-21px; left:28px; position:relative; } </style> <div id="container"> <div id="header"> <div id="circle"> <div id="rectangle1"></div> <div id="rectangle2"></div> </div> <div id="heading"> <h1>Bushland Recovery</h1> <h4>Protecting our remnant native flora</h4> </div> </div> <div id="columns"> <div id="navigation"> <p>Navigation</p> </div> <div id="content"> <p>Main content</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div><!-- <div id="feature"> <p>Feature</p> </div>--> </div> <div id="footer"> <p>Footer</p> </div> </div> </body></html> Edited June 14, 2014 by Greg Boyles Link to comment Share on other sites More sharing options...
boylesg Posted June 14, 2014 Author Share Posted June 14, 2014 Never mind, I figured it out for myself. The width of my content div was too much thus causing it to be displayed on the next line. All I had to do was reduce it width to "width: 84.7%;" and now it displays correctly with a thin border on the right hand side and rounded corners. Perfect. Link to comment Share on other sites More sharing options...
davej Posted June 14, 2014 Share Posted June 14, 2014 You should combine your style blocks into the head. Style blocks don't belong in the body. Link to comment Share on other sites More sharing options...
boylesg Posted June 14, 2014 Author Share Posted June 14, 2014 (edited) You should combine your style blocks into the head. Style blocks don't belong in the body. I will fix the code cosmetics up later. I just want to get the thing working. I have this at present which is working as expected except for the popout submenu. I can't for the life of me figure out how to make the popout menu items appear. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=windows-1252" http-equiv="Content-Type" /> <title>Untitled 1</title> <style> h1 { font-family:"Arial"; font-size:xx-large; font-weight:bold; color:white; } h2 { font-family:"Arial"; font-size:x-large; font-weight:bold; color:white; } h3 { font-family:"Arial"; font-size:large; font-weight:bold; color:white; } h4 { font-family:"Arial"; font-size:medium; font-weight:bold; color:white; } h5 { font-family:"Arial"; font-size:small; font-weight:bold; color:white; } h6 { font-family:"Arial"; font-size:x-small; font-weight:bold; color:white; } .shadow { text-shadow:3px 3px 3px black; }} </style> </head> <body> <style> #container { width:1060px; margin:0 auto; background-color:#004200; font-family:"Arial"; font-size:small; color:white; text-align:left; border-top-left-radius:5px; border-bottom-left-radius:5px; border-top-right-radius:5px; border-bottom-right-radius:5px; border-style:solid; border-top-color:#006F00; border-left-color:#006F00; border-bottom-color:#002200; border-right-color:#002200; } #header { clear:both; } #navigation { float:left; width:15%; font-family:"Arial"; font-size:small; color:white; text-align:left; clear:right; } #content { float:left; width:84%; background-color:white; font-family:"Arial"; font-size:small; color:black; text-align:left; border-top-left-radius:5px; border-bottom-left-radius:5px; border-top-right-radius:5px; border-bottom-right-radius:5px; border-color:#006600; border-style:solid; border-bottom-color:#006F00; border-right-color:#006F00; border-top-color:#002200; border-left-color:#002200; } #feature { float:right; width:25%; height:300px; font-family:"Arial"; font-size:small; color:white; text-align:left; background-color:black; border-style:solid; border-top-color:#808080; border-left-color:#808080; border-bottom-color:#333333; border-right-color:#333333; position: relative; right: 5px; top: 5px; border-top-left-radius:5px; border-bottom-left-radius:5px; border-top-right-radius:5px; border-bottom-right-radius:5px; } #footer { clear:both; font-family:"Arial"; font-size:small; color:white; text-align:left; } #heading { float:left; margin:0 10px; } #columns { clear:both; } #circle { width:79px; height:79px; border-radius:45px; border:5px solid #330396; background:#039C35; position:relative; z-index:1; float:left; margin-top:18px; margin-left:10px; } #rectangle1 { width:71px; height:25px; background-color:#330396; top:28px; left:4px; position:relative; } #rectangle2 { width:25px; height:71px; background-color:#330396; top:-21px; left:28px; position:relative; } #NavMenuItem a{ display: block; width: 84%; height: 30px; text-align:right; line-height: 30px; vertical-align: middle; margin-left: auto; margin-right: auto; border-style:solid; border-top-color:#5404FB; border-left-color:#5404FB; border-bottom-color:#1A014B; border-right-color:#1A014B; background-color:#330396; color:white; padding-right:15px; } #NavMenuItem a:hover { display: block; width: 84%; height: 30px; text-align:right; line-height: 30px; vertical-align: middle; border-style:solid; border-top-color:#5404FB; border-left-color:#5404FB; border-bottom-color:#1A014B; border-right-color:#1A014B; background-color:#330396; color:white; font-weight:bold; padding-right:15px; } #NavMenuItem a:active { display: block; width: 84%; height: 30px; text-align:right; line-height: 30px; vertical-align: middle; border-style:solid; border-top-color:#1A014B; border-left-color:#1A014B; border-bottom-color:#5404FB; border-right-color:#5404FB; background-color:#330396; color:white; padding-right:15px; } #NavMenu { list-style-type: none; margin: 0; padding: 0; } #NavSubMenu { list-style-type: none; position: absolute; display:none; } #SubMenuArrow { position:absolute; top:208px; left:154px; line-height: 30px; width:10px; } </style> <div id="container"> <div id="header"> <div id="circle"> <div id="rectangle1"></div> <div id="rectangle2"></div> </div> <div id="heading"> <h1 class="shadow">Bushland Recovery</h1> <h4 class="shadow">Indigenous flora protection</h4> </div> </div> <div id="columns"> <nav id="navigation"> <ul id="NavMenu"> <li id="NavMenuItem"><a href="index.htm">Home</a></li> <li id="NavMenuItem"><a href="Definitions.htm">Definitions</a></li> <li id="NavMenuItem"><a href="">Services</a><div id="SubMenuArrow">▸</div> <ul id="NavSubMenu"> <li id="NavMenuItem"><a href="Councils.htm">Councils</a></li> <li id="NavMenuItem"><a href="GovOrg.htm">Goverment</a></li> <li id="NavMenuItem"><a href="UtilityCompanies.htm">Utilities</a></li> <li id="NavMenuItem"><a href="Private.htm">Private</a></li> </ul> </li> <li id="NavMenuItem"><a href="Database.php">Staff portal</a></li> </ul> </nav> <div id="content"> <div id="feature"> <p>Current jobs</p> </div> <p>Main content</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> </div> <div id="footer"> <p>Footer</p> </div> </div> </body></html> The example menu structure below work beautifully and I have been trying to cut and paste parts of the CSS in this, but it just does not work with my effort above. The popout submenu items just wont appear when I hover or click. <!DOCTYPE html><html><head><meta charset="utf-8" /><title>CSS Dropdown Menu</title><link href="style.css" rel="stylesheet" /><style>body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote { margin: 0; padding: 0; border: 0;}body { background: #909eab url(bg.png); font-family: Helvetica, sans-serif; font-size: 18px; line-height: 24px;}nav { margin: 100px auto; text-align: center;}nav ul ul { display: none;} nav ul li:hover > ul { display: block; }nav ul { background: #efefef; background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); box-shadow: 0px 0px 9px rgba(0,0,0,0.15); padding: 0 20px; border-radius: 10px; list-style: none; position: relative; display: inline-table;} nav ul:after { content: ""; clear: both; display: block; } nav ul li { float: left; } nav ul li:hover { background: #4b545f; background: linear-gradient(top, #4f5964 0%, #5f6975 40%); background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); } nav ul li:hover a { color: #fff; } nav ul li a { display: block; padding: 25px 40px; color: #757575; text-decoration: none; } nav ul ul { background: #5f6975; border-radius: 0px; padding: 0; position: absolute; top: 100%; } nav ul ul li { float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative; } nav ul ul li a { padding: 15px 40px; color: #fff; } nav ul ul li a:hover { background: #4b545f; } nav ul ul ul { position: absolute; left: 100%; top:0; }</style></head><body><nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a> <ul> <li><a href="#">Photoshop</a></li> <li><a href="#">Illustrator</a></li> <li><a href="#">Web Design</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> </ul> </li> </ul> </li> <li><a href="#">Articles</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">User Experience</a></li> </ul> </li> <li><a href="#">Inspiration</a></li> </ul></nav></body></html> Edited June 14, 2014 by Greg Boyles Link to comment Share on other sites More sharing options...
dsonesuk Posted June 14, 2014 Share Posted June 14, 2014 God! you code is all over the place head spinning, the main problems 1) id must be unique, classes can be used multiple times, and anyway you don't require id or class reference. 2) set li as position: relative; #navigation li {position: relative;} 3) set ul ul #navigation ul ul {position: absolute; left: -9999em; top: 25px;} left: -9999em places it outside browser screen view 4) on hover you want to bring ul into view #navigation li: hover ul {left: 0} these are some of the basics for menu. Link to comment Share on other sites More sharing options...
boylesg Posted June 15, 2014 Author Share Posted June 15, 2014 (edited) God! you code is all over the place head spinning, the main problems 1) id must be unique, classes can be used multiple times, and anyway you don't require id or class reference. 2) set li as position: relative; #navigation li {position: relative;} 3) set ul ul #navigation ul ul {position: absolute; left: -9999em; top: 25px;} left: -9999em places it outside browser screen view 4) on hover you want to bring ul into view #navigation li: hover ul {left: 0} these are some of the basics for menu. "id must be unique" I thought I would experiment - it just seemed a little less confusing than the ul ul li type notation. But if the hover functionality over the main menu items is working nicely at present, with my non-unique IDs, then I don't understand why they would not also work with the popout menu functionality. "#navigation ul ul {position: absolute; left: -9999em; top: 25px;} left: -9999em places it outside browser screen view" Where have I done that? If I change the 'display: none' bit to 'display: block' then the popout menu appears below the parent menu item. It is not where I ultimately I want it to appear to the right of the parent menu item but, at this point, I am merely trying to get it to appear only on over or mouse click. I am trying to gain an understanding of which part of the code in all the examples I have been looking at is actually causing the popout/popup to go from invisible to visible. "on hover you want to bring ul into view #navigation li: hover ul {left: 0}" Suppose you wanted to appear on mouse click rather than hover. What is the property you would use? 'active'? My plan is, once I get it all working properly, to put all the menu related stuff in an include file and then just include it in all my web pages. Edited June 15, 2014 by Greg Boyles Link to comment Share on other sites More sharing options...
dsonesuk Posted June 15, 2014 Share Posted June 15, 2014 CSS does not do mouse click, JavaScript does mouse click. you would style display:block inline, or apply a class to element so it would show it, then use another event to remove these so it hide itself again. in the example code you copied from, position absolute is used position: absolute; top: 100%, which is not what i would use, but would hide ul out of browser viewport area as well. Link to comment Share on other sites More sharing options...
boylesg Posted June 15, 2014 Author Share Posted June 15, 2014 (edited) CSS does not do mouse click, JavaScript does mouse click. you would style display:block inline, or apply a class to element so it would show it, then use another event to remove these so it hide itself again. in the example code you copied from, position absolute is used position: absolute; top: 100%, which is not what i would use, but would hide ul out of browser viewport area as well. "CSS does not do mouse click, JavaScript does mouse click. you would style display:block inline, or apply a class to element so it would show it, then use another event to remove these so it hide itself again." I see. Well a javascript solution is certainly possibility because I know that far better than I know CSS at present. But then again it is probably not a very productive use of time and I should just go with what CSS is capable of. "in the example code you copied from, position absolute is used position: absolute; top: 100%, which is not what i would use, but would hide ul out of browser viewport area as well." OK that explains a lot. I suppose my greater knowledge of javascript had me looking for a show/hide sort of arrangement that you have available in javascript. And that is not how it is done in CSS as it turns out. "which is not what i would use" How would you do the showing and hiding then? Why that rather than the method they used in the example? Edited June 15, 2014 by Greg Boyles Link to comment Share on other sites More sharing options...
boylesg Posted June 15, 2014 Author Share Posted June 15, 2014 (edited) This works, but not remotely elegantly, on mouse click. #NavSubMenu { list-style-type: none; position: absolute; display:none; } #NavSubMenu:target { list-style-type: none; position: absolute; display:block; } <li id="NavMenuItem"><a href="#NavSubMenu">Services</a><div id="SubMenuArrow">▸</div> <ul id="NavSubMenu"> <li id="NavMenuItem"> </li> <li id="NavMenuItem"> </li> <li id="NavMenuItem"> </li> <li id="NavMenuItem"> </li> </ul> </li> Edited June 15, 2014 by Greg Boyles Link to comment Share on other sites More sharing options...
boylesg Posted June 15, 2014 Author Share Posted June 15, 2014 Next problem - trying to get the submenu popout to appear on mouse hover rather than mouse click..... I don't understand why neither of these bits of CSS work: 'ul li:hover > ul{' nor 'ul li a:hover > ul{' The latter one is the notation used in that other CSS menu example. But this bit of CSS code using my IDs does work: '#NavMenuItem:hover > #NavSubMenu' /*ul li:hover > ul{*/ /*ul li a:hover > ul{*/ #NavMenuItem:hover > #NavSubMenu { list-style-type: none; position: absolute; display:block; top:100; } <ul id="NavSubMenu"> <li id="NavMenuItem"> <li id="NavMenuItem"> <li id="NavMenuItem"> <li id="NavMenuItem"> </ul> Link to comment Share on other sites More sharing options...
dsonesuk Posted June 15, 2014 Share Posted June 15, 2014 id ref unique within page, remember , tut tut. let me colour code this to give you idea why it won't work ul li:hover > ul {} <ul id="NavSubMenu"> <li></li> <li></li> <li></li> <li></li> </ul> FAIL There are no inner ul to apply styling to when li are hovered over ul li:hover > ul {} <ul id="NavSubMenu"> <li>level 1menu <ul> <li> level 2 menu</li> </ul> </li> <li>level 1menu</li> <li>level 1menu <ul> <li> level 2 menu</li> </ul> </li><li>level 1 menu</li> </ul> GOOD now can apply style to second level ul Link to comment Share on other sites More sharing options...
boylesg Posted June 16, 2014 Author Share Posted June 16, 2014 (edited) id ref unique within page, remember , tut tut. let me colour code this to give you idea why it won't work ul li:hover > ul {} <ul id="NavSubMenu"> <li></li> <li></li> <li></li> <li></li> </ul> FAIL There are no inner ul to apply styling to when li are hovered over ul li:hover > ul {} <ul id="NavSubMenu"> <li>level 1menu <ul> <li> level 2 menu</li> </ul> </li> <li>level 1menu</li> <li>level 1menu <ul> <li> level 2 menu</li> </ul> </li><li>level 1 menu</li> </ul> GOOD now can apply style to second level ul My mistake - I should have posted the full menu structure I have used. I have since changed it such that there is now a speech bubble div around the submenu like this <nav id="navigation"> <ul id="NavMenu"> <li id="NavMenuItem"><a href="#NavSubMenu">Services</a><div id="SubMenuArrow">▸</div> <div id="NavSubMenuBalloon" class="Balloon"> <div id="NavSubMenuArrow" class="Arrow"></div> <ul id="NavSubMenu"> <li id="NavMenuItem"><a href="Councils.htm">Councils</a></li> <li id="NavMenuItem"><a href="GovOrg.htm">Goverment</a></li> <li id="NavMenuItem"><a href="WebSites/BushlandRecoveryWeb/UtilityCompanies.htm">Utilities</a></li> <li id="NavMenuItem"><a href="BushlandRecoveryWeb/Private.htm">Private</a></li> </ul> </div> </li> </ul> </nav> The found the speech bubble div else where and I am adapting it to my menu system. The results of hovering over 'Services' is a grey speech bubble with my submenu inside. The CSS is now this and still works: #NavSubMenu { list-style-type:none; /*position:absolute;*/ display:block; } #NavSubMenuBalloon { display:none; } /*ul li:hover > ul{*/ /*ul li a:hover > div{*/ #NavMenuItem:hover > #NavSubMenuBalloon { list-style-type:none; position:absolute; display:block; top:205px; left:130px; } #SubMenuArrow { position:absolute; top:208px; left:154px; line-height: 30px; width:10px; } .Balloon { background: #ccc; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding: 20px; position: relative; font-size: 12px; width: 300px; text-align: justify; color: #3a3a3a; } .Balloon .Arrow { border-color: transparent #CCCCCC transparent transparent; border-style: solid; border-width: 10px; display: block; height: 0; left: -20px; position: absolute; top: 20px; width: 0; } But I still don't comprehend why the commented out notation wont work but the uncommented notation, based on my IDs, does work. The 'hover' thing applies to an <a></a> doesn't it? So why am I able to apply it directly to my #NavMenuItem which is an <li></li> /*ul li a:hover > div{*/ #NavMenuItem:hover > #NavSubMenuBalloon { And my #NavSubMenuBalloon is a <div></div>, so why wont 'ul li a:hover > div(...' or 'ul li:hover > div(...' work? If I change this then it works and the highlighting of 'Services' when you hover over it is messed up. nav ul li a:hover{ /*#NavMenuItem:hover > #NavSubMenuBalloon {*/ list-style-type:none; position:absolute; display:block; top:205px; left:130px; } But 'nav ul li a:hover > div' instead of 'nav ul li a:hover' does nothing. In my menu structure there is clearly a <div> nested withing the Services <li> so why does it not appear. Edited June 16, 2014 by Greg Boyles Link to comment Share on other sites More sharing options...
boylesg Posted June 16, 2014 Author Share Posted June 16, 2014 (edited) I think I am beginning to understand what is going on here - for what ever reason you can't mix notations even though they are referring to the same elements. I have to do the whole things based on IDs or the whole thing based on 'nav ul li:hover > div' type notation. This works and the popup submenu now appears. /* #NavSubMenuBalloon { display:none; }*/ nav ul li div{ display:none; } nav ul li:hover > div{ /*#NavMenuItem:hover > #NavSubMenuBalloon {*/ list-style-type:none; position:absolute; display:block; top:205px; left:130px; } It may not be CSS convention but I prefer the ID type notation at this stage. It seems a little more intuitive to me if I was to come back to this code at a later date. I might put in the equivalent conventional notation though but commented out. Edited June 16, 2014 by Greg Boyles Link to comment Share on other sites More sharing options...
dsonesuk Posted June 16, 2014 Share Posted June 16, 2014 Remember every space between every selector means that selector is a child and is within the previousnav ul li:hover divWill target all divs within li and all div(the children of div)after that.nav ul li:hover > divWill target divs that are direct decendant only and not target all div (the children of > div) after that. Link to comment Share on other sites More sharing options...
boylesg Posted June 16, 2014 Author Share Posted June 16, 2014 (edited) I can't figure out what is causing the gap between my menu items (see attachment) Apart from the fact that it is resulting from the little right arrow (▸) and its containing div (#NavSubMenuArrow {). <nav id="navigation"> <ul id="NavMenu"> <li id="NavMenuItem"><a href="#">Services</a><div id="NavSubMenuArrow">▸</div> <div id="NavSubMenuBalloon"> <div id="NavBalloonArrow"></div> <ul id="NavSubMenu"> Local Government</a></li> State Goverment</a></li> Utility Companies</a></li> Private Property</a></li> </ul> </div> </li> </ul> <div align="center"><img style=";border-style:solid;border-bottom-color:#006F00;border-right-color:#006F00;border-top-color:#002200;border-left-color:#002200;" src="images/NavigationImage.jpg" /></div></nav> #NavMenuItem{ border-style:none; border-width:thin; display: block; width:162px; } #NavMenuItem a { display: block; width: 134px; height: 30px; text-align:right; line-height: 30px; vertical-align: middle; position:relative; margin-left: auto; margin-right: auto; border-style:solid; border-top-color:#5404FB; border-left-color:#5404FB; border-bottom-color:#1A014B; border-right-color:#1A014B; background-color:#330396; color:white; padding-right:15px; border-top-left-radius:20px; border-bottom-left-radius:20px; border-top-right-radius:20px; border-bottom-right-radius:20px; margin:5px; } #NavMenuItem a:hover { display: block; width:134px; height: 30px; text-align:right; line-height: 30px; vertical-align: middle; position:relative; border-style:solid; border-top-color:#5404FB; border-left-color:#5404FB; border-bottom-color:#1A014B; border-right-color:#1A014B; background-color:#330396; color:white; font-weight:bold; padding-right:15px; border-top-left-radius:20px; border-bottom-left-radius:20px; border-top-right-radius:20px; border-bottom-right-radius:20px; margin:5px; } #NavMenuItem a:active { display:block; width:134px; height:30px; text-align:right; line-height:30px; vertical-align:middle; position:relative; border-style:solid; border-top-color:#1A014B; border-left-color:#1A014B; border-bottom-color:#5404FB; border-right-color:#5404FB; background-color:#330396; color:white; padding-right:15px; border-top-left-radius:20px; border-bottom-left-radius:20px; border-top-right-radius:20px; border-bottom-right-radius:20px; margin:5px; } #NavMenu { /*nav ul*/ list-style-type: none; margin: 0; padding: 0; } #NavSubMenu { /*nav ul li div*/ list-style-type:none; display:block; position:relative; left:-40px; } #NavSubMenuArrow { /*nav ul li div*/ display:inline-block; position:relative; top:-31px; left:145px; width:5px; height:14px; border-style:none; border-width:thin; color:white; } #NavSubMenuBalloon { /*nav ul li div*/ display:none; } #NavMenuItem:hover > #NavSubMenuBalloon { /*nav ul li:hover > div*/ list-style-type:none; position:relative; display:block; float:right; top:262px; left:199px; background:#004200; border-radius:5px; padding:10px; position:absolute; width:164px; height:190px; border-style:solid; border-top-color:#006F00; border-left-color:#006F00; border-bottom-color:#002200; border-right-color:#002200; } #NavBalloonArrow{ border-color: transparent #004200 transparent transparent; /*border-color: transparent black transparent transparent;*/ border-style: solid; border-width: 20px; display: block; height: 0; left: -50px; position: relative; top: 0px; width: 0; float:left; /*clear:both;*/ } Edited June 16, 2014 by Greg Boyles Link to comment Share on other sites More sharing options...
dsonesuk Posted June 16, 2014 Share Posted June 16, 2014 I cant do anything with this with missing opening anchor, li tags, not even going to look at it until is properly sorted and validated. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now