SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Moving the "description" to the right

    This page (code below) lists thumbnail, title and description, as a result of a search. The title and description appear under the thumbnail currently. Can you help me change it so the Title and Description appear to the right of the thumbnail, instead of below it?

    Thanks.


    Code:
    <!--Begin Wide Column-->
    <div id="column-wide" style="margin: 0px auto; float: none;">
      <div id="generic-container" >
    
     <div style="margin-left:12px; float:left;">
        <!--<img src="themes/[var.user_theme]/images/icons/members_32.png" alt="members" width="32" height="32" align="absmiddle" />&nbsp;&nbsp;<strong>Videos:
        &nbsp;<!--[var.members_total;comm]--></strong>-->
      </div>
      <br />
    
      <div id="members-search">
    <br><br>
    
    <div class="container8">
    
             <p>
           			   <h4><center><font color="#000000">Please find your search results below for your search word(s) "<font color="#800000">[var.keyword]</font>" .<br>
    			          To view, simply select the video thumbnail image.<br>
    			          To search again, simply select the word "search" in the navigation menu above.</center></font></h4>
    	         </p>
    
    </div>
    
    <br>
    
    <div id="content-list" style="float:none;width:590px;text-align:left">
        <ul class="content-list-thumb" style="margin-top:0px;float:none;background:none;margin-left:15px">
          <br /> <br />
    
    
          <li><a href="videos/[blk1.vid_id;block=div]/" rel="gb_page_center[600, 435]"><img src="uploads/[blk1.thumb_string;block=div].jpg" alt="video pic" width="120" height="90" border="0" /></a></li>
    
        </ul>
        <ul class="content-list-info" style="float:none;text-align:left"><br>
          <li><h4><span style="color: #000000;">[var.lang_title]:</span>&nbsp;&nbsp;<a href="videos/[blk1.vid_id;block=div]/" rel="gb_page_center[600, 435] "><!--[blk1.Title;htmlconv=no;block=div;ope=max:70;comm]--></a></h4></li>
          <li><b>[var.lang_description]:&nbsp;</b>[blk1.vid_desc;htmlconv=no;block=div;ope=max:68;comm]</li>
    
        </ul>
    
     </div>
    </div>
    <!--End Wide Column-->

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    In your CSS just add:

    .content-list-info li {display:block; float:left;}
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that reply, however that did not work.
    Any other suggestions would be apprecaited.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You might need to assign a width as well.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What about something like this: Worked in a quick test in FFox and IE7 from what I could see without the ability to see the rest of the page and image etc.,

    PS: You also have a few other css errors and a <h4> style inside a <li></li> which isn't allowed. I'd put the page through the validator and check what needs fixing.



    Code:
    <!--Begin Wide Column-->
    <div id="column-wide" style="margin: 0px auto; float: none;">
    <div id="generic-container" >
    <div style="margin-left:12px; float:left;">
      <!--<img src="themes/[var.user_theme]/images/icons/members_32.png" alt="members" width="32" height="32" align="absmiddle" />&nbsp;&nbsp;<strong>Videos:
        &nbsp;<!--[var.members_total;comm]-->
      </strong>--> </div>
    <br />
    <div id="members-search"> <br>
      <br>
      <div class="container8">
        <p>
        <h4>
          <center>
            <font color="#000000">Please find your search results below for your search word(s) "<font color="#800000">[var.keyword]</font>" .<br>
            To view, simply select the video thumbnail image.<br>
            To search again, simply select the word "search" in the navigation menu above.
          </center>
          </font></h4>
        </p>
      </div>
      <br>
      <div id="content-list" style="float:none; width:590px;">
        <ul class="content-list-thumb" style="margin-top:0px;float:left;background:none;margin-left:15px">
          <li><a href="videos/[blk1.vid_id;block=div]/" rel="gb_page_center[600, 435]"><img src="uploads/[blk1.thumb_string;block=div].jpg" alt="video pic" width="120" height="90" border="0" /></a></li>
        </ul>
        <ul class="content-list-info" style="display: inline;">
          <li>
            <h4><span style="color: #000000;">[var.lang_title]:</span>&nbsp;&nbsp;<a href="videos/[blk1.vid_id;block=div]/" rel="gb_page_center[600, 435] ">
              <!--[blk1.Title;htmlconv=no;block=div;ope=max:70;comm]-->
              </a></h4>
          </li>
          <li><b>[var.lang_description]:&nbsp;</b>[blk1.vid_desc;htmlconv=no;block=div;ope=max:68;comm]</li>
        </ul>
      </div>
    </div>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •