not making a new line?

Question

daviddoria 334 Posting Virtuoso

15 Years Ago

On this page:

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  then some text.

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

Thanks,

David

html-css web-design

4 Contributors
18 Replies
7K Views
1 Day Discussion Span
Latest Post 15 Years Ago Latest Post by daviddoria

Dani AI

Generated 1 Year Ago

Two separate issues are at play here. First,  is not a void element in HTML, so the trailing slash is ignored and browsers treat it as a start  tag. An empty  can still render its default margins, but if the preceding menu uses floats (common for horizontal <li> items), that empty paragraph and a lone   will not push content below the floats. You need to clear the floats or contain them. Prefer spacing via CSS margins rather than empty paragraphs.

Practical fixes you can drop in:

/* contain the floated li so following content starts below */
#nav { display: flow-root; margin: 0 auto; }           /* modern */
#nav::after { content: ""; display: block; clear: both; } /* classic clearfix */

/* center the UL without guessing a width */
.nav-wrap { text-align: center; }
#nav { display: inline-block; text-align: left; }      /* keeps menu text left-aligned */

Then:

<div class="nav-wrap">
  <ul id="nav"> ... </ul>
</div>

Notes:

margin: 0 auto will not center an element that is floated; remove the float from the UL itself.
Use vertical spacing on the next section instead of empty tags, e.g. .content { margin-top: 1rem; }.
Include a valid HTML5 doctype (<!doctype html>) to normalize default paragraph margins.
Helpful references: MDN on floats and clearing [https://developer.mozilla.org/docs/Web/CSS/clear], block formatting context via flow-root [https://developer.mozilla.org/docs/Web/CSS/display#flow-root], and HTML void elements [https://developer.mozilla.org/docs/Glossary/Void_element].

All 18 Replies

shaya4207 8 Junior Poster

15 Years Ago

The '' tags are empty, try putting ' ' in between the 2 empty tags.

shaya4207 8 Junior Poster

15 Years Ago

The tag doesn't work on it's own, you would want 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

shaya4207 8 Junior Poster

15 Years Ago

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

shaya4207 8 Junior Poster

15 Years Ago

If you put a border around the first 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...

teedoff 3 Posting Pro

15 Years Ago

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.

Reply to this topic

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.

daviddoria 334 Posting Virtuoso Featured Poster · Answer 1 · 2011-01-07T22:40:15+00:00

Ah, I changed  to   and then it worked as expected. So what does  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

daviddoria 334 Posting Virtuoso Featured Poster · Answer 2 · 2011-01-07T23:14:56+00:00

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

daviddoria 334 Posting Virtuoso Featured Poster · Answer 3 · 2011-01-07T23:37:35+00:00

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?

daviddoria 334 Posting Virtuoso Featured Poster · Answer 4 · 2011-01-07T23:51:01+00:00

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:

Why would it not apply to this object?

daviddoria 334 Posting Virtuoso Featured Poster · Answer 5 · 2011-01-08T01:41:18+00:00

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?

daviddoria 334 Posting Virtuoso Featured Poster · Answer 6 · 2011-01-08T03:54:16+00:00

daviddoria 334 Posting Virtuoso

15 Years Ago

I had tried that but it didn't work.

teedoff 3 Posting Pro · Answer 7 · 2011-01-08T04:20:20+00:00

Not sure why then. You do have a couple of validation errors in your code. In your footer you have a closing 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

daviddoria 334 Posting Virtuoso Featured Poster · Answer 8 · 2011-01-08T04:34:49+00:00

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:

David

teedoff 3 Posting Pro · Answer 9 · 2011-01-08T06:29:59+00:00

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

daviddoria 334 Posting Virtuoso Featured Poster · Answer 10 · 2011-01-08T06:55:12+00:00

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?

ko ko 97 Practically a Master Poster · Answer 11 · 2011-01-08T13:37:53+00:00

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

Float ignore the auto margin.

daviddoria 334 Posting Virtuoso Featured Poster · Answer 12 · 2011-01-08T18:48:05+00:00

Ok, I removed that "float:left" from ul.dropdown and it is centered now. HOWEVER, the 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?

daviddoria 334 Posting Virtuoso Featured Poster · Answer 13 · 2011-01-09T08:28:35+00:00

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

<p/> not making a new line?

Dani AI

Recommended Answers

All 18 Replies

<p/> not making a new line?

Dani AI

Recommended Answers Collapse Answers

All 18 Replies

Recommended Answers