Member Avatar for daviddoria

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
  • 7K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by daviddoria
Member Avatar for shaya4207

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

Member Avatar for daviddoria

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

Member Avatar for shaya4207

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

Member Avatar for daviddoria

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

Member Avatar for shaya4207

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

Member Avatar for daviddoria

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?

Member Avatar for shaya4207

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

Member Avatar for daviddoria

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?

Member Avatar for daviddoria

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?

Member Avatar for teedoff

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.

Member Avatar for daviddoria

I had tried that but it didn't work.

Member Avatar for teedoff

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

Member Avatar for daviddoria

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

Member Avatar for teedoff

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

Member Avatar for daviddoria

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 because: n/a
Member Avatar for ko ko 
ul.dropdown {
float: left;
position: relative;
z-index: 597;
}

Float ignore the auto margin.

Member Avatar for daviddoria

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?

Member Avatar for daviddoria

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.