Using HTML in Pages with <STRONG>

[mrGTB]

I've just been playing around adding some HTML in pages. While I can see adding <br /> works fine creating line break spaces. I also spotted that <strong> doesn't to make text bold, also adding <p> for paragraphs doesn't work either wrapped around text to created a line space with other text below it wrapped in a another paragraph.

Example below tried:

<p><strong>Release Date:</strong> October 28, 2011
<br />
<strong>Studio:</strong> DreamWorks Animation
<br />
<strong>Director:</strong> Chris Miller
<br />
<strong>Screenwriter:</strong> Tom Wheeler
<br />
<strong>Starring:</strong> Antonio Banderas, Salma Hayek, Zach Galifianakis, Billy Bob Thornton, Amy Sedaris
<br />
<strong>Genre:</strong> Adventure, Animation, Comedy, Fantasy</p>

<p><strong>Plot Summary:</strong> Long before this cool cat even met Shrek, this notorious fighter, lover and outlaw named "Puss In Boots" became a hero when setting off on an adventure with the tough and street smart "Kitty Softpaws" and their mastermind "Humpty Dumpty" to try and save his town.</p>

 

[Paul B]

Make sure you use the correct classes to wrap your content in.

http://xenforo.com/community/threads/how-to-create-a-page-node.9510/

 

[mrGTB]

Ah! I wasn't aware there was a CSS markup stylesheet for it. I just added that DIV CLASS wrapped around the content and all is fine now. I've bookmarked that page.

 

[Kier]

FWIW, you should probably be using a definition list and some CSS for that content anyway.

Try this:

<style type="text/css">

	dl.movieInfo dt
	{
		font-weight: bold;
		margin-top: 5px;
	}
	
	dl.movieInfo dd
	{
		display: inline;
		margin: 0 0 0 10px;
	}
	
	dl.movieInfo .summary
	{
		margin-top: 1em;
	}

</style>

<dl class="movieInfo">
	<dt>Release Date:</dt>
		<dd>October 28, 2011</dd>
	<dt>Studio:</dt>
		<dd>DreamWorks Animation</dd>
	<dt>Director:</dt>
		<dd>Chris Miller</dd>
	<dt>Screenwriter:</dt>
		<dd>Tom Wheeler</dd>
	<dt>Starring:</dt>
	<dd>Antonio Banderas</dd>
		<dd>Salma Hayek</dd>
		<dd>Zach Galifianakis</dd>
		<dd>Billy Bob Thornton</dd>
		<dd>Amy Sedaris</dd>
	<dt>Genre:</dt>
		<dd>Adventure</dd>
		<dd>Animation</dd>
		<dd>Comedy</dd>
		<dd>Fantasy</dd>
	<dt class="summary">Plot Summary:</dt>
		<dd>Long before this cool cat even met Shrek,
			this notorious fighter, lover and outlaw named "Puss In Boots"
			became a hero when setting off on an adventure with the tough
			and street smart "Kitty Softpaws" and their mastermind
			"Humpty Dumpty" to try and save his town.</dd>
</dl>

 

[mrGTB]

Thanks for that, I just tested both ways and to be honest I'm not that keen on the effect that method above produces on appearance looking at it.

 

[Kier]

Thanks for that, I just tested both ways and to be honest I'm not that keen on the effect that method above produces on appearance looking at it.

It's just a case of editing the CSS to get the look you want. Such is the nature of semantic HTML.

 

[mrGTB]

I don't mind sticking with default styling so it matches the forum post style exactly. I'd sooner keep things flowing throughout the pages to match the forums.

 

[mrGTB]

I don't know what you think of this one. But you know how the Menu Nodes are displayed on the left side, do you not think it would be better displayed on the right side instead? My reason being, there are times when your trying to break past that left menu with some instruction text before you start using the full page width. If that menu was on the right side text flows up to and around it, it doesn't cause any niggly problems like it does having it left side, your text would always align fully to the left at the very top of the page (wrapping around the menu right sided) - if you get what I mean by this?

Example of what I mean here:

 

[Paul B]

I've separated my menu and content for that reason.

They are in separate divs so the text doesn't wrap around the menu.

 

[mrGTB]

But you would not even have do that if the menu was right-sided instead of being left-sided. Text would just flow up the right-side wrapping around the menu. But always letting you from the very start of the page have your text always align (top-left) without running into issues like that picture shows. Keep in mind also there could be 20 years listed in that menu in the picture (highly unlikely). Anyway, just a thought I had about it being better suited right-sided.

 

[Paul B]

It's a simple enough change if you want to do it for your own site.

Just add this to EXTRA.css:

#pageNodeNavigation {
float: right !important;
margin-left: 10px !important;
margin-right: 0 !important;
}

I actually don't want the content to wrap, which is why I've separated the divs.
Some of my pages have 25-30 nodes in the menu.

 

[mrGTB]

Thanks, I've just added that now and it does exactly what I wanted