CSS - Css, Js Pulldown Menu And Centering Issue

http: //www. cathistevenson.com/bookcoverexpress_mockup/

I want to bring the cover samples over to the left, closer to the blue bar on the left. However, when I do that, the "click thumbnails to enlarge" and "click for more covers" links are then off-centered.

How do I keep them centered above the covers, no matter where I position the cover samples?

Here's a recent site that I've done:

http://landscapeexpertsal.com/

I've tested in IE 7 & 6....& 5.5 (using the multiple IE's installer.)

I've also tested in Firefox....as well as safari on my MAC...

Everywhere I look, it centers.....

This customer still says that the site isn't centered on his machine....all I know is that his PC is "3 years old" according to the sales person....

My container class and body tag are as follows:

body {
background-image: url(images/BG.jpg);
background-repeat: repeat-x;
background-color: #cccc66;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
text-align: center;
}

.container {
width: 900px;
position: relative;
margin: 0 auto;
text-align: left;
background-image: url(images/middle.jpg);
background-repeat: repeat-y;
}

??????

Hi,

I'm trying to get my head around this issue, i want the have the main content section centred along with the header and footer but also want an extra bit to the right of the main section for ads (if page is wide enough otherwise they are cut off).

How could this be done?

Ive attached an image which might help.

Thanks,
Mike

Seems to be a recurring theme today.

I'm trying to skin osCommerce to match the site. If you go into the front page of the store you'll see the problem.

All content is correctly centered in FF, but not in IE.

I tried putting a "wrapper" div around all the content (starts immediately after body tag and ends immediately before endbody tag), and set its margins to 0 auto, but no luck.

Code:

#wrapper {
	width: 760px;
	margin: 0 auto;
}

Any ideas?

I have this header in my css. and i am trying to get the Text i put in there to position in the middle and left of the header. But nothing i do works. it even will not change size that i describe or color.

here is the css for header and the text code.

Code:

#topsection {
       background: #EAEAEA url(images/png_logo.gif) no-repeat right center;
       height: 90px;       
}

span.htext {
        font-color: #3300CC;
        font-size: 30px;
        text-decoration: none;
        letter-spacing: 1px;
        text-align: left middle;
}

anyone know how to fix this.

Here's the link:

http://www.EarthArmy.com/index.php

I'm trying to center the tshirts/products in the header, but to no avail, they keep aligning to the left.

Any ideas?

Thanks.

Hi All:

Im having a difficult time trying to center a menu on my site. ANy help greatly appreciated.

Here is the temporary page margueritewedwardsartist. com / home1. htm

and here is the css code im using.
all i changed was thew text-align:center on the 2nd line. all other code was generated by the menu maker. Any help is greatly appreciated.

chris

-------------------

