PDA

Click to See Complete Forum and Search --> : Addind internal style

Taurus
12-30-2005, 06:36 AM
Need some help to adjust/polish html code. Its single html page, i want make code cleaner a little, by adding internal style(inside header tags) and correct for possible mistakes, if required. (first table is for image and to center UL, just some hack).



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>name</title>
</head>
<body style="font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11pt; border-right: thick solid rgb(0,0,255);border-left: thick solid rgb(0,0,255); border-top: thick solid rgb(0,0,255); border-bottom: thick solid rgb(0,0,255);">


<h1 style="text-align:center; font-family:Arial, Verdana, Helvetica, sans-serif; color: #0000CC;">Header</h1>

<p style="font-family: Arial, Verdana, Helvetica, sans-serif; font-size:12pt; color: #0000CC; text-align: center;">
Includes:
</p>
<table border="0" width="100%">
<tr>
<td align="left" width="33%">
<img src="806ny.jpg" width="180" height="148" border="0" style="margin-left:20px";>
</td>
<td align="left" width="34%">
<ul style="list-style-type: square; color: #CC0000; font family: Arial, Verdana, Helvetica, sans-serif; font-size: 11pt; padding-left:10px;">
<li>
<span style="color: #0000B0">
Name1
</span>
<li>
<span style="color: #0000B0">
Name2
</span>
<li>
<span style="color: #0000B0">
Name3
</span>
<li>
<span style="color: #0000B0">
Name4
</span>
<li>
<span style="color: #0000B0">
Name5
</span>
<li>
<span style="color: #0000B0">
Name6
</span>
<li>
<span style="color: #0000B0">
Name7
</span>
</ul>
</td>
<td align="left" width="33%">
&nbsp;
</td>
</tr>
</table>


<hr width="90%" size="1" noshade="noshade" />


<p style="text-align:center; font-family:Arial, Verdana, Helvetica, sans-serif; font-size:10pt;"> System Requirements:</p>

<table width="80%" border="1" cellspacing="0" cellpadding="6" align="center" style="border-collapse:collapse; font-size:0.8em;margin:0 auto;">
<tr>
<th style="background-color :#FFCC66">Component</th>
<th style="background-color :#FFCC66">Requirement</th>
</tr>
<tr>
<td>
<p>Computer and processor</p>
</td>
<td>
<p>Personal computer with an Intel Pentium 233-MHz or
faster processor (Pentium III recommended); optional installation of Business
Contact Manager for Outlook&reg; 2003 requires a 450-MHz or faster processor
(Pentium III recommended)</p>
</td>
</tr>
<tr>
<td>
<p>Memory</p>
</td>
<td>
<p>128 MB of RAM or greater; optional installation of
Business Contact Manager for Outlook 2003 requires 256 MB of RAM</p>
</td>
</tr>
<tr>
<td>
<p>Hard disk</p>
</td>
<td>
<p>400 MB of available hard-disk space; optional
installation files cache (recommended) requires an additional 200 MB of
available hard-disk space; optional installation of Business Contact Manager
for Outlook 2003 requires an additional 190 MB of available hard-disk
space</p>
</td>
</tr>
<tr>
<td>
<p>Drive</p>
</td>
<td>
<p>CD-ROM or DVD drive</p>
</td>
</tr>
<tr>
<td>
<p>Display</p>
</td>
<td>
<p>Super VGA (800 &times; 600) or higher-resolution
monitor</p>
</td>
</tr>
<tr>
<td>
<p>Operating system</p>
</td>
<td>
<p>Microsoft Windows&reg; 2000 with Service Pack 3 (SP3),
Windows XP, or later</p>
</td>
</tr>
<tr>
<td>
<p>Other</p>
</td>
<td>
<p>Microsoft Exchange Server is required for certain
advanced functionality in Microsoft Office Outlook; Microsoft Windows
Server&trade; 2003 running Microsoft Windows SharePoint&trade; Services is
required for certain advanced collaboration functionality; certain inking
features require running Microsoft Office on the Microsoft Windows XP Tablet
PC Edition; speech recognition functionality requires a Pentium II 400-MHz or
faster processor and a close-talk microphone and audio output device;
Information Rights Management features require access to a Windows 2003
Server running Windows Rights Management Services; note: Business Contact
Manager for Outlook 2003 will be disabled in the presence of a Microsoft
Exchange-technologies-based e-mail system</p>
</td>
</tr>
<tr>
<td>
<p>Internet Connection</p>
</td>
<td>
<p>Internet functionality requires dial-up or broadband
Internet access (provided separately); local or long-distance charges may
apply</p>
</td>
</tr>
</tbody>
</table>

<p style="background: #DEFDD9; font-family:Arial, Verdana, Helvetica, sans-serif; font-size:11pt; margin-left: 50px; margin-right: 50px; padding: 20px;">
Text text text Text text text Text text text Text text text Text text text Text text text</p>
<img src="010fe.jpg" width="288" height="182" border="0" style="float:right;margin-right:50px;">

<p style="font-family: Arial, Helvetica, sans-serif; font-size:12pt; font-weight: bold; margin-left: 50px; margin-right: 50px; padding: 20px;color: #0000CC">Text text text:&nbsp;&nbsp;23.00</p>


<p style="font-family: Arial, Helvetica, sans-serif; font-size:12pt; font-weight: bold; margin-left: 50px; margin-right:50px; padding: 20px; color: #0000CC">Text text text Text text text:<br><br>
1. Text text text<br>
2. Text text text</p>
<p style="font-family: Arial, sans-serif; font-size:11pt; margin-left: 50px;">Text text text Text text text.</p>

<hr width="90%" size="1" noshade="noshade" />


</body>

</html>
StudioMex
12-31-2005, 03:23 AM
I understand that you want a better and cleaner way to make this page, but what do you mean by (first table is for image and to center UL, just some hack)

what else do you want to accomplish
Taurus
12-31-2005, 12:29 PM
I just meant that there is unordered list, where each <li> can be equally aligned only by placing this unordered list inside table (just for a note)
Also i want set background color for paragrafs & set some margins/paddings to make text looks better('color box').
Probably, it's will better set page width 90-95%, not 100%, to make content more attractive.