1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Using HTML in Pages with <STRONG>

Discussion in 'XenForo Questions and Support' started by mrGTB, Oct 24, 2011.

  1. mrGTB

    mrGTB Well-Known Member

    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:

    Code:
    <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>
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

  3. mrGTB

    mrGTB Well-Known Member

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

    Kier XenForo Developer Staff Member

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

    Try this:
    HTML:
    <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>
     
  5. mrGTB

    mrGTB Well-Known Member

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

    Kier XenForo Developer Staff Member

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

    mrGTB Well-Known Member

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

    mrGTB Well-Known Member

    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:

    Snap1.png
     
  9. Brogan

    Brogan XenForo Moderator Staff Member

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

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

    mrGTB Well-Known Member

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

    Brogan XenForo Moderator Staff Member

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

    Just add this to EXTRA.css:
    Code:
    #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.
     
  12. mrGTB

    mrGTB Well-Known Member

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

Share This Page