CODEWITHSUNDEEP
javascripthtmlcss
Joshxtothe4
Joshxtothe4

Reputation: 4193

css page problem

The code I have pasted below is meant to display images on the middle 2 links without text and go back to text on the reset and fourth link. I have set display:none for the span tag only, but it does nothing. Is there anyway to do what I am after simply, without using a framework?

edit: example

<html>
    <head>
        <style type="text/css">
                .class1{color:#000; background-image:url('1.jpg');}
        .class1 span { display: none;}
                .class2{color:#00f; background-image:url('2.jpg');}
        .class2 span { display: none;}
                .class3{color:#0f0; background-image:url('1.jpg');}
        .class3 span { display: none;}
                .class4{color:#f00;}

        </style>
    </head>
    <body>
        <script type="text/javascript">
                function sbox(divid, classname)
                {
                        document.getElementById(divid).className=classname;
                 }
        </script>
        <div>
        <a href="#" onclick="sbox('div1','class1');return false;">Reset</a><br/>
                <a href="#" onclick="sbox('div1','class2');return false;">try here</a><br/>
                <a href="#" onclick="sbox('div1','class3'); return false;">or here</a><br/>
                <a href="#" onclick="sbox('div1','class4');return false;">or maybe here</a>
        </div>
        <div id="div1" class="class4"><span id="div1_text">Blah blah blah</span></div>
    </body>
</html>

Upvotes: 0

Views: 256

Answers (6)

tvanfosson
tvanfosson

Reputation: 532465

The rel attribute is supposed to describe the relationship of the link to the current document. It should have one of the values described here. A DIV is a block-level grouping element, whereas a SPAN is an inline grouping element. SPANs allow you to group text and tags together for some purpose (common styles, etc.) without changing the flow of the markup.

EDIT: The question changed out from under me so the above seems really disconnected from the current context.

You need to do as @llandril says and give the DIV some size. I would suggest giving the DIV fixed width and height -- either always or when one of the classes that displays an image is used. Use the width and height of your background image if you want the whole thing displayed. You may also need to give it some content as well, but I don't think so.

Here is what class1 would look like, I think. I haven't tested this.

    /* in case color needs to apply to other elements */
    .class1 { color: #000; }

    div .class1 {
        background-image:url('1.jpg');
        width: 60px;
        height: 30px;
    }

    div .class1 span { display: none;}

Upvotes: 3

Illandril
Illandril

Reputation: 656

The DIV doesn't display a background image because it doesn't have any content when your span is gone.

Adding a non-breaking-space (&nbsp;) after the span will give it content.

Upvotes: 0

Adriano Varoli Piazza
Adriano Varoli Piazza

Reputation: 7429

The div tag encloses a block of content. The span tag is similar, but encloses inline content. Difference? You can use span to style a phrase inside a paragraph, but div to wrap that paragraph and separate it from others. See this for divs, and this for spans.

After some comments: here it is, from the horse's mouth:

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.

Upvotes: 1

DisgruntledGoat
DisgruntledGoat

Reputation: 72530

Normally, the attributes rel and rev describe forward- and backward-pointing links respectively. For example in pagination of lists you could use <a href="..." rel="next">Next</a> and <a href="..." rev="prev">Prev</a>

See http://www.w3.org/TR/html401/types.html#type-links for some values you can use.

Other people have explained span/div tags. There are not that many cases for using span tags actually, since you can normally get away with a phrase element like em, strong, code, etc. depending on the context.

Upvotes: 0

meleyal
meleyal

Reputation: 33300

rel can also be used to describe other semantics, see the microformats rel docs

Upvotes: 0

Gareth
Gareth

Reputation: 138042

The rel attribute isn't typically used by many UAs (user agents) however it specifies what relation the linked page is to the current page.

Certain pseudo-standards have popped up around the place for example Mozilla uses the prefetch relation to preload pages. Google sets [used to set?] its first few results to prefetch in this way so those pages are supposed to load quicker.

Other examples are browser-based navigation bars (Opera has one of these for example) with links to next, previous, contents pages etc. This also applies to the <link> element

Upvotes: 0

Related Questions