Designing elements

Using element backgrounds

Using CSS, graphics can be placed and positioned in the background of elements.

       CSS
       #intro { background: white url(whaling_ship.jpg)
         no-repeat left top;
         border: solid #aaaaaa 1px;
         padding-left: 130px;
         min-height: 115px;
         width: 50% }
         
         HTML
        <p>This story of a obsessive 
        sea captain's quest to find
        and destroy an extraordinary whale 
        that had taken his leg in a previous 
        encounter is sometimes seen as an 
        allegory for all of humanity's 
        obsessive pursuits.</p>

This story of a obsessive sea captain's quest to find and destroy an extraordinary whale that had taken his leg in a previous encounter is sometimes seen as an allegory for all of humanity's obsessive pursuits.

Alternative bullets

      CSS
       ul.whale { list-style-image: url(spouter.gif) }
       ul.whale ul { list-style-image: none;
           list-style-type: square; }
         
      HTML
      <ul>
        <li>
          New Bedford  
            <ul>
            <li>Spouter Inn</li>
            <li>Whaleman's Chapel</li>
          </ul>
        </li>
        <li>
          Nantucket 
          <ul>
            <li>Try Pots Inn</li>
            <li>The Pequod</li>
          </ul>
        </li>
      </ul>

The look of lists

Styles and descendant selectors can be used to create a unique look of lists that conveys clear meaning.

      CSS
      ul.listlook { margin-left: 2em; 
         border: solid #aaaaaa 1px;
         padding: 2em; 
         background: white ; }
      ul.listlook li { font-weight: bold; 
         margin: 0em .5em; 
         padding: 0em .5em; }
      ul.listlook ul {list-style-image: url(rtarrow.gif);  
         margin: 0em 2em 0em 0em; 
         padding-left: 1.5em;
         font-weight: normal; }
      ul.listlook ul li { font-weight: normal; }
      ul.listlook ul ul {list-style-type: none; 
         list-style-image: none;
         margin: .25em 1em .25em 0em; 
         margin-left: 2em; 
         padding-left: 1em; }
      ul.listlook ul ul li { border-left: 
         solid blue 1px;
         margin: 0em 1em .5em 0em; }
         
      HTML
      <ul>
        <li>
          New Bedford 
          <ul>
            <li>
              Spouter Inn 
              <ul>
                <li>Queequeg, harpooner</li>
                <li>Peter Coffin, inkeeper</li>
              </ul>
            </li>
            <li>
              Whaleman's Chapel 
              <ul>
                <li>Father Mapple, preacher</li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          Nantucket 
          <ul>
            <li>
              Try Pots Inn 
              <ul>
                <li>Hosea Hussey, innkeeper</li>
              </ul>
            </li>
            <li>
              The Pequod 
              <ul>
                <li>Peleg and Bildad, owners of the Pequod</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>