Adobe Community : All Content - All Communities

Help fixing sidebar border in page template

forums_noreply@adobe.com — Mon, 29 Sep 2014 06:33:54 GMT

I have recently added a blog to a website: www.mindsaligned.com.au/into-minds. I wanted the blog to have a sidebar similar to other pages on the site, so I just copied a page template from a page that has a sidebar and renamed the template "Blog Template". I've assigned the blog template to the actual blog and everything looks great except for one issue...

The sidebar (the area that contains "categories", "recent posts", etc) is meant to have a left border going all the way up the body of the page (just like it is on this page: www.mindsaligned.com.au/events), however, you'll notice on the blog, the left border is only showing up a little bit toward the bottom of the page body.

I inspected the element using Firebug and noticed that the entire sidebar section (possibly div?) seems to have shifted down on the page, hence, the left border moving down as well. I went into the page template I created for this page to see if I could find the issue in the HTML. This is what the HTML looks like for that section:

<div class="main-inner2">{tag_pagecontent}

</div>

I tried moving the "{tag_pagecontent}" tag after the first closing "</div>" tag and that seems to solve the border issue, but it creates another issue where the sidebar links no longer work (I can't even highlight any of the text in the sidebar with my cursor).

Can anyone tell me what I'm doing wrong and how I can fix this issue? I have basic knowledge of HTML and CSS so if you have a solution, please simplify for me as best as you can in your responses.

Thanks!

Nicole

Styling catalogue icons and text

forums_noreply@adobe.com — Mon, 05 Aug 2013 00:37:14 GMT

I am working on this web page: http://www.cprtrainingmackay.com.au/courses and trying to style the catalogue boxes so that they display the entire catalogue name and image icon. If you look at the page right now, you'll see that the text is being hidden behind the catalogue image. Is there a way to fix this so that if the client enters a long catalogue name, the box automatically adjusts its height to accommodate?

Also, I've tried playing with the line-height css property of the text itself so that there isn't such a big gap between lines, but it doesn't seem to be changing anything, how do I change this?

Thanks in advance.

Nicole

How do I create a dependant drop down in a web form?

forums_noreply@adobe.com — Mon, 08 Jul 2013 04:36:43 GMT

I am trying to add a web form to a web page that includes a dependant drop down menu. For example, I'd like there to be a drop down menu called "Interested Class" with three fields: "Tribe Fit", "Tribe Life" and "Tribe Core". When a user selects one of these fields ("Tribe Fit" for example), I want a new drop down menu to appear with the following choices: "7:00am", "12:30pm", "7:00pm".

I have attempted this here and as you can see it's not working at the moment. The time drop down fields should be hidden until an "Interested Class" has been selected.

http://www.cityfitness.com.au/nicole-form-test?Preview=True

I've placed my JS code in the HTML view of the actual web page as I noticed when I place it in the actual custom form it doesn't carry through to the page. I don't know if I'm placing my JS in the correct place though.

Here is a snippet of my code if it helps:

<tr>

<td><label for="CAT_Custom_328771">Interested Class</label><br />

<select name="CAT_Custom_328771" id="CAT_Custom_328771" class="cat_dropdown">

<option value=" ">-- Please select --</option>

<option value="Tribe Fit">Tribe Fit</option>

<option value="Tribe Life">Tribe Life</option>

<option value="Tribe Core">Tribe Core</option>

</select>

</td>

</tr>

<tr>

<td>

<div id="fit" class="times">

<select>

<option value="7:00am">7:00am</option>

<option value="12:30pm">12:30pm</option>

<option value="7:00pm">7:00pm</option>

</select>

</div>

<div id="life" class="times">

<select>

<option value="7:00am">7:00am</option>

<option value="8:00am">8:00am</option>

<option value="11:30am">11:30am</option>

</select></div>

<div id="core" class="times">

<select>

<option value="8:00am">8:00am</option>

<option value="11:30am">11:30am</option>

<option value="12:30pm">12:30pm</option>

</select>

</div>

</td>

</tr>

<tr>

<td><input class="cat_button" type="submit" value="Submit" id="catwebformbutton" /></td>

</tr>

</tbody>

</table>

<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>

<script type="text/javascript">

$(function () {

$('#CAT_Custom_328771').change(function () {

$('.times').hide();

$('#' + $(this).val()).show();

});

//<![CDATA[

//]]>

</script>

</form>

Can anyone please help explain to me how I can make this work? I am only a JS beginner - so please try to explain in simple terms if possible.

Thank you!

Nicole