0

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

4
Contributors
18
Replies
20
Views
7 Years
Discussion Span
Last Post by daviddoria
0

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

0

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

0

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).

0

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

0

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?

0

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...

0

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?

0

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?

0

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.

0

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

0

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

0

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

0

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?

Edited by daviddoria: n/a

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

Float ignore the auto margin.

0

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?

0

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.