<!-- "xmlns" This is default namespace consturctor.
"xmlns:xhtml" This is prefixed, and belongs xhtml.
"xmlns:my"
-->
<feed xlmns="http://www.w3.org/2005/Atom"
xmlns:xhtml="http://xml.w3.org/1999/xhtml"
xmlns:my="hthp://xmlportfolio.com/xmlmyguid-examples">
<title>Example Feed</title>
<!--
"right" is an element.
"type" is attribute.
"my" can be any word, and makes no difference
-->
<right type="xhtml" my:type="silly">
<xhtml:div>
You may not read, utter, interpret, or otherwise
contained in this feed...
</xhtml:div>
</right>
</feed>
Saturday, February 5, 2011
Thursday, February 3, 2011
CSS - Fixed Width In a Span
Although the assignment was for the Javascript class, I just wanted make it look pretty, and that started this whole thing...
I wanted the ouput to look like:
Name: Pretty Chindonya
ID: 19191919
Assignment: #01
Date: 02/03/2011
I thought since the table stuff is going under the drain, why not use div stuff? It sounded great at start. The key is use <li> and <span>, and in <span> in CSS file, fix the width.
Like this in HTML file:
<li><span>Assignment:</span>#01</li>
Like this in CSS file:
span
{
width: 100px;
}
It worked with Internet Explorer, but it didn't with Firefox. Firefox ignored the width assigned. ummmmm. To fix the Firefox problem, added "inline-block".
span
{
display: inline-block;
width: 100px;
}
This solved the problem.
Note that, while I was at it, I noticed the difference between Internet Explorer and Firefox. Firefox has the extra space at the left side of text. After spending time for try and error, I found out the I had to explicitly make padding 0 for "ul". Does this mean Firefox's default configuration for "ul" will add extra space at left? Must be, right?
Here is the working code.
HTML File:
<body>
<div id ="wrapper">
<div class ="assignmentTitle">
<ul>
<li><span>Name:</span>Pretty Chindonya</li>
</ul>
<ul>
<li><span>ID:</span>191919</li>
</ul>
<ul>
<li><span>Assignment:</span>#01</li>
</ul>
<ul>
<li><span>Date:</span>02/03/2011</li>
</ul>
</div>
</div>
</body>
</html>
CSS File:
body
{
background: #ffffff;
text-align: center;
font-size: medium;
font-family: Sans-serif;
color: #505050;
}
#wrapper{
margin: auto;
width: 900px;
text-align: left;
background: #f0f0f0;
}
.assignmentTitle
{
color: #505050;
font-size: medium;
}
.assignmentTitle ul
{
list-style: none;
font-size: 15px;
font-family: Sans-serif;
list-style: none;
margin: 0 0 0 4px;
/* With Firefox,
there is an extra space at left.
below "padding: 0;" helped to get rid of it */
padding: 0;
}
.assignmentTitle li
{
/* used them for just debugging,
but ie did NOT display the outline.
ummmmm...
outline-style: solid;
outline-width: 1px; */
/* With Firefox,
there is an extra space at left.
below did not help to get rid of it
margin-left: 0;
padding-left: 0; */
}
.assignmentTitle span
{
/* For Firefox,
this "inline-block" is needed.
without it, it will not reserve the space */
display: inline-block;
width: 100px;
/* With Firefox,
there is an extra space at left.
below did not help to get rid of it.
margin-left: 0; */
}
I wanted the ouput to look like:
Name: Pretty Chindonya
ID: 19191919
Assignment: #01
Date: 02/03/2011
I thought since the table stuff is going under the drain, why not use div stuff? It sounded great at start. The key is use <li> and <span>, and in <span> in CSS file, fix the width.
Like this in HTML file:
<li><span>Assignment:</span>#01</li>
Like this in CSS file:
span
{
width: 100px;
}
It worked with Internet Explorer, but it didn't with Firefox. Firefox ignored the width assigned. ummmmm. To fix the Firefox problem, added "inline-block".
span
{
display: inline-block;
width: 100px;
}
This solved the problem.
Note that, while I was at it, I noticed the difference between Internet Explorer and Firefox. Firefox has the extra space at the left side of text. After spending time for try and error, I found out the I had to explicitly make padding 0 for "ul". Does this mean Firefox's default configuration for "ul" will add extra space at left? Must be, right?
Here is the working code.
HTML File:
<body>
<div id ="wrapper">
<div class ="assignmentTitle">
<ul>
<li><span>Name:</span>Pretty Chindonya</li>
</ul>
<ul>
<li><span>ID:</span>191919</li>
</ul>
<ul>
<li><span>Assignment:</span>#01</li>
</ul>
<ul>
<li><span>Date:</span>02/03/2011</li>
</ul>
</div>
</div>
</body>
</html>
CSS File:
body
{
background: #ffffff;
text-align: center;
font-size: medium;
font-family: Sans-serif;
color: #505050;
}
#wrapper{
margin: auto;
width: 900px;
text-align: left;
background: #f0f0f0;
}
.assignmentTitle
{
color: #505050;
font-size: medium;
}
.assignmentTitle ul
{
list-style: none;
font-size: 15px;
font-family: Sans-serif;
list-style: none;
margin: 0 0 0 4px;
/* With Firefox,
there is an extra space at left.
below "padding: 0;" helped to get rid of it */
padding: 0;
}
.assignmentTitle li
{
/* used them for just debugging,
but ie did NOT display the outline.
ummmmm...
outline-style: solid;
outline-width: 1px; */
/* With Firefox,
there is an extra space at left.
below did not help to get rid of it
margin-left: 0;
padding-left: 0; */
}
.assignmentTitle span
{
/* For Firefox,
this "inline-block" is needed.
without it, it will not reserve the space */
display: inline-block;
width: 100px;
/* With Firefox,
there is an extra space at left.
below did not help to get rid of it.
margin-left: 0; */
}
XML - New Line
I had a heck of time with putting a new line for XML.
Why?
Here is an assignment for the XML class that I was (and still am) taking.
Let’s start with something that we all should know how to do.
Write an XML document and a Cascading Style Sheet (CSS) that will display your name, the date, and the assignment number, all on separate lines.
No kiddin' :O
I didn't have a clue. Searched everywhere, including W3C site, but no one, no where else shows me how to put a new line. There are a lot of discussions about it, but none worked. So, after several hours of agony, this is what I came up with.
CSS File:
body
{
background-color: #ffffff;
font-size: medium;
font-family: Sans-serif;
}
Col
{
width: 100%;
}
nameHead, dateHead, assignmentHead
{
/* clear: left; */
color: #505050;
width: 160px;
}
name, date, assignment
{
color: #505050;
}
XML File:
<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet type="text/css" href="StyleSheet1.css"?>
<body>
<col>
<nameHead>
Name:
</nameHead>
<name>
Tetsuro Hirouji
</name>
</col>
<col>
<dateHead>
Date:
</dateHead>
<date>
02/02/2011
</date>
</col>
<col>
<assignmentHead>
Assignment #:
</assignmentHead>
<assignment>
1
</assignment>
</col>
</body>
The key is to use a container with 100% width, and put the text inside. I don't know how else to do it.
Why?
Here is an assignment for the XML class that I was (and still am) taking.
Let’s start with something that we all should know how to do.
Write an XML document and a Cascading Style Sheet (CSS) that will display your name, the date, and the assignment number, all on separate lines.
No kiddin' :O
I didn't have a clue. Searched everywhere, including W3C site, but no one, no where else shows me how to put a new line. There are a lot of discussions about it, but none worked. So, after several hours of agony, this is what I came up with.
CSS File:
body
{
background-color: #ffffff;
font-size: medium;
font-family: Sans-serif;
}
Col
{
width: 100%;
}
nameHead, dateHead, assignmentHead
{
/* clear: left; */
color: #505050;
width: 160px;
}
name, date, assignment
{
color: #505050;
}
XML File:
<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet type="text/css" href="StyleSheet1.css"?>
<body>
<col>
<nameHead>
Name:
</nameHead>
<name>
Tetsuro Hirouji
</name>
</col>
<col>
<dateHead>
Date:
</dateHead>
<date>
02/02/2011
</date>
</col>
<col>
<assignmentHead>
Assignment #:
</assignmentHead>
<assignment>
1
</assignment>
</col>
</body>
The key is to use a container with 100% width, and put the text inside. I don't know how else to do it.
Subscribe to:
Posts (Atom)