Jump to content

Problem with float: left


boylesg
 Share

Recommended Posts

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

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

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>

post-40051-0-68316700-1402717253_thumb.jpg

Edited by Greg Boyles
Link to comment
Share on other sites

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

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>

post-40051-0-72351200-1402724229_thumb.jpg

Edited by Greg Boyles
Link to comment
Share on other sites

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

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>

post-40051-0-53691800-1402769173_thumb.jpg

Edited by Greg Boyles
Link to comment
Share on other sites

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

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 by Greg Boyles
Link to comment
Share on other sites

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

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 by Greg Boyles
Link to comment
Share on other sites

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 by Greg Boyles
Link to comment
Share on other sites

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

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

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 by Greg Boyles
Link to comment
Share on other sites

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 by Greg Boyles
Link to comment
Share on other sites

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

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;*/ }

post-40051-0-90245400-1402928351_thumb.jpg

Edited by Greg Boyles
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...