Tweet
Hello,
I am a newbie to CSS and have a Doubt. In the below HTML File, <span class="plain">Plain text</span has a Plain Formatting with just a Color Change to be made via CSS .plain {color:#FF0000;}
My Question is Why does that part also join the remaining text in Vertical Alignment as the span for the "Plain Text" text is <span class="plain">Plain text</span>?
What I mean is only the remaining part of the Text after the words "Plain Text" must participate in Vertical Alignment and not the whole sentence?
This is the CSS File
This is the HTML File
Thanks,
Hemanth
I am a newbie to CSS and have a Doubt. In the below HTML File, <span class="plain">Plain text</span has a Plain Formatting with just a Color Change to be made via CSS .plain {color:#FF0000;}
My Question is Why does that part also join the remaining text in Vertical Alignment as the span for the "Plain Text" text is <span class="plain">Plain text</span>?
What I mean is only the remaining part of the Text after the words "Plain Text" must participate in Vertical Alignment and not the whole sentence?
This is the CSS File
Code:
/* Style sheet for ch07_eg09.html */
body {
color:#000000;
background-color:#ffffff;
font-family:arial, verdana, sans-serif;
font-size:12px;}
div {border-style:solid; border-width:1px; border-color:#000000; width:200px; margin-bottom:10px;}
.plain {color:#FF0000;}
.baseline {vertical-align:baseline;}
.sub {vertical-align:sub;}
.super {vertical-align:super;}
.top {vertical-align:top;}
.texttop {vertical-align:text-top;}
.middle {vertical-align:middle;}
.bottom {vertical-align:bottom;}
.textbottom {vertical-align:text-bottom;}
.oneHundredPercent {vertical-align:100%;}
.fiftyPercent {vertical-align:50%;}
Code:
<?xml version="1.0" ?>
<!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" lang="en" xml:lang="en">
<head>
<title>CSS Example</title>
<link rel="stylesheet" type="text/css" href="ch07_eg09.css" />
</head>
<body>
<h1>vertical-align</h1>
<div>
<span class="plain">Plain text</span> <span>no vertical align</span><img class="baseline" src="images/block.gif" width="50" height="50" alt="block" />
</div>
<div>
<span class="plain">Plain text</span> <span class="baseline">baseline</span><img class="baseline" src="images/block.gif" width="50" height="50" alt="block" />
</div>
<div>
<span class="plain">Plain text</span> <span class="sub">sub</span><img class="sub" src="images/block.gif" width="50" height="50" alt="block" />
</div>
<div>
<span class="plain">Plain text</span> <span class="super">super</span><img class="super" src="images/block.gif" width="50" height="50" alt="block" />
</div>
<div>
<span class="plain">Plain text</span> <span class="top">top</span><img class="top" src="images/block.gif" width="50" height="50" alt="block" />
</div>
<div>
<span class="plain">Plain text</span> <span class="texttop">texttop</span><img class="texttop" src="images/block.gif" width="50" height="50" alt="block" />
</div>
<div>
<span class="plain">Plain text</span> <span class="middle">middle</span><img class="middle" src="images/block.gif" width="50" height="50" alt="block" />
</div>
<div>
<span class="plain">Plain text</span> <span class="bottom">bottom</span><img class="bottom" src="images/block.gif" width="50" height="50" alt="block" />
</div>
<div>
<span class="plain">Plain text</span> <span class="textbottom">textbottom</span><img class="textbottom" src="images/block.gif" width="50" height="50" alt="block" />
</div>
<div>
<span class="plain">Plain text</span> <span class="oneHundredPercent">100%</span><img class="100percent" src="images/block.gif" width="50" height="50" alt="block" />
</div>
<div>
<span class="plain">Plain text</span> <span class="fiftyPercent">50%</span><img class="50percent" src="images/block.gif" width="50" height="50" alt="block" />
</div>
</table>
</body>
</html>
Hemanth