test

side menu with dl dt dd list howto

Forums    Joomla Templates Club    JA Antares    side menu with dl dt dd list howto
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • arjanversloot Friend
    May 16, 2007 at 9:18 pm #120277

    Hi,

    I want to make a definition list on a left or right module, but ca’t get it to work.
    (see my working example in html with css)

    I hope someone can help me with this.

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

    <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”nl” lang=”nl”>

    <head>
    <title>Title</title>
    <meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />

    <style><!–
    * {
    margin: 0;
    padding: 0;
    }

    html {
    font: 12px Arial, Helvetica, Verdana, Sans-Serif;
    }

    a:link,
    a:active,
    a:visited {
    border-bottom: solid 1px #aaa; /* Border will not be visible in IE if the anchor is at the bottom of an element, and there’s not enough space to place the border. It will not expand the parent element */
    color: #ef3d32;
    text-decoration: none;
    }

    a:visited {
    color: #084672;
    }

    a:hover {
    border-bottom: solid 1px #ef3d32;
    }

    a.image:link,
    a.image:active,
    a.image:visited,
    a.image:hover {
    border: none;
    }

    img {
    border: none;
    vertical-align: middle;
    }

    p {
    margin-bottom: 1em;
    }

    #right {
    width: 160px;
    margin-left: -100%;
    padding: 10px 0;
    overflow: hidden;
    float: right;
    }

    #right .box {
    margin: 0 5px 10px 0;
    padding-bottom: 5px;
    border: solid 1px #ccc;
    font-size: 11px;
    }
    #right .box a {
    border: none;
    color: #ef3d32;
    }
    #right .box a:hover {
    border-bottom: solid 1px #ef3d32;
    color: #ef3d32;
    }

    #right .box h2 {
    height: 21px;
    margin-bottom: 5px;
    color: #fff;
    background: #ef3d32; /*url(heading_small_background.gif) repeat-x;*/
    line-height: 21px;
    font-size: 12px;
    text-align: center;
    }
    #right .box h2 a {
    border: none;
    color: #fff;
    }
    #right .box h2 a:hover {
    border: none;
    color: #fff;
    text-decoration: underline;
    }

    #right .box ul {
    margin-left: 10px;
    }
    #right .box dl {
    margin: 0 5px;
    }
    #right .box dt {
    float: left;
    }
    #right .box dd {
    margin-left: 70px;
    display: block;
    }

    #right .info h3 {
    font-size: 11px;
    text-align: center;
    }
    #right .info div.image {
    font-weight: bold;
    text-align: center;
    }
    #right .info .image img {
    margin-bottom: 5px;
    }
    #right .info .image a:hover {
    border: none;
    }
    #right .info p {
    margin: 0 5px 3px;
    padding-bottom: 3px;
    border-bottom: 1px solid #ccc;
    color: #555;
    text-align: center;
    }

    #right .info dl {
    margin-bottom: 5px;
    }
    #right .info dd {
    text-align: right;
    }
    #right .info p.extrahours {
    margin: 10px 0 0 0 !important;
    }
    #right .info p.extrahours img {
    margin: 0;
    }
    –></style>
    </head>

    <body>
    <div id=”right”>

    <div class=”box info”>
    <h2><a href=”#” title=”title”>title</a></h2>
    <div class=”image”>
    <a href=”#” title=”sub title”>
    <img src=”picture.jpg” width=”142″ height=”107″ alt=”Picture” />
    sub title
    </a>
    </div>

    <h3>Here some text</h3>
    <dl>
    <dt>time</dt>
    <dd>09:00 – 17:30</dd>
    <dt>time</dt>
    <dd>09:00 – 17:30</dd>
    <dt>time</dt>
    <dd>09:00 – 17:30</dd>
    <dt>time</dt>
    <dd>09:00 – 21:00</dd>
    <dt>time</dt>
    <dd>09:00 – 21:00</dd>
    <dt>time</dt>
    <dd>09:00 – 17:30</dd>
    </dl>
    </div>
    </div>
    </body>
    </html>

    ShannonN Friend
    May 17, 2007 at 12:08 am #220176

    Hi can you please supply a live site url, it kinda works better when we can see the actual site etc

    Cheers ShannonN

    arjanversloot Friend
    May 17, 2007 at 8:18 am #220201

    <em>@ShannonN 15627 wrote:</em><blockquote>Hi can you please supply a live site url, it kinda works better when we can see the actual site etc

    Cheers ShannonN</blockquote>

    http://www.arjanversloot.com/definitionlist.html

    the actual website based on the Antares website isn’t online yet, because i want to made the template working first.

    arjanversloot Friend
    May 23, 2007 at 7:19 am #220668

    Will someone help me.
    I’ve bought this template and help would be appreciated.

    Thanks

    Michael Casha Friend
    May 23, 2007 at 8:06 am #220674

    Hi Mate.

    Make sure you put the CSS in the CSS file, not in the module area.

    arjanversloot Friend
    May 25, 2007 at 10:17 am #220811

    <em>@MiCCAS 16261 wrote:</em><blockquote>Hi Mate.

    Make sure you put the CSS in the CSS file, not in the module area.</blockquote>

    my example is just a html with some css. but I want such menu’s on the left and/or right side.

    Can anyone make a example for me?

    If you want money for it. It’s not a problem.

    Thanks

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)

This topic contains 6 replies, has 3 voices, and was last updated by  arjanversloot 17 years, 6 months ago.

We moved to new unified forum. Please post all new support queries in our New Forum

Important Notice :

New Unified Portal is live

Must Read

Jump to forum

Categories