...

View Full Version : multiple properties in span, inline-CSS



ptrcao
12-14-2010, 06:36 PM
<div style=width:500px;>
<IMG SRC="mathtype/eqn025.gif" WIDTH=490 HEIGHT=299 STYLE="vertical-align: -273px; margin: 0;">
</div>
<div>
<span style="float:left; width: 100px;"> Strategy </span>: "Since immediately substituting <eq> 0 </eq>, for <eq> h </eq>, results in division by zero, the numerator must be simplified such that <eq>h</eq> can be factored out and then canceled against the denominator. The resulting function, <eq>f'(x)</eq>, is the derivative of <eq>f(x)</eq>".
</div>

I can't get this inline-CSS span to work.

What's wrong?

Edit: You should ignore <eq> ... </eq>. It's not a html/CSS specification and is to betreated as just text.

Excavator
12-14-2010, 06:54 PM
Hello ptrcao,
As much as I hate inline styles, they have their place.
The validator works on them too.


<div style="width:500px;">
<img src="mathtype/eqn025.gif" alt="description" width="490" height="299" style="vertical-align: -273px; margin: 0;" />
</div>
<div>
<span style="float:left; width: 100px;"> Strategy </span>: &quot;Since immediately substituting <eq> 0 </eq>, for <eq> h </eq>,
results in division by zero, the numerator must be simplified such that <eq>h</eq> can be factored out and then canceled against
the denominator. The resulting function, <eq>f'(x)</eq>, is the derivative of <eq>f(x)</eq>&quot;.
</div>
What is the vertical-align supposed to do?

ptrcao
12-14-2010, 07:29 PM
Hello ptrcao,
As much as I hate inline styles, they have their place.
The validator works on them too.


<div style="width:500px;">
<img src="mathtype/eqn025.gif" alt="description" width="490" height="299" style="vertical-align: -273px; margin: 0;" />
</div>
<div>
<span style="float:left; width: 100px;"> Strategy </span>: &quot;Since immediately substituting <eq> 0 </eq>, for <eq> h </eq>,
results in division by zero, the numerator must be simplified such that <eq>h</eq> can be factored out and then canceled against
the denominator. The resulting function, <eq>f'(x)</eq>, is the derivative of <eq>f(x)</eq>&quot;.
</div>
What is the vertical-align supposed to do?

Well, I basically have some math happening in that image (the first div). Now, right of the image I want a comment box (the 2nd div which I want to float left against the first div).

(Edit: I misread the question, the relevant answer is in the next post.)

Is this a syntactical issue or have I misused span, or something else?

ptrcao
12-14-2010, 07:31 PM
Hello ptrcao,
As much as I hate inline styles, they have their place.
The validator works on them too.


<div style="width:500px;">
<img src="mathtype/eqn025.gif" alt="description" width="490" height="299" style="vertical-align: -273px; margin: 0;" />
</div>
<div>
<span style="float:left; width: 100px;"> Strategy </span>: &quot;Since immediately substituting <eq> 0 </eq>, for <eq> h </eq>,
results in division by zero, the numerator must be simplified such that <eq>h</eq> can be factored out and then canceled against
the denominator. The resulting function, <eq>f'(x)</eq>, is the derivative of <eq>f(x)</eq>&quot;.
</div>
What is the vertical-align supposed to do?

Sorry I missed your question: the answer is that the vertical align is probably irrelevant to the question, but if you have to know it's automatically generated by a program, so that my embedded math equations are properly positioned on lines of text.


<span style="float:left; width: 100px;"> .. </span>

That's the bit I'm worried about.

Excavator
12-14-2010, 07:40 PM
You are trying to float the second div to be next to the image?

ptrcao
12-14-2010, 07:42 PM
You are trying to float the second div to be next to the image?

Yep. And also I want the second div to have a restricted width of x number of pixels.

