Solved

I have an Unordered List Problem in HTML and CSS

Posted on 2014-02-18
7
564 Views
Last Modified: 2014-02-19
Hi everyone,

Please find my html coding for an unordered list that I need for the lists to appear from left to right.  Please see Document2 which is  a word file that shows what I want to do with HTML and CSS.  I have attached my html coding and css attachments.

jjc9809
Document2.docx
CSSCode.docx
Example1.png
HTMLCode1.docx
0
Comment
Question by:jjc9809
  • 4
  • 3
7 Comments
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 39869233
Pleas post HTML and CSS files in their original format and Not contained in a Word document.
0
 

Author Comment

by:jjc9809
ID: 39869254
Dave, I am new to Expert Exchange.  I posted code inside the email and as a Coe Snippet.
jjc9809

HTML File:

<!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" xml:lang="en" lang="en">
<head>
<title>DOCNet</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="CSS/CoolWater.css" type="text/css" />
</head>
<body>
<div id="wrap">
  <div id="header">
    <h1 id="logo-text"><a href="http://www.free-css.com/">DOCNet</a></h1>
    <p id=""></p>
    <div id="header-links">
      <p><a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">Contact</a> | <a href="http://www.free-css.com/">Site Map</a> </p>
      <p>The Intranet for the<br>Alabama Department of Corrections</p>
         </div>
  </div>
  <div  id="menu">
    <ul>
      <li id="current"><a href="http://www.free-css.com/">Home</a></li>
      <li><a href="http://www.free-css.com/">Applications</a></li>
      <li><a href="http://www.free-css.com/">DocForms</a></li>
      <li><a href="http://www.free-css.com/">ADOC Information</a></li>
      <li><a href="http://www.free-css.com/">Staff Pages</a></li>
      <li><a href="http://www.free-css.com/">About</a></li>
    </ul>
  </div>
  <div id="content-wrap">
    <div id="main"> <a name="TemplateInfo"></a>
      <h2><a href="http://www.free-css.com/">Template Info</a></h2>
      <p class="post-by">posted by: <a href="http://www.free-css.com/">ealigam</a></p>
      <p><strong>CoolWater 1.0</strong> is a free, W3C-compliant, CSS-based website template by <strong>styleshout.com</strong>. This work is distributed under the <a rel="license" target="_blank" href="http://creativecommons.org/licenses/by/2.5/"> Creative Commons Attribution 2.5  License</a>, which means that you are free to use and modify it for any purpose. All I ask is that you include a link back to my website in your credits.</p>
      <p>For more free designs, you can visit my website to see my other works.</p>
      <p>Good luck and I hope you find my free templates useful!</p>
      <p class="post-footer align-left"> <a href="http://www.free-css.com/" class="readmore">Read more</a> | <a href="http://www.free-css.com/" class="comments">Comments (7)</a> | <span class="date">Nov 04, 2006</span> </p>
      <a name="SampleTags"></a>
      <h2><a href="http://www.free-css.com/">Sample Tags</a></h2>
      <h3>Code</h3>
      <p><code> code-sample { <br />
        font-weight: bold;<br />
        font-style: italic;<br />
        } </code></p>
      <h3>Example Lists</h3>
      <ol>
        <li>Here is an example</li>
        <li>of an ordered list</li>
      </ol>
      <ul>
        <li>Here is an example</li>
        <li>of an unordered list</li>
      </ul>
      <h3>Blockquote</h3>
      <blockquote>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
          nibh euismod tincidunt ut laoreet dolore magna aliquam erat....</p>
      </blockquote>
      <h3>Image and text</h3>
      <p><a href="http://getfirefox.com/"><img src="images/firefox-gray.jpg" width="100" height="120" alt="firefox" class="float-left" /></a> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. </p>
      <h3>Table Styling</h3>
      <table>
        <tr>
          <th><strong>post</strong> date</th>
          <th>title</th>
          <th>description</th>
        </tr>
        <tr>
          <td>04.18.2007</td>
          <td><a href="http://www.free-css.com/">Augue non nibh</a></td>
          <td><a href="http://www.free-css.com/">Lobortis commodo metus vestibulum</a></td>
        </tr>
        <tr>
          <td>04.18.2007</td>
          <td><a href="http://www.free-css.com/">Fusce ut diam bibendum</a></td>
          <td><a href="http://www.free-css.com/">Purus in eget odio in sapien</a></td>
        </tr>
        <tr>
          <td>04.18.2007</td>
          <td><a href="http://www.free-css.com/">Maecenas et ipsum</a></td>
          <td><a href="http://www.free-css.com/">Adipiscing blandit quisque eros</a></td>
        </tr>
        <tr>
          <td>04.18.2007</td>
          <td><a href="http://www.free-css.com/">Sed vestibulum blandit</a></td>
          <td><a href="http://www.free-css.com/">Cras lobortis commodo metus lorem</a></td>
        </tr>
      </table>
      <h3>Example Form</h3>
      <form method="get" action="http://www.free-css.com/">
        <p>
          <label>Name</label>
          <input name="dname" value="Your Name" type="text" size="30" />
          <label>Email</label>
          <input name="demail" value="Your Email" type="text" size="30" />
          <label>Your Comments</label>
          <textarea rows="5" cols="5"></textarea>
          <br />
          <input class="button" type="submit" />
        </p>
      </form>
      <br />
    </div>
    <div id="sidebar">
      <h2>Search Box</h2>
      <form action="http://www.free-css.com/" class="searchform">
        <p>
          <input name="search_query" class="textbox" type="text" />
          <input name="search" class="button" value="Search" type="submit" />
        </p>
      </form>
      <h2>Sidebar Menu</h2>
      <ul class="sidemenu">
        <li><a href="http://www.free-css.com/">Home</a></li>
        <li><a href="http://www.free-css.com/">More Free Templates</a></li>
        <li><a href="http://www.free-css.com/">Premium Templates</a></li>
      </ul>
      <h2>Links</h2>
      <ul class="sidemenu">
        <li><a href="http://www.free-css.com/">CSS Tutorials</a></li>
        <li><a href="http://www.free-css.com/">CSS Menus</a></li>
        <li><a href="http://www.free-css.com/">CSS Resources</a></li>
        <li><a href="http://www.free-css.com/">CSS Basics</a></li>
        <li><a href="http://www.free-css.com/">CSS Gallery</a></li>
      </ul>
      <h2>Wise Words</h2>
      <p>&quot;To have a quiet mind is to possess one's mind wholly; to have a calm spirit is to possess one's self.&quot; </p>
      <p class="align-right">- Hamilton Mabie</p>
      <h2>Support Styleshout</h2>
      <p>If you are interested in supporting my work and would like to contribute, you arewelcome to make a small donation through the donate link on my website - it will be a great help and will surely be appreciated.</p>
    </div>
  </div>
  <div id="footer">
    <p>&copy; 2006 <strong>Your Company</strong> | 
      Design by: <a href="http://www.styleshout.com/">styleshout</a> | Valid <a target="_blank" href="http://validator.w3.org/check?uri=referer">XHTML</a> | <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> </p>
  </div>
</div>
</body>
</html>

Open in new window

<!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" xml:lang="en" lang="en">
<head>
<title>DOCNet</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="CSS/CoolWater.css" type="text/css" />
</head>
<body>
<div id="wrap">
  <div id="header">
    <h1 id="logo-text"><a href="http://www.free-css.com/">DOCNet</a></h1>
    <p id=""></p>
    <div id="header-links">
      <p><a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">Contact</a> | <a href="http://www.free-css.com/">Site Map</a> </p>
      <p>The Intranet for the<br>Alabama Department of Corrections</p>
         </div>
  </div>
  <div  id="menu">
    <ul>
      <li id="current"><a href="http://www.free-css.com/">Home</a></li>
      <li><a href="http://www.free-css.com/">Applications</a></li>
      <li><a href="http://www.free-css.com/">DocForms</a></li>
      <li><a href="http://www.free-css.com/">ADOC Information</a></li>
      <li><a href="http://www.free-css.com/">Staff Pages</a></li>
      <li><a href="http://www.free-css.com/">About</a></li>
    </ul>
  </div>
  <div id="content-wrap">
    <div id="main"> <a name="TemplateInfo"></a>
      <h2><a href="http://www.free-css.com/">Template Info</a></h2>
      <p class="post-by">posted by: <a href="http://www.free-css.com/">ealigam</a></p>
      <p><strong>CoolWater 1.0</strong> is a free, W3C-compliant, CSS-based website template by <strong>styleshout.com</strong>. This work is distributed under the <a rel="license" target="_blank" href="http://creativecommons.org/licenses/by/2.5/"> Creative Commons Attribution 2.5  License</a>, which means that you are free to use and modify it for any purpose. All I ask is that you include a link back to my website in your credits.</p>
      <p>For more free designs, you can visit my website to see my other works.</p>
      <p>Good luck and I hope you find my free templates useful!</p>
      <p class="post-footer align-left"> <a href="http://www.free-css.com/" class="readmore">Read more</a> | <a href="http://www.free-css.com/" class="comments">Comments (7)</a> | <span class="date">Nov 04, 2006</span> </p>
      <a name="SampleTags"></a>
      <h2><a href="http://www.free-css.com/">Sample Tags</a></h2>
      <h3>Code</h3>
      <p><code> code-sample { <br />
        font-weight: bold;<br />
        font-style: italic;<br />
        } </code></p>
      <h3>Example Lists</h3>
      <ol>
        <li>Here is an example</li>
        <li>of an ordered list</li>
      </ol>
      <ul>
        <li>Here is an example</li>
        <li>of an unordered list</li>
      </ul>
      <h3>Blockquote</h3>
      <blockquote>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
          nibh euismod tincidunt ut laoreet dolore magna aliquam erat....</p>
      </blockquote>
      <h3>Image and text</h3>
      <p><a href="http://getfirefox.com/"><img src="images/firefox-gray.jpg" width="100" height="120" alt="firefox" class="float-left" /></a> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. </p>
      <h3>Table Styling</h3>
      <table>
        <tr>
          <th><strong>post</strong> date</th>
          <th>title</th>
          <th>description</th>
        </tr>
        <tr>
          <td>04.18.2007</td>
          <td><a href="http://www.free-css.com/">Augue non nibh</a></td>
          <td><a href="http://www.free-css.com/">Lobortis commodo metus vestibulum</a></td>
        </tr>
        <tr>
          <td>04.18.2007</td>
          <td><a href="http://www.free-css.com/">Fusce ut diam bibendum</a></td>
          <td><a href="http://www.free-css.com/">Purus in eget odio in sapien</a></td>
        </tr>
        <tr>
          <td>04.18.2007</td>
          <td><a href="http://www.free-css.com/">Maecenas et ipsum</a></td>
          <td><a href="http://www.free-css.com/">Adipiscing blandit quisque eros</a></td>
        </tr>
        <tr>
          <td>04.18.2007</td>
          <td><a href="http://www.free-css.com/">Sed vestibulum blandit</a></td>
          <td><a href="http://www.free-css.com/">Cras lobortis commodo metus lorem</a></td>
        </tr>
      </table>
      <h3>Example Form</h3>
      <form method="get" action="http://www.free-css.com/">
        <p>
          <label>Name</label>
          <input name="dname" value="Your Name" type="text" size="30" />
          <label>Email</label>
          <input name="demail" value="Your Email" type="text" size="30" />
          <label>Your Comments</label>
          <textarea rows="5" cols="5"></textarea>
          <br />
          <input class="button" type="submit" />
        </p>
      </form>
      <br />
    </div>
    <div id="sidebar">
      <h2>Search Box</h2>
      <form action="http://www.free-css.com/" class="searchform">
        <p>
          <input name="search_query" class="textbox" type="text" />
          <input name="search" class="button" value="Search" type="submit" />
        </p>
      </form>
      <h2>Sidebar Menu</h2>
      <ul class="sidemenu">
        <li><a href="http://www.free-css.com/">Home</a></li>
        <li><a href="http://www.free-css.com/">More Free Templates</a></li>
        <li><a href="http://www.free-css.com/">Premium Templates</a></li>
      </ul>
      <h2>Links</h2>
      <ul class="sidemenu">
        <li><a href="http://www.free-css.com/">CSS Tutorials</a></li>
        <li><a href="http://www.free-css.com/">CSS Menus</a></li>
        <li><a href="http://www.free-css.com/">CSS Resources</a></li>
        <li><a href="http://www.free-css.com/">CSS Basics</a></li>
        <li><a href="http://www.free-css.com/">CSS Gallery</a></li>
      </ul>
      <h2>Wise Words</h2>
      <p>&quot;To have a quiet mind is to possess one's mind wholly; to have a calm spirit is to possess one's self.&quot; </p>
      <p class="align-right">- Hamilton Mabie</p>
      <h2>Support Styleshout</h2>
      <p>If you are interested in supporting my work and would like to contribute, you arewelcome to make a small donation through the donate link on my website - it will be a great help and will surely be appreciated.</p>
    </div>
  </div>
  <div id="footer">
    <p>&copy; 2006 <strong>Your Company</strong> |
      Design by: <a href="http://www.styleshout.com/">styleshout</a> | Valid <a target="_blank" href="http://validator.w3.org/check?uri=referer">XHTML</a> | <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> </p>
  </div>
