Skip navigation
Kevin E.
Currently Being Moderated

Having issues adjusting objects in template page

Dec 10, 2012 7:17 PM

After grappling with this a couple of days, I could use your help. I have a page I created that I need to make a couple of minor object adjustments. I want to center the flash clock under the rotating photos and move it up so that it does not block the blue shadow. Also, I want to make the "skat news and updates" box below a single box with the news items left justified. Whenever I try to make these adjustments, causes everything else to shift around. Any suggestions on fixing this would be appreciated.

 

http://www.rideskat.org/index3.html

 
Replies
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 10, 2012 10:19 PM   in reply to Kevin E.

    See if you're okay with this:

     

    Screen Shot 2012-12-11 at 11.40.16 AM.png

     

    If you are, then what was wrong was that you had re-used floatRT class for almost every element. I guess that class is initially for the Route map & Fares and passes?

     

    Clock:

     

    Line 295:

     

    <span class="floatLT">

    Change that to:

     

    <div class="flashclock">

     

    Add to CSS:

     

    .flashclock{

         float: left; width: 350px; left: 10%; top: -7px; position: relative;

    }

     

    Bottom area (skat news):

     

    Line 337 - 343:

     

    <div id="subcontent">

    <div class="floatLT">

    <h3> </h3>

    <!--end .floatLT --></div>



    <div class="floatRT">

     

    Remove the lines I've struck off (ideally removing the left floated div with a non breaking space character within <h3>.

     

    Then, change

     

    <div class="floatRT">

     

    to:

     

    <div class="skatnews">

     

    Add to CSS:

     

    .skatnews{

    width: 100%;

    }

    So now, your Line 337 will become:

     

    <div id="subcontent">

    <div class="skatnews">

    <h3>skat News and Updates</h3>

    <blockquote>

    .......

    .........

     

    Another observation, the link colors in 'Skat News...' section is green - making it very difficult to read.

     

    You may want to change it to a lighter color to suit the background. Maybe the same green you've used as your skat news heading background: #ABD372?

     

     

    Trust this helps.

     

    -ST

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 11, 2012 4:55 PM   in reply to Kevin E.

    This looks familiar! 

     

    Anyway, you have a critical code error that needs attention.

    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.rideskat. org%2Findex6.html

     

    You're missing a closing </div> for your container.

     

    Nancy O.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 11, 2012 7:25 PM   in reply to Kevin E.

    Add </div> immediately after <!--end sidebar-->

     

    </span></div><!--end sidebar-->

    </div>

     

    That should fix your alignment issue.

     

    Also, the same line, you have a redundant </span>. It is from before. We're not using that <span> markup now. Remove that.

     

    The color for 'subcontent' area:

     

    In the CSS for #subcontent:

     

    Change this:

     

    #subcontent {

    clear:both;
    color:#FFF;
    overflow: hidden;
    background-image: url(#085AA4);
    }

     

    to this:

     

    #subcontent {

    clear:both;
    color:#FFF;
    overflow: hidden;
    background: #085AA4;
    }

     

     

    Good luck.

     

    -ST

     

    EDIT: To instruct on removing </span> tag

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 11, 2012 11:05 PM   in reply to Kevin E.

    You're welcome

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points