Excavator
12-14-2010, 07:50 PM
The way you have it written now, you are floating that span. It's 100px wide and contained in that unamed/unstyled div which is acting like a div is supposed to by sitting under the div containing that image.

You need to put the float in the right place like this -
<div style="width:500px;float:left;">
<img src="mathtype/eqn025.gif" alt="description" width="490" height="299" style="vertical-align: -273px; margin: 0;" />
</div>
<div>
<span style="width: 100px;"> Strategy </span>: &quot;Since immediately substituting <eq> 0 </eq>, for <eq> h </eq>,
results in division by zero, the numerator must be simplified such that <eq>h</eq> can be factored out and then canceled against
the denominator. The resulting function, <eq>f'(x)</eq>, is the derivative of <eq>f(x)</eq>&quot;.
</div>

Not sure what you want to do with that span now...

ptrcao
12-14-2010, 08:15 PM
So this is what I want, and I got the float to work. However, now new problems arise. Should this paragraph block not occupy the entire screen width? The text below this paragraph is wrapping around it, which is bizarre especially when I've set the paragraph to 100% of the screen width. Ideas?



<p style="width: 100%;"> Step 1: Find the the gradient of the tangent at <IMG SRC="mathtype/eqn003.gif" WIDTH=50 HEIGHT=14 STYLE="vertical-align: -1px; margin: 0;">


<div style="float: left; width:500px;">
<IMG SRC="mathtype/eqn025.gif" WIDTH=490 HEIGHT=299 STYLE="vertical-align: -273px; margin: 0;">
</div>

<div style="float: left; width: 300px;">
<span style=text-weight: bold;> Strategy </span>: "Since immediately substituting <eq> 0 </eq>, for <eq> h </eq>, results in division by zero, the numerator must be simplified such that <eq>h</eq> can be factored out and then canceled against the denominator. The resulting function, <eq>f'(x)</eq>, is the derivative of <eq>f(x)</eq>".
</div>

</p>

Excavator
12-14-2010, 08:27 PM
Block level div is not allowed in inline span ... and I see you changed that.

Look at it with colors added -
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>

<p style="width: 100%;background:#ccc"> Step 1: Find the the gradient of the tangent at <IMG SRC="mathtype/eqn003.gif" WIDTH=50 HEIGHT=14 STYLE="vertical-align: -1px; margin: 0;">


<div style="float: left; width:500px;">
<IMG SRC="mathtype/eqn025.gif" WIDTH=490 HEIGHT=299 STYLE="vertical-align: -273px; margin: 0;display:block;background:#f63;">
</div>

<div style="float: left; width: 300px;background:#f00;">
<span style=text-weight: bold;> Strategy </span>: "Since immediately substituting <eq> 0 </eq>, for <eq> h </eq>, results in division by zero, the numerator must be simplified such that <eq>h</eq> can be factored out and then canceled against the denominator. The resulting function, <eq>f'(x)</eq>, is the derivative of <eq>f(x)</eq>".
</div>

</p>
</body>
</html>

ptrcao
12-14-2010, 08:48 PM
http://www.mathannotated.com/pages/differentiation/differentiation.html (scroll down)



As you will see the <p>...</p> does not seem to be containing the two divs within it - that is the problem, but to me this is illogical? How do you explain why the divs aren't within the province of <p>...</p>?

Excavator
12-14-2010, 09:07 PM
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.mathannotated.com%2Fpages%2Fdifferentiation%2Fdifferentiation.html

ptrcao
12-14-2010, 09:09 PM
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.mathannotated.com%2Fpages%2Fdifferentiation%2Fdifferentiation.html

It boils down to divs not being allowed inside paragraphs.

colour suggestion helpful
reminder that div not allowed in span was helpful

my thanks excavator

Excavator
12-14-2010, 09:15 PM
reminder that div not allowed in span was helpful



p is inline too, like span. No div there either.

ptrcao
12-14-2010, 09:16 PM
p is inline too, like span. No div there either.

Yes, lesson learnt. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum