Fumbling Through CSS/HTML on My Blog - Need Help

[christinashaver]

Hi there,

I am putting together a blog currently located at dewyapplebottom.squarespace.com . Using the http://www.alistapart.com/articles/dropdowns/ , I created a pretty nice looking navigation menu. But it has a few problems:

1. I'd like to have the menu sit centered, a bit underneath the Blog name and description.

2. I'd like the drop down to hide the underlaying text when it drops. Right now it will hide the blog entries, but if drops down over the sidebars, the sidebar content is still visible.

If any of you know how to help solve either of these problems, I would greatly appreciate it!!

Thank you,
Christina

[AricC]

1. I'd like to have the menu sit centered, a bit underneath the Blog name and description.

2. I'd like the drop down to hide the underlaying text when it drops. Right now it will hide the blog entries, but if drops down over the sidebars, the sidebar content is still visible.

Add the div code below around your existing menu.
[html]
<div style="text-align: center">
<ul id="nav">
<li><b>Zippy Kids</b>
<ul>
<li><a href="http://www.dewyapplebottom.squarespace.com/home">Home</a></li>
<li><a href="http://www.dewyapplebottom.squarespace.com/about">About</a></li>
<li><a href="http://www.dewyapplebottom.squarespace.com/contact">Contact</a></li>
</ul>
</li>
<li><b>Listings</b>
<ul>
<li><a href="http://www.dewyapplebottom.squarespace.com/products/">Products</a></li>
<li><a href="http://www.dewyapplebottom.squarespace.com/books/">Books</a></li>
<li><a href="http://www.dewyapplebottom.squarespace.com/activism/">Activism</a></li>
<li><a href="http://www.dewyapplebottom.squarespace.com/directory/">Directory</a></li>
<li><a href="http://www.dewyapplebottom.squarespace.com/news/">News</a></li>
</ul>
</li>
<li><b>Categories</b>
<ul>
<li><a href="http://www.dewyapplebottom.squarespace.com/add-adhd/">ADD/ADHD</a></li>
<li><a href="http://www.dewyapplebottom.squarespace.com/autism/">Autism</a></li>
<li><a href="http://www.dewyapplebottom.squarespace.com/spd/">SPD</a></li>
</ul>
</li>
<li><b>Discussions</b>
<ul>
<li><a href="http://www.dewyapplebottom.squarespace.com/addadhd-board/">ADD/ADHD Board</a></li>
<li><a href="http://www.dewyapplebottom.squarespace.com/autism-board/">Autism Board</a></li>
<li><a href="http://www.dewyapplebottom.squarespace.com/spd-board/">SPD Board</a></li>
</ul>
</li>

<li><b>Get Involved</b>
<ul>
<li><a href="http://www.dewyapplebottom.squarespace.com/suggest-a-listing">Suggest a Listing</a></li>
<li><a href="http://www.dewyapplebottom.squarespace.com/advertise">Advertise</a></li>
<li><a href="http://www.dewyapplebottom.squarespace.com/giveaways">Sign-up for Giveaways</a></li>
</ul>
</li>
</ul>
</div>
[/html]

For question 2 are you saying you want the background of the drop menu to be invisible? Clarify if you can't get it.

HTH,
Aric

[christinashaver]

Hi Aric,

Thank you so much for the reply. I really appreciate it because I'm way beyond my understanding of all this.

I did add the <div> as you recommended, but the menu still is not centering horizontally on the page.

I enlarged my drop down menu where it runs into the sidebar to better illustrate what is happening. The drop down goes behind the sidebar and the sidebar stays visible. I would like the drop down menu to be visible instead.

I'm not sure if some of this is part of the main code of the template I'm using. If it is part of that, then this may be a problem. I can't access the main template code.

Thank you again for looking into this. I really am grateful!!

:)Christina

[mtnative]

I spent a little time looking at your web site. For the moment the best I could come up with is this - <div style="margin-left: 125px;"> - rather than the text-align: center (this will only center the contents of the new div you added not the div itself).

It appears that part of the page style is embedded on the page and some is being called from an external style sheet. Unfortunately, I am not able to pull down the external style sheet to see what is in it.

What I have suggested above is not the best universal fix; however, it will give you some control over the horizontal position of the menu system. 125px worked best for my screen size and resolution. You can play with this number to get just what you want. There is a setting that will cause a div to automatically center on any screen size, but it is not working here. Could be a conflict with something in the external style sheet - which I can't get to.

In viewing the several pages on the site I did not see the menu disappear behind anything? I am not sure what you are referring to when you say "sidebar."

[christinashaver]

Thank you so much for your response and for your help!! I tried your <div> with the pixel count and that does seem to move it. But, this page moves around when the browser size is adjusted. So the menu stays in a static place and doesn't move.

I think that you're right that there is something with an external style sheet, something I cannot access through this website. This is definitely a limitation of the service I'm using.

I have a Mac and when I'm using it the menu goes behind the advertising (that's what I mean by the sidebars). I wonder if that only happens to Macs.

Thank you everybody for your help!! If anybody has any other bright ideas, I'm willing to try them. I think that the previous reply was correct in that it is probably something in the external style sheet.

:)Christina