CSS Menu will not center - Post ID 98711

User 38401 Photo


Senior Advisor
10,951 posts

yep, that's what I meant when I first said that you couldn't edit the menu in the menu builder if you edited it outside of the menu builder, meaning that if you open the .mnu file it won't have any of your changes in it that you did outside the menu builder. :)
User 179209 Photo


Registered User
1 post

The HTML editor has an update June 8, 2010 to resolve this.

Download the latest version of the HTML Editor and install the update. Then go to Help->View Help File.:)
User 563328 Photo


Registered User
85 posts

I have created a horizontal menu with CSS Menu Designer and was able to center it using the above fixes - .center {margin-left:auto; margin-right:auto; width:500px;} However now my second header is inline with the menu and I cannot get it to align correctly (below the menu and centered).

The layout is:

Header
Horizontal Menu
Header 2
Content...

I would appreciate it if someone would please take a look at this and see if you can find the problem?

HTML:

<div id="header">
<h1>Frank and Kolb, Russia</h1>
<p class="description">Two German colonies on the Volga River</p>
</div>

<div class="center">
<ul class="practice-menu">
<li class="first">
<a href="http://">Home</a>
<ul>
<li class="first"><a href="index.html">Welcome</a></li>
<li>
<a href="http://">History</a>
<ul>
<li class="first"><a href="history/history.html">History</a></li>
<li><a href="history/catherine's-manifesto.html">Catherine's Manifesto</a></li>
<li><a href="history/chronology.html">Chronology of German-Russian History</a></li>
<li><a href="history/seven-years-war.html">Seven Years' War</a></li>
</ul>
</li>
<li>
<a href="http://">Miscellaneous</a>
<ul>
<li class="first"><a href="miscellaneous/miscellaneous.html">Cookbooks/Recipes</a></li>
<li><a href="miscellaneous/dictionary-food-terms.html">Dictionary of German-Russian Food Terms</a></li>
<li><a href="miscellaneous/reading-list.html">Reading List</a></li>
</ul>
</li>
<li>
<a href="http://">Resources</a>
<ul>
<li class="first"><a href="resources/resources.html">Resources</a></li>
<li>
<a href="http://">Books</a>
<ul>
<li class="first"><a href="resources/books-general-research.html">General Genealogy Research</a></li>
<li><a href="resources/books-volga-german-research.html">Volga German Genealogy Reserch</a></li>
</ul>
</li>
<li>
<a href="http://">Database</a>
<ul>
<li class="first"><a href="resources/database-background.html">Background</a></li>
<li><a href="resources/database-census-records.html">Census Records</a></li>
<li><a href="resources/database-church-records.html">Church Records</a></li>
<li><a href="resources/database-family-histories.html">Family Histories</a></li>
<li><a href="resources/database-newspaper-obituaries.html">Newspaper Obituaries</a></li>
<li><a href="resources/database-resource-books.html">Resource Books</a></li>
<li><a href="resources/database-surname-charts.html">Surname Charts</a></li>
<li><a href="resources/database-village-research-germany.html">Village Research in Germany</a></li>
</ul>
</li>
<li>
<a href="http://">German Genealogy Sample Letters</a>
<ul>
<li class="first"><a href="resources/sample-letters-archives.html">Archives</a></li>
<li><a href="resources/sample-letters-churches.html">Churches</a></li>
<li><a href="resources/sample-letters-regional-orgs.html">Regional Genealogical Organizations</a></li>
<li><a href="resources/sample-letters-registrars.html">Registrar's Office</a></li>
</ul>
</li>
<li><a href="resources/mailing-lists.html">Mailing Lists</a></li>
<li>
<a href="http://">Maps</a>
<ul>
<li class="first"><a href="http://">Frank</a></li>
<li><a href="http://">Germany</a></li>
<li><a href="http://">Kolb</a></li>
<li><a href="http://">Volga Region</a></li>
</ul>
</li>
<li><a href="resources/software.html">Software</a></li>
<li><a href="resources/surname-charts.html">Surname Charts</a></li>
<li>
<a href="http://">Villages</a>
<ul>
<li class="first"><a href="resources/villages.html">Village Coordinators</a></li>
<li><a href="resources/villages-websites.html">Village Websites</a></li>
</ul>
</li>
<li><a href="resources/websites.html">Websites</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="frank.html">Frank</a></li>
<li><a href="kolb.html">Kolb</a></li>
<li><a href="http://www.ahsgr.org">AHSGR</a></li>
<li><a href="site-map.html">Site Map</a></li>
<li><a href="search.html">Search</a></li>
<li><a href="contact-us.html">Contact Us</a></li>
</ul>
</div>

