Section list layout

[TheInkDepot]

Hi Guys

I'm trying to create a section list which shows the sub-sections with the section name centered with the image centered below it and the description below that...I can get the section name centered but not the image abd I cant seem to get the description below the image...

You can what I mean here: http://www.webpacks.co.uk/acatalog/t...llow_Body.html

I've been editing the CSS Section Link Layout which now looks like this:

<div align="center" class="product_list"> 
  <div align="center">
    <h3 align="center" class="product"><a href="<actinic:variable name="SectionPageName"/>" target="_self"><actinic:variable name='SectionName'/></a></h3>
  </div>
  <div align="center" class="image_product"><a href="<Actinic:Variable Name="SectionPageName"/>" target="_self"><img alt="<actinic:variable name="SectionName"/>" src="<actinic:variable Name="SectionImageFileName"/>" border="0" /></a></div>
  <p align="center"><actinic:variable name='SectionDescription'/></p>
</div>

Is that the correct layout to be editing for what I want to acheive?

Many thanks in advance

Neil

[jont]

Neil - this is a quick fix. Switch to the design tab and select the actinic stylesheet. Look for

.image_product {
margin: 0px 18px 10px 0px;
text-align: center;
float: left;
}

and delete float:left;

[TheInkDepot]

Hi Jont

Thanks for the speedy reply, followed your instructions but those pesky images are still hanging on the left

Neil

[leehack]

Neil - this is a quick fix. Switch to the design tab and select the actinic stylesheet. Look for

.image_product {
margin: 0px 18px 10px 0px;
text-align: center;
float: left;
}

and delete float:left;

You will also need to at least get rid of the right margin for true centering. Always best to provide a URL for us to see, makes it infinitely quicker to solve. You will probably find that class is also used in other places, so i'd suggest you create a new one just for this layout instead.

.image_column {
margin: 0px 0px 10px 0px;
text-align: center;
}

I can see in your layout code you trying to fill all areas with <div align="center">, it may be a quick fix but learn to do things properly rather than quickly as you can often find nesting all these styles just confuses or makes things harder to style. When you have a class applied to a html element, look to style within the CSS, get away from all this inline code. If you find that an item if using a universal class, simple copy it, rename it and apply the new class name to your layout instead. You do not need one <div align="center" in your layout i assure you.

[TheInkDepot]

Hi Lee

Thanks for the pointer...the URL is in fact in my original post

Hmmmm....not sure how to go about creating a new class, would that be in the style sheet?

Many thanks

Neil

[leehack]

Thats the one yeah, note how a class is formed, by comparing those you see in the stylesheet against those you see here. I've actually given you the class, you just need to copy paste it into the stylesheet and apply that class name within your layout instead of the one it is replacing. Before you do anything, get your layout back to just html and no inline styling, just classes should remain. You will see once you do it, how using clean concise code actually makes your life so much easier and your website loads faster, is coded better and everyones a winner.

[RuralWeb]

how using clean concise code actually makes your life so much easier and your website loads faster, is coded better and everyones a winner

Getting ready for ie8 lee

[leehack]

Hehe i can't wait to be honest, the sooner IE6 is dropped and we can scrap half of these bloody hacks the better IMO. I'm sick of conditional crap and hacks. IE8 is gonna be a nightmare but at least it gives us something to do a bit different lol.

[TheInkDepot]

Many thanks for that Lee, the images are now centered ;-)

You can see the result here:
http://www.webpacks.co.uk/acatalog/t...llow_Body.html

Would you be able to point me in the right direction to getting the section name above the image and the description below?

Many thanks

Neil

[leehack]

They don't look centered to me on that page, looks like you haven't added the class to the stylesheet on the design tab and then uploaded.

You have <h3 class="product">blah blah</h3> which brings in the heading, you just need to move that to where you want it, i.e above the image code. There is an empty <div> around that area too, get rid of that at the same time.

The section description will naturally sit at the bottom once the section name has moved up. Paste your section layout into here and i will move it for you, be quick though as i'm not here for too much longer.

[TheInkDepot]

you're a star lee

<div class="product_list">
			<div class="image_column"><a href="<Actinic:Variable Name="SectionPageName"/>" target="_self"><img alt="<actinic:variable name="SectionName"/>" src="<actinic:variable Name="SectionImageFileName"/>" border="0" /></a></div>
			<div><h3 class="product"><a href="<actinic:variable name="SectionPageName"/>" target="_self"><actinic:variable name='SectionName'/></a></h3></div>
			<p><actinic:variable name='SectionDescription'/></p>
		</div>

I added the class, looks fine in my preview pane, did a site refresh but nothing has changed on the live site

Many thanks

Neil

[leehack]

If you have not added it to the stylesheet available from the drop down list on the design tab, it will not upload. Unless it has missed it for some reason. Check it is there and when you upload this layout it should go up then.

<div class="product_list">
<h3 class="product"><a href="<actinic:variable name="SectionPageName"/>" target="_self"><actinic:variable name='SectionName'/></a></h3>
<div class="image_column"><a href="<Actinic:Variable Name="SectionPageName"/>" target="_self"><img alt="<actinic:variable name="SectionName"/>" title="<actinic:variable name="SectionName"/>" src="<actinic:variable Name="SectionImageFileName"/>" border="0" /></a></div>
<p class="sectionDescription"><actinic:variable name='SectionDescription'/></p>
</div>

That should do it, you just need to also add the following into the stylesheet, to bring the description away from the image a little.

.sectionDescription {
margin: 5px 0px;
}

[jont]

You not compacting the CSS any more Lee? Tsk. If I did not know better would say you were Hungarian

[jont]

Hoozaah

[leehack]

LOL Jonty, you will see my edit got just in before you. I saw it and thought, shit Jont will crucify me and quickly adjusted it, sadly you had already started. You make me laugh and keep me on my toes, bless ya .