Problem with css page
The code I pasted below is for displaying images on middle 2 links with no text and returning to text on reset and fourth link. I have set display to: none for the span tag only, but it does nothing. Is there a way to do what I simply do 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>
source to share
The attribute rel
should describe the link between the link and the current document. There should be one of the meanings here . DIV is a block-level grouping element, while SPAN is an inline grouping element. SPANs allow you to group text and tags together for a specific purpose (common styles, etc.) without changing the markup flow.
EDIT: The question has changed from under me, so the above seems to be truly disconnected from the current context.
You need to do as @llandril says and give the DIV some size. I would suggest specifying a fixed width and height for the DIV - either always, or when using one of the classes that display the image. Use the width and height of the background image if you want it all to display. You might also need to give it some content, but I don't think so.
This is what class1 looks like I guess. I have not 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;}
source to share
The div tag contains a block of content. The span tag is similar but includes inline content. Difference? You can use a span to style a phrase within a paragraph, but a div to wrap that paragraph and separate it from the others. See this for divs and this for spaces.
After some comments: here, from the horse's mouth:
The DIV and SPAN elements, along with the id and class attributes, provide a general mechanism for adding structure to documents. These elements define content as inline (SPAN) or block level (DIV), but do not overlay any other presentation idioms on the content. Thus, authors can use these elements in conjunction with style lists, lang attribute, etc. to tailor HTML to their own needs and tastes.
source to share
The rel attribute is not commonly used by many UAs (User Agents), but it indicates how the linked page is related to the current page.
Some pseudo standards have popped up around the place, for example Mozilla uses a prefetch ratio to preload pages. Google sets up [used to install?] Its first few prefetch results so that these pages should load faster.
Other examples are browser-based navigation bars (e.g. Opera has one of these) with links to next, previous, content pages, etc. This also applies to the element<link>
source to share
Typically the rel and rev attributes describe forward and backward links, respectively. For example, when paginating lists, you can 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. In fact, not many occasions to use span tags, as you can usually get away with a phrase element such as em
, strong
, code
, etc. Depending on the context.
source to share