</div>
</body>
</html>



CSS File:  CoolwaterCSS

*******************************************/
 
/********************************************
   HTML ELEMENTS
********************************************/

/* top elements */
* { margin: 0; padding: 0; outline: 0; }

body {
      background: #caced1;
      font: 90%/1.5em Verdana, Tahoma, arial, sans-serif;
      color: #777;
      text-align: center;
      margin: 15px 0;
}

/* links */
a, a:visited {
      text-decoration: none;
      background: inherit;
      color: #FB9233;
}
a:hover {
      text-decoration: underline;
      background: inherit;
      color: #93C600;
}

/* headers */
h1, h2, h3 { font-family: 'Trebuchet MS', Tahoma, Sans-serif;  }
h1 {
      font-size: 180%;      
      font-weight: normal;      
      color: #555;
}
h2 {
      font-size: 160%;
      color: #88ac0b;
      font-weight: normal;
}
h3 {
      font-size: 135%;       
      color: #666666;
}

/* images */
img {
      background: #fff;
   border: 1px solid #E5E5E5;
      padding: 5px;
      height: 241px;
      width: 177px;
}
img.float-right { margin: 5px 0px 10px 10px;  }
img.float-left { margin: 5px 10px 10px 0px; }

h1, h2, h3, p {
      margin: 10px 15px;
      padding: 0;
}
ul, ol {
      margin: 5px 15px;
      padding: 0 25px;
}

