[Clipart] logo

[Jonadab the Unsightly One]

Nathan Eady <eady at galion.lib.oh.us> writes:

> >> * At resolutions less than about 850px wide, text overlaps.
> >> * All of banner-html starts lower on the page than I would like;
> >>   it is not vertically centered on the colored header background.
> >> * On legacy browsers, most of the content of banner-html is not
> >>   visible except where it overlaps other text, and is not legible
> >>   there, nor is the text that it overlaps legible either, unless
> >>   the user selects it.  This is because it is positioned below
> >>   the colored bar, rather than on it.  Only the logo image
> >>   appears where it is supposed to.
> > 
> > How difficult/important do you think it'll be to get these issues sorted
> > out?  The search breakage sounds fairly serious but I take it the others
> > are cosmetic?  
> 
> I don't know enough PHP to access the difficulty, but I can tell
> you that solving these issues is going to mean changing the PHP,
> not just the plug-in values.

Specifically, I think page.xml and the way it is processed are what we
must grok in order to fix this.  Here is the most relevant section of
the source:

<div id="cc_wrapper1">
  <div id="cc_wrapper2">
    <tal:block condition="show_body_header">
      <div class="cc_header" id="cc_header">
        <div class="cc_headerpadding">    
          <tal:block condition="beta_message"><metal:block use-macro="${show_beta_message}" /></tal:block>
          <h1 id="cc_site_name"><a href='${root-url}' title="${site-title}">${banner-html}</a></h1>
          <p tal:condition="site-description" tal:content="site-description" />
          <ul tal:condition="tab_info" tal:attributes="title php: CC_Lang('Main Site Sections');" >
             <tal:block define="rtabs php: array_reverse(${tab_info/tabs},true);" />
             <tal:block repeat="tab rtabs"><li tal:condition="exists: tab/selected" class="selected_tab" ><a href="${tab/url}" tal:content="tab/text" /></li>
                  <li tal:condition="exists: tab/normal" ><a tal:content="tab/text"  href="${tab/url}" title="${tab/help}" /></li>
                  </tal:block>
          </ul>
          <form tal:condition="sticky_search"  id="cc_search" action="${home-url}search/results" method="get" >
            <div>
              <a href="${home-url}search" id="cc_adv_search" tal:content="php: CC_lang('Advanced search');"/>
              <input class="cc_form_text" id="search_text" name="search_text" value="" />
              <input type="hidden" name="search_type" value="any" />
              <input type="hidden" name="search_in" value="3" />
              <tal:block define="search_t php: CC_lang('Search')" />
              <input class="cc_form_submit" id="cc_submit" value="${search_t}" type="submit" />
            </div>
          </form>
        </div>
      </div>

That doesn't look so bad (although it's a little confusing), but by
the time the browser gets it, that (currently, for the main page)
looks like this...

<div id="cc_wrapper1">
  <div id="cc_wrapper2">
    
      <div class="cc_header" id="cc_header">
        <div class="cc_headerpadding">    
          
          <h1 id="cc_site_name"><a href="http://openclipart.org/cchost/" title="Open Clip Art Library"></h1>
<img src="http://openclipart.org/images/ocal-logo-simple-100px.png" alt="[logo]" width="100" height="66" style="float: left; margin-right: 0.5em; margin-left: 5px;" />

<h1 id="cc_site_name" style="margin-left: 110px; margin-bottom: 0em; ">Open Clip Art Library</h1>


</a></h1>
          
          <ul title="Main Site Sections">
             
             
                  <li><a href="http://openclipart.org/cchost/?ccm=/media/view/media/people" title="See the newest users who uploaded here">People</a></li>
                  
                  <li><a href="http://openclipart.org/cchost/?ccm=/media/view/media/examples" title="See the latest examples clip art usage">Examples</a></li>
                  
                  <li><a href="http://openclipart.org/cchost/?ccm=/media/view/media/remix" title="See the latest clip art remixes">Remixes</a></li>
                  
                  <li><a href="http://openclipart.org/cchost/?ccm=/media/view/media/clip_art" title="See the latest clip art uploads">Clip Art</a></li>
                  
                  <li><a href="http://openclipart.org/cchost/?ccm=/media/view/media/about" title="About the project">About</a></li>
                  
                  <li><a href="http://openclipart.org/cchost/?ccm=/media/view/media/home" title="Home page">Home</a></li>
                  
          </ul>
          <form id="cc_search" action="http://openclipart.org/cchost/?ccm=/media/search/results" method="get">
            <div>
              <a href="http://openclipart.org/cchost/?ccm=/media/search" id="cc_adv_search">Advanced search</a>
              <input class="cc_form_text" id="search_text" name="search_text" value=""/>
              <input type="hidden" name="search_type" value="any"/>
              <input type="hidden" name="search_in" value="3"/>
              
              <input class="cc_form_submit" id="cc_submit" value="Search" type="submit"/>
            </div>
          </form>
        </div>
      </div>

The site-description is not appearing because it's currently empty.
The banner-html is getting put into an h1 element, but Weird Things
are going on there.  For instance, the h1 element is being closed off,
reopened (with the same id, is that even legal?), and then closed off
twice more.  The a element inside it is not properly closed off.  Some
of this may be partly because img elements are not usual inside of h1
elements, IIRC, but there's more going on than that.  (And this site:
http://learningforlife.fsu.edu/webmaster/references/xhtml/tags/text/h1.cfm
seems to say that img is permitted inside h1, although that differs
from what I thought I remembered; then again, I don't see it listed
under element prohibitions, so maybe it's okay.)

After looking at this, I now understand why the browser wants so badly
to wrap between the image and the site name.  It's becaue h1 is a
block-level element by default.

We definitely need to fix some of this before we go "live" with using
ccHost for the main site.

Maybe we're just not allowed to put an image in banner-html, but it
was wrapping weirdly even when all it had in it was the text "Open
Clip Art Library", so I think there's more going on than that.

-- 
Open Clip Art Library:  Drawing Together
http://www.openclipart.org/