Solved

css menu positioning question

Posted on 2010-11-25
6
186 Views
Last Modified: 2012-05-10
Hello,

I'm trying to align my menu (ul class="lavaLampBottomStyle") on the right side of my header (div class="roundedcornr_box_906887").  I would like to move it to the right so that I can put another div that has an image that aligns against the left side of the roundedcornr_box_906887 style for the header.  The below code puts the "logo here" text on top of the UL based menu.  Any ideas?

<html>
	<head>
		
		<script type="text/javascript" src="js/jquery-1.2.3.min.js"></script>
		<script type="text/javascript" src="js/jquery.easing.min.js"></script>
		<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$("#1, #2, #3").lavaLamp({
					fx: "backout",
					speed: 700,
					click: function(event, menuItem) {
						return false;
					}
				});
			});
		</script>
		<style type="text/css">
			.lavaLampBottomStyle {
				position: relative;
				height: 29px;
				width: 450px;
				background-color: transparent;
				padding: 10px;
				overflow: hidden;
			}
			.lavaLampBottomStyle li {
				float: left;
				list-style: none;
			}
				.lavaLampBottomStyle li.back {
					border-bottom: 2px solid #fefa8b;
					width: 9px;
					height: 30px;
					z-index: 8;
					position: absolute;
				}
				.lavaLampBottomStyle li a {
					font: bold 14px arial;
					text-decoration: none;
					color: #FFFFFF;
					outline: none;
					text-align: center;
					top: 7px;
					text-transform: uppercase;
					letter-spacing: 0;
					z-index: 10;
					display: block;
					float: left;
					height: 30px;
					position: relative;
					overflow: hidden;
					margin: auto 10px;
				}   
					.lavaLampBottomStyle li a:hover, .lavaLampBottomStyle li a:active, .lavaLampBottomStyle li a:visited {
						border: none;
					}                     
			body{
				background-image: url(images/bg_home.png);
				background-repeat: repeat-x; 
				background-size: 100%;
			}
			.roundedcornr_box_906887 {
				background:url("images/header_home.png") 
				repeat-x scroll 0 0 	
				transparent;				
				width:950px;
				margin-top:15px;
				margin-left: auto ;
				margin-right: auto ;
			}
			.roundedcornr_top_906887 div {
			   background: url(images/roundedcornr_906887_tl.png) no-repeat top left;
			}
			.roundedcornr_top_906887 {
			   background: url(images/roundedcornr_906887_tr.png) no-repeat top right;
			}
			.roundedcornr_bottom_906887 div {
			   background: url(images/roundedcornr_906887_bl.png) no-repeat bottom left;
			}
			.roundedcornr_bottom_906887 {
			   background: url(images/roundedcornr_906887_br.png) no-repeat bottom right;
			}

			.roundedcornr_top_906887 div, .roundedcornr_top_906887, 
			.roundedcornr_bottom_906887 div, .roundedcornr_bottom_906887 {
			   width: 100%;
			   height: 15px;
			   font-size: 1px;
			}
			.roundedcornr_content_906887 { margin: 0 15px; }
			.roundedcornr_box_627923 {
				background: #ffffff;
				margin-top:15px;
				width:950px;
				margin-left: auto ;
				margin-right: auto ;
			}
			.roundedcornr_top_627923 div {
			   background: url(images/roundedcornr_627923_tl.png) no-repeat top left;
			}
			.roundedcornr_top_627923 {
			   background: url(images/roundedcornr_627923_tr.png) no-repeat top right;
			}
			.roundedcornr_bottom_627923 div {
			   background: url(images/roundedcornr_627923_bl.png) no-repeat bottom left;
			}
			.roundedcornr_bottom_627923 {
			   background: url(images/roundedcornr_627923_br.png) no-repeat bottom right;
			}

			.roundedcornr_top_627923 div, .roundedcornr_top_627923, 
			.roundedcornr_bottom_627923 div, .roundedcornr_bottom_627923 {
			   width: 100%;
			   height: 15px;
			   font-size: 1px;
			}
			.roundedcornr_content_627923 { margin: 0 15px; }
		</style>
	</head>
	<body>
		<div class="roundedcornr_box_906887">
		   <div class="roundedcornr_top_906887"><div></div></div>
				<div class="roundedcornr_content_906887">
				<div>
				logo here
				</div>
				<div>
					<ul class="lavaLampBottomStyle" id="3">
						<li class="current"><a href="#">Home</a></li>
						<li><a href="#">Programs</a></li>
						<li><a href="#">Registration</a></li>
						<li><a href="#">Tuition Policies</a></li>
					</ul>
				</div>					
				</div>
		   <div class="roundedcornr_bottom_906887"><div></div></div>
		</div>
	</body>