code {
  margin: 5px 0;
  padding: 15px;
  text-align: left;
  display: block;
  overflow: auto;  
  font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace ;
  /* white-space: pre; */
  border: 1px solid #E5F0FB;  
  background: #F4F8FD;
}
acronym {
  cursor: help;
  border-bottom: 1px dotted #777;
}
blockquote {
  margin: 10px 15px;
  padding: 0 0 0 25px;  
  font: bold 1.3em/1.5em "Trebuchet MS", Tahoma, arial, Sans-serif;
  color: #2361BA;
  border: 1px solid #E5F0FB;  
  background: #F4F8FD url(quote.jpg) no-repeat 8px 6px;
}

/* start - table */
table {
      border-collapse: collapse;
      margin: 10px 15px;      
}
th strong {
      color: #fff;
}
th {
      background: #306bc1 url(button-bg.jpg) repeat-x 0 0;
      height: 35px;
      padding-left: 12px;
      padding-right: 12px;
      color: #fff;
      text-align: left;
      border: 1px solid #306bc1;
      border-bottom-width: 2px;
}
tr {
      height: 32px;
      background: #fff;      
}
td {
      padding-left: 12px;
      padding-right: 12px;
      border: 1px solid #E5F0FB;
}
/* end - table */

/* form elements */
form {
      margin:10px 15px;
      padding: 10px 0;
      border: 1px solid #E5F0FB;
      background: #F4F8FD;
}
fieldset {
      margin: 0;      padding: 0;
      border: none;
}
legend {
      display: none;
}
label {
      display:block;
      font-weight:bold;
      margin: 7px 0;
}
input {
      padding:3px;
      border: 1px solid #E5F0FB;
      font: normal 1em Verdana, sans-serif;
      color:#777;      
}
textarea {
      width:400px;
      padding:3px;
      font: normal 1em Verdana, sans-serif;
      border: 1px solid #E5F0FB;
      height:100px;
      display:block;
      color:#777;
}
input.button {
      font: bold 12px Arial, Sans-serif;
      height: 28px;
      margin: 0;
      padding: 2px 3px;
      color: #fff;
      background: #306bc1 url(button-bg.jpg) repeat-x 0 0;
      border: 1px solid #306bc1;
}

/* search form */
.searchform {
      background-color: transparent;
      border: none;      
      margin: 0;
      padding: 5px 0 5px 0;      
      width: 180px;      
}
.searchform p { margin: 0; padding: 0; }
.searchform input.textbox {
      width: 110px;
      color: #777;
      height: 20px;
      padding: 2px;      
      border: 1px solid #D2E8F7;
      vertical-align: top;
}
.searchform input.button {
      width: 55px;
      height: 26px;
      padding: 2px 5px;
      vertical-align: top;
}

