views:

194

answers:

6

Hello,

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>
+4  A: 

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;}
tvanfosson
He should not switch the order of his selectors. He wants to change the display of the span within an object with css class "class1", not the display of an object with "class1" that is located within a span.The order of his selectors is correct for what he is trying to do.
Illandril
I see what you mean. I guess I misread the example and assumed that the span was also class1. He's actually matching any element with className class1 that contains a span. I tend to be more precise with my rules. Updated my example.
tvanfosson
+1  A: 

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

Gareth
+2  A: 

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.

Adriano Varoli Piazza
Some time spent browsing w3schools.com can be very useful for anyone learning this stuff.
Richard Ev
I dislike w3schools. I actually find the offical spec at w3.org easier to browse.
DisgruntledGoat
Some time spent browsing w3schools.com will teach you nonstandard information and help you pick up loads of bad habits.
Gareth
+1  A: 

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

meleyal
+1  A: 

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.

DisgruntledGoat
typo: rev="prev" should be rel="prev"
Adriano Varoli Piazza
No, it shouldn't. Read my post again. See also: http://www.w3.org/TR/html401/struct/links.html#h-12.3.1
DisgruntledGoat
A: 

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.

Illandril