.bg {background: url(images/button4.gif);}
.menu {text-align:center; margin:0; list-style:none; height:40px; background:#fff url(images/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursorointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(images/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(images/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(images/button4a.gif) no-repeat right top;}

.menu li:hover > a.top_link {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(images/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(images/button4a.gif) no-repeat right top;}

.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}

.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #999999; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(images/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#999999; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 999999; white-space:nowrap; width:93px; z-index:200; height:auto;}

Hi, I have a client that wanted me to develop a horizontal navigation menu bar along with a sub-menu that appears horizontal right under the original.

My question is, is with the code that I have, I cannot seem to center the menu elements so that either the links are centered on the navigation bar, or so that the width of the links spread out across the whole bar. I have tried numerous tasks such as switching paddings, margins, and width of certain elements, but if anyone can help me find a solution that would be great.

I have it hosted if you want to see what it looks like to get an idea. jelc.hostzi.com/Home

CSS:
Code:

.droplinebar{ 
overflow: hidden; 
}  

.droplinebar ul{ 
margin: 0; 
padding: 0; 
float: left; 
width: 800px; 
border-top-style: ridge; 
border-top-width: 2px; 
border-bottom-style: ridge; 
border-bottom-width: 2px; 
font: bold 13px Arial; 
background: #242c54 url('../Images/bluedefault.gif') center center repeat-x; /*default background of menu bar*/
}

.droplinebar ul li{ 
display: inline; 
} 
 
.droplinebar ul li a{ 
float: left; 
color: white; 
padding: 9px 11px; 
text-decoration: none; 
}  

.droplinebar ul li a:visited{ 
color: white; 
}  

.droplinebar ul li a:hover, .droplinebar ul li .current{ /*background of main menu bar links onMouseover*/ 
color: white; background: transparent url('../Images/blueactive.gif') center center repeat-x; 
}  

/* Sub level menus*/ 
.droplinebar ul li ul{ 
position: absolute; 
z-index: 100; 
left: 0; top: 0; 
background: #303c76; /*sub menu background color */ visibility: hidden; 
} 

 /* Sub level menu links style */ 
.droplinebar ul li ul li a{ 
font: normal 13px Verdana; 
padding: 6px; 
padding-right: 8px; 
margin: 0; 
border-bottom: 1px solid navy; 
} 

 .droplinebar ul li ul li a:hover{ 
/*sub menu links' background color onMouseover */ 
background: #242c54; }

Thanks for all of the help in advance!

I am having a lot of trouble with a menu I created. It works fine in firefox, but does not display properly in IE. I created a page with images and code to explain the problem he

chrisbanker.com/cb_com_new/help.html

If anyone could help me out, that would be great. This is the one thing that is holding me back from putting this new site up.

Please reply or email cbanker[at]gmail[dot]com if you have any advice.

Thanks,
Chris

I'm an idiot when it comes to CSS, so please bare with me as I pose this seemingly simple question...

Seems as if I've tried everything, playing with all of the properties in Firebug, but to no avail. I simply want this menu centered with some extra padding between the items. Please help!

The live site is at www.danazilber.com/content.

Code:

.screen-reader-text { position: absolute; left: -9000px; } #access { /*	display: block; float: left; margin: 0 auto; width: 940px; */	float: left; margin-top: 30px; } #access .menu-header, div.menu { font-size: 13px;	margin: 0 auto; } #access .menu-header ul, div.menu ul { list-style: none; margin: 0; } #access .menu-header li, div.menu li { float: left; position: relative; } #access a { color: #363636; font-size: 13px; text-transform:uppercase; display: block; /*line-height: 30px;*/ padding: 0 10px;	padding-bottom: 10px; text-decoration: none; font-weight: bold; } #access ul ul { box-shadow: 0px 3px 3px rgba(0,0,0,0.2);	-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); display: none; position: absolute; 	/*top: 30px;*/ left: 0;	float: left; width: 180px; z-index: 99999; } #access ul ul li { min-width: 180px; } #access ul ul ul {	left: 100%;	top: 0;} #access ul ul a {	background: #FFF;	color: #6A6A6A;	line-height: 1em;	padding: 10px;	width: 160px;	height: auto; font-size:10px;} /* #access li:hover > a, #access ul ul :hover > a {	background: #333;	color: #fff;} */ #access li:hover > a {	color:#888; } #access ul ul :hover > a {	background: #ACCB50;	color: #FFF;} #access ul li:hover > ul {	display: block; } /* #access ul li.current_page_item > a, #access ul li.current-menu-ancestor > a, #access ul li.current-menu-item > a, #access ul li.current-menu-parent > a { color: #6A6A6A; } */ * html #access ul li.current_page_item a, * html #access ul li.current-menu-ancestor a, * html #access ul li.current-menu-item a, * html #access ul li.current-menu-parent a, * html #access ul li a:hover { color: #fff; }

Hi,

I cannot get the main menu on this site to center correctly in Firefox:

Code is:

PHP Code:
#navcontainer {
    background: url(../../images/background_main_menu.jpg);
    height: 33px;
    width: 590px;
    font: 12px Verdana, sans-serif;
    
}

#navlist
{
    margin: 0;
    
}

#navlist ul, #navlist li
{
    margin: 0;
    display: inline;
    list-style-type: none;
    vertical-align: middle;
    padding-left: 5px;
    padding-right: 5px;
}

#navlist a:link, #navlist a:visited
{
    font-weight: bold;
    margin: 0 2px 4px 2px;
    text-decoration: none;
    color: #FFFFFF;
}

#navlist a:hover 
{ 
    color: #527D24; 
}



<div align="center">
        <div id="navcontainer">
            <ul id="navlist">
                <li style="padding-bottom: 14px;"><a href="index.php">home</a></li>
                <li><img src="images/main_menu_seperator.jpg" width="24" height="30" alt="" /></li>
                <li style="padding-bottom: 14px;"><a href="#">about</a></li>
                <li><img src="images/main_menu_seperator.jpg" width="24" height="30" alt="" /></li>
                <li style="padding-bottom: 14px;"><a href="#">services</a></li>
                <li><img src="images/main_menu_seperator.jpg" width="24" height="30" alt="" /></li>
                <li style="padding-bottom: 14px;"><a href="links.php">links</a></li>
                <li><img src="images/main_menu_seperator.jpg" width="24" height="30" alt="" /></li>
                <li style="padding-bottom: 14px;"><a href="#">gallery</a></li>
                <li><img src="images/main_menu_seperator.jpg" width="24" height="30" alt="" /></li>
                <li style="padding-bottom: 14px;"><a href="#">contact</a></li>
            </ul>
        </div>
    </div> 

Hi
I hope this is going to be a simple question!!
I have used the suckerfish menu and all I would like to do is have the menu in the center of the page with a blue border extending from the sides of the menu to the edge of the page.

The page can be viewed on http://uk.geocities.com/g_foxon/example1.htm

cheers
Wistar

First of all, this is my first post, so take it easy on me if I do something wrong

Onto the problem...

I'm trying to center my CSS navigation menu. I'm probably making a completely moronic mistake, but I've been trying to figure this out for quite some time now to no avail. I've managed to ALMOST do it, but there's something wrong, and it's probably something minor.

(Please excuse the sloppy coding; I'm just beginning to design the layout)

HTML:
Code:

  <div id="navigation">
       <ul id="navigation">
           <li><a href="page1.html" target="_self" title="Home" class="current">Home</a></li>
           <li><a href="about.html" target="_self" title="About">About</a></li>
           <li><a href="solutions/solutions.html" target="_self" title="Solutions">Solutions</a></li>
           <li><a href="clients/clients.html" target="_self" title="Clients">Clients</a></li>
           <li><a href="faq/faq.html" target="_self" title="FAQ">FAQ</a></li>
           <li><a href="contact/contact.html" target="_self" title="Contact">Contact</a></li>
    </ul></div>
  <!-- end #navigation -->

CSS:
Code:

}
.twoColLiqRtHdr #navigation { 
	height: 37px; 
	background: #FFF url("images/menu-bg-yellow-orig.gif") repeat-x; 
	font-size: .9em; 
	font-family: "Lucida Grande", Verdana, sans-serif; 
	font-weight: bold;  
	margin-left: 0; 
	padding: 0;
}
#navigation ul, #navigation ul li {
     list-style: none;
     margin: 0;
     padding: 0;
 }