/********************************************
   LAYOUT
********************************************/
#wrap {
      width: 790px;
      background: #CCC url(content.jpg) repeat-y center top;
      margin: 0 auto;
      text-align: left;
}
#content-wrap {
      clear: both;
      width: 760px;      
      margin: 5px auto;
      padding: 0;       
}
#header {
      position: relative;
      height: 131px;
      background: #caced1 url(header.jpg) no-repeat center top;
      padding: 0;      
      color: #fff;      
}
#header h1#logo-text a {
      position: absolute;
      margin: 0; padding: 0;
      font: bolder 55px 'Trebuchet MS', Arial, Sans-serif;
      letter-spacing: -3px;
      color: #fff;
      text-transform: none;
      text-decoration: none;
      background: transparent;
      
      /* change the values of top and left to adjust the position of the logo*/
      top: 18px; left: 35px;      
}
#header p#slogan {
      position: absolute;
      margin: 0; padding: 0;
      font: bold 13px 'Trebuchet MS', Arial, Sans-serif;
      text-transform: none;
      color: #FFF;
      
      /* change the values of top and left to adjust the position of the slogan*/
      top: 80px; left: 50px;            
}

/* header links */
#header #header-links {
      position: absolute;
      color: #C6DDEE;
      font: bold 14px"Trebuchet MS", Arial, Tahoma, Sans-serif;
      top: 20px; right: 20px;      
}
#header #header-links a {      
      color: #fff;
      text-decoration: none;      
}
#header #header-links a:hover {
      color: #D4FF55;      
}

/* navigation */
#menu {
      clear: both;      
      margin: 0 auto; padding: 0;
      background: #81C524 url(menu.jpg) no-repeat;      
      font: bold 16px/40px "trebuchet MS", Arial, Tahoma, Sans-serif;
      height: 40px;
      width: 790px;      
}
#menu ul {
      float: left;
      list-style: none;
      margin:0; padding: 0 0 0 20px;
}
#menu ul li {
      display: inline;
}
#menu ul li a {
      display: block;
      float: left;
      padding: 0 12px;
      color: #fff;      
      text-decoration: none;
      background: url(sep.jpg) no-repeat 100% 100%;
}
#menu ul li a:hover {
      color: #3b5e0b;      
}
#menu ul li#current a {      
      color: #3b5e0b;
}

/* Main Column */
#main {
      float: left;
      width: 555px;
      margin: 0; padding: 20px 0 0 0;
      display: inline;
      background: url(box.jpg) no-repeat;       
}
#main h2 {
      font: normal 180% 'Trebuchet MS', Tahoma, Arial, Sans-serif;
      padding: 0;       
      margin-bottom: 0;            
      color: #2666c3;
}
#main h2 a {
      color: #2666c3;
      text-decoration: none;      
}

#main p, #main h1, #main h2, #main h3, #main ol, #main ul,
#main blockquote, #main table, #main form {
      margin-left: 20px;
      margin-right: 25px;
}
#main ul li {
      list-style-image: url(bullet.gif);
}

/* Sidebar */      
#sidebar {
      float: right;
      width: 195px;
      padding: 0; margin: 10px 0 0 0;      
      color: #777;      
}      
#sidebar h2 {
      margin: 15px 5px 10px 5px;
      font: bold 1.4em 'Trebuchet MS', Tahoma, Sans-serif;
      color: #555;      
}
#sidebar p {
      margin-left: 5px;
      position: relative;
      top: -11px;
      left: 0px;
}

#sidebar ul.sidemenu {
      list-style: none;
      text-align: left;
      margin: 7px 10px 8px 0; padding: 0;
      text-decoration: none;      
      border-top: 1px solid #A9D4EF;      
}
#sidebar ul.sidemenu li {
      list-style: none;
      padding: 4px 0 4px 5px;
      margin: 0 2px;      
      color: #777;      
      border-bottom: 1px solid #D2E8F7;
}
* html body #sidebar ul.sidemenu li {
      height: 1%;
}
#sidebar ul.sidemenu li a {
      text-decoration: none;      
      color: #1773BC;                        
}
#sidebar ul.sidemenu li a:hover {      
      color: #333;
}
#sidebar ul.sidemenu ul { margin: 0 0 0 5px; padding: 0; }
#sidebar ul.sidemenu ul li { border: none; }

