SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to get my floated element to sit where I want it to?

    I'm trying to get my image to sit next to an

    I floated the in which my image sits in (will apply some JavaScript to it later), but for the life of me I cannot get it to have a space of around 10 or 12px next to the H3 that it sits next to.

    I can do it if I apply a margin-right of 130px or so, HOWEVER there are some H3 elements that will not be the same length everytime. I thought I could get the just have an auto width so it would stop whenever the text would stop (like my and elements seem to be doing.), but it seems to be taking up the whole line. So my problem will appear (as you can see) if I apply the margin-right:130px or more because there are subsequent elements that will be longer than "Complexity Factors".

    I wonder if I should sit my elements in that section inside of a div perhaps and set dimensions on that div? In any case, here is my CSS (which with positioning, I am kind of shaky with, admittedly)

    here is the page in question:

    http://scope-stage.scholastic.com/is...ive-nonfiction

    here is my code:

    /******EXPAND AND COLLAPSE BUTTONS******/

    .expandingBtn img {
    float:right;
    background-image'expandBtn.png');
    margin-right:115px;
    margin-top:-13px;
    clear:both;
    }

    and my markup:
    <h3 class="colorScheme">
    Complexity Factors</h3>
    <div class="expandingBtn">
    <img src="/resource/uploads_scope/img/expandBtn.png" /></div>

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,232
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    Hi, abtecas, welcome to the forums.

    Of course, I can't tell which image on the live page you are having a problem with

    Please read our posting guidelines
    http://www.sitepoint.com/forums/show...Posting-Basics
    and post a cut-down working example page that demonstrates the problem so we can open it on our computers and hopefully provide an answer for you.

    Thanks

  3. #3
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry. The section is on the lower right where it says "Complexity factors" and there is a circle with a plus sign. (I cant take screen shot)
    now that is how it should display, but when I put that styling to other pages, it doesn't work.

    If I could just get that H3 to not take the max of the DIV, I would be fine. I'm stuck with using the H3, according to the mockup, unfortunately.

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,232
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    The <h3> is set to {display:inline-block}, therefore it does not expand to the width of the column. I gather that this is the desired behavior.

    This page apparent does not demonstrate the "broken" behavior, so I cannot tell why this style does not transfer to another page. I will guess that there is another style in the cascade that overrides the inline-block, or maybe inline-block is not being applied on the other pages.

    If you read the guidelines, you will understand that you are asking us to "guess" the solution to a problem that we cannot see. Personally, I do not care to use my time "guessing". We need to be able to see the broken behavior to determine what is not working and why.

  5. #5
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry. trying to explain the best I can..starting to sound like the folks at stack overflow.

  6. #6
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll figure it out

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,232
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by abtecas View Post
    sorry. trying to explain the best I can..starting to sound like the folks at stack overflow.
    I think your explanation is fine, but we need to see an example where the code is not working so we can diagnose the problem.

  8. #8
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    one sec, please. I'm working it out. But on some pages it still does not work, with the exact same code. I will provide momentarily if I still can't get it. Thanks

  9. #9
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it works fine on this page: http://scope-stage.scholastic.com/is...ive-Nonfiction
    code is:

    .mainRight h3 {
    display: inline-block;
    }
    .expandingBtn {
    display: inline-block;
    float: none;
    }

    and markup is
    <h3 class="colorScheme">
    Complexity Factors</h3>
    <div class="expandingBtn">
    <a href=""><img alt="view Complexity Factors" src="/resource/uploads_scope/img/expandBtn.png" /></a></div>
    <p>
    See how this text will challenge your students.</p>
    <!--THIS SECTION WILL BE HIDDEN UNTIL A THE EXPAND BUTTON IS CLICKED-->
    <div class="hidden">
    <h4>
    Purpose</h4>
    <p class="times">
    The article has a clear purpose&mdash;to inform readers about how a brave teenager stood up to the Taliban&mdash;as well as an implicit purpose&mdash;to show how just getting an education is difficult for many young people around the world.</p>
    <h4>
    Knowledge Demands</h4>
    <p class="times">
    Comprehension will be aided by knowledge of current world events and geography. The major topics (free speech, the Taliban, terrorism, girls&rsquo; education worldwide, fighting oppression) will be unfamiliar to many students.</p>
    <h4>
    Language Conventionality and Clarity/h4>
    <p class="times">
    <strong>Vocabulary/strong> Many higher academic vocabulary words (e.g., oppressive, pseudonym, unwittingly)</p>
    <p class="times">
    <strong>Figurative language/strong> Includes personification (&ldquo;fear was her constant companion&rdquo and metaphor (Malala&rsquo;s voice is likened to a weapon)</p>
    <h4>
    Structure</h4>
    <p class="times">
    A nonlinear structure that starts in 2012 then goes back to 2007 and then forward to 2013. Includes narrative and informational passages.</p>
    </div>
    <!--THIS ENDS THE FIRST HIDDEN SECTION-->
    <h3 class="colorScheme">
    Literature Connection</h3>
    <div class="expandingBtn">
    <a href=""><img alt="" src="/resource/uploads_scope/img/expandBtn.png" /></a></div>
    <div style="clear:both;">
    &nbsp;</div>
    <!--THIS SECTION WILL BE HIDDEN UNTIL A THE EXPAND BUTTON IS CLICKED-->
    <div class="hidden">
    <p class="times">
    Connecting Scope content to your curriculum</p>
    <p class="times">
    <strong>Other texts that deal with crusaders include/strong></p>
    <p class="times">
    To Kill a Mockingbird by Harper Lee</p>
    <p class="times">
    Uprising: Three Young Women Caught in the Fire That Changed America by Margaret Peterson Haddix</p>
    <p class="times">
    Kids on Strike by Susan Campbell Bartoletti</p>
    </div>
    <!--THIS ENDS THE SECOND HIDDEN SECTION-->
    <h3 class="colorScheme">
    Skills and Standards</h3>
    <div class="expandingBtn">
    <a href=""><img alt="" src="/resource/uploads_scope/img/expandBtn.png" /></a></div>
    <a href=""> </a>
    <div class="hidden">
    <p class="times">
    <a href="">Common Core ELA Anchor Standards/a></p>
    <p class="times">
    <a href="">R1, R2, R3, R4, R5, R6, R10, W2, W4, W8, SL1, SL2, SL4, L4, L6</a></p>
    </div>
    <a href=""><!--THIS ENDS THE THIRD HIDDEN SECTION--></a></div>

    now on the pages:
    http://scope-stage.scholastic.com/is...bate-essay-kit
    and
    http://scope-stage.scholastic.com/is...13/lazy-editor

    it does not work.

    also on the page: http://scope-stage.scholastic.com/is...3/you-write-it
    the buttons float fine, but the <div class="hidden"> does not hide the text underneath "Skills and Standards" like it is supposed to do.

    I am (forced) to use ezPublisher CMS to edit these files, and every so often I also see weird tags put in like:
    <a href=""> </a></div>
    <a href=""> </a></div>
    <a href=""> </a>

    which I have no clue how they get there but they don't really seem to cause any problem, but why are they there (side point perhaps)

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,866
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    In the style block that you are inserting in the middle of the page (!!!) you have a missing bracket which is corrupting the rest of the rules.

    Here:
    Code:
    .essentialQuestions {
               background-image: url(/resource/uploads_scope/issues/090113/090113_narrativeNonfiction_essentialQuestions.png) no-repeat;
               background-color:#fff;
    	   width:351px; 
               height:103px;
    
        .essentialQuestions-words {
               position:relative;
    	   margin-top:17px;
               margin-left:95px;
    	   width:206px;
    }
    It should look like this:

    Code:
    .essentialQuestions {
               background-image: url(/resource/uploads_scope/issues/090113/090113_narrativeNonfiction_essentialQuestions.png) no-repeat;
               background-color:#fff;
    	   width:351px; 
               height:103px;
    }/* closing bracket here */
        .essentialQuestions-words {
               position:relative;
    	   margin-top:17px;
               margin-left:95px;
    	   width:206px;
    }
    On some pages the bracket is present which is why it works on some pages.

  11. #11
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes I have to do the style in the middle of the page (I'm working with an editor so that's why they go there until I migrate them to the main style sheet :-) ), but I thought I fixed that problem a few days ago since that is an old part..but thanks for pointing it out.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,866
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by abtecas View Post
    but I thought I fixed that problem a few days ago since that is an old part..but thanks for pointing it out.
    Yes, it's that bracket that is causing the problems you are experiencing because the missing bracket corrupts the rules that follow and the styles are being missed. One missing bracket can corrupt a whole stylesheet depending where it is.

  13. #13
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I need to slow down in my coding and just be a tad bit more detail-oriented. Happens to the best of us. I'm willing to bet that that is what's causing those weird tags to show up in EZpublisher editing windows as well. Thanks again though.
    Cheers


Tags for this Thread

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
  •