.twoColLiqRtHdr #navigation ul {
	height: 37px; 
	margin: 0; 
	padding: 0;
	text-align: center;
} 
.twoColLigRtHdr #navigation ul li {
	display: inline-block;
}
.twoColLiqRtHdr #navigation ul li a {
	color: #777;  
	text-decoration: none;
	padding: 2px 10px 0px;
	height: 37px;
	line-height: 200%;
	margin: 0;
	display: inline-block;
}
.twoColLiqRtHdr #navigation ul li a:hover { 
	color: #333; 
}
.twoColLiqRtHdr #navigation ul li a.current { 
	color: #CC0A00;
	background: #FFF url("images/current-bg-yellow.gif") repeat-x; 
	padding: 2px 10px 0px; 
	display: inline-block;
}
/*\*//*/
#navigation ul li a {
	display: inline-block;
	white-space: nowrap;
	width: 1px;
}

#navigation ul {
	padding-bottom: 0;
	margin-bottom: -1px;
}
/**/

/*\*/
html #navigation ul li a {
	padding: 0;
}
/**/

This is the result of my current coding:

http://i75.photobucket.com/albums/i320/blockbusted/cssmenuproblem.jpg

If anyone can shed some light on this problem of mine, I would greatly appreciate it! THANKS!

(P.S. I know the CSS doesn't validate; I just validated it and I'm still having the same problem.)

Hello,

I have a vertical menu on the left hand side of my page that I'm working on.

I'm trying to center the text vertically in each box as some menu names take up two lines and are skewing the alignment.

Here's the code I'm using for the menu:

Code:

#menu {
clear: left;
float: left;
width: 150px;
margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}

#menu ul {	
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 10px;
}	

#menu li {
margin-bottom: 4px;  /* space between each menu item */
}

#menu li a {           /* text */

font-weight: bold;
height: 25px;  /* height of menu tabs */
text-decoration: none;
color: #505050;
display: block;
padding-left: 10px;
padding-top: 5px;
background: #f4f4f4;
border-left: 4px solid #cccccc;
}	
	
#menu li a:hover {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}

If anyone could help me out that'd be great. Thanks!

Well I have this code for my menu Code:

div.menu{
	align-text: center;
	float: left;
	background-color: #FFFFFF;
	color: #000000;
	border-top:0.1em solid #000000;
	border-right:0.1em solid #000000;
	border-bottom:0.1em solid #000000;
	height: 500px;
	width: 150px;
}

But It doesnt center the links. Here is the out put http://blacknine.dajoob.com/hhd/