<div id="header2">
<h2>home</h2>
</div>

CSS

/*** ESSENTIAL STYLES ***/
.center {
margin-left:auto;
margin-right:auto;
width:500px;
}

.practice-menu, .practice-menu * {
margin:0;
padding:0;
list-style:none;
}

User 184085 Photo


Ambassador
1,707 posts

maybe try:

#site-nav {display:block; margin-left:auto; margin-right:auto; width:500px; height:25px;


then wrap the menu in <div id=site-nav></div> instead of the .center class.
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
User 166871 Photo


Registered User
185 posts

Just a thought
It looks like header div is not included in center div as you close center before header2 div

<li><a href="search.html">Search</a></li>
<li><a href="contact-us.html">Contact Us</a></li>
</ul>
</div>

<div id="header2">
<h2>home</h2>
</div>


Cayucostom
Vista Tom


User 563328 Photo


Registered User
85 posts

Cayucostom,

My css for the header2 worked prior to using the CSS Menu Designer menu but I will try including with the .center class. If that doesn't work I will try David's method.

#header2
{
color:#004b6f; font-size:0.812em; text-align:center;
} /* 13px/16=0.812em */

I'm sure glad all you guys are out there giving advice. Thanks so much.

Kelly
User 1521532 Photo


Registered User
23 posts

I'm also grappling with this. I wonder if making changes to one of the css files (superfish-navbar.css) isn't the key.

I don't know that much about css yet, but I noticed the following code:


/*** adding the class sf-navbar in addition to sf-menu creates an all-horizontal nav-bar menu ***/
.sf-navbar {
background: #BDD2FF;
height: 2.5em;
padding-bottom: 2.5em;
position: relative;
}
.sf-navbar li {
background: #AABDE6;
position: static;
}
.sf-navbar a {
border-top: none;
}
.sf-navbar li ul {
width: 44em; /*IE6 soils itself without this*/
}
.sf-navbar li li {
background: #BDD2FF;
position: relative;
}

I have experimented with changing some of these position attributes, to no avail.

Ideally what I'd like is for the whole thing to inherit the centered property from its container. But so far, it's Greek to me.

..Christine..
User 184085 Photo


Ambassador
1,707 posts

do you have the menu online so we can take a look at the code?

one thing you could try is in the main css file for your menu typically called your menu name-menu.css around line 76 you see /*** DEMO SKIN ***/ a couple of lines bellow that there is a line
float:left;


try changing it to
/*float:left;*/
and see if it helps.

adding /* */ around css code makes the browsers ignore that info.
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
User 403447 Photo


Registered User
8 posts

Ok I have read and read and read - and tried and tried and tried what has been offered - yet I can not get it to work I need some help - PLEASE!.

Here is what I have I know I have two sets but I need to make sure the new one works before deleting the old.

what is in the talbe is the new stuff which has the drop down menu /options
Below is the entire code to my page - Hope I'm posting this correctly.