</html>

Open in new window

0
Comment
Question by:cgray1223
  • 3
  • 2
6 Comments
 

Author Comment

by:cgray1223
ID: 34214336
line 129 has the UL menu
0
 
LVL 8

Expert Comment

by:Zado
ID: 34214645
Apply this to your code:

.roundedcornr_box_906887  { 
 position:absolute; /*add this to your class*/
 /*rest of your code here*/
}
.lavaLampBottomStyle {
 float:right; /*add this to your class, moves whole element to the right*/
 /*rest of your code here*/
}
.left { /*it is your left section you asked for, and sample content below*/
 position: relative;
 height: 29px;
 width: 450px;
 background-color: transparent;
 padding: 10px;
 overflow: hidden;
 float:left; /*moves whole element to the left*/
}
.logo { /*apply this class to div where your logo is*/
 position: relative;
 height: 100px;
 width: 100%;
 background-color: transparent;
 padding: 10px;
 overflow: hidden;
 float:left;
}

Open in new window

0
 

Author Comment

by:cgray1223
ID: 34214751
Hi Zado,

I didn't apply the lavaLampBottomSytle position:absolute since it was forcing the header flush against the left side and everything looks pretty good in IE but in Firefox and Chrome the header is shrunk.  I've attached images to try to help and my source below.
I
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<link rel="stylesheet" href="css/lavalamp_test.css" type="text/css" media="screen">
		<script type="text/javascript" src="js/jquery-1.2.3.min.js"></script>
		<script type="text/javascript" src="js/jquery.easing.min.js"></script>
		<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$("#1, #2, #3").lavaLamp({
					fx: "backout",
					speed: 700,
					click: function(event, menuItem) {
						return false;
					}
				});
			});
		</script>
		<style type="text/css">
			html, body {
				margin: 0;
				padding: 0;
			}
			@media screen {
				img.bkgnd {
					position: fixed;
					top: 0; left: 0;
					width: 100%;
					height: 100%;
					z-index: -1000;
				}
			}
			@media print {
				img.bkgnd {
					display: none;
				}
			}
			.roundedcornr_box_906887 {
				background:url("images/header_home.png") 
				repeat-x scroll 0 0 	
				transparent;				
				width:950px;
				margin-top:15px;
				margin-left: auto ;
				margin-right: auto ;
			}
			.roundedcornr_top_906887 div {
			   background: url(images/roundedcornr_906887_tl.png) no-repeat top left;
			}
			.roundedcornr_top_906887 {
			   background: url(images/roundedcornr_906887_tr.png) no-repeat top right;
			}
			.roundedcornr_bottom_906887 div {
			   background: url(images/roundedcornr_906887_bl.png) no-repeat bottom left;
			}
			.roundedcornr_bottom_906887 {
			   background: url(images/roundedcornr_906887_br.png) no-repeat bottom right;
			}

			.roundedcornr_top_906887 div, .roundedcornr_top_906887, 
			.roundedcornr_bottom_906887 div, .roundedcornr_bottom_906887 {
			   width: 100%;
			   height: 15px;
			   font-size: 1px;
			}
			.roundedcornr_content_906887 { margin: 0 15px; }
			.roundedcornr_box_627923 {
				background: #ffffff;
				margin-top:15px;
				width:950px;
				margin-left: auto ;
				margin-right: auto ;
			}
			.roundedcornr_top_627923 div {
			   background: url(images/roundedcornr_627923_tl.png) no-repeat top left;
			}
			.roundedcornr_top_627923 {
			   background: url(images/roundedcornr_627923_tr.png) no-repeat top right;
			}
			.roundedcornr_bottom_627923 div {
			   background: url(images/roundedcornr_627923_bl.png) no-repeat bottom left;
			}
			.roundedcornr_bottom_627923 {
			   background: url(images/roundedcornr_627923_br.png) no-repeat bottom right;
			}

			.roundedcornr_top_627923 div, .roundedcornr_top_627923, 
			.roundedcornr_bottom_627923 div, .roundedcornr_bottom_627923 {
			   width: 100%;
			   height: 15px;
			   font-size: 1px;
			}
			.roundedcornr_content_627923 { margin: 0 15px; }
			.left { 
				 position: relative;
				 height: 29px;
				 width: 450px;
				 background-color: transparent;
				 padding: 10px;
				 overflow: hidden;
				 float:left; 
			}
			.logo { 
				 position: relative;
				 background-color: transparent;
				 padding: 10px;
				 overflow: hidden;
				 float:left;
			}
		</style>
	</head>
	<body>
		<img class="bkgnd" src="images/bg_home.png" />
		<div class="roundedcornr_box_906887">
		   <div class="roundedcornr_top_906887"><div></div></div>
				<div class="roundedcornr_content_906887">
				<div class="logo"><img src="images/logo_small.gif"/></div>
				<div>
					<ul class="lavaLampBottomStyle" id="3">
						<li class="current"><a href="#">Home</a></li>
						<li><a href="#">Programs</a></li>
						<li><a href="#">Registration</a></li>
						<li><a href="#">Tuition Policies</a></li>
					</ul>
				</div>					
				</div>
		   <div class="roundedcornr_bottom_906887"><div></div></div>
		</div>
		<div class="roundedcornr_box_627923">
	   <div class="roundedcornr_top_627923"><div></div></div>
		  <div class="roundedcornr_content_627923">
			 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

		  </div>
	   <div class="roundedcornr_bottom_627923"><div></div></div>
	</div>
	</body>