/* Footer */      
#footer {
      color: #C6DDEE;
      background: #caced1 url(footer.jpg) no-repeat center top;
      clear: both;
      width: 790px;
      height: 57px;
      text-align: center;      
      font-size: 90%;      
}
#footer p {
      padding: 10px 0;
      margin: 0;
}
#footer a {
      color: #fff;
      text-decoration: none;
}

/* post footer */
.post-footer {
      background: #F4F8FD;
      padding: 5px; margin: 20px 25px 0 25px;
      border: 1px solid #E5F0FB;
      font-size: 95%;      
}
.post-footer .date {      padding-left: 0px; margin: 0 5px; }
.post-footer .comments { padding-left: 0px; margin: 0 5px; }
.post-footer .readmore { padding-left: 0px; margin: 0 5px; }

.post-by { font-size: .105em;      margin-top: 0;      }

/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }

/* display and additional classes */
.clear { clear: both; }


<style type="text/css">
.image{
      float:left;
      margin-top:180px;
      padding:12px;
      width:160px;
}
.text{
      float:left;
      margin-top:250px;
      padding:12px;
      margin-bottom:50px;
      width:35%;
      font-weight:bold;
      font-size:13px;
}
</style>
*******************************************/
 
/********************************************
   HTML ELEMENTS
********************************************/ 

/* top elements */
* { margin: 0; padding: 0; outline: 0; }

body {
	background: #caced1;
	font: 90%/1.5em Verdana, Tahoma, arial, sans-serif;
	color: #777;
	text-align: center;
	margin: 15px 0;
}

/* links */
a, a:visited {
	text-decoration: none;
	background: inherit;
	color: #FB9233; 
}
a:hover {
	text-decoration: underline;
	background: inherit;
	color: #93C600;
}

/* headers */
h1, h2, h3 { font-family: 'Trebuchet MS', Tahoma, Sans-serif;  }
h1 {
	font-size: 180%;	
	font-weight: normal;	
	color: #555;
}
h2 {
	font-size: 160%;
	color: #88ac0b;
	font-weight: normal;
}
h3 {
	font-size: 135%;	 
	color: #666666;
}

/* images */
img {
	background: #fff;
   border: 1px solid #E5E5E5;
	padding: 5px;
	height: 241px;
	width: 177px;
}
img.float-right { margin: 5px 0px 10px 10px;  }
img.float-left { margin: 5px 10px 10px 0px; }

h1, h2, h3, p {
	margin: 10px 15px;
	padding: 0;
}
ul, ol {
	margin: 5px 15px;
	padding: 0 25px;
}

code {
  margin: 5px 0;
  padding: 15px;
  text-align: left;
  display: block;
  overflow: auto;  
  font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace ;
  /* white-space: pre; */
  border: 1px solid #E5F0FB;  
  background: #F4F8FD;
}
acronym {
  cursor: help;
  border-bottom: 1px dotted #777;
}
blockquote {
  margin: 10px 15px;
  padding: 0 0 0 25px;  
  font: bold 1.3em/1.5em "Trebuchet MS", Tahoma, arial, Sans-serif; 
  color: #2361BA;
  border: 1px solid #E5F0FB;   
  background: #F4F8FD url(quote.jpg) no-repeat 8px 6px;
}

/* start - table */
table {
	border-collapse: collapse;
	margin: 10px 15px;	
}
th strong {
	color: #fff;
}
th {
	background: #306bc1 url(button-bg.jpg) repeat-x 0 0; 
	height: 35px;
	padding-left: 12px;
	padding-right: 12px;
	color: #fff;
	text-align: left;
	border: 1px solid #306bc1;
	border-bottom-width: 2px;
}
tr {
	height: 32px;
	background: #fff;	
}
td {
	padding-left: 12px;
	padding-right: 12px;
	border: 1px solid #E5F0FB; 
}
/* end - table */

/* form elements */
form {
	margin:10px 15px; 
	padding: 10px 0;
	border: 1px solid #E5F0FB; 
	background: #F4F8FD;
}
fieldset {
	margin: 0;	padding: 0;
	border: none;
}
legend {
	display: none;
}
label {
	display:block;
	font-weight:bold;
	margin: 7px 0;
}
input {
	padding:3px;
	border: 1px solid #E5F0FB; 
	font: normal 1em Verdana, sans-serif;
	color:#777;	
}
textarea {
	width:400px;
	padding:3px;
	font: normal 1em Verdana, sans-serif;
	border: 1px solid #E5F0FB; 
	height:100px;
	display:block;
	color:#777;
}
input.button { 
	font: bold 12px Arial, Sans-serif; 
	height: 28px;
	margin: 0;
	padding: 2px 3px; 
	color: #fff;
	background: #306bc1 url(button-bg.jpg) repeat-x 0 0; 
	border: 1px solid #306bc1;
}

