On this page:
http://ewh.ieee.org/r1/schenectady/New/

I have the title image and title text:

<center>
<a href="index.php"><img style="vertical-align:middle;" src="/r1/schenectady/images/IEEE.gif"></a>
<span id="lightblue" style="vertical-align:middle; font-size: 40pt;" >Schenectady Section</span>
</center>

then a paragraph break:

<p/>

then a row of drop down lists, then another <p/> then some text.

The problem is that the text is starting on the same line as the drop down lists - should the <p/> cause the text to start below the drop down lists?

Thanks,

David

The '<p>' tags are empty, try putting '&nbsp;' in between the 2 empty tags.

Ah, I changed <p/> to <p>&nbsp;</p> and then it worked as expected. So what does <p/> do then?

Also another thing - the <center> tags around the UL (the menu) don't seem to work (as the menu is not centered) - any thoughts on that?

Thanks,

David

The <p /> tag doesn't work on it's own, you would want <br /> for that, which would make a line break (sorry I just remembered that).

About the <center> tags, that's deprecated, since we don't want to use styling in actual HTML, rather give it a 'margin: auto;' that would be the right way to do it

I tried this:

<html>
<body>

<p>Test heading</p>
<br/>
<p style="margin: auto;">Test heading</p>

</body>
</html>

Expecting the first one to be left justified and the second one to be centered, but they are both the same (left).

Put a width for the body, and (obviously a smaller) width for the second <p>, and that should work

Attempt #3... haha

<html>
<body width=100%>

<p>Test heading</p>
<br/>
<p style="margin: auto; width:50%">Test heading</p>

<center><p>Test heading</p></center>

</body>
</html>

This results in a left justified, a weird kind of center/left justified, and then I used center tags to see an actual center justified.

A body with of 100% should be the full page, right? Then what does 50% width for the p mean? We must still be missing something?

If you put a border around the first <p> you'll see that it's centered only the text is aligned to the left of the border, just add in there 'text-align: center' and you're in business.

I know this seems like alotta extra work, but it's good to right code the W3C compliant, because eventually the <center> won't work with newer browsers...

Ok it's working on the text now. I'm on board with following the new rules, they're just not explained very well sometimes!

Back to the actual problem now - the <center> tags didn't work on the UL object, and neither does the text-align and auto margin method:

<ul id="nav" class="dropdown dropdown-horizontal" style="margin: auto; width:50%; text-align:center;">

You can see the menu is still on the left:
http://ewh.ieee.org/r1/schenectady/New/

Why would it not apply to this object?

I got it to work by enclosing the normal <ul> tag inside of a

<div style="margin-left: auto; margin-right: auto; text-align:center; width: 50%;">

I had tried the same thing with p:

<p style="margin-left: auto; margin-right: auto; text-align:center; width: 50%;">

but it didn't work - strange because I thought p and div were both "block" elements?

You dont need to wrap a ul in a div. Youc an style the <ul> tag the same way you would a div. UL's are block levels as well.

I had tried that but it didn't work.

Not sure why then. You do have a couple of validation errors in your code. In your footer you have a closing </p> but not an opening one. This probably wouldnt affect your <ul> though, just thought I'd mention it.

You need three things to center an element.

Valid doctype
specified width for the element
and margin left and right set to auto

Thanks, I removed the erroneous /p tag. However, you were right that that didn't affect the UL. I changed it to:

<ul id="nav" class="dropdown dropdown-horizontal" style="margin-left: auto; margin-right: auto; text-align:center; width: 50%;">

but you can see that it is left justified:
http://ewh.ieee.org/r1/schenectady/New/

David

ummm Before I saw your ul was center, now I see a centered ul and another duplicate ul left. Check your source code.

One of them is commented - this should be what you see:

<!--
  <div style="margin-left: auto; margin-right: auto; text-align:center; width: 50%;">

    <ul id="nav" class="dropdown dropdown-horizontal">
      <li><a href="./">Home</a></li>
      <li><span class="dir">Events</span>
	<ul>
	  <li><a href="Events.php">Upcoming Events</a></li>
	  <li><a href="Calendar.php">Calendar</a></li>
	  <li><a href="News.php">News</a></li>
	  <li><a href="Newsletters.php">Newsletters</a></li>
	  <li><a href="Volunteers.php">Call for Volunteers</a></li>
	</ul>
      </li>
      <li><span class="dir">Who We Are</span>
	<ul>
	  <li><a href="Whoweare.php">Executive Committee</a></li>
	  <li><a href="Societies.php">Societies</a></li>
	  <li><a href="AwardNominations.php">Award Nominations</a></li>
	  <li><a href="Bylaws.php">Bylaws</a></li>
	</ul>
      </li>
      <li><span class="dir">Member Benefits</span>
	<ul>
	  <li><a href="Jobs.php">Job Opportunities</a></li>
	  <li><a href="Discounts.php">Discounts</a></li>
	  <li><a href="Links.php">Links</a></li>
	  <li><a href="Videos.php">Video Library</a></li>
	</ul>
      </li>

    </ul>
  </div> <!-- end center -->

    <ul id="nav" class="dropdown dropdown-horizontal" style="margin-left: auto; margin-right: auto; text-align:center; width: 50%;">
      <li><a href="./">Home</a></li>
      <li><span class="dir">Events</span>
	<ul>
	  <li><a href="Events.php">Upcoming Events</a></li>
	  <li><a href="Calendar.php">Calendar</a></li>
	  <li><a href="News.php">News</a></li>
	  <li><a href="Newsletters.php">Newsletters</a></li>
	  <li><a href="Volunteers.php">Call for Volunteers</a></li>
	</ul>
      </li>
      <li><span class="dir">Who We Are</span>
	<ul>
	  <li><a href="Whoweare.php">Executive Committee</a></li>
	  <li><a href="Societies.php">Societies</a></li>
	  <li><a href="AwardNominations.php">Award Nominations</a></li>
	  <li><a href="Bylaws.php">Bylaws</a></li>
	</ul>
      </li>
      <li><span class="dir">Member Benefits</span>
	<ul>
	  <li><a href="Jobs.php">Job Opportunities</a></li>
	  <li><a href="Discounts.php">Discounts</a></li>
	  <li><a href="Links.php">Links</a></li>
	  <li><a href="Videos.php">Video Library</a></li>
	</ul>
      </li>

    </ul>

We would have seen two menus if there were two UL's, no?

ul.dropdown {
float: left;
position: relative;
z-index: 597;
}

Float ignore the auto margin.

Ok, I removed that "float:left" from ul.dropdown and it is centered now. HOWEVER, the <br /> after the menu does not seem to be working again - the text starts on the same line as the menu. I tried adding a <div> after the menu as well, but that didn't push the text down either. Any thoughts?

I'll start a new thread since this is way off the original topic now. Thanks for answering the original question :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.