HTML - Modifying Span Class Style

Hi guys,

It's my first time on these forums, and I thought you all would be the best help I could get for my HTML problem.

I've just recently created a blog and I am currently using a custom template.
I'm not too familiar with HTML, or any sort of coding really, and I would like to stretch the content area of the template so that I could place larger images without it overlapping the grey bars.

I have no idea what values to change though or what I should be looking for. Could you guys help me out?

Many thanks,
AciesEdge

Hi,
I'd like to ask a newbie question.
I've Googled this to death but as always there isn't a single view so I thought I'd ask the experts here.
I have a piece of information - it doesn't really matter what it is but it is accompanied by an image. With the increase use of css sprites, I know find myself using background-image to set the image.
The overall effect would look like this <image> some text.
This needs to go inline and have a fixed height so that the image shows. There are also other bits of information on the same line.
Do I make the containing unit a DIV and float it or make it a SPAN and use display:block? I don't particularly wan't to use display:inline on a DIV because it's not supported correctly in IE.
What would you do in this case?

Thanks

John

What exactly do the Span and Div tags do? I've read definitions on the web: "defines a block of text," etc., but I don't see any examples of what the difference is from normal text to text that is used using the span and div tags. Could someone provide any examples?

Thanks, Brad

Hi,

I have build up a mouseover functionality that shows a light gray boks around the 4 categories on the frontpage on http://www.jjas.dk. It works perfectly under all the browsers except IE6 and IE7. In this browsers I can only click on the text placed right from the picture. But when I try to click on the picture or the picture related text, nothing happens.

Now, after I had used 5 days finding a solution I'm giving up. There is nothing wrong with the code at all, so why is it, that it won't work under Internet Explorer?

This is the code I'm using:

HTML
Code:

<div class="row">
  <ul>
    <li>
      <a href="/produkter-og-loesninger/komponenter.aspx">
        <span class="picture">
          <img src="/media/3899/komponent-teaser.jpg" alt="Agenturprodukter" />
          <span class="content">
            <strong>Agenturprodukter</strong>
            <small>Vi er forhandler af flere produkter. </small>
          </span>
        </span>
        <span class="right_content">
          <h2>Handelsvarer</h2>
          <small>Vi forhandler passive og perifere komponenter. 
      Kabinetter, keyboards, displaysystemer m.v.</small>
        </span>
      </a>
    </li>
  </ul>
</div>

CSS
Code:

#top_section .row {
	float:left;
	width:948px;
}
#top_section .row ul {
	float:left;
	width:948px;
	list-style:none
}
#top_section .row li {
	float:left;
	width:474px;
}
#top_section .row li a {
	float:left;
	width:440px;
	padding:10px;
	height:145px;
	text-decoration:none;
	cursor:pointer;
	border:1px solid #eeeeee;
}
#top_section .row li a:hover {
	float:left;
	width:440px;
	height:145px;
	background:#dddddd;
	border:1px solid #d3d2d2;
}
#top_section .row li a .picture {
	float:left;
	width:220px;
	position:relative
}
#top_section .row li a .picture img {
	float:left;
	z-index: -1;
}

#top_section .row li a .picture .content {
	float:left;
	width:210px;
	background:url(../common/images/picture_content_bg.png) repeat-x 0 0;
	padding:5px 0 0 10px;
	position:absolute;
	bottom:0;
	left:0;
	height:41px
}
#top_section .row li a .picture .content strong {
	float:left;
	width:210px;
	font:bold 12px/14px Verdana, Arial, Helvetica, sans-serif;
	color:#fff;
}
#top_section .row li a .picture .content small {
	float:left;
	width:210px;
	font:11px/13px Verdana, Arial, Helvetica, sans-serif;
	color:#fff;
	padding:3px 0 5px
}
#top_section .row li a .right_content {
	float:left;
	width:200px;
	padding-left:20px
}
#top_section .row li a .right_content h2 {
	float:left;
	width:200px;
	font:bold 18px/20px Arial, Helvetica, sans-serif;
	color:#336699;
}
#top_section .row li a .right_content small {
	float:left;
	width:200px;
	font:12px/17px Verdana, Arial, Helvetica, sans-serif;
	color:#666;
	padding-top:3px
}

You can see it live on:
http://www.jjas.dk/ (right under the slideshow)

I really hope someone out there can help me with my problem. I guess it's pretty easy, though I haven't found the easy part yet


Kind regards,
Niels Kristiansen

Does anybody know how to get the grab hand image for the onmouseover event for spans?

Hi Everyone,

I am using 'span title' as a means to display a tool tip. Some of the tooltips are quite long and the popup is disappearing before the user would have a chance to read it all.

Is there any means to delay the length of time that the tooltip will appear without the user having to hover over the text again.

An example of one of these tooltips is below:
<span title="As dentistry has advanced beyond basic care into new areas such as implantology, cosmetics, and other treatments of the entire dento-maxillo-facial complex, so too must the diagnostic tools keep pace with the need for a higher quality of general and specific information.

Our surgeries are fully equipped with X-ray machines and in-house film processors. This enables our patients to get their diagnosis results instantly and treatment plan drawn up effectively in one visit."> Periapical film (small dental film) </span>

I really appreciate any help you could offer?

Thanks
Cathal

Hi,

I have a huge text that i need to display in a span tag on my page. Currently the words are breaking at the end of the line, i.e. if the word if "Understand" and there is not enough space to display the entire word, half of the word is displayed in the space available, and the remaining on the next line. However, i want that the entire word be displayed on the next line.

Please suggest how this can be done.

Regards,
Ankit!!