/* search form */
.searchform {
	background-color: transparent;
	border: none;	
	margin: 0; 
	padding: 5px 0 5px 0;	
	width: 180px;	
}
.searchform p { margin: 0; padding: 0; }
.searchform input.textbox { 
	width: 110px;
	color: #777; 
	height: 20px;
	padding: 2px;	
	border: 1px solid #D2E8F7; 
	vertical-align: top;
}
.searchform input.button { 
	width: 55px;
	height: 26px;
	padding: 2px 5px;
	vertical-align: top;
}

/********************************************
   LAYOUT
********************************************/ 
#wrap {
	width: 790px;
	background: #CCC url(content.jpg) repeat-y center top;
	margin: 0 auto;
	text-align: left;
}
#content-wrap {
	clear: both;
	width: 760px;	
	margin: 5px auto;
	padding: 0; 	
}
#header {
	position: relative;
	height: 131px;
	background: #caced1 url(header.jpg) no-repeat center top;
	padding: 0;	
	color: #fff;	
}
#header h1#logo-text a {
	position: absolute;
	margin: 0; padding: 0;
	font: bolder 55px 'Trebuchet MS', Arial, Sans-serif;
	letter-spacing: -3px;
	color: #fff;
	text-transform: none;
	text-decoration: none;
	background: transparent;
	
	/* change the values of top and left to adjust the position of the logo*/
	top: 18px; left: 35px;	
}
#header p#slogan {
	position: absolute;
	margin: 0; padding: 0;
	font: bold 13px 'Trebuchet MS', Arial, Sans-serif;
	text-transform: none;
	color: #FFF;
	
	/* change the values of top and left to adjust the position of the slogan*/
	top: 80px; left: 50px;		
}

/* header links */
#header #header-links {
	position: absolute;
	color: #C6DDEE;
	font: bold 14px"Trebuchet MS", Arial, Tahoma, Sans-serif;
	top: 20px; right: 20px;	
}
#header #header-links a {	
	color: #fff;
	text-decoration: none;	
}
#header #header-links a:hover {
	color: #D4FF55;	
}

/* navigation */
#menu {
	clear: both;	
	margin: 0 auto; padding: 0;
	background: #81C524 url(menu.jpg) no-repeat;	
	font: bold 16px/40px "trebuchet MS", Arial, Tahoma, Sans-serif;
	height: 40px;
	width: 790px;	
}
#menu ul {
	float: left;
	list-style: none;
	margin:0; padding: 0 0 0 20px;
}
#menu ul li {
	display: inline;
}
#menu ul li a {
	display: block;
	float: left;
	padding: 0 12px;
	color: #fff;	
	text-decoration: none;
	background: url(sep.jpg) no-repeat 100% 100%;
}
#menu ul li a:hover {
	color: #3b5e0b;	
}
#menu ul li#current a {	
	color: #3b5e0b;
}

/* Main Column */
#main {
	float: left;
	width: 555px;
	margin: 0; padding: 20px 0 0 0; 
	display: inline;
	background: url(box.jpg) no-repeat; 	
}
#main h2 {
	font: normal 180% 'Trebuchet MS', Tahoma, Arial, Sans-serif;
	padding: 0; 	
	margin-bottom: 0;		
	color: #2666c3;
}
#main h2 a {
	color: #2666c3;
	text-decoration: none;	
}

#main p, #main h1, #main h2, #main h3, #main ol, #main ul,
#main blockquote, #main table, #main form {
	margin-left: 20px;
	margin-right: 25px;
}
#main ul li {
	list-style-image: url(bullet.gif); 
}

/* Sidebar */	
#sidebar {
	float: right;
	width: 195px;
	padding: 0; margin: 10px 0 0 0;	
	color: #777;	
}	
#sidebar h2 {
	margin: 15px 5px 10px 5px;
	font: bold 1.4em 'Trebuchet MS', Tahoma, Sans-serif;
	color: #555;	
}
#sidebar p {
	margin-left: 5px;
	position: relative;
	top: -11px;
	left: 0px;
}