<html>
<head>
<title>AFCO Austin Realty Approach</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name='description' content='AFCO Realty - helping you sell buy lease residential and commercial real estate - our knowledge is your strength.' />
<meta name='keywords' content='AFCO Realty, Representation, Buy, Sell, Lease, Invest, Texas, Austin Real Estate, Luxury Homes, Foreclosure, Real Estate, Realtor, Marketing, Commercial, Austin Homes, Commercial, Residential, Project Marketing, Agent, Austin, McAllen, Plano, Edinburg, Rio Grande Valley, Texas, GMAR, ABOR, Dallas, Quattro Associates, Robert, Roberto, Garza' />
<style type="text/css">
<!--
a:link {
color: #FF9900 ;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #CC0000;
}
a:hover {
text-decoration: none;
color: #0000CC;
}
a:active {
text-decoration: none;
color: #FF9900;
}
.style12 {
font-size: 24px;
color: #3300CC;
font-family: "BernhardMod BT"; <!-- this is the font for AFCO a the bottom-->
}
.style13 {font-size: 14px} <!-- font size for links-->
.style14 {font-family: Arial, Helvetica, sans-serif}
.style90 {font-size: 14px} <!-- font size for text at bottom of page commercial etc. etc-->
.style91 {color: #000000}
.style92 {color: #3300CC; font-size: 12px; }
.style93 {font-family: Arial, Helvetica, sans-serif; font-size: 14px; }
.style106 {
font-size: x-small;
font-family: Arial, Helvetica, sans-serif;
}
.style113 {
color: #CC3300;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.style114 {font-size: 13px; color: #FF6633; }
.style115 {
font-family: Arial, Helvetica, sans-serif; <!--the line below changes the font to bold normal italic etc -->
font-weight: normal;
color: #000099;
}
.style116 {font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; }
.style117 {font-size: 13px; color: #000000; } <!-- font for body text-->
-->
</style>
<link rel="stylesheet" type="text/css" href="css/Home-menu.css" media="screen">

</head>
<body bgcolor="#F5F5F5"</body> <!-- border background color-->
<body>
<div align="center"><span class="style111"><img src=
"AFCO-Web-Place-Holder-4cc.gif" width="824" height="171">
</span></div>

<table valign="center" border="1" width="100%">
<tr><!-- Row 1 -->
<td><ul class="Home-menu">
<li class="first">
<a href="http://">Home</a>
<ul>
<li class="first"><a href="http://www.afcoaustin.com">Austin</a></li>
<li><a href="http://www.afcofinancial.com">AFCO Financial Corp</a></li>
<li><a href="http://">Plano Coming Soon</a></li>
<li><a href="http://">San Antonio Coming Soon</a></li>
</ul>
</li>
<li><a href="http://">Our Approach</a></li>
<li>
<a href="http://">Our Listings</a>
<ul>
<li class="first"><a href="http://companylistings.afco.actris.mlxchange.com" target="_blank"">Austin</a></li>
<li><a href="http://">AFCO Financial Corp Edinburg</a></li>
</ul>
</li>
<li>
<a href="http://">Commercial</a>
<ul>
<li class="first"><a href="http://">Buying</a></li>
<li><a href="http://">Selling</a></li>
<li><a href="http://">Investing</a></li>
<li><a href="http://"></a></li>
</ul>
</li>
<li>
<a href="http://">Residential</a>
<ul>
<li class="first"><a href="http://">For Buyers</a></li>
<li><a href="http://">For Sellers</a></li>
<li><a href="http://">For Investors</a></li>
</ul>
</li>
<li><a href="http://">Associates</a></li>
<li>
<a href="http://">AFCO Blog</a>
<ul>
<li class="first"><a href="http://">Company Blog</a></li>
<li><a href="http://">Roberto's Blog</a></li>
<li><a href="http://">Guillermo's Blog</a></li>
<li><a href="http://">Wayne's Blog</a></li>
</ul>
</li>
<li><a href="">Links</a></li>
</ul></td><!-- Col 1 -->
</tr>
</table>







<br>
<br>
<p align="center"> <span class="style13"><span class="style14">
<a href="index.html">Home</a> &nbsp;&nbsp;|&nbsp;&nbsp;
<a href="Approach.htm">Our Approach</a> &nbsp;&nbsp;|&nbsp;&nbsp;
<a href="http://companylistings.afco.actris.mlxchange.com" target="_blank">Our Listings</a> &nbsp;&nbsp;|&nbsp;&nbsp;
<a href="http://texasrealestate.com/web/2/21/Selling/" target="_blank">Commercial &nbsp;&nbsp;|&nbsp;&nbsp;
<a href="http://texasrealestate.com/web/2/21/Selling/" target="_blank">Residential &nbsp;&nbsp;|&nbsp;&nbsp;

<a href="Associates.htm">Associates</a> &nbsp;&nbsp;| &nbsp;&nbsp;
<a href="Blog.htm">Blog</a> &nbsp;&nbsp;|&nbsp;&nbsp;
<a href="links.html">Links</a> &nbsp;&nbsp;|&nbsp;&nbsp;
<a href="legal.htm">Disclosure / Legal</a>
<br>
</a></a></a></a>
</span></span>
</p><br><br>
<!-- <p>&nbsp;</p>
<p>&nbsp;</p> these are spacers-->
<table width="829" height="486" border="0" align="center" bordercolor="#FFFFFF" bgcolor="#CCCCCC">
<tr bordercolor="#33FF99" bgcolor="#FFFFFF">
<td width="369" height="526" rowspan="2" valign="top" bordercolor="#FFFFFF"><table width="346" height="455" border="0" align="center">
<tr>
<td width="98" valign="top" class="style115"><div align="left"></div>
<img src="atlas2.jpg" width="90" height="122"></td>
<td width="238" valign="top" class="style115"><p>Approach</p>
<p class="style117"><i>Our approach to Real Estate and our clients is simple with one clear objective - to create lasting relationships by making you happy. <br><br>Each client or potential client has specific wants and needs and it is our job to evaluate and advise you on how to best reach the desired outcome. We strive to customize our services to fit your needs and create a one of a kind plan that is truly centered around you. We believe that buying, leasing, and / or selling can be an overwhelming and tedious process, but with agents that act as advisors rather than sales people - an overwhelming and tedious process can be transformed through knowledge into power. <br><br> For each of us at AFCO - the question is not - Will you chose us for this specific transaction, but rather we ask, "How can we become your trusted Real Estate Advisors. <br><br> In other words we want to take YOU / Us from transaction to relationship.</i></p></td>
</tr>
</table>
<p align="center" class="style113">&nbsp;</p> </td>
<td width="450" height="245" valign="top" bordercolor="#FFFFFF"><table width="430" height="220" border="0" align="center">
<tr>
<td width="312" valign="top"><div align="left">
<p class="style115">Client Centered </p>
<p class="style115"><span class="style117">
AFCO is not centered around a presentation or sales pitch, it is centered around <i>you</i> - our client. Our client-centered approach is three-fold; we identify your needs, evaluate the current market and make recommendations based on both.<br><br>
We begin by simply getting to know you in order to identify what your specific needs are. We then evaluate what outcomes are important to <i>your</i> Real Estate process, utilizing what we know about the current market conditions, and incorporating our combined years of experience to develop and implement a customized clear course of action that is unique to you.

</span></p>
</div> </td>
<td width="108" valign="top"><span class="style115"><img src="atlas2.jpg" width="90" height="122"></span></td>
</tr>
</table>
</td>
</tr>
<tr bordercolor="#33FF99" bgcolor="#FFFFFF">
<td height="229" valign="top" bordercolor="#FFFFFF"><table width="430" height="225" border="0" align="center">
<tr>
<td width="114" valign="top"><div align="left"><span class="style115"><img src="atlas2.jpg" width="90" height="122"></span></div> </td>
<td width="306" valign="top"><p class="style115"> Expand </p>
<p class="style115"><span class="style117">With you at the center of our ongoing success as a company you are also essential in helping to expand the growth and success of AFCO. We want AFCO Realty to be the first name that comes to mind when you think of any service related to buying, selling, or leasing property. <br><br>
Our primary form of advertising is word of mouth and every word out of the mouths of AFCO clients ultimately reflects back to the successful partnership we are confident we will develop with each of you. Your loyalty, trust, and confidence in referring AFCO Realty to others signifies the mutual success we set out to achieve.
</span> </p></td>
</tr>
</table></td>
</tr>
</table>
<p align="center"> <span class="style13"><span class="style14">
<a href="index.html">Home</a> &nbsp;&nbsp;|&nbsp;&nbsp;
<a href="Approach.htm">Our Approach</a> &nbsp;&nbsp;|&nbsp;&nbsp;
<a href="http://companylistings.afco.actris.mlxchange.com" target="_blank">Properties</a> &nbsp;&nbsp;|&nbsp;&nbsp;
<a href="Associates.htm">Associates</a> &nbsp;&nbsp;| &nbsp;&nbsp;
<a href="Blog.htm">Blog</a> &nbsp;&nbsp;|&nbsp;&nbsp;
<a href="links.html">Links</a> &nbsp;&nbsp;|&nbsp;&nbsp;
<a href="legal.htm">Disclosure / Legal</a>
<br>
</a></a></a></a>
</span></span>
</p>


<hr align="center" width="824"> <table width="824" height="84" border="0" align="center">
<tr>
<td width="130" height="80" valign="bottom"><p align="center"><img src="Rmls.png" width="128" height="55"></p> </td>
<td width="548" valign="bottom"><div align="center" class="style91">
<p><span class="style12">AFCO Realty</span><span class="style92"><br>
<span class="style90">Buying | Leasing | Selling | Investing | Project Marketing</span></span></p>

<p><span class="style92"><span class="style93"><font size="1">
P.O. Box 142114 &nbsp;Austin, TX 78714<br>
Phone: 512-576-6348 &nbsp;Fax: 956-971-9106<br>
</span></span></p></font>

<p><span class="style92"><span class="style93"><font size="1">
5217 South McColl Rd.&nbsp; Edinburg, TX 78539<br>
Phone 956.451.3210 &nbsp; Fax 956.971.9106<br>
</span></span></p></font>

<p class="style106"><span class="style92">Texas Real Estate Broker License 0448016</p>
</div></td>

<td width="132" valign="bottom"><div align="center"><img src="ABR.png" width="97" height="52"><br>
<br>
<img src="fairhous.png" width="48" height="47"><br>
</div> <div align="center"></div></td>
</tr>
</table> </td>
</tr>
</table>
</body>
</html>
User 187934 Photo


Senior Advisor
20,190 posts

A link to the site would make it easier to help.:)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.