</html>

Open in new window


lavalamp_test.css
        .lavaLampBottomStyle {
			float:right;
            position: relative;
            height: 29px;
            width: 450px;
            background-color: transparent;
            padding: 10px;
            overflow: hidden;
        }
                .lavaLampBottomStyle li {
                    float: left;
                    list-style: none;
                }
                    .lavaLampBottomStyle li.back {
                        border-bottom: 2px solid #fefa8b;
                        width: 9px;
                        height: 30px;
                        z-index: 8;
                        position: absolute;
                    }
                    .lavaLampBottomStyle li a {
                        font: bold 14px arial;
                        text-decoration: none;
                        color: #FFFFFF;
                        outline: none;
                        text-align: center;
                        top: 7px;
                        text-transform: uppercase;
                        letter-spacing: 0;
                        z-index: 10;
                        display: block;
                        float: left;
                        height: 30px;
                        position: relative;
                        overflow: hidden;
                        margin: auto 10px;
                    }   
                        .lavaLampBottomStyle li a:hover, .lavaLampBottomStyle li a:active, .lavaLampBottomStyle li a:visited {
                            border: none;
                        }                     

Open in new window


 firefox screen shot of header shrinking IE screen shot
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 8

Expert Comment

by:Zado
ID: 34214793
Try add 'height' to logo class in your css:

.logo {
 position: relative;
 background-color: transparent;
 padding: 10px;
 overflow: hidden;
 float:left;
 height:80px; /*apply your height here*/
 min-height:80px; /*apply this as well if height does not work*/
}

Open in new window

0
 

Author Comment

by:cgray1223
ID: 34214913
no luck with those....I'll keep trying different things.  Let me know if you have any other ideas.  Thanks for the help!
0
 
LVL 22

Accepted Solution

by:
remorina earned 500 total points
ID: 34215566
Hi cgray1223:

the background is not extending to the menu items due to floats, in order to fix this you will need to specify overflow:hidden to the class .roundedcornr_content_906887 as below.

.roundedcornr_content_906887 {
margin:0 15px;
overflow:hidden;
}

Open in new window


And thanks for the link, much appreciated!

Cheers!
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
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)

757 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now