#sidebar ul.sidemenu {
	list-style: none;
	text-align: left;
	margin: 7px 10px 8px 0; padding: 0;
	text-decoration: none;	
	border-top: 1px solid #A9D4EF;	
}
#sidebar ul.sidemenu li {
	list-style: none;
	padding: 4px 0 4px 5px;
	margin: 0 2px;	
	color: #777;	
	border-bottom: 1px solid #D2E8F7; 
}
* html body #sidebar ul.sidemenu li {
	height: 1%;
}
#sidebar ul.sidemenu li a {
	text-decoration: none;	
	color: #1773BC;				
}
#sidebar ul.sidemenu li a:hover {	
	color: #333;
}
#sidebar ul.sidemenu ul { margin: 0 0 0 5px; padding: 0; }
#sidebar ul.sidemenu ul li { border: none; }

/* Footer */	
#footer {
	color: #C6DDEE;
	background: #caced1 url(footer.jpg) no-repeat center top;
	clear: both;
	width: 790px;
	height: 57px;
	text-align: center;	
	font-size: 90%;	
}
#footer p { 
	padding: 10px 0;
	margin: 0;
}
#footer a { 
	color: #fff;
	text-decoration: none; 
}

/* post footer */
.post-footer {
	background: #F4F8FD;
	padding: 5px; margin: 20px 25px 0 25px;
	border: 1px solid #E5F0FB; 
	font-size: 95%;	
}
.post-footer .date {	padding-left: 0px; margin: 0 5px; }
.post-footer .comments { padding-left: 0px; margin: 0 5px; }
.post-footer .readmore { padding-left: 0px; margin: 0 5px; }

.post-by { font-size: .105em;	margin-top: 0;	}

/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }

/* display and additional classes */
.clear { clear: both; }


<style type="text/css">
.image{
	float:left;
	margin-top:180px;
	padding:12px;
	width:160px;
}
.text{
	float:left;
	margin-top:250px;
	padding:12px;
	margin-bottom:50px;
	width:35%;
	font-weight:bold;
	font-size:13px;
}
</style>

Open in new window

0
 
LVL 82

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 39869397
The code format is all that is needed.  It allows for conversation since it includes line numbers that we can refer too.

Anyway, it's not hard to make 2 columns for those links... but there isn't enough room in that template.  You will have to change a lot more things to make it look right.  That 'sidebar' section is set to be 195px wide so I split it in two to get two columns.
<div style="float: left;width: 97px; ">
      <ul class="sidemenu">
        <li><a href="http://www.free-css.com/">CSS Tutorials</a></li>
        <li><a href="http://www.free-css.com/">CSS Menus</a></li>
        <li><a href="http://www.free-css.com/">CSS Resources</a></li>
        <li><a href="http://www.free-css.com/">CSS Basics</a></li>
        <li><a href="http://www.free-css.com/">CSS Gallery</a></li>
      </ul>
</div>			
<div style="float: left;width: 97px; ">
      <ul class="sidemenu">
        <li><a href="http://www.free-css.com/">CSS Tutorials</a></li>
        <li><a href="http://www.free-css.com/">CSS Menus</a></li>
        <li><a href="http://www.free-css.com/">CSS Resources</a></li>
        <li><a href="http://www.free-css.com/">CSS Basics</a></li>
        <li><a href="http://www.free-css.com/">CSS Gallery</a></li>
      </ul>
</div>

Open in new window

0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:jjc9809
ID: 39869942
Dave,

Did you make any changes to the CSS Code?  This is just a sample of how to do the two unordered lists across.  My actual data is a lot smaller.  I will need the sidebar though because I will have a person's photo in there.  This is a homepage that I am creating for an Intranet.

jjc9809
0
 

Author Comment

by:jjc9809
ID: 39870179
Dave,

I have attached my actual application HomePage that I am working on.  I have a <H1>Applications</H1> and I need to have the Internal to the left like I have it, but I want the External Listing right beside it to the right in the same area of the lt. blue box.   I have a Photo going in the sidebar so I do not want the Internal and External going in there.    

Please see Example1 I have attached.

Any help is appreciated.
0
 

Author Closing Comment

by:jjc9809
ID: 39871562
Dave,

I used a table which works like I want

Thanks for your help.
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 39871875
You're welcome, glad to help.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
Access reports are powerful and flexible. Learn how to create a query and then a grouped report using the wizard. Modify the report design after the wizard is done to make it look better. There will be another video to explain how to put the final p…
You have products, that come in variants and want to set different prices for them? Watch this micro tutorial that describes how to configure prices for Magento super attributes. Assigning simple products to configurable: We assigned simple products…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now