Html problems ;/ forum node bars (extra css)

x4rl

Well-known member
Am trying to add a small bar at the end of my forum-node (see pic)
i suck at html stuff pfft.webp

This is the code I was trying am guess am going at this the wrong way.
Any pointer's would be great

Thanks

HTML:
    <div class="nodeInfo categoryNodeInfo categoryStrip"><div class="bar_girl">

        <div class="categoryText">
            <h3 class="nodeTitle"><a href="{xen:link categories, $category}">{$category.title}</a></h3>
            <xen:if is="{$category.description}"><blockquote class="nodeDescription baseHtml">{xen:raw $category.description}</blockquote></xen:if>
        </div>

    </div></div>
 
This is in the node_category_level_1 template, right?

Try this (I added the first line):

Code:
	<div class="categoryStrip" style="float: right; width: 100px; background: #000000;">blah</div>

	<div class="nodeInfo categoryNodeInfo categoryStrip">

		<div class="categoryText">
			<h3 class="nodeTitle"><a href="{xen:link categories, $category}">{$category.title}</a></h3>
			<xen:if is="{$category.description}"><blockquote class="nodeDescription baseHtml">{xen:raw $category.description}</blockquote></xen:if>
		</div>
		
	</div>

The categoryStrip class gives it the same padding and border radius and stuff. Then I added some inline styling to float it right and set a width and background. You may want to clean up the CSS.

This is the result:

Screen shot 2011-03-09 at 10.30.51 PM.webp
 
Awesome Jake... Aye this is for the node_category_level_1
I removed the background colour from that edited first line so it keeps the same colour, What am trying to do is an a small image right at the end of that node bar.
Is there anyway to move the image up and at the same time keep the node bar the same as it should be (as in not all the way around the image)
i suck at html stuff pfft.webp

Thank alot!
 
You can try adding some positioning (position: relative; top: -100px; in this example):

Code:
	<div class="categoryStrip" style="position: relative; top: -100px; float: right; width: 100px; background: #000000;">blah</div>

	<div class="nodeInfo categoryNodeInfo categoryStrip">
	
		<div class="categoryText">
			<h3 class="nodeTitle"><a href="{xen:link categories, $category}">{$category.title}</a></h3>
			<xen:if is="{$category.description}"><blockquote class="nodeDescription baseHtml">{xen:raw $category.description}</blockquote></xen:if>
		</div>
		
	</div>

You can see the result (100 pixels higher on the page):

Screen shot 2011-03-14 at 12.19.20 AM.webp
 
Top Bottom