Jump to content

Logo DIV, then Centered nav DIV, then leftcol, content and rightcol divs positioning

qcom

By qcom
in CSS

Recommended Posts

qcom Newbie

qcom

Posted
Posted

Sorry for the awkward title, I was trying to make it descriptive.. :)Anyway, I am working on my website layout, and I was having some trouble whilst using CSS to accomplish my desired layout.My HTML:

<!DOCTYPE html><html lang="en"><head>	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">	<title>Mario Toys at Mario Planet</title>	<link rel="stylesheet" href="/Volumes/Macintosh HD/Users/hpi/ALL MARIO PLANET FOLDERS!!!!!!/Mario Planet (ASP)/Website/css/LavaNav_index.css" media="screen" />	<link rel="stylesheet" href="/Volumes/Macintosh HD/Users/hpi/ALL MARIO PLANET FOLDERS!!!!!!/Mario Planet (ASP)/Website/css/index.css" media="screen" /></head><body><div id="content"><div id="header">	<img id="logo" src="/Volumes/Macintosh HD/Users/hpi/ALL MARIO PLANET FOLDERS!!!!!!/Mario Planet (ASP)/Website/images/logo/logo.png" alt="logo"></div><div id="LavaNav">	<ul id="nav">		<li id="selected"><a href="index.html">Home</a></li>		<li><a href="catalog.html"><b>SHOP!</b></a></li>		<li><a href="about_us.html">About Us</a></li>		<li><a href="contact_us.html">Contact Us</a></li>		<li><a href="privacy_policy.html">Privacy Policy</a></li>	</ul>	</div><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"</script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>  <script type="text/javascript" src="/Volumes/Macintosh HD/Users/hpi/ALL MARIO PLANET FOLDERS!!!!!!/Mario Planet (ASP)/Website/js/LavaNav.js"></script><script type="text/javascript">$('#nav').LavaNav();</script></div><div id="leftcol">Hello!</div> <div id="content">   <h1 class="headers"> </h1>   <h1 class="headers">Welcome!  </h1>  <p class="style1"> </p>   <p class="style1">Here at Mario Planet, expect to find a wide variety of Super Mario Bros related toys and games! We here at Mario Planet strive to constantly serve <em>you</em> better, improving our user-interface, products, and customer service, each and every day. Please keep in mind that we are still in the middle of adding more products to our site, so if our supply seems to dissapoint, please bookmark our site, and return every so often, because products are being added all the time! So please sit back and relax, and enjoy some Super Mario Bros toys!</p> </div> <div id="rightcol"> Hello!</div> </body></html>

My CSS:

body {	background-color: #666666;}#content {	width: 920px;	margin: 0 auto;}#header {	background-color: #DDDDDD;	display: block;	margin-left: auto;   	margin-right: auto;	width: 920px;}#LavaNav {	width: 920px;	display: block;	margin-left: auto;   	margin-right: auto;}#leftcol {  float: left;  width: 130px;  height: 550px;  font-size:14px;  background-color:#EBEBEB;  clear: both;}#rightcol {  float: left;  width: 130px;  height: 550px;  background-color:#EBEBEB;  font-size:14px;}#content {  float: left;  width: 660px;  height: 550px;  background-color:#FFFFFF;  font-size:12px}h1 {  color: #FF0000;}h2 {  color:#FF0000;}a:link { 	color:#FF0000;}a:visited { 	color:#FF0000;}a:hover { 	color:#00FF00;	text-decoration: none;}a:active { 	color:#FF0000;}

Here is my other CSS specifically for my Nav Menu:

#LavaNav {	width: auto;	display: block;	margin-left: auto;   	margin-right: auto;}ul, li {	margin: 0;	padding: 0;}#blob {	background: #FF0000;	border-right: 1px solid #CC1100;	border-left: 1px solid #CC1100;	position: absolute;	z-index: 1;	top: 0;	background: -moz-linear-gradient(top, #FF0000, #FF3D0D);	background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#FF3D0D));	-moz-border-radius: 4px;	-webkit-border-radius: 4px;	-moz-box-shadow: 2px 3px 10px #CD2626;	-webkit-box-shadow: 2px 3px 10px #CD2626;}#nav {	position: relative;	background: #292929;	float: left;}#nav li {	float: left;	list-style: none;	border-right: 1px solid #4a4a4a;	border-left: 1px solid black;}#nav li a {	color: #e3e3e3;	z-index: 2;	position: relative;	cursor: pointer;	float: left;	font-size: 20px;	font-family: helvetica, arial, sans-serif;	text-decoration: none;	padding: 15px 30px;	width: 100%;}

I would like to have my top logo be centered, then have right underneath, my navigational menu, centered as well.Then, I would like to have my left column, and then content and right column divs all right underneath the nav menu lined up left-right.Then finally a footer, which I have not added yet in HTML, but that should be quite simple.Any help with the positioning would be great! After previewing and trying to debug, there appears to be this stubborn and persistent white block in between the nav menu and the leftcol, content and rightcol divs all in a row. I believe the problem lies in the external CSS sheet regarding the Nav Menu, maybe interfering with the CSS specifically for my index page...Thank you so much!

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

I would say you don't need any positioning for any of that. -img needs text align on the parent element-nav just needs to have margin 0px auto-the cols i would float the left col, give the middle one a left padding equal to the left col width, and then float the right one-I would wrap the img and nav in a header div so you can center it all, and also center the image inside it without affecting anything else on the page-I would then create a content wrapper for the three cols, and clear the footer within that

Link to comment
Share on other sites
qcom Newbie

qcom

Posted
  • Author
Posted
POSTING ERROR :S
Thank you for the attempt anyway :)
I would say you don't need any positioning for any of that.
WOW, you're so right, I waay overcomplicated things..
-the cols i would float the left col, give the middle one a left padding equal to the left col width, and then float the right one
Hmm, unless I'm doing something wrong, that appears to throw everything off... I just float everything (the leftcol, middle and rightcol) left and it works fine. Not sure if that is standard approved however..
-img needs text align on the parent element-I would wrap the img and nav in a header div so you can center it all, and also center the image inside it without affecting anything else on the page
The other stuff appears to be contradicting once I implement the code..Here is my current, updated code:HTML:
<!DOCTYPE html><html lang="en"><head>	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">	<title>Mario Toys at Mario Planet</title>	<link rel="stylesheet" href="/Volumes/Macintosh HD/Users/hpi/ALL MARIO PLANET FOLDERS!!!!!!/Mario Planet (ASP)/Website/css/LavaNav_index.css" media="screen" />	<link rel="stylesheet" href="/Volumes/Macintosh HD/Users/hpi/ALL MARIO PLANET FOLDERS!!!!!!/Mario Planet (ASP)/Website/css/index.css" media="screen" /></head><body><div id="body"><div id="header">	<img id="logo" src="/Volumes/Macintosh HD/Users/hpi/ALL MARIO PLANET FOLDERS!!!!!!/Mario Planet (ASP)/Website/images/logo/logo.png" alt="logo"><div id="LavaNav">	<ul id="nav">		<li id="selected"><a href="index.html">Home</a></li>		<li><a href="catalog.html"><b>SHOP!</b></a></li>		<li><a href="about_us.html">About</a></li>		<li><a href="contact_us.html">Contact</a></li>		<li><a href="privacy_policy.html">Privacy Policy</a></li>	</ul>	</div></div><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"</script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>  <script type="text/javascript" src="/Volumes/Macintosh HD/Users/hpi/ALL MARIO PLANET FOLDERS!!!!!!/Mario Planet (ASP)/Website/js/LavaNav.js"></script><script type="text/javascript">$('#nav').LavaNav();</script></div><div  id="content"<div id="leftcol"></div> <div id="detail">   <h1 class="headers"> </h1>   <h1 class="headers">Welcome!  </h1>  <p class="style1"> </p>   <p class="style1">Here at Mario Planet, expect to find a wide variety of Super Mario Bros related toys and games! We here at Mario Planet strive to constantly serve <em>you</em> better, improving our user-interface, products, and customer service, each and every day. Please keep in mind that we are still in the middle of adding more products to our site, so if our supply seems to dissapoint, please bookmark our site, and return every so often, because products are being added all the time! So please sit back and relax, and enjoy some Super Mario Bros toys!</p> </div> <div id="rightcol"> </div> </div><div id="footer">   <p class="style7"> </p>   <p class="style7"><a href="index.html">Home Page</a> | <a href="catalog.html">SHOP!</a> | <a href="about.html">About</a> | <a href="contact.html">Contact</a> | <a href="privacy_policy.html">Privacy Policy</a></p>   <p class="style7">© Copyright 2006-2010 MarioPlanet.com. All Rights Reserved</p>     <br />     </div> </body></html>

CSS (for index):

body {	background-color: #666666;}#header {	background-color: #DDDDDD;	width: 950px;}#content {	margin: 0 auto;}#leftcol {	background-color:#EBEBEB;	width: 130px;	height: 550px;	font-size:14px;	clear: both;	float: left;}#detail {	background-color:#FFFFFF;	width: 690px;	height: 550px;		font-size:12px;	float: left;}#rightcol {	background-color:#EBEBEB;	width: 130px;	height: 550px;	font-size:14px;	float: left;}#footer {	background-color:#DDDDDD;	width: 950px;	height:90px;	font-size:14px;	text-align:center;	clear: both;}h1 {	color: #FF0000;}h2 {	color:#FF0000;}a:link { 	color:#FF0000;}a:visited { 	color:#FF0000;}a:hover { 	color:#00FF00;	text-decoration: none;}a:active { 	color:#FF0000;}

CSS (for LavaNav):

#LavaNav {	width: auto;}ul, li {	margin: 0;	padding: 0;}#blob {	background: #FF0000;	border-right: 1px solid #CC1100;	border-left: 1px solid #CC1100;	position: absolute;	z-index: 1;	top: 0;	background: -moz-linear-gradient(top, #FF0000, #FF3D0D);	background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#FF3D0D));	-moz-border-radius: 4px;	-webkit-border-radius: 4px;	-moz-box-shadow: 2px 3px 10px #CD2626;	-webkit-box-shadow: 2px 3px 10px #CD2626;}#nav {	position: relative;	background: #292929;	float: left;}#nav li {	float: left;	list-style: none;	border-right: 1px solid #4a4a4a;	border-left: 1px solid black;}#nav li a {	color: #e3e3e3;	z-index: 2;	position: relative;	cursor: pointer;	float: left;	font-size: 18px;	font-family: helvetica, arial, sans-serif;	text-decoration: none;	padding: 15px 60px;	width: 100%;}

Also, here is my (technically it's pretty much straight off of a tutorial from NetTutsPlus so I can't take credit or anything like that, but it is slightly modified) java script:

(function($) {	$.fn.LavaNav = function(options) {		options = $.extend({			overlap : 2,			speed : 500,			reset : 500,			color : '#FF0000',			easing : 'easeOutExpo'		}, options);		return this.each(function() {		 	var nav = $(this),		 		currentPageItem = $('#selected', nav),		 		blob,		 		reset;		 	$('<li id="blob"></li>').css({		 		width : currentPageItem.outerWidth(),		 		height : currentPageItem.outerHeight() + options.overlap,		 		left : currentPageItem.position().left,		 		top : currentPageItem.position().top - options.overlap / 2,		 		backgroundColor : options.color		 	}).appendTo(this);		 	blob = $('#blob', nav);			$('li:not(#blob)', nav).hover(function() {				// mouse over				clearTimeout(reset);				blob.animate(					{						left : $(this).position().left,						width : $(this).width()					},					{						duration : options.speed,						easing : options.easing,						queue : false					}				);			}, function() {				// mouse out					reset = setTimeout(function() {					blob.animate({						width : currentPageItem.outerWidth(),						left : currentPageItem.position().left					}, options.speed)				}, options.reset);			});		}); // end each	};})(jQuery);

So, the only thing I have left to figure out is how to center everything. I believe you mentioned that in your post, but I couldn't make sense of it, and it didn't appear to work, but I am a complete n00b, so I may have screwed it up..Also, I adjusted the length of the LavaNav bar as to try and make it 950px wide so it didn't have to be centered, and it would look better anyway. I am very close, but whenever I make it EXACTLY 950px wide, just how wide my page is, it screws up and makes it almost double the height, or something like that. If you know anything about that issue that would be great as well!Thank you so much for the help so far everyone! :)

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

the easiest way to center a block level element (like a div) is to use 

margin: 0px auto;

as for the column arraingement, there's more than one way to do that, but if yours is working for you, then by all means stick with it.

Link to comment
Share on other sites
qcom Newbie

qcom

Posted
  • Author
Posted
the easiest way to center a block level element (like a div) is to use 
margin: 0px auto;

as for the column arraingement, there's more than one way to do that, but if yours is working for you, then by all means stick with it.

OK, great, the 
margin: 0px auto;

code actually only works on the header div (collectively centering the top logo image and the JavaNav bar) and the footer, but it won't center the content (which collectively refers to the leftcol, detail and rightcol) or the body div (which collectively refers to everything in in-between the body tags.Any ideas?Also, I still don't know what to do about the LavaNav bar and it's funky doubling of height when it's width is equal to the width of my page...

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

since you haven't specified a width for the content div, it will stretch to fit the width of the available room. If its fully stretched, then there's no logical way to center it.

Link to comment
Share on other sites
qcom Newbie

qcom

Posted
  • Author
Posted
since you haven't specified a width for the content div, it will stretch to fit the width of the available room. If its fully stretched, then there's no logical way to center it.
Thank you so much!Everything is just perfect except for the nav bar, any insight into that?
Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

I might have to see it in action, but see what happens if you don't declare a width for it. Again, a div with no width will expand to fit the width of its container. So what it does on its own.

Link to comment
Share on other sites
qcom Newbie

qcom

Posted
  • Author
Posted
I might have to see it in action, but see what happens if you don't declare a width for it. Again, a div with no width will expand to fit the width of its container. So what it does on its own.
Hmm, I know what you're saying, but I can't implement properly :) Here is the tutorial: http://net.tutsplus.com/tutorials/html-css...avigation-menu/Here is the live demo: http://nettuts.s3.amazonaws.com/600_spasticNav/index.htmlMaybe if you take a look at my code,HTML:
<!DOCTYPE html><html lang="en"><head>	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">	<title>Mario Toys at Mario Planet</title>	<link rel="stylesheet" href="/Volumes/Macintosh HD/Users/hpi/ALL MARIO PLANET FOLDERS!!!!!!/Mario Planet (ASP)/Website/css/LavaNav_index.css" media="screen" />	<link rel="stylesheet" href="/Volumes/Macintosh HD/Users/hpi/ALL MARIO PLANET FOLDERS!!!!!!/Mario Planet (ASP)/Website/css/index.css" media="screen" /></head><body><div id="header">	<img id="logo" src="/Volumes/Macintosh HD/Users/hpi/ALL MARIO PLANET FOLDERS!!!!!!/Mario Planet (ASP)/Website/images/logo/logo.png" alt="logo"><div id="LavaNav">	<ul id="nav">		<li id="selected"><a href="index.html">Home</a></li>		<li><a href="catalog.html"><b>SHOP!</b></a></li>		<li><a href="about_us.html">About</a></li>		<li><a href="contact_us.html">Contact</a></li>		<li><a href="privacy_policy.html">Privacy Policy</a></li>	</ul>	</div></div><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"</script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>  <script type="text/javascript" src="/Volumes/Macintosh HD/Users/hpi/ALL MARIO PLANET FOLDERS!!!!!!/Mario Planet (ASP)/Website/js/LavaNav.js"></script><script type="text/javascript">$('#nav').LavaNav();</script></div><div  id="content"<div id="leftcol"></div> <div id="detail">   <h1 class="headers"> </h1>   <h1 class="headers">Welcome!  </h1>  <p class="style1"> </p>   <p class="style1">Here at Mario Planet, expect to find a wide variety of Super Mario Bros related toys and games! We here at Mario Planet strive to constantly serve <em>you</em> better, improving our user-interface, products, and customer service, each and every day. Please keep in mind that we are still in the middle of adding more products to our site, so if our supply seems to dissapoint, please bookmark our site, and return every so often, because products are being added all the time! So please sit back and relax, and enjoy some Super Mario Bros toys!</p> </div> <div id="rightcol"> </div> </div><div id="footer">   <p class="style7"> </p>   <p class="style7"><a href="index.html">Home Page</a> | <a href="catalog.html">SHOP!</a> | <a href="about.html">About</a> | <a href="contact.html">Contact</a> | <a href="privacy_policy.html">Privacy Policy</a></p>   <p class="style7">© Copyright 2006-2010 MarioPlanet.com. All Rights Reserved</p>     <br /> </body></html>

CSS for index.html:

body {	background-color: #666666;}#header {	background-color: #DDDDDD;	width: 950px;	margin: 0px auto;}#content {	width: 950px;	margin: 0px auto;}#leftcol {	background-color:#EBEBEB;	width: 130px;	height: 550px;	font-size:14px;	clear: both;	float: left;}#detail {	background-color:#FFFFFF;	width: 690px;	height: 550px;		font-size:12px;	float: left;}#rightcol {	background-color:#EBEBEB;	width: 130px;	height: 550px;	font-size:14px;	float: left;}#footer {	background-color:#DDDDDD;	width: 950px;	height:90px;	font-size:14px;	text-align:center;	clear: both;	margin: 0px auto;}h1 {	color: #FF0000;}h2 {	color:#FF0000;}a:link { 	color:#FF0000;}a:visited { 	color:#FF0000;}a:hover { 	color:#00FF00;	text-decoration: none;}a:active { 	color:#FF0000;}

CSS for LavaNav:

ul, li {	margin: 0;	padding: 0;}#blob {	background: #FF0000;	border-right: 1px solid #CC1100;	border-left: 1px solid #CC1100;	position: absolute;	z-index: 1;	top: 0;	background: -moz-linear-gradient(top, #FF0000, #FF3D0D);	background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#FF3D0D));	-moz-border-radius: 4px;	-webkit-border-radius: 4px;	-moz-box-shadow: 2px 3px 10px #CD2626;	-webkit-box-shadow: 2px 3px 10px #CD2626;}#nav {	position: relative;	background: #292929;	float: left;}#nav li {	float: left;	list-style: none;	border-right: 1px solid #4a4a4a;	border-left: 1px solid black;}#nav li a {	color: #e3e3e3;	z-index: 2;	position: relative;	cursor: pointer;	float: left;	font-size: 18px;	font-family: helvetica, arial, sans-serif;	text-decoration: none;	padding: 15px 60px;	width: 100%;}

java script:

(function($) {	$.fn.LavaNav = function(options) {		options = $.extend({			overlap : 2,			speed : 500,			reset : 500,			color : '#FF0000',			easing : 'easeOutExpo'		}, options);		return this.each(function() {		 	var nav = $(this),		 		currentPageItem = $('#selected', nav),		 		blob,		 		reset;		 	$('<li id="blob"></li>').css({		 		width : currentPageItem.outerWidth(),		 		height : currentPageItem.outerHeight() + options.overlap,		 		left : currentPageItem.position().left,		 		top : currentPageItem.position().top - options.overlap / 2,		 		backgroundColor : options.color		 	}).appendTo(this);		 	blob = $('#blob', nav);			$('li:not(#blob)', nav).hover(function() {				// mouse over				clearTimeout(reset);				blob.animate(					{						left : $(this).position().left,						width : $(this).width()					},					{						duration : options.speed,						easing : options.easing,						queue : false					}				);			}, function() {				// mouse out					reset = setTimeout(function() {					blob.animate({						width : currentPageItem.outerWidth(),						left : currentPageItem.position().left					}, options.speed)				}, options.reset);			});		}); // end each	};})(jQuery);

Link to comment
Share on other sites
HungryMind Member

HungryMind

Posted
Posted

Hi!Finally Im Posting :)Try These Codes:Or Live Example :)DEMOindex.htm

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Mario Toys at Mario Planet</title><link rel="stylesheet" href="/Volumes/Macintosh HD/Users/hpi/ALL MARIO PLANET FOLDERS!!!!!!/Mario Planet (ASP)/Website/css/LavaNav_index.css" media="screen" />    <link rel="stylesheet" href="/Volumes/Macintosh HD/Users/hpi/ALL MARIO PLANET FOLDERS!!!!!!/Mario Planet (ASP)/Website/css/index.css" media="screen" /></head><body><div id="wrapper">    <div id="header">        <img id="logo" src="images/logo/logo.png" alt="logo">    </div>	<div id="LavaNav">        <ul id="nav">            <li id="selected"><a href="index.html">Home</a></li>            <li><a href="catalog.html"><b>SHOP!</b></a></li>            <li><a href="about_us.html">About Us</a></li>            <li><a href="contact_us.html">Contact Us</a></li>            <li><a href="privacy_policy.html">Privacy Policy</a></li>        </ul>        <div class="clear"></div>    </div>	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>  	<script type="text/javascript" src="/Volumes/Macintosh HD/Users/hpi/ALL MARIO PLANET FOLDERS!!!!!!/Mario Planet (ASP)/Website/js/LavaNav.js"></script>        <script type="text/javascript">    $('#nav').LavaNav();    </script><div id="leftcol">	Hello!</div> <div id="content">     <h1 class="headers"> </h1>     <h1 class="headers">Welcome!  </h1>    <p class="style1"> </p>     <p class="style1">Here at Mario Planet, expect to find a wide variety of Super Mario Bros related toys and games! We here at Mario Planet strive to constantly serve <em>you</em> better, improving our user-interface, products, and customer service, each and every day. Please keep in mind that we are still in the middle of adding more products to our site, so if our supply seems to dissapoint, please bookmark our site, and return every so often, because products are being added all the time! So please sit back and relax, and enjoy some Super Mario Bros toys!</p> </div> <div id="rightcol"> 	Hello!</div></div></body></html>

index.css

body {    background-color: #666666;}#wrapper{	width: 920px;	margin: 0 auto;}#content {    width: 920px;}#header {    background: #DDDDDD;    width: 920px;	text-align: center;}#LavaNav {    width: 920px;    display: block;    margin-left: auto;       margin-right: auto;}#leftcol {  float: left;  width: 130px;  height: 550px;  font-size:14px;  background:#EBEBEB;}#rightcol {  float: left;  width: 130px;  height: 550px;  font-size:14px;  background:#EBEBEB;}#content {  float: left;  width: 660px;  height: 550px;  font-size:12px;  background:#FFFFFF;}h1 {  color: #FF0000;}h2 {  color:#FF0000;}a:link {     color:#FF0000;}a:visited {     color:#FF0000;}a:hover {     color:#00FF00;    text-decoration: none;}a:active {     color:#FF0000;}/* My Classes */.clear{	clear: both;}

LavaNav_index.css

#LavaNav {	width: 920px;	background: #292929;}ul, li {    margin: 0;    padding: 0;}#blob {    background: #FF0000;    border-right: 1px solid #CC1100;    border-left: 1px solid #CC1100;    position: absolute;    z-index: 1;    top: 0;    background: -moz-linear-gradient(top, #FF0000, #FF3D0D);    background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#FF3D0D));    -moz-border-radius: 4px;    -webkit-border-radius: 4px;    -moz-box-shadow: 2px 3px 10px #CD2626;    -webkit-box-shadow: 2px 3px 10px #CD2626;}#nav {        float: left;}#nav li {    float: left;    list-style: none;    border: 1px solid #4a4a4a;    border-width: 0px 1px 0px 1px;}#nav li a {    color: #e3e3e3;    cursor: pointer;    float: left;    font: bold 20px "font-family: helvetica, arial, sans-serif";    text-decoration: none;    padding: 15px 30px;	display: block;	overflow: hidden;}

Link to comment
Share on other sites
qcom Newbie

qcom

Posted
  • Author
Posted
Check Ur Code DEMOIs There Any Requirement? Im Here :)
If you PM me your skype, I could send you the file, I don't currently have my FTP info, so I can't upload to my site, but I have made some changes, and it may benefit you to see them from an actual file in your browser..
Link to comment
Share on other sites
qcom Newbie

qcom

Posted
  • Author
Posted

Really the only problem is, if you take a look at Post #10 which has the most recently updated code, that when I make the width of the LavaNav bar the same as the rest of my page, it bugs out and makes itself a little longer.

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

maybe you should try removing the margin-left/right auto's from it then. Also, you have it declared and defined in two separate stylesheets, see if removing one of them makes a difference. There's a few things to try, but it would be easier if we could see your site live with this problem so we could use Firebug on it.

Link to comment
Share on other sites
qcom Newbie

qcom

Posted
  • Author
Posted
maybe you should try removing the margin-left/right auto's from it then. Also, you have it declared and defined in two separate stylesheets, see if removing one of them makes a difference. There's a few things to try, but it would be easier if we could see your site live with this problem so we could use Firebug on it.
That didn't appear to work, but HungryMind or myself will be updating either his site or my site so it will be live for viewing, and firebug should help, good point.I'll be sure to post, once it's live.
Link to comment
Share on other sites
qcom Newbie

qcom

Posted
  • Author
Posted
Hi!@qcom:Mario Planet
Hey!Thank you so much for putting that up there! It looks as though I'll be moving my site to Rackspace today, so I'll let you know if it goes live at www.marioplanet.comThis is essentially what mine looks like except a few of the images are aligned better and my logo shows up, but this is perfect for my problem.So, if you adjust the LavaNav.js file, and make either the font or the width a bit bigger, to make it flush with the page width, it screws it all up. Have you encountered the problem yourself, yet?
Link to comment
Share on other sites
qcom Newbie

qcom

Posted
  • Author
Posted
Hi!Site Updated: Mario PlanetNot Understanding What U Actually Wanna Do In LavaNav.js :SU've Already Set Width, New Width Is 1050px;LavaNav.js Is Just For Animation, Not Font Sizing.Do U Wanna Increase Or Decrease Your Nav Font Size?
I have just send you an email with the updated code if you could modify it to fit once more my new width..Sorry about the previous post, accidentally posted twice.. :)Thank you so much!
Link to comment
Share on other sites
qcom Newbie

qcom

Posted
  • Author
Posted
Hi!:) No Problem My Friend, I'll Upload...And Your Image Are Too Heavy In Size, Try To Low...
Awesome! Do you think you could tell me how you made the LavaNav bar wide enough to be flush with the page, and how it didn't overflow into another row?
Link to comment
Share on other sites
HungryMind Member

HungryMind

Posted
Posted

@ qcom:Set #LavaNav Background Color.Then Width Divided By All li Links.e.g: width: 1050, Total li links 5, 1050/5 = 210Then Set Divided Result Width 210 For Every li.Then All Links Will Divide Equal Under Total Width.Make Sure.eg: If Div Height Is 50, And U Want To Use Top Padding 10,Then U'll Have To Decrease 10 To Height.Same Like Anyside.Hope U'll Understand With My English :)

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...