Hey guys, so I'm building my script right now and it's going quite well. I used Javascript to capture input from text box and display it later using the <span id=''> command. What I'm trying to do is show the <span id=''> in more than one spot. For whatever reason it won't let me do this, it will only display in one spot and not the other. So to clarify, I used the

var bride = document.getElementById('bride').value; document.getElementById('bride2').innerHTML = bride;(sorry for the javascript)

and then used span id later to display it which works fine when you only want to display it in one spot. When I go to display it in two spots, I believe the span id tags are getting confused with each other and fighting. Is there any way to fix this?

Ok, this is all very new to me. Just messing round trying to get things to work at the moment mainly how to use div and span.

So I've set up two pages in notepad one for html and one for css and they look like this.

html

Quote:
<html>
<!---Anchor for CSS page---!>
<link rel="stylesheet" type="text/css" href="css.css">
<head>
</head>
<!---Body of page---!>
<body>
<!---Div tag for centered page margin---!>
<div class="one">
<h1><center>THE CIVVIES.</center></h1>
<hr>
<!---Division for bottom of Heading---!>
<div class="two">
<img src="images/civvies.jpg">
</div>
<div class="three">
the civvies
</div>
</body>
</div>
</html>
css

Quote:
div.one
{
left: 165px;
top: 4px;
bottom: 20px;
width: 900px;
length: 600px;
position: absolute;
border: 10px solid black;
}

h.1
{
align:center;
font-size:150%;
font-family: courier;
}

div.two
{
left:165px;
length:50px;
border: 5px solid black;
}


Div.three
{
left:600px;
right:10px;
top:20px;
width:200px;
border:5px solid black;

}
Now this all works fine until div three...i've got a simple page title that seperates from the rest, the page centers itself, the picture alligns left under the header and takes up half the page to the bottom basically splitting the remaining space into two. Now on the right hand side i was hoping to be able to put content which is what div three was for unfortunately It doesn't seem to want to go where I'm asking it to. Any chance somebody could pop in here and just give me a right hand side of the page to work with for content? also possibly show me how to insert a navigation table above the picture but after the dividing line between the header and the picture?

Like I said I'm very new at this.

I'm trying to use the SPAN tag to override a DIV's attributes wherein it is initially TEXT-ALIGN: LEFT;. I thought for sure that I could override it with the SPAN tag but no luck. I'm doing it this way because I want a portion of the content in the DIV to align left and the other to align right.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#quote { width: 500px; }
#quoteTop { width: 460px; height: 40px; padding: 0 20px; background: url('images/quoteTop.gif'); text-align: left; }
#quoteMiddle { width: 460px; padding: 0 20px 20px; background: url('images/quoteMiddle.gif'); text-align: left; }
#quoteBottom { width: 460px; height: 80px; padding: 0 20px; background: url('images/quoteBottom.gif'); text-align: left; }
</style>
</head>

<body>

<div id="quote">
	<div id="quoteTop">
	<span style="text-align: right;"><a href="/">top</a></span>
	</div>
	<div id="quoteMiddle">
blah blah blah blah blah blah blah <em>blah blah blah</em> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah <strong>blah blah blah</strong> blah blah blah blah blah blah-blah blah&mdash;blah blah blah blah blah blah blah blah blah BLAH! blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
	</div>
	<div id="quoteBottom">
J. Doe
	</div>
</div>

</body>
</html>

Is overriding code a bad idea for what I'm trying to get done?

All my code is filled with these <span> tags in my html page, but not all of my code. How can I remove these tags and make a better structured layed out web page. When I remove the <span> tags, I will need an alternative html tag to replace the <span> tag. My <span> tags store stuff about my web page, so I need a html tag that is a replacement and a structured way to put my data in the web page. Any expertise would be great.

Thanks,

Chris

Hi every one I have a quick question. I'm building and interface this is make of unordered list items. Those list items are contained in a span so that interface can have separate look for the other links on the page.

But when I validate my page in Dreamweaver I get some page errors that.

Here is the error:

The tag:"span" is not allowed within: "ul" It is only allowed within: a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, fieldset, h1, h2, h3, h4, h5, h6. . ..[XHTML 1.0 strict]

Now here is the code in question:
HTML Code:

<ul id="nav">
             <span class="left_links">
                   <li class="nav_items_00"><a href="index.html">Home</a></li>
                   <li class="nav_items_00"><a href="services.html">Services</a></li>
                   <li class="nav_items_00"><a href="gallery.html">Gallery</a></li>
                   <li class="nav_items_00"><a href="events.html">Events</a></li>
                   <li class="nav_items_00"><a href="http://hsgsphoto.wordpress.com/" target="_blank">Blog</a></li>
                   <li class="nav_items_00"><a href="about.html">About</a></li>
           </span>

The page that you can see this code in action is located at:

http://www.hsgsphoto.com

I guess my question is what would be the best practice in this situation. I need the a way to tell this group of links to act different then links in other parts of the page but the error I'm getting in validation is that list items (li) tags are not to be used within a span.

Thank you so much for any feed back and help

John

What could be wrong with my html or dreamweaver settings? I have code similar to following:

Code:

<div id="mydiv">
<span id="myspan">

<p>Some <em>text</em> here</p>
<p>Some more text here</p>

</span>
</div>

If I select the word 'text' in Design view and make it not-emphasized/Italics, the code changes to:

Code:

<div id="mydiv">

  <p><span>Some text here</span></p>
  <span>
  <p>Some more text here</p>
  </span>
  
</div>

So it's decided to remove the id attribute from the span and move the span inside the paragraphs, and since there's two paragraphs, there's an extra span as well. The result is the same even if the span is outside the div.

Even if the code is wrong, why is dreamweaver fixing it when I'm just trying to do something unrelated. (The em tag is not the only one that causes this to happen.)