Slopes?

Question

Quinterling 0 Newbie Poster

13 Years Ago

I'm revamping my web hosting site and have come accross a template I can work with in every way but for something called slopes? This seems to be an area where I can add text and when clicked it reveals more context of the heading subject. But I've never come accross this before and a search around the internet has not revealed any more. Is there anyone who could enlighten me a little further as to how I use this, as it would be useful for me to have a site that has this drop down text areas to embelish the products and services I'm offering.

Thanks in advance
Steve.

web-design

4 Contributors
10 Replies
362 Views
1 Week Discussion Span
Latest Post 13 Years Ago Latest Post by Quinterling

ari$av3s 0 Newbie Poster

13 Years Ago

Is this a template that comes with an application, or just a framework/code that you found on the web? It depends on the context, so post a code snippet if you can.

Arkinder 93 Posting Pro in Training

13 Years Ago

I'm a little confused as to what you're talking about. Are you saying that there is a section of text, and that when you click it more appears?

HTML is simply the structure of a page. JavaScript, or JavaScript libraries like jQuery, is used to make pages dynamic - user interaction.

Regards
Arkinder

Arkinder 93 Posting Pro in Training

13 Years Ago

It seems that the template is just calling the element a slope. JavaScript is most likely being used, but I couldn't tell you for sure without actually seeing the page.

Regards
Arkinder

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Quinterling 0 Newbie Poster · Answer 1 · 2011-05-14T03:02:30+00:00

Thanks for replying. It's a template I found as a free download and edite. I use NVU, an editor I'm comfortable with. This is the code I'm unsure of editing,

<div id="OneSlope">
<p><strong>All the details you need to know about our email hosting.</strong></p>

</div>

<div id="ThreeHolder">
<div id="SlopeONE">
<p><a href="http://www.free-css.com/"><img src="server.gif" alt="Email Hosting" width="173" height="149" border="0" /></a></p>
<p>Domain of your choice for £9.99<br />
<strong>10Mb hosting +150MB monthly bandwidth</strong> plenty for email services. <br />

(This will allow for around 1,000 emails every month).<br />
<img src="linux-logo.gif" alt="Hosted on Linux " /><br />
<strong>Hosted on Linux </strong></p>
<br />
<a href="http://www.free-css.com/" class="PriceTag">Only £19 per year</a> <a href="http://www.free-css.com/" class="PriceTag">Only £29 per year</a> <a href="http://www.free-css.com/" class="PriceTag">Only £39 per year</a> <br />

</div>
<div id="RightOnly">
<h2>Email Hosting</h2>
<p><strong>Heart Internet's Starter</strong><br />
Professional has everything you need to get your website online. Quality and value are the order of the day and the Starter Professional includes everything you would expect from a first class web hosting account. The <a href="http://www.free-css.com/">Starter Professional</a> includes added value features such as our easy-to-use online control panel and fast technical support should you run into problems.</p>
<p>From just £2.49 per month + a one-off setup fee of £9.99, the Heart Internet Starter Professional offers outstanding value for money and with our 30-day money-back guarantee, real-time account activation and the ability to cancel anytime - what do you have to lose?</p>

<ul>
<li><a href="http://www.free-css.com/">Webspace: 2,500 MB</a></li>
<li><a href="http://www.free-css.com/">Data Transfer: 10,000 MB per Month</a></li>
<li><a href="http://www.free-css.com/">Email Mail Boxes: 1,000</a></li>
<li><a href="http://www.free-css.com/">Email Autoresponders: 1,000</a></li>
<li><a href="http://www.free-css.com/">Email Mailing Lists: 1,000</a></li>

<li><a href="http://www.free-css.com/">Email Forwarders: Unlimited</a></li>
<li><a href="http://www.free-css.com/">Catch-All Email: Unlimited</a></li>
<li><a href="http://www.free-css.com/">eXtend Control Panel</a></li>
<li><a href="http://www.free-css.com/">Webalizer & AWStats Graphical Statistics</a></li>
<li> </li>
<li>Perl, PHP4, PHP5, Python, Miva, Sun ASP</li>

<li>Perl, PHP4, PHP5, Python, Miva, Sun ASP</li>
<li>Perl, PHP4, PHP5, Python, Miva, Sun ASP</li>
<li>Perl, PHP4, PHP5, Python, Miva, Sun ASP</li>
<li>Perl, PHP4, PHP5, Python, Miva, Sun ASP</li>
<li>Perl, PHP4, PHP5, Python, Miva, Sun ASP</li>
<li>Perl, PHP4, PHP5, Python, Miva, Sun ASP</li>

<li>Perl, PHP4, PHP5, Python, Miva, Sun ASP</li>
<li>Perl, PHP4, PHP5, Python, Miva, Sun ASP</li>
</ul>
</div>

Quinterling 0 Newbie Poster · Answer 2 · 2011-05-17T02:15:43+00:00

I'm a little unsure of this action myself Arkinder, that is why I've posted this question. As I don't understand the meaning of 'slope' maybe this is where I'm getting the idea of its intended usage wrong. In its full state as a template, where the links are, I'm assuming, rightly or wrongly, that this can be clicked on and a text below that would drop down? The action 'on mouseover' at the moment is that this action highlights a bar. Maybe this is all it is intended to do? I'm just not sure about the term 'slopes'

Regards
Steve.

Quinterling 0 Newbie Poster · Answer 3 · 2011-05-17T02:21:04+00:00

Just to add a bit more, it's this part that intrigues me as to its uses.

But nowhere in the html of the template can I find a space to add text.

(currently not using this template at the moment, but would like to, as it seems more user friendly than the current one.)

Thanks Steve.

almostbob 866 Retired: passive income ROCKS · Answer 4 · 2011-05-17T17:10:07+00:00

slopes works on my pc, no javascript so
it is a css menu, triggered on the :active psuedo state instead of the :hover pseudo state
the html is just text, the smarts is in the css
something that operates on focus, on an element id inside a containing element
re-examine the css that is bundled with the script, or post it here

Quinterling 0 Newbie Poster · Answer 5 · 2011-05-21T00:32:28+00:00

Have looked over the CSS stylesheet and I'm still a little bemused as to where the text may go!? This is the part that contains the css slopes management:

}
/**************************************************
     THREE SLOPES
 **************************************************/
#ThreeHolder {
    clear: both;
    overflow: auto;
    padding-top: 10px;
}

#ThreeHolder H2{
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 5px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 10px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #5f7786;
}
#ThreeHolder .PriceTag{
    text-decoration: none;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #E9A403;
    background-image: url(menu-bg.gif);
    background-repeat: repeat-x;
    border: 1px solid #CCCCCC;
    background-position: left bottom;
    padding-top: 2px;
    padding-right: 2px;
    padding-bottom: 2px;
    padding-left: 10px;
    margin-top: 0px;
    margin-right: 5px;
    margin-bottom: 1px;
    margin-left: 5px;
    display: block;
}
#ThreeHolder a{}
#ThreeHolder a:hover{
    color: #5F7786;
    text-decoration: none;
}
/**************************************************
     individual Slopes Begin
 **************************************************/

#SlopeONE {
    float: left;
    width: 255px;
    margin-right: 7px;
}
#SlopeTWO {
    float: left;
    width: 256px;
    margin-right: 7px;
    margin-left: 7px;
}
#SlopeTHREE {
    float: left;
    width: 255px;
    margin-left: 7px;
}
#SlopeONE p, #SlopeTWO p, #SlopeTHREE p {
    padding: 5px;
    margin: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #93A7B3;
}
#SlopeONE, #SlopeTWO, #SlopeTHREE {
    border: 1px solid #CCCCCC;
    background-image: url(slope-bg.gif);
    background-repeat: repeat-x;
    background-position: center bottom;
}
/**************************************************
     Two SLOPES
 **************************************************/
#TwoHolder {
    border: 1px solid #E0E0E0;
    background-color: #E6EBEE;
    border: 1px solid #CCCCCC;
    padding: 10px;
    overflow: auto;
    width: 778px;
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}
#SlopeA {
    float: left;
    width: 256px;
    margin: 0px;
    padding: 0px;
}
#SlopeB {
    width: 520px;
    float: left;
    margin: 0px;
    padding: 0px;
}
#SlopeA p, #SlopeB p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #5F7786;
    margin: 0px;
    padding: 0px;
}
/**************************************************
     One SLOPE
 **************************************************/
#OneSlope {
    clear: both;
    overflow: auto;
    padding: 10px;
    width: 778px;
    background-color: #5F7786;
    border: 1px solid #E0E0E0;
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}
#OneSlope p{
    color: #FFFFFF;
    font-size: 18px;
    font-weight: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
}

Any ideas please?

almostbob 866 Retired: passive income ROCKS · Answer 6 · 2011-05-21T00:56:49+00:00

from the css, the hidden text is placed inside a <p> inside a <div> or <p> with the id='*slope*'

(using DOS convention * represents any string of characters eg threeslope slope2 as per the css file
example

<div id='threeslope'>this text should always display<p> this text should display when you click the original text and the div expand to display it </p>this text should display always also</div>

google 'stu nicholls' from memory he is the author of the slopes menu and slopes flyout

Quinterling 0 Newbie Poster · Answer 7 · 2011-05-21T22:45:34+00:00

almostbob - A BIG thankyou. I have tried your suggestion and it's working great. I honestly searched all over the 'net for this information and this is the only forum where I posted this question, so to get the answer will help move my site on. And the extra info on Stu Nicchols will come in handy too. Thanks again, really good information.

Kind